@import url('https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Philosopher:ital,wght@0,400;0,700;1,400;1,700&display=swap');
/* ==========================================
   Global Styles
========================================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background:var(--body-bg);

    color:var(--text-color);

    font-family:'Arimo',sans-serif;

    font-size:16px;

    line-height:1.7;

    overflow-x:hidden;

}


h1,
h2,
h3,
h4,
h5,
h6{

    font-family:'Philosopher',serif;

    color:var(--heading-color);

    font-weight:700;

    line-height:1.2;

    font-size:5rem;

}

a{

    text-decoration:none;

    transition:var(--transition);

    color:inherit;

}

img{

    max-width:100%;

    display:block;

}

ul{

    list-style:none;

}

.container{

    width:min(100% - 30px,var(--container));

    margin:auto;

}
/* ==========================================
   Healthcare CMS v1.0
   Root Variables
========================================== */

:root{

    /* =====================
       Brand Colors
    ====================== */

    --primary-color:#A00000;
    --secondary-color:#F04F4E;

    --white:#FFFFFF;
    --black:#000000;

    --primary-font:"Philosopher", sans-serif;
    --body-font: "Arimo", sans-serif;

    /* =====================
       Gray Palette
    ====================== */

    --gray-50:#F9FAFB;
    --gray-100:#F3F4F6;
    --gray-200:#E5E7EB;
    --gray-300:#D1D5DB;
    --gray-400:#9CA3AF;
    --gray-500:#6B7280;
    --gray-600:#4B5563;
    --gray-700:#374151;
    --gray-800:#1F2937;
    --gray-900:#111827;

    /* =====================
       Text Colors
    ====================== */

    --text-color:#333333;
    --text-light:#666666;
    --heading-color:#111111;

    /* =====================
       Background Colors
    ====================== */

    --body-bg:#FFFFFF;
    --section-bg:#FAFAFA;
    --card-bg:#FFFFFF;

    /* =====================
       Border
    ====================== */

    --border-color:#E5E7EB;

    /* =====================
       Shadow
    ====================== */

    --shadow-sm:0 2px 8px rgba(0,0,0,.05);
    --shadow-md:0 10px 25px rgba(0,0,0,.08);
    --shadow-lg:0 20px 45px rgba(0,0,0,.12);

    /* =====================
       Radius
    ====================== */

    --radius-sm:6px;
    --radius-md:10px;
    --radius-lg:16px;
    --radius-xl:24px;
    --radius-round:50%;

    /* =====================
       Transition
    ====================== */

    --transition:all .35s ease;

    /* =====================
       Container
    ====================== */

    --container:1320px;

    /* =====================
       Header Height
    ====================== */

    --header-height:90px;


}

/* ==========================================
   Local Fonts
========================================== */

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

@font-face{
    font-family:'Philosopher';
    src:url('assets/fonts/Philosopher-Bold.ttf') format('truetype');
    font-weight:700;
    font-style:normal;
}

h1 
{
    font-family:'Philosopher' !important;
}

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

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

/*=========================================
Hero Section
=========================================*/

.hero-section{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

}

.heroSlider{

    width:100%;

    height:100%;

}

.heroSlider .swiper-slide{

   position:relative;

    display:flex;

    align-items:center;

    height:100vh;   

}

.heroSlider img{

     position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

    z-index:0;

    animation:heroZoom 8s linear infinite alternate;

}

.hero-overlay{

    position:absolute;

    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.78) 0%,
            rgba(0,0,0,.58) 45%,
            rgba(0,0,0,.20) 100%
        );

    z-index:1;

}

.hero-content{

    position:absolute;

    top:55%;

    left:0px;

    transform:translateY(-50%);

    max-width:700px;

    z-index:10;

}

.hero-content span{

    color:#fff;

    background:rgba(255,255,255,.15);

    backdrop-filter:blur(15px);

    border:1px solid rgba(255,255,255,.25);

    box-shadow:0 10px 25px rgba(0,0,0,.15);
    padding: 10px 20px;
    border-radius: 30px;

}
.hero-section .container{

    position:relative;
    height:100%;
    z-index:999;

}

.hero-content h1{

    font-size:40px;
    margin-top:20px;

    line-height:1.15;

    color:#fff;

    font-family:var(--primary-font);

    font-weight:700;

    text-shadow:
        0 3px 12px rgba(0,0,0,.45);

    margin-bottom:20px;

}

.hero-content p{

    color:rgba(255,255,255,.96);

    font-size:18px;

    line-height:1.8;

    text-shadow:0 2px 8px rgba(0,0,0,.45);

    margin-top:20px;

}
.hero-btn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;
    margin-top:20px;

    width:180px;

    height:60px;

    background:var(--primary-color);

    color:#fff;

    border-radius:60px;

    overflow:hidden;

    font-weight:700;

    transition:.4s;

}

.hero-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:linear-gradient(

        120deg,

        transparent,

        rgba(255,255,255,.5),

        transparent

    );

    transition:.7s;

}

.hero-btn:hover::before{

    left:100%;

}

.hero-btn:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(0,0,0,.25);

}

.heroSlider .swiper-pagination{

    bottom:45px;

}

.heroSlider .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.4;

}

.heroSlider .swiper-pagination-bullet-active{

    opacity:1;

    width:35px;

    border-radius:20px;

    background:var(--primary-color);

}

@keyframes heroZoom{

    from{

        transform:scale(1);

    }

    to{

        transform:scale(1.15);

    }

}

@media(max-width:991px){

.hero-content h1{

    font-size:48px;

}

.hero-content p{

    font-size:16px;

}

}

@media(max-width:576px){

.hero-content{

    text-align:center;

    align-items:center;

}

.hero-content h1{

    font-size:38px;

}

.hero-content span{

    font-size:13px;

}

.hero-content p{

    font-size:15px;

}

}
/*=========================================
Premium Header
=========================================*/

.site-header{

    position:fixed;

    top:30px;

    left:0;

    width:100%;

    z-index:99999;

    transition:all .45s ease;

}
.site-header.scrolled .header-wrapper{

    background:#ffffff;

    backdrop-filter:none;

    -webkit-backdrop-filter:none;

    border:1px solid rgba(0,0,0,.06);

    box-shadow:0 10px 35px rgba(0,0,0,.10);

}
.site-header.scrolled .header-wrapper{

   border-radius: 5px;
}
.site-header.scrolled .menu-toggle span 
{
    background:#000;
}

.site-header.scrolled{

    top:0;
    padding:0px 0;
    animation:headerSlide .4s ease;
}

@keyframes headerSlide{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}

.header-wrapper{

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:16px 30px;

    background:rgba(255,255,255,.60);

    border:1px solid #fff;

    border-radius:30px;

    box-shadow:
        0 10px 35px rgba(0,0,0,.15),
        inset 0 1px 1px rgba(255,255,255,.25);

}

/*=========================================
Logo
=========================================*/

.logo{

    flex-shrink:0;

}

.logo img{

    width:190px;

    transition:.35s;

}

.logo:hover img{

    transform:scale(1.04);

}

/*=========================================
Navigation
=========================================*/

.main-nav{

    margin-left:auto;

    margin-right:35px;

}

.main-nav ul{

    display:flex;

    align-items:center;

    gap:34px;

}

.main-nav ul li{

    position:relative;

}

.main-nav ul li>a{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    font-size:16px;

    font-weight:600;

    color:var(--gray-800);

    padding:10px 0;

    transition:all .35s ease;

}

/*=========================================
Underline Animation
=========================================*/

.main-nav ul li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:3px;

    background:var(--primary-color);

    border-radius:50px;

    transition:.35s;

}

.main-nav ul li:hover>a{

    color:var(--primary-color);

}

.main-nav ul li:hover>a::after,

.main-nav ul li>a.active::after{

    width:100%;

}

.main-nav ul li>a.active{

    color:var(--primary-color);

}

/*=========================================
Appointment Button
=========================================*/

.appointment-btn, .all-btn-primary {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 210px;
    height: 58px;

    overflow: hidden;
    border-radius: 60px;

    background: var(--primary-color);
    color: #fff;

    font-weight: 700;
    font-size: 15px;

    transition: .35s;

    box-shadow: 0 12px 30px rgba(160,0,0,.25);
}


/* Shine Effect */
.appointment-btn::before, .all-btn-primary::before {
    content: "";

    position: absolute;
    top: 0;
    left: -120%;

    width: 60%;
    height: 100%;

    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,.5),
        transparent
    );

    transform: skewX(-25deg);
    transition: .8s;
}

.appointment-btn:hover::before, .all-btn-primary:hover::before {
    left: 160%;
}


/* Button Hover */
.appointment-btn:hover, .all-btn-primary:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 45px rgba(160,0,0,.35);
}

/* Text - Always Perfectly Center */
.appointment-text {
    position: absolute;
    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    white-space: nowrap;
}
.appointment-btn:hover .appointment-text, .all-btn-primary:hover .appointment-text {
    transform: translate(-50%, -50%) translateX(-15px);
    transition: transform .4s ease-in-out;
}

/* Arrow */
.appointment-arrow {
    position: absolute;

    right: 25px;
    top: 50%;

    transform: translate(15px, -50%);

    font-size: 22px;
    line-height: 1;

    opacity: 0;

    transition:
        opacity .3s ease,
        transform .4s ease;
}


/* Arrow Hover Animation */
.appointment-btn:hover .appointment-arrow, .all-btn-primary:hover .appointment-arrow {
    opacity: 1;
    transform: translate(0, -50%);
     transition: transform .4s ease-in-out;
}



/*=========================================
Desktop Dropdown Icon
=========================================*/

.main-nav i{

    font-size:13px;

    transition:.35s;

}

.has-mega:hover>a i{

    transform:rotate(180deg);

}

/*=========================================
Mobile Toggle
=========================================*/

.menu-toggle{

    width:48px;

    height:48px;

    display:none;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    border:none;

    background:none;

    cursor:pointer;

}

.menu-toggle span{

    width:26px;

    height:2px;

    background:#fff;

    transition:.35s;

    border-radius:10px;
    

}
/*=========================================
Mega Menu
=========================================*/

.has-mega{

    position:relative;

}

.mega-menu{

    position:absolute;

    top:120%;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    width:700px;

    display:flex;

    gap:30px;

    padding:25px;

    background:#fff;

    border-radius:24px;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

    opacity:0;

    visibility:hidden;

    transition:.4s;

}

.has-mega:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.mega-left{

    width:220px;

    flex-shrink:0;

}

.mega-left img{

    width:100%;


    object-fit:auto;

    border-radius:18px;
    margin-bottom:15px;

}

.mega-right{

    flex:1;

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:12px;

}

.mega-right a{

    display:flex;

    align-items:center;

    padding:12px 16px;

    border-radius:14px;

    font-size:15px;

    font-weight:600;

    color:#444;

    transition:.35s;

    background:#fafafa;

}

.mega-right a:hover{

    background:var(--primary-color);

    color:#fff;

    transform:translateX(6px);

}

/*=========================================
Mobile Menu
=========================================*/

.mobile-menu{

    position:fixed;

    top:0;

    right:-100%;

    width:340px;

    height:100vh;

    background:#fff;

    z-index:999999;

    transition:.45s;

    padding:30px;

    overflow-y:auto;

}

.mobile-menu.active{

    right:0;

}

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.4s;

    z-index:999998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}

.mobile-top{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:35px;

}

.mobile-top img{

    width:170px;

}

.close-menu{

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#f5f5f5;

    cursor:pointer;

    font-size:20px;

}

.mobile-menu ul{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.mobile-menu ul li{

    border-bottom:1px solid #eee;

}

.mobile-menu ul li a,

.mobile-dropdown button{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:16px 0;

    background:none;

    border:none;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

}

/*=========================================
Mobile Submenu Animation
=========================================*/

.mobile-submenu{

    max-height:0;
    opacity:0;
    overflow: hidden;
    padding-left:18px;

    transition:
        max-height .45s ease,
        opacity .35s ease;

}
.mobile-dropdown button i{

    transition:.35s;

}

.mobile-dropdown.active button i{

    transform:rotate(180deg);

}
.mobile-dropdown button{

    transition:.35s;

    border-radius:12px;

    padding:15px 0px;

}

.mobile-dropdown button:hover{

    background:#f8f8f8;

    color:var(--primary-color);

}
.mobile-dropdown.active .mobile-submenu{

    max-height:700px;

    opacity:1;

}

.mobile-submenu a{

    position:relative;

    display:flex;

    align-items:center;

    padding:12px 15px;

    margin:4px 0;

    border-radius:12px;

    color:#555;

    font-size:15px;

    font-weight:500;

    transition:all .35s ease;

}

.mobile-submenu a::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    width:0;

    height:100%;

    background:var(--primary-color);

    border-radius:12px;

    transform:translateY(-50%);

    transition:.35s;

    z-index:-1;

}

.mobile-submenu a:hover{

    color:#fff;
    padding-left:22px;
    font-size: 14px;

}

.mobile-submenu a:hover::before{

    width:100%;
    height: 100%;

}


.mobile-btn{

    margin-top:30px;

    width:100%;

}

/*=========================================
Responsive
=========================================*/

@media(max-width:1199px){

    .main-nav{

        display:none;

    }

    .appointment-btn{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .mobile-btn 
    {
        display: inline-block;
        display: flex;
        align-items: center;
        justify-content: center;

    }

}

@media(max-width:767px){

    .site-header{

        top:15px;

    }

    .header-wrapper{

        padding:14px 20px;

        border-radius:20px;

    }

    .logo img{

        width:150px;

    }

}

@media(max-width:480px){

    .mobile-menu{

        width:100%;

    }

}

.menu-toggle.active span:nth-child(1){

    transform:translateY(8px) rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:translateY(-8px) rotate(-45deg);

}