@font-face {
    font-family: Oswald;
    src: url(Oswald/Oswald-VariableFont_wght.ttf);
}
@font-face {
    font-family: Roboto;
    src: url(Roboto/Roboto-Regular.ttf);
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: Roboto;
    src: url(Roboto/Roboto-Bold.ttf);
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: Roboto;
    src: url(Roboto/Roboto-Black.ttf);
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Montserrat';
    src: url('Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
}

html,body{
    margin:0;
    padding:0;
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.font-oswald{
    font-family: Oswald, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.font-roboto{
    font-family: Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.cialis-border-light-yellow{
    border-color:#fcb946 !important;
}

.cialis-color-light-yellow{
    color:#fcb946 !important;
}
.cialis-color-light-green{
    color:#51a090 !important;
}
.cialis-bg-light-green{
    background-color:#51a090 !important;
}
.cialis-color-dark-green{
    color:#0b250c !important;
}
.cialis-bg-dark-green{
    background-color:#0b250c !important;
}

.navbar-light .navbar-brand {
    color:#204d4c;
}
.navbar-light .navbar-brand:focus, .navbar-light .navbar-brand:hover {
    color:#51a090;
}

/* Branded questionnaire header — matches the homepage .nav-pill */
@font-face{
    font-family:'Bookman';
    src:url('BookmanStd-Light.ttf') format('truetype');
}
/* Utility classes that replace inline style="" attributes on the questionnaire
   pages. The prod .htaccess CSP is style-src 'self' with no 'unsafe-inline', so
   inline style attributes are blocked (and a CSP hash/nonce cannot whitelist a
   style attribute) — same-origin classes are the only thing that works. */
.q-row-pad{ padding-left:10px; padding-right:10px; }
.spinner-center{ position:absolute; top:50%; }
.fs-08{ font-size:0.8em; }
.site-header{
    /* Home/about pill shape, but with the questionnaire's own XD nav colour
       (XD inner-page Rectangle 7 = #e4f2ef). Home/about stay white. */
    background:#e4f2ef;
    /* Only bottom corners rounded so the bar "hangs" from the top edge (as on the homepage). */
    border-radius:0 0 15px 15px;
    /* Home/about pill: 71.9% of the board (1380/1920), centred. */
    width:71.9%;
    max-width:1380px;
    margin:0 auto 40px;
    margin:0 auto clamp(28px, 4vw, 56px);
    padding:1rem 40px;
    padding:1rem clamp(20px, 3vw, 56px);
    /* XD inner-page nav (Rectangle 7) has NO drop shadow — the #e4f2ef fill reads on
       the white page on its own. */
}
/* Phones: the 72% pill can't fit brand + button — hang it near full-width (like home/about). */
@media (max-width:767.98px){
    .site-header{ width:auto; margin-left:16px; margin-right:16px; }
}
.site-header .container-xxl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;
    flex-wrap:wrap;
    padding:0;
}
.site-header .brand-logo{
    /* XD file names this NotoSerifMyanmar, but the XD *renders* as a bold sans-serif;
       match the render with self-hosted Roboto (Black). */
    font-family:Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:700;                          /* match home/about wordmark (was 900) */
    font-size:22px;
    font-size:clamp(16px, 1.4vw, 27px);       /* match home/about brand sizing */
    letter-spacing:.6px;
    color:#204d4c;
    text-transform:none;
    margin:0;
    /* The nav's right side is now a vertically-centred outline button, so the
       wordmark centres with it — no baseline nudge needed. */
}
/* Hold the wordmark colour on hover — Bootstrap Reboot's a:hover would turn it link-blue. */
.site-header .brand-logo:hover{ color:#204d4c; }
.site-header .header-links{
    display:flex;
    align-items:center;
}
.site-header .header-links .navbar-brand{
    color:#204d4c;
    font-family:'Noto Nastaliq Urdu', 'Inter', 'Helvetica Neue', Arial, sans-serif;
    font-size:1.05rem;
    font-weight:400;
    /* Zero out Bootstrap's default navbar-brand margins, but leave margin-left
       for the sibling rule below to control spacing between links. */
    margin-top:0;
    margin-bottom:0;
    margin-right:0;
    padding-top:0;
    padding-bottom:0;
}
/* Space between the links (higher specificity than the reset above). */
.site-header .header-links .navbar-brand + .navbar-brand{
    margin-left:32px;
    margin-left:clamp(24px, 2.5vw, 48px);
}
.site-header .navbar-brand:hover,
.site-header .navbar-brand:focus{
    color:#51a090;
}

/* Updated nav (XD inner pages): a single "HOME" outline button in place of the
   "Home / About Us" text links — matches the homepage/about .btn-pill.outline.
   XD Rectangle 54: 180×65, white fill, 3px #204D4C stroke, square corners;
   label Montserrat Bold 25 #204D4C. */
@font-face{
    font-family:'MontserratLocal';
    src:url('Montserrat/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-weight:100 900; font-style:normal; font-display:swap;
}
.site-header .home-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    background:#fff;
    color:#204d4c;
    border:3px solid #204d4c;          /* XD: 3px teal stroke */
    border-radius:0;                   /* XD: square corners */
    font-family:'MontserratLocal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:700;
    letter-spacing:.6px;
    text-transform:uppercase;
    line-height:1.1;
    /* XD: 25px label in a 180×65 box at the 1920 board. */
    font-size:16px;
    font-size:clamp(14px, 1.3vw, 25px);
    padding:.6em 1.6em;
    margin:0;
    transition:background-color .2s ease, color .2s ease, border-color .2s ease;
}
.site-header .home-btn:hover,
.site-header .home-btn:focus{
    background:#51a090;
    border-color:#51a090;
    color:#fff;
}

footer small{
    font-size:0.7em;
}

.content-sm small, .content-lg small{
    /*font-size:0.7em;*/
    line-height: 1.1em !important;
    padding-bottom: 0px !important;
    display: block;

}
.contact-us-small{
}

.about_bordered{
    border: .01em solid #fff;
    padding: 2px 10px;
}
/*
.portfolio-item{
    !*width:100%;*!
}
.portfolio-item .item{
    !*width:303px;*!
    float:left;
    margin-bottom:10px;
}*/


/* Page title: Oswald, #51A090 — XD overlay sizes it at 50px (1920 board). */
h1.font-oswald{
    font-size:40px;                      /* static fallback (Safari <13.1) */
    font-size:clamp(30px, 2.6vw, 50px);  /* XD: 50px at 1920 */
    line-height:1.1;
}
/* Question-header bar: Oswald normal weight, white on #51A090 — XD overlay: 30px. */
.question-title{
    font-weight:400;
    font-size:24px;                      /* static fallback */
    font-size:clamp(22px, 1.56vw, 30px); /* XD: 30px at 1920 */
}
/* Question prompt text — XD overlay: Montserrat SemiBold 18, #204D4C. */
.question-title + p{
    font-family:'MontserratLocal', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight:600;
    font-size:18px;                      /* XD: 18px */
    color:#204d4c;
}

.dot-pagination a, .dot-pagination a:active{
    color:#51a090;
    background-color:#51a090;
    min-width: 10px;
    min-height: 10px;
    padding: 3px;
}

.dot-pagination a div{
    background-color: white;
    min-width: 10px;
    min-height: 10px;
}

.dot-pagination a.active div{
    background-color: #51a090;
    min-width: 10px;
    min-height: 10px;
    border: 2px solid #fff;
}

.dot-pagination a.visited div{
    background-color: #51a090;
    min-width: 10px;
    min-height: 10px;
}


.btn-light2 {
    color: #204d4c;
    background-color: #e5e5e5;
    border-color: #e5e5e5;
    font-family: 'Montserrat', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 600; /* SemiBold */
}
/* Hover: light teal tint (per XD), not Bootstrap's grey. Excludes the selected state. */
.btn-light2:not(.active):hover,
.btn-light2:not(.active):focus{
    color: #204d4c;
    background-color: #e4f2ef;
    border-color: #51a090;
}
.btn-light2.active{
    color: #fff;
    background-color: #51a090;
    border-color: #51a090;
}

/* Filled teal Next / outline Prev buttons (XD 2026 redesign) */
/* inline-flex + centre so the chevron icon aligns with the label (was baseline-offset). */
.btn-cialis, .btn-cialis-outline{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:.4rem;
}
.btn-cialis{
    color:#fff;
    background-color:#51a090;
    border:1px solid #51a090;
    border-radius:6px;
    padding:.55rem 2.25rem;
    font-weight:500;
}
.btn-cialis:hover, .btn-cialis:focus{
    color:#fff;
    background-color:#204d4c;
    border-color:#204d4c;
}
.btn-cialis-outline{
    color:#51a090;
    background-color:#fff;
    border:1px solid #51a090;
    border-radius:6px;
    padding:.55rem 2.25rem;
    font-weight:500;
}
.btn-cialis-outline:hover, .btn-cialis-outline:focus{
    color:#fff;
    background-color:#51a090;
    border-color:#51a090;
}

.slant-container {
    transform: rotate(-4deg);

    /*transform: skew(1deg);*/
    /*overflow: hidden;*/

    /*background-color: #3b3c43;*/
    /*height: 500px;*/
    /*-webkit-clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%);*/
    /*clip-path: polygon(0 0, 100% 0, 100% 66%, 0 100%);*/
}




.content-sm{ display: none; }
.content-lg{ display: block; }
.home-details{
    background-color: #266D31;
}
.home-person{
    height: 100%;
    margin-right: -20%;
}
/*// `sm` applies to x-small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
}
/*// `md` applies to small devices (landscape phones, less than 768px)*/
@media (max-width: 767.98px) {
    .content-sm{ display: block; }
    .content-lg{ display: none; }
}

/*// `lg` applies to medium devices (tablets, less than 992px)*/
@media (max-width: 991.98px) {
}

/*// `xl` applies to large devices (desktops, less than 1200px)*/
@media (max-width: 1199.98px) {
}

/*// `xxl` applies to x-large devices (large desktops, less than 1400px)*/
@media (max-width: 1399.98px) {
}



/*// Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
}
/*// Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .home-person{
        height: 100%;
        margin-right: -40%;
    }
}
/*// Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
    .home-person{
        height: 100%;
        margin-right: -40%;
    }
}

/*// X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .home-person{
        height: 100%;
        margin-right: -10%;
    }
}

/*// XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {

}


.vh-50 {
    height: 50vh!important;
}

.min-vh-50 {
    min-height: 50vh!important;
}


.row.display-table {
    display: table;
}
.row.display-table [class*=’col-’] {
    float: none;
    display: table-cell;
}

.body1{
    background: url('../img/Homd_Layer 1.jpg');
    /*background: url('../img/HOME_NEW_01.jpg') no-repeat;*/
    background-size: cover; overflow-x: hidden;
}

.body11{
    background: url('../img/Homd_Layer 1.jpg');
}

.body111{
    background: url('../img/Homd_Layer 1.jpg');
    background-size: cover;
}
.body2{
    /*background: url('../img/Homd_Layer%201.jpg');*/
    background: url('../img/HOME_NEW_01.jpg') no-repeat top center;
    background-size: cover; overflow-x: hidden;
}
.body22{
    /*background: url('../img/Homd_Layer%201.jpg');*/
    background: url('../img/HOME_NEW2_layer2.png') no-repeat top right;
    background-size: contain; overflow-x: hidden;
}
.body33{
    /*background: url('../img/Homd_Layer%201.jpg');*/
    background: url('../img/HOME_NEW2_layer3.png') no-repeat top left;
    background-size: contain; overflow-x: hidden;
}

.bg-body{
    background: url('../img/Homd_Layer%201.jpg');
}

.bg-violator{
    background: url('../img/Rectangle1.png') no-repeat top center;
    background-size: contain;
    background-attachment: scroll;
}
.bg-violator-sm{
    background: url('../img/Rectangle2.png') no-repeat top left;
    background-size: contain;
}
.bg-content{
    background: url('../img/HOME_NEW2_layer1.png') no-repeat center center;
    background-size: contain;
    background-attachment: scroll;
}




.object-fit-cover{
    object-fit: cover;
}
.mt-50{
    margin-top: -50px;
}

.font-size_7em{
    font-size: .7em;
}

.min-height_350px{
    min-height: 350px;
}


@media screen and (min-width: 765px) and (max-width: 991px) {
    /* your CSS styles for devices with a screen width between 765px and 991px */
    .main-content2 {
        background-color: #1e772d !important;
    }
}
@media screen and (min-width: 765px) and (max-width: 861px) {
    /* your CSS styles for devices with a screen width between 765px and 991px */
    .main-content1 {
        width: 90% !important;
    }
}
/* Questionnaire source attribution footer (bph/ed pages) */
.source-footer{ font-size:0.7em; text-align:center; }