/********** Custom Bootstrap Background and Text Colors **********/
:root {
    --primary: #BC2B2F;
    --light: #FAFAFA;
    --dark: #0B0A33;
    --dark-light: #425166;
    --dark-paragraph:#4b4b45;
}
 
.dropdown-menu.show {
    display: block;
    z-index: 9999;
}
.dropdown-item.active, .dropdown-item:active{
    background: var(--primary) !important;
}

/*** BODY ***/

    @font-face {
        font-family: 'Roboto';
        src: url('../font/Roboto-Regular.ttf') format('truetype');
        font-weight: 400; /* Medium weight */
        font-style: normal;
    }

    @font-face {
        font-family: 'Kabrio';
        src: url('../font/kabrio.regular.ttf') format('truetype');
        font-weight: 400; /* Medium weight */
        font-style: normal;
    }

    @font-face {
        font-family: Work Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        src: url('../font/Poppins-Regular.ttf') format('truetype');
        font-weight: 400; /* Medium weight */
        font-style: normal;
    }

    @font-face {
        font-family: 'NewsGothBT';
        src: url('../font/NewsGothicBT.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    @font-face {
        font-family: 'NewsGothBT';
        src: url('../font/News Gothic Light BT.ttf') format('truetype');;
        font-weight: 200;
        font-style: normal;
    }

    @font-face {
        font-family: 'NewsGothBT';
        src: url('../font/NewsGothicBT-Roman.otf');
        font-weight: 400;
        font-style: normal;
    }

    @font-face {
        font-family: 'NewsGothBT';
        src: url('../font/News Gothic Demi Regular.otf');
        font-weight: 600;
        font-style: normal;
    }

    @font-face {
        font-family: 'NewsGothBT';
        src: url('../font/newsgothicbt_bold.ttf') format('truetype');;
        font-weight: 700;
        font-style: normal;
    }

    @font-face {
        font-family: 'Janna LT';
        src: url('../font/Janna LT Regular.ttf') format('truetype');
        font-weight: 400;
        font-style: normal;
    }
    
    @font-face {
        font-family: 'Janna LT';
        src: url('../font/Janna LT Bold.ttf') format('truetype');
        font-weight: 700;
        font-style: normal;
    }
    
    

    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
        font-family: inherit;
    }
    



    body{
        font-family: 'NewsGothBT';
        overflow-x: hidden;
        background-color: var(--light);
    }

    html[lang="ar"] body,
    body:lang(ar) {
        font-family: 'Janna LT';
        font-weight: 400;
    }

     /* For Webkit Browsers (Chrome, Edge, Safari) */
     body::-webkit-scrollbar {
        width: 12px; 
    }

    body::-webkit-scrollbar-track {
        background: #f2f2f2; /* Light grey track */
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb {
        background: #ccc; /* Grey scrollbar */
        border-radius: 10px;
    }

    body::-webkit-scrollbar-thumb:hover {
        background: #aaa; /* Darker grey on hover */
    }


    /* Extra Large Screen */
    @media (min-width: 1600px) {
        .container{
            max-width: 1550px !important;
        }
    }

    @media only screen and (max-width: 576px) {
        .h-sm-auto{
            height: auto !important;
        }
    }

/*** GENERAL ***/

    .margin-space-5{
        margin-bottom: 5rem !important;
    }

    .rounded-10{
        border-radius: 20px !important;
    }

/*** Background Colors ***/

    .bg-primary {
        background-color: var(--primary) !important;
    }

    .bg-light {
        background-color: var(--light) !important;
    }

    .bg-dark {
        background-color: var(--dark) !important;
    }

    .bg-dark-blue {
        background-color: #334155 !important;
    }

    .bg-dark-light {
        background-color: var(--dark-light) !important;
    }

    .bg-dark-paragraph {
        background-color: var(--dark-paragraph) !important;
    }  

  
/*** Text Colors ***/

    .text-primary {
        color: var(--primary) !important;
    }

    .text-light {
        color: var(--light) !important;
    }

    .text-dark {
        color: var(--dark) !important;
    }

    .text-dark-light {
        color: var(--dark-light) !important;
    }

    .text-dark-paragraph {
        color: var(--dark-paragraph) !important;
    }

    .text-light-grey{
        color: #E2E2E2 !important;
    }

    @media only screen and (max-width: 576px) {
        .text-sm-justify{
            text-align: justify !important;
        }
    }

/*** Heading ***/
   
     h1{
        font-size: 50px;
        font-weight: 700;
        /* line-height: 80px; */
        color: var(--dark-paragraph);
    }

    h2{
        font-size: 40px;
        font-weight: 700;
        /* line-height: 65px; */
        color: var(--dark-paragraph);
    }

    h3{
        font-size: 32px;
        font-weight: 700;
        /* line-height: 51.2px; */
        color: var(--dark-paragraph);
    }

    h4{
        font-size: 28px;
        font-weight: 700;
        /* line-height: 44.8px; */
        color: var(--dark-paragraph);
    }

    h5{
        font-size: 24px;
        font-weight: 600;
        /* line-height: 44.8px; */
        color: var(--dark-paragraph);
    }
 
    h6{
        font-size: 22px;
        font-weight: 600;
        /* line-height: 35.2px; */
        color: var(--dark-paragraph);
    }

    p{ 
        font-size: 22px;
        font-weight: 400;
        line-height: normal;
        line-height: 32.4px;
        color: var(--dark-paragraph);
    }
  

     /* Extra Large Screen */
     @media (min-width: 1600px) {
        h1{
            font-size: 60px;
            line-height: 96px;
        }

        h2{
            font-size: 50px;
            line-height: 80px;
        }
    
        h3{
            font-size: 40px;
            line-height: 65px;
        }
    
        h4{
            font-size: 32px;
            line-height: 51.2px;
        }
    
        h5{
            font-size: 28px;
            line-height: 44.8px;
        }
    
        h6{
            font-size: 24px;
            line-height: 44.8px;
        }
    
        p{
            font-size: 22px;
            line-height: 35.2px;
        }
    }

 

    /* Large devices (desktops, ≥992px) */
    @media (max-width: 1199.98px) {
        h1{
            font-size: 40px;
            line-height: 65px;
        }

        h3{
            font-size: 36px;
            line-height: 57.6px;
        }
    
        h3{
            font-size: 32px;
            line-height: 51.2px;
        }
    
        h4{
            font-size: 28px;
            line-height: 44.8px;
        }
    
        h5{
            font-size: 24px;
            line-height: 38.4px;
        }
    
        h6{
            font-size: 22px;
            line-height: 35.2px;
        }
    
        p{
            font-size: 18px ;
            line-height: 27.6px ;
        }
    }

    /* Mobile Screens */
    @media only screen and (max-width: 576px) {
        h1{
            font-size: 36px;
            line-height: 57.6px;
        }

        h2{
            font-size: 32px;
            line-height: 51.2px;
        }

        h3{
            font-size: 28px;
            line-height: 44.8px;
        }
        h4{
            font-size: 24px;
            line-height: 38.4px;
        }
    
    }

/*** Displays ***/  

    .display-10{
        font-size: 32px;
        line-height: 51.2px; 
    }

    .display-11{
        font-size: 28px;
        line-height: 44.8px;
    }

    .display-12{
        font-size: 22px;
        line-height: 35.2px;
    }

    .display-14{
        font-size: 20px;
        line-height: 25.2px;
    }

    .display-15{
        font-size: 18px;
        line-height: 22.2px;
    }

    .display-16{
        font-size: 14px;
        line-height: 18.2px;
    }

     /* Large devices (desktops, ≥992px) */
     @media (max-width: 1199.98px) {
        .display-10{
            font-size: 28px;
            line-height: 44.8px;
        }
    
        .display-11{
            font-size: 22px;
            line-height: 35.2px;
        }
    
        .display-12{
            font-size: 20px;
            line-height: 32px;
        }
    
    }

    /* Mobile Screens */
    @media only screen and (max-width: 576px) {
        .display-10{
            font-size: 20px;
            line-height: 32px;
        }
    }
/*** Counters ***/  
    .counters-list {
        display: flex;
        max-width: 100%;
        flex-wrap: wrap;
    }
    .counters-list  li{
        flex: 1;
    }
/*** Frames ***/  

    .frame-circle-86{
        width: 86px;
        height: 86px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        border-radius: 50%;
        flex-shrink: 0; 
    }

    .frame-circle-72{
        width: 72px;
        height: 72px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 35px;
        border-radius: 50%;
        flex-shrink: 0; 
    }

    .frame-circle-64{
        width: 64px;
        height: 64px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 30px;
        border-radius: 50%;
        flex-shrink: 0; 
        padding: 0; 
        margin: 0; 
        box-sizing: border-box; /* Include padding and border in size */
    }


    .frame-circle-56{
        width: 56px;
        height: 56px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 35px;
        border-radius: 50%;
        flex-shrink: 0; 
    }

    .frame-circle-48{
        width: 48px !important;
        height: 48px !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        border-radius: 50%;
        flex-shrink: 0; 
    }

    .frame-circle-25{ 
        width: 25px;
        height: 25px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 15px;
        border-radius: 50%;
        flex-shrink: 0; 
    }
 

    .frame-border-1{
        border: 1px solid #E8ECF4 !important;
    }

    .frame-border-2{
        border: 2px solid rgba(215, 215, 215, 1); 
    }

    .frame-line-1{
        width: 100%;
        height: 1px;
        background-color: #EFEFEF;
        display: block;
    }

    /* Large devices (desktops, ≥992px) */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .frame-circle-86{
            width: calc(86px - 10px);
            height: calc(86px - 10px);
            font-size: 32px;
        }
    
        .frame-circle-72{
            width: calc(72px - 10px);
            height: calc(72px - 10px);
            font-size: 28px;
        }

        .frame-circle-64{
            width: calc(64px - 10px);
            height: calc(64px - 10px);
            font-size: 28px;
        }
    
        .frame-circle-56{
            width: calc(56px - 10px);
            height: calc(56px - 10px);
            font-size: 28px;
        }
    
        .frame-circle-48{
            width: calc(48px - 10px);
            height: calc(48px - 10px);
            font-size: 20px;
        }
    }

    /* Medium devices (tablets, ≥768px) */
    @media (max-width: 991.98px) {
        .frame-circle-86{
            width: calc(86px - 15px);
            height: calc(86px - 15px);
            font-size: 30px;
        }
    
        .frame-circle-72{
            width: calc(72px - 15px);
            height: calc(72px - 15px);
            font-size: 26px;
        }

        /* .frame-circle-64{
            width: calc(64px - 15px);
            height: calc(64px - 15px);
            font-size: 28px;
        } */
    
    
        .frame-circle-56{
            width: calc(56px - 15px);
            height: calc(56px - 15px);
            font-size: 25px;
        }
    
        .frame-circle-48{
            width: calc(48px - 15px);
            height: calc(48px - 15px);
            font-size: 20px;
        }
    }

  
/*** Borders ***/  

    .border-primary-1{
        border: 1px solid var(--primary) !important;
    }

    .border-primary-2{
        border: 2px solid var(--primary) !important;
    }

/*** Card ***/

    .card-rounded{
        background-color: #FFFFFF;
        border: 4px solid var(--light);
        border-radius: 40px;
        padding: 32px 24px;
        transition: background-color 0.3s ease;
    }

    .card-rounded:hover{
        background-color: var(--primary) !important;
    }

    .card-rounded:hover .card-title{
        border-bottom: 2px solid #FFFFFF;
    }

    .card-rounded:hover .card-title,
    .card-rounded:hover p{
        color: #FFFFFF !important;
    }
    
  
    .slick-carousel-feature .slick-track {
        display: flex;
    }
    
    .slick-carousel-feature .slick-track .slick-slide {
        display: flex;
        height: auto; 
    }

    @media only screen and (max-width: 768px) {
        .slick-carousel-feature{
            padding-bottom: 30px ;
        }
        .slick-carousel-feature .slick-dots{
            bottom: 30px;
        }
        /* .slick-carousel-feature .slick-track .slick-slide {
            display: block;
            height: auto;
        } */
    }
    
    .slick-carousel-feature .slick-slide .feature-column {
        height: 100%;
        object-fit: contain;
        object-position: center;
    }

    .card-rounded-2 {
        background-color: #FFFFFF;
        border-radius: 20px;
        box-shadow: 0px 10px 30px 0px rgba(215, 215, 215, 0.35);
        position: relative;
        margin-top: 5.5rem;
        /* min-height: 500px; */
    }

    .card-rounded-2::before{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 26px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
        background-color: var(--primary);
        
    }

    .card-rounded-2 .card-image-frame{
        width: 200px;
        height: 200px;
        position: absolute;
        top: -100px;
        left: 50%;
        transform: translateX(-50%);
        box-shadow: 0px 10px 50px 0px rgba(215, 215, 215, 0.35);
        border-radius: 50%;
    }

    .card-rounded-2 .card-image-frame img{
        border: 10px solid #fff;
        width: 100%; 
        height: 100%;
        object-fit: cover;
        border-radius: 50%;  
    }

    .card-rounded-2 .card-title{
        padding-top: 120px !important;
       
    }

    .card-rounded-2 .counter{
        position: absolute;
        width: 59px;
        height: 59px;
        background-color: var(--dark-paragraph);
        border-radius: 50%;
        bottom: -25px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #FFFFFF;
        font-size: 32px;
        font-weight: 600;
        line-height: 51.2px;
        text-align: center;
    }

    .feature-column{
        padding: 100px 20px !important;
    }

    .logo-card{
        border: none !important;
        border-radius: 24px !important;
        box-shadow: 0px 10px 30px 0px rgba(215, 215, 215, 0.35);
    }

    @media (max-width: 1199.98px) {
        /* .feature-column{
            margin-bottom: 7rem !important;
        } */
        /* .feature-column .card-rounded-2{
            height: auto !important;
        } */
    }

    @media only screen and (max-width: 992px) {
        /* .feature-column{
            margin-bottom: 10rem !important;
        } */
        .card-rounded-2 .card-image-frame{
            width: 180px;
            height: 180px;
            top: -90px;
        }
    }

    .gallery-card {
        position: relative;
        width: 100%;
        overflow: hidden;
        height: 425px;
        border-radius: 20px;
    }
    .gallery-card.gallery-small{
        height: 300px; 
    }

    .gallery-card.gallery-large{
        height: 588px;
    }

    .gallery-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }

    .gallery-card .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: end;
        justify-content: start;
        text-align: center;
        opacity: 0;
        transition: opacity 0.3s ease;
        padding: 20px 50px 20px 30px;
    }

    .gallery-card:hover .overlay,
    .gallery-card .overlay.show {
         opacity: 1;
    }

    .gallery-card:hover .overlay p,.gallery-card .overlay.show p{
        font-size: 24px;
        font-weight: 500;
        line-height: 38.4px;
        text-align: left;
        color: #FFFFFF;

    }

    .gallery-card.gallery-small:hover .overlay p,.gallery-card.gallery-small .overlay.show p{
        font-size: 18px;
        font-weight: 500;
        line-height: 28.4px;
    }

    .statistic-card{
        display: block;
        text-align: center;
    }

    .statistic-card span{
        margin-bottom: 15px;
    }

    .statistic-card h2{
        margin-bottom: 15px !important;
    }

     /* Mobile Screens */
     @media only screen and (max-width: 991.98px) {
        .gallery-card{
            width: calc(100% - 1.5rem);
            margin: auto;
            height: 380px !important;
        }

        .gallery-card:hover .overlay p, .gallery-card .overlay.show p{
            font-size: 20px !important;
            line-height: 32px !important;
        }
     }


/*** Spinner ***/

    #spinner {
        opacity: 0;
        visibility: hidden;
        transition: opacity .5s ease-out, visibility 0s linear .5s;
        z-index: 99999;
    }

    #spinner.show {
        transition: opacity .5s ease-out, visibility 0s linear 0s;
        visibility: visible;
        opacity: 1;
    }

/*** Breadcrumb ***/

    .breadcrumb .breadcrumb-item,.breadcrumb .breadcrumb-item a{
        font-size: 24px;
        font-weight: 500;
        line-height: 38.4px;
        color: #425166;
    }

    .breadcrumb .breadcrumb-item.active{
        color: var(--primary);
    }

    .breadcrumb-item+.breadcrumb-item::before{
        color: var(--dark-light) !important;
    }

    .text-white.breadcrumb-item::before{
        color:#FFFFFF !important;
    }

    /* RTL Support */
    [dir="rtl"] .breadcrumb {
        direction: rtl; /* This makes items start from the right */
        justify-content: start !important;
    }
    
    [dir="rtl"] .breadcrumb li {
        display: flex;
        align-items: center;
    }
    
    
  

    
/*** Slick ***/

    .slick-margin .slick-slide.slick-current > div:first-child {
        margin-bottom: 55px;
    }
    .slick-header .slick-slide div{
        width: 100%;
    }
    

    .slick-dots{
        list-style: none;
    }

    .slick-dots li{
        margin: 0 10px;
    }

    .slick-dots li,.slick-dots li button{
        width: 40px;
        height: 40px;
    }
    #Slick1 .slick-dots li button{
        font-size: 18px;
        line-height: 40px;
        color: #fff !important;
        padding: 0;
        z-index: 1;
        opacity: 1;
        position: relative;
    }

    .slick-dots li button:before{
        content: "";
        width: 40px;
        height: 40px;
        background-color: #C8C8C8;
        border-radius: 50%;
        z-index: -1;
        opacity: 1;
    }

    .slick-dots li.slick-active button:before{
        opacity: 1;
        background-color: var(--primary);
    }
    #Slick1 .slick-dots li.slick-active button{
        color: #fff !important;
    }
    #Slick1 .slick-dots li.slick-active button:before{
        z-index: -1;
        
    }

      /* Mobile Screens */
      @media only screen and (max-width: 576px) {
        /* .slick-dots li, .slick-dots li button {
            width: 20px;
            height: 20px;
        } */
    }

    .slick-carousel-2 .slick-track {
        display: flex;
    }
    
    .slick-carousel-2 .statistic-card {
        height: 250px;
        /* margin-bottom: 5rem; */
    }
    /* .slick-carousel-2 .statistic-card h2{ 
        font-family: DM Serif Display, ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
    } */
    .slick-carousel-2 .statistic-card p{
        padding: 0px 30px;
    }
    .slick-carousel-2 .prev{
        position: absolute;
        top: 50%;
        left: 0;
        transform: translateY(-50%);
        margin: 0;
        cursor: pointer;
        z-index: 20;

        padding: 0;
    }
    .slick-carousel-2 .prev i{
        font-size: 28px;
        width: 56px;
        height: 56px;
        border: 3px solid var(--primary);
        align-content: center;
        text-align: center;
        border-radius: 50%;
        margin-top: -20px;
    }

    .slick-carousel-2 .next{
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        margin: 0;
        padding: 0;
    }
    .slick-carousel-2 .next i{
        font-size: 28px;
        width: 56px;
        height: 56px;
        border: 3px solid var(--primary);
        align-content: center;
        text-align: center;
        border-radius: 50%;
        margin-top: -20px;
    }
  
    .slick-carousel-2 .slick-list{
        margin-left: 10px;
    }

    @media (max-width: 768px) { 
        .slick-carousel-2 {
            margin-bottom: 5rem !important;
        }
        /* .slick-carousel-2 .statistic-card {
            margin-bottom:2rem;
        } */
    }
    /* .slick-carousel-2 .slick-track .slick-slide {
        display: flex;
        height: auto;
    } */
    

/*** Back Button ***/

    .back-to-top {
        position: fixed;
        display: none;
        right: 45px;
        bottom: 45px;
        z-index: 99;
        width: 50px;
        height: 50px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    .whatsapp-btn{
        position: fixed;
        display: none;
        right: 45px;
        bottom: 45px;
        z-index: 99;
        width: 64px;
        height: 64px;
        border: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        /* background-color: #008C34 !important; */
        background-color: var(--primary) !important;
        color: #fff !important;
    }

    .job-btn{
        position: fixed;
        display: none;
        right: 45px;
        bottom: 119px;
        z-index: 99;
        width: 64px;
        height: 64px;
        border: none !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        
        background-color: var(--primary) !important;
        color: #fff !important;
    }
    .job-btn i{
        font-size: 30px !important;
    }
    

/*** Buttons ***/

    .btn{
        --btn-color : currentColor;
        --btn-border-color : currentColor;
        --btn-hover-color: rgba(0, 0, 0, 0.1);
        padding: 10px 19px !important;
        /* font-family: Work Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
        font-size: 20px !important;
        line-height: 35.2px;
        background-color: var(--btn-color);
        border-color: var(--btn-border-color);
        transition: all 0.3s ease; 
        border-radius: 12px;
    }

    .btn:hover,.btn:active,.btn:focus,.btn:focus-visible{
        background-color: var(--btn-color);
        border-color: var(--btn-border-color);
        box-shadow: 0 0 0 .25rem var(--btn-hover-color) !important;
    }
    
    .btn-large{
        font-size: 32px !important;
        font-weight: 600;
        line-height: 51.2px;
        min-width: 216px;
    }

    .btn-primary{
        --btn-color : var(--primary);
        --btn-border-color : var(--primary);
        --btn-hover-color :rgba(188, 43, 47, 0.4);
    }

    .btn-outline-primary{
        --btn-color : transparent;
        --btn-border-color : var(--primary);
        --btn-hover-color :rgba(188, 43, 47, 0.4);
    } 

    .btn-outline-primary:hover,.btn-outline-primary:active,.btn-outline-primary:focus{
        --btn-color : var(--primary);
    }
    .btn-outline-secondary{
        background-color: transparent;
        border: 1px solid #FFFFFF;
        color: #FFFFFF;
    }

    .btn-outline-secondary:hover,.btn-outline-secondary:active,.btn-outline-secondary:focus{
        --btn-color : var(--primary);
    }

    #bookApptBtn {
        transition: opacity 0.3s ease-in-out;
        display: none;
    }

    .book-appointment-btn {
        position: fixed;
        top: 35%;
        right: 0;
        transform: translateY(-35%);
        background-color: var(--primary); /* Red color */
        color: white;
        padding: 8px 12px; 
        font-weight: 500;
        font-size:25px;
        line-height: 51.2px;
        text-align: center;
        writing-mode: vertical-rl; /* Vertical text */
        text-decoration: none;
        border-radius: 20px 0 0 20px;
        z-index: 99;
        transition: background 0.3s ease-in-out;
    }

    @media (min-width: 1204px) {
        .btn-custom-lg{
            width: 50% !important;
        }
    }

    @media (max-width: 992px) {
        .book-appointment-btn {
            font-size: 20px; 
            padding: 6px 10px;
        
        }
    }

    /* RTL */
    [dir="rtl"].book-appointment-btn {
        left: 0;
        right: auto;
        border-radius:0 20px 20px 0;
        padding: 38px 10px;
    }

    .book-appointment-btn:hover {
        background-color: #8b0000; 
        color: white;
    }

     /* Large devices (desktops, ≥992px) */
     @media (min-width: 992px) and (max-width: 1199.98px) {
        .btn {
            padding: 8px 16px !important;
            font-size: 18px !important; 
            line-height: 28.8px; 
        }
     }

     /* Medium devices (tablets, ≥768px) */
    @media (max-width: 991.98px) {
        .btn-large{
            font-size: 25px !important;
            line-height: 44.8px;
            min-width: 170px;
        }
    }

/*** FORM INPUTS ***/

    .form-control {
        border: 1px solid #E0E0E0;
        background-color: #FFFFFF;
        padding: 18px 32px !important;
        border-radius: 20px;
        font-size: 24px !important;
        font-weight: 400;
        line-height: 38.4px;
        text-align: left;
        color: var(--dark-light);
    }

    .form-control::placeholder{
        opacity: 1;
    }

    textarea{
        min-height: 187px;
    }

    #map {
        min-height: 556px;
        width: 100%;
        padding: 0;
        margin: 0;
    }

/*      ************************************************************************      */
/*** 1- HEADER SECTION ***/

    /* .home-header{
        min-height: 812px;
    } */

    /* .header-wrapper.video-background{
        position: relative;
        overflow: hidden;
    }

    .header-wrapper.video-background::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.2); 
        z-index: -1; 
    }

    .header-wrapper .background-video {
        position: absolute;
        top: 0;
        left: 0;  
        width: 100%; 
        height: 100%;
        object-fit: cover;
        z-index: -2;
        animation: backgroundFadeIn 2s ease-in-out;
    }

    @keyframes backgroundFadeIn {
        0% {
            opacity: 0;
            transform: scale(1.1);
        }
        100% {
            opacity: 1;
            transform: scale(1);
        }
    } */

    /* .header-wrapper .header-list{
        width: fit-content;
        margin-right: 5.5rem;
        backdrop-filter: blur(16px);
        background: rgba(255, 255, 255, 0.8);
        padding: 30px;
        border-radius: 16px;
        gap: 70px;
    }
 
    .header-wrapper .header-list li{
        max-width: 150px;
    } */

    .navbar:not(.top-navbar){
        min-height: 100px;
        margin: auto;
        padding: 0 70px !important;
        
    }
    .top-navbar{
        padding: 5px 70px 10px 70px !important;
    }
    .top-navbar::before{ 
        content: "";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 82%;
        height: 1px;
        background-color: #dee2e6;
    }

    [dir="rtl"].top-navbar::before{
        right: auto;
        left: 0;
        width: 80%;
    }

    .logo-animated-brand{
        filter: brightness(1.07);
        position: absolute;
        top: 10%;
        transform: translateY(-50%);
        height: auto;
        left: 20px;
        width: 15% !important;
    }

    @media (min-width: 1700px) {
            .logo-animated-brand{
                left: 40px;
                width: 13% !important;
        }
    }

    [dir="rtl"] .logo-animated-brand{
        left: auto;
        right: 50px;
    }

    .navbar.shadow-sm .logo-animated-brand{
        height: auto;
        top: 50%;
        width: 10% !important; 
        left: auto;
        bottom: 0;
    }

    
    @media (max-width: 994px){
        .logo-animated-brand{top: 50%;} 
    }
    @media (max-width: 767.98px) {
        .navbar[dir="ltr"] .navbar-brand img {
            width: 25% !important;
            top: 50%;
            height: auto;
            left: 10px;
        }
    }

    .navbar .navbar-brand img{
        object-fit: contain;
    }

    .navbar .navbar-nav .nav-link,.offcanvas .navbar-nav .nav-link{
        /* font-family: Work Sans, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
        font-size: 22px !important;
        font-weight: 600 !important;
        line-height: 38.4px;
        text-align: left;
        color: var(--dark-paragraph);
        text-transform: capitalize;
        padding-left: 1.1rem;
        padding-right: 1.1rem;
    }
    .offcanvas-end,.offcanvas-start{
        width: 500px;
    }

     /* For Webkit Browsers (Chrome, Edge, Safari) */
     .offcanvas-body::-webkit-scrollbar {
        width: 8px; /* Scrollbar width */
    }

    .offcanvas-body::-webkit-scrollbar-track {
        background: #f2f2f2; /* Light grey track */
        border-radius: 10px;
    }

    .offcanvas-body::-webkit-scrollbar-thumb {
        background: #ccc; /* Grey scrollbar */
        border-radius: 10px;
    }

    .offcanvas-body::-webkit-scrollbar-thumb:hover {
        background: #aaa; /* Darker grey on hover */
    }

 
    .navbar .navbar-nav .nav-link:hover, .navbar .navbar-nav .nav-link.active,
     .navbar-nav .nav-link:hover,  .navbar-nav .nav-link.active{
        font-weight: 600 !important;
        color: var(--primary) !important;
    }

    .navbar .dropdown-menu.services-menu{
        width: 60vw; 
        max-height: 50vh;
        box-shadow: 0px 4px 4px 0px #292D320F;
        border: none;
        border-radius: 20px;
        overflow-y: auto;
        left: -20vh;
    }

    .navbar[dir="rtl"]  .dropdown-menu.services-menu {
       right: -150px; 
    }
    
    .navbar .dropdown-menu.services-menu .dropdown-item{
       white-space: wrap !important;
       margin-bottom: 10px;
    }

    .navbar .dropdown-menu.services-menu .dropdown-item.text-primary:active{
        color: #fff !important;
    }
    .navbar[dir="rtl"] .dropdown-menu.services-menu .dropdown-item{
        text-align: justify;
    }

    /* Extra Large Screen */
    @media (min-width: 1600px) {  
        .header-wrapper .container-fluid{
             width: calc(100% - 170px);
        }
        .navbar .navbar-nav .nav-link{
            font-size: 23px !important;
            
        }
     }

    @media (min-width: 1200px) and (max-width: 1399.98px) {
        .navbar:not(.top-navbar){
            padding: 0px 70px !important;
        }
    }

    /* Large devices (desktops, ≥992px) */
    @media (min-width: 992px) and (max-width: 1199.98px) {
        .navbar:not(.top-navbar){
            padding: 0px 30px !important;
        }
        .top-navbar{
            padding: 10px 30px !important;
        }

        .navbar .navbar-nav .nav-link{
            font-size: 17px !important;
            line-height: 34.4px !important;
        }

        /* .header-wrapper .header-list{
            width: min-content;
            margin-right: 5rem;
            gap: 40px;
        } */
    
    }

    @media (min-width: 768px) and (max-width: 991.98px) {
        .navbar:not(.top-navbar){
            padding: 0px 20px !important;
        }
    }

    @media (max-width: 767.98px) {
        
        .navbar:not(.top-navbar){
            padding: 0px 20px !important;
            min-height: 120px; 
        }  

        .navbar .frame-circle-64{
            width: 55px !important;
            height: 55px !important;
        }
        .navbar .frame-circle-64 img{
            width: 30px !important;
        }

        .navbar[dir="ltr"] .navbar-brand img{
            width: 150px !important;
            top: 50%;
            height: 120px;
            left: 10px;
        }

        .navbar[dir="rtl"] .navbar-brand img{
            width: 80px !important;
            top: 0;
            height: 120px;
            right: 10px;
        }
        .navbar .btn{
            margin-left: 1.5rem !important;
        }

        .home-header{
            min-height: 612px !important;
        }

        /* .header-wrapper .header-list{
            width: min-content;
            margin-right: 0;
            margin: auto;
            gap: 20px;
        } */
    }  

     /* Mobile Screens */
    /* @media only screen and (max-width: 576px) {
        .header-wrapper .header-list{
            width: calc(100% - 40px);
            gap: 0;
            overflow-x: auto;
            justify-content: space-between;
        }

        .header-wrapper .header-list li{
            max-width: fit-content;
            flex: 1;
        }

        .header-wrapper .header-list li h2{
            font-size: 30px !important;
        }

        .header-wrapper .header-list li p{
            font-size: 14px !important;
            line-height: 22.4px;
        }

    } */

/*      ************************************************************************      */
/*** 2- TESTIMONIAL SECTION ***/

    #TestimonialSection #testimonial-slider.has-navs{
        padding: 0px 250px !important;
    }

    #TestimonialSection #testimonial-slider{
        padding: 0px 100px !important;
    }

    #TestimonialSection {
        position: relative;
        background-image: url("../img/doctor-background.jpg");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    #TestimonialSection::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        background: 
            linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(64, 166, 173, 0.3) 0%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2));
    }

    #TestimonialSection .container{
        min-height: 289px;
    }

    #TestimonialSection .container,#TestimonialSection .testimonials-container{
        position: relative;
        z-index: 1;
    }

    #TestimonialSection .testimonials-container{
        background-color: #334155;
        width: 100%;
    }

    .testimonial-video {
        position: relative;
        width: 95%;
        height: 350px;
        overflow: hidden;
        margin: auto;
    }
    
    .testimonial-video-element {
        width: 100%;
        height: 100%;
        object-fit: cover; 
        border-radius: 20px;
    }
    
    .video-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.4); 
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        z-index: 10;
        border-radius: 20px;
    }
    
    .play-video {
        font-size: 3rem;
        color: #fff;
        cursor: pointer;
        margin-bottom: 10px;
        transition: all 0.3s ease;
    }
    
    .play-video:hover {
        transform: scale(1.1);
    }
    
    .testimonial-name {
        font-size: 1.1rem;
        z-index: 10;
        position: absolute;
        top: 10px;
        left: 10px;
        margin: 0;
        display: flex;
        gap: 10px;
        align-items: center;
    }

    [dir="rtl"].testimonial-name {
        left: auto;
        right: 10px;
    }

    .testimonial-name span{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #fff;
    }

    .testimonial-name span img{
        width: 100% !important;
        height: 100% !important;
        object-fit: contain;
    }
    .testimonial-name p{
        color: #fff !important;
    }

    
    /* Add styles for responsive layout if necessary */
    @media (max-width: 768px) {
        .testimonial-video {
            height: 250px;
        }
    
        .play-video {
            font-size: 2rem;
        }
    
        .testimonial-name {
            font-size: 1rem;
        }
    }
    


    #TestimonialSection .testimonial-slick-carousel .prev,#TestimonialSection .testimonial-slick-carousel .next{
        top: 50%;
        position: absolute;
        display: block;
        width: 56px;
        height: 56px;
        font-size: 28px;
        line-height: 50px;
        border: 3px solid #FFFFFF;
        border-radius: 50%;
        text-align: center;
        -webkit-transform: translate(0, -50%);
        -ms-transform: translate(0, -50%);
        transform: translate(0, -50%);
        cursor: pointer;
        z-index: 20;

    }

    #TestimonialSection .testimonial-slick-carousel .prev{
        left: 100px;
    }

    #TestimonialSection .testimonial-slick-carousel .next{
        right: 100px;
    }

    #TestimonialSection .slick-dots{
        left: 0 !important;
    }

    /* Large devices (desktops, ≥992px) */
    @media  (max-width: 1199.98px) {
        #TestimonialSection #testimonial-slider{
            padding: 20px 120px !important;
        }
    
        #TestimonialSection .testimonial-slick-carousel .prev{
            left: 50px;
        }
    
        #TestimonialSection .testimonial-slick-carousel .next{
            right: 50px;
        }
    }

    /* Small devices (phones, ≥576px) */
    @media (max-width: 767.98px) {
        #TestimonialSection #testimonial-slider{
            padding: 20px !important;
        }
    
        /* #TestimonialSection .slick-dots{
            margin: 20px 0px 30px 0px;
        } */
    }

    #TestimonialSection .testimonial-slick-carousel .prev, #TestimonialSection .testimonial-slick-carousel  .next {
        z-index: 10;
    }
    

/*      ************************************************************************      */
/*** 3- FOOTER SECTION ***/

    .footer{
        background-color: #F5FAFA !important;
    }
    .footer p{
        color: #474747;
    }

    /* .footer h3,.footer h6{
        color: #02121B;
    } */
    .footer .btn-link{
        background-color: transparent !important;
        border: none;
        color: #02121B !important;
        text-align: center;
        display: block;
        line-height: 20px !important;
        margin-left: auto;
        padding: 3px !important;
        border-radius: 50%;
    }
   

    .footer .newsletter-container{
        background-color: #334155;
        border-radius: 20px;
        padding: 32px 40px;
        height: fit-content;
    }

    .footer .newsletter-container .input-group{
        width: 85%;
        border-radius: 12px !important;
    }

    .footer .newsletter-container .form-control{
        padding: 10px 32px;
        border-top-left-radius: 12px;
        border-bottom-left-radius: 12px;
    }

    .footer .newsletter-container .form-control::placeholder{
        opacity: 1;
        color: var(--dark-light);
        font-size: 24px;
        font-weight: 400;
        line-height: 38.4px;
    }

    .footer .newsletter-container .input-group button{
        border-top-right-radius: 12px;
        border-bottom-right-radius: 12px;
    }

    .footer .image-frame {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 448px;
        height: 448px;
        background-color: rgba(188, 43, 47, 0.05);
        border-radius: 50%;
        overflow: hidden;
        z-index: 0;
    }

    .footer .image-frame .frame-1 {
        border-radius: 50%;
        background-color: rgba(188, 43, 47, 0.05);
        z-index: 1;
        position: absolute;
        top: 5%; 
        left: 5%; 
        width: 90%;
        height: 90%;
    }

    .footer .image-frame img {
        border-radius: 50%;
        width: 90%;
        height: 90%;
        /* object-fit: none; */
        z-index: 2;
        display: block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        object-position: top;
    }

    .footer .link{
        text-decoration: none;
        font-size: 22px;
        font-weight: 400;
        line-height: 35.2px;
        text-align: left;
        text-underline-position: from-font;
        text-decoration-skip-ink: none;
        color: var(--dark-light);
        display: block;
        margin-bottom: 15px;
    }

    .media-list li a{
        width: 48px;
        height: 48px;
        border: 1px solid var(--primary);
        border-radius: 50%;
        text-align: center;
        display: block;
    }

    .media-list li a i{
        font-size: 24px;
        line-height: 48px;
        color: var(--primary);
    }

    .footer .line-hr{
        border-bottom: 1px solid #000000CC;
        width: 45%;
        margin:30px auto;
        display: block;
    }

    @media (max-width: 1355px) {
        .footer p.text-nowrap{
            white-space:wrap !important;
        }
    }

    @media (max-width: 1199.98px) {
      
        .footer .image-frame {
            width: 350px;
            height: 350px;
            margin: auto;
            margin-bottom: 20px;
        }

        .footer .newsletter-container .input-group{
            width: 100%;
        }
    }

    @media (max-width: 992px) {
        .footer .newsletter-container{
            padding: 20px !important;
        }
        .footer .newsletter-container .form-control{
            font-size: 20px !important;
            padding: 18px !important;
        }
      
        .footer .image-frame {
           display: none;
        }

        .footer .newsletter-container .input-group button{
            min-width: fit-content !important;
            font-size: 20px !important;
        }

      
    }

/*      ************************************************************************      */
/*** 4- TEAMS SECTION ***/

    .teams .team-card{
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .teams .team-card img{
        border-radius: 50%;
        object-fit: cover;
        text-align: center;
        margin: auto;
        margin-bottom: 20px;
    }

    .teams .team-card h3,.teams .team-card h5,.teams .team-card p{
        text-align: center;
    }

    .teams .team-card p{
        color: var(--dark-light);
        padding: 0px 10px;
    }

/*      ************************************************************************      */
/*** 5- MISSION SECTION ***/

    #AboutMissionSection{
        position: relative;
        min-height: 628px;
        overflow: hidden;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #AboutMissionSection::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.4); 
        z-index: 0; 
    }

    #AboutMissionSection .video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover; 
        z-index: -1;
    }

    #AboutMissionSection .container{
        position: relative;
        z-index: 1; 
    }

/*      ************************************************************************      */
/*** 6- CONTACT SECTION ***/

    .contact-container{
        border: 2px solid #F6F6F6;
        border-radius: 20px;
        padding: 32px 24px;
        height: 100%;
    }

    .contact-container ul li{
        white-space: normal;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /*      ************************************************************************      */
/*** 7- SERVICE SECTION ***/

    #ServiceSection {
        background-color: #F5F8F9;
        padding-bottom: 7rem !important;
    }

    #ServiceSection .services-container .slick-list {
        background-image: url("../img/service_background2.jpg");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        width: 100%;
        height: 100%;
        position: relative;
    }

    #ServiceSection .services-container .slick-list::before{
         background: rgba(0, 0, 0, 0.3);
         content: "";
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 0;
         transition: background-color 0.3s;
    }

    .service-box {
        height: 100%;
        border-right: 1px solid #FFFFFF !important;
        min-height: 857px;
        transition: background-color 0.3s, color 0.3s;
        position: relative; 
        z-index: 1;
        overflow: hidden;
        display: block;
    }

    .service-box .service-content{
        /* margin: auto; */
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    .service-box .service-content .icon{
        width: 90px;
        height: 90px;
        border-radius: 50%;
        background-color: #FFF;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: auto;
        transition: transform 0.3s; 
        opacity: 0; 
    }
 

    .service-box h4 {
        text-align: center;
        padding: 0px 20px;
        transform: translateY(50px); 
        transition: transform 0.3s; 
    }

    .service-box p {
        opacity: 0; 
        visibility: hidden;
        transition: opacity 0.3s; 
        padding: 0px 30px;
        text-align: center !important;
    }

    .services-container .service-box:hover {
        background-color: var(--primary);
        color: #fff !important;
    }

    .services-container .service-box:hover .icon{
        opacity: 1;
        transform: translateY(-120px);
    }

    .services-container .service-box:hover h4{
        transform: translateY(-90px);
    }

    .services-container .service-box:hover p {
        opacity: 1; 
        visibility: visible;
    }
  
    .service-box:last-child {
        border-right: none; 
    }

    #ServiceSection .services-container .slick-dots{
        bottom: -80px !important;
    }  

    #ServiceSection .slick-prev, #ServiceSection .slick-next{
        z-index: 20;
        width: 50px;
        height: 50px;
        font-size: 30px !important;
        top: 55%;
    }
    #ServiceSection .slick-prev{
        left: 10px !important;
    }

    #ServiceSection .slick-next{
        right: -17px !important;
    }
    
    #partnerSection .slick-carousel-partner{
        /* background-color: #FFFFFF; */
        padding: 10px 0px;

    }

    #partnerSection  .logo-item{
        width: 150px;
        background-color: #fff;
        align-content: center;
        text-align: center;
        margin: auto;
    }
    #partnerSection  .logo-item img{
        height: 90px !important;
        object-fit: contain;
        margin: auto;
    }

    @media only screen and (max-width: 768px) {
        #partnerSection  .logo-item img{
            height: 60px !important;
            object-fit: contain;
            margin: auto;
        }
    }
    #statisticSection{
        background-image: url("../icons/logo-shape-4.png");
        background-position: 50% 75%;
        background-size: 350px auto;
        background-repeat: no-repeat;
        position: relative;
        background-attachment: fixed; 
    }
    #statisticSection .row{ 
        position: relative;
    }
    #statisticSection::before{
        background-color: rgba(255,255,255,.8);
        /* backdrop-filter: blur(1px); */
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }