/*==================================
YOG-JEET ACADEMY
GLOBAL STYLE CSS
==================================*/


/*==================================
RESET
==================================*/

*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}


html{

    scroll-behavior:smooth;

}


body{

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

    color:#222;

    background:#ffffff;

    overflow-x:hidden;

}



img{

    max-width:100%;

    display:block;

}



a{

    text-decoration:none;

    color:inherit;

}



ul{

    list-style:none;

}





/*==================================
ROOT VARIABLES
==================================*/

:root{


    --primary:#0A3D91;

    --secondary:#2563EB;

    --light:#f8fbff;

    --text:#222;

    --muted:#666;

    --white:#ffffff;


    --shadow:
    0 20px 40px rgba(0,0,0,.08);


    --radius:25px;


}






/*==================================
CONTAINER
==================================*/


.container{


    width:100%;

    max-width:1200px;

    margin:auto;

    padding-left:30px;

    padding-right:30px;


}




/*==================================
SECTION COMMON
==================================*/


section{


    padding:100px 8%;

    min-height:100vh;


}




/*==================================
SECTION TITLE
==================================*/


.section-title{


    text-align:center;

    margin-bottom:70px;


}



.section-title span{


    display:inline-block;

    padding:8px 18px;

    border-radius:50px;

    background:#eaf2ff;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;


}



.section-title h2{


    font-size:52px;

    font-weight:700;

    line-height:1.2;

    margin-bottom:20px;


}



.section-title p{


    max-width:700px;

    margin:auto;

    color:var(--muted);

    font-size:18px;

    line-height:1.8;


}





/*==================================
BUTTONS
==================================*/


.primary-btn,
.secondary-btn,
.btn-primary{


    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:16px 35px;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

    cursor:pointer;


}



.primary-btn,
.btn-primary{


    background:var(--primary);

    color:white;


}



.primary-btn:hover,
.btn-primary:hover{


    background:var(--secondary);

    transform:translateY(-5px);


}




.secondary-btn{


    border:2px solid var(--primary);

    color:var(--primary);

    background:white;


}



.secondary-btn:hover{


    background:var(--primary);

    color:white;

    transform:translateY(-5px);


}





/*==================================
NAVBAR GLOBAL
==================================*/


header{


    position:fixed;

    width:100%;

    top:0;

    left:0;

    z-index:999;


}



.navbar{


    width:100%;

    padding:25px 8%;

    display:flex;

    align-items:center;

    justify-content:space-between;


}



.logo{


    font-size:32px;

    font-weight:800;

    color:var(--primary);


}



.logo span{


    color:var(--secondary);


}



.nav-links{


    display:flex;

    gap:35px;


}



.nav-links a{


    font-weight:500;

    transition:.3s;


}



.nav-links a:hover,
.nav-links a.active{


    color:var(--secondary);


}




.btn-nav{


    padding:12px 25px;

    border-radius:50px;

    background:var(--primary);

    color:white;

    font-weight:600;


}





/*==================================
STICKY HEADER
==================================*/


header.sticky .navbar{


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


    backdrop-filter:blur(20px);

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


}





/*==================================
LOADER
==================================*/


#loader{


    position:fixed;

    inset:0;

    background:white;

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    gap:20px;

    z-index:9999;


}



.loader-circle{


    width:70px;

    height:70px;

    border-radius:50%;

    border:6px solid #eaf2ff;

    border-top-color:var(--primary);

    animation:spin 1s linear infinite;


}



#loader h2{


    color:var(--primary);

    font-size:24px;


}



#loader.hide{


    opacity:0;

    visibility:hidden;

    transition:.6s;


}



@keyframes spin{


    to{

        transform:rotate(360deg);

    }


}





/*==================================
SCROLL DOWN
==================================*/


.scroll-down{


    position:absolute;

    bottom:40px;

    left:50%;

    transform:translateX(-50%);

    animation:bounce 2s infinite;


}



.scroll-down i{


    color:var(--primary);

    font-size:30px;


}



@keyframes bounce{


    0%,100%{

        transform:translate(-50%,0);

    }


    50%{

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

    }


}





/*==================================
FLOATING WHATSAPP
==================================*/


.whatsapp-floating{


    position:fixed;

    right:25px;

    bottom:25px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:#25D366;

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    z-index:999;

    box-shadow:0 15px 30px rgba(0,0,0,.2);


}





/*==================================
RESPONSIVE BASE
==================================*/


@media(max-width:992px){


    section{

        padding:80px 5%;

    }


    .section-title h2{


        font-size:40px;


    }


    .nav-links{


        display:none;


    }


}



@media(max-width:768px){


    .container{


        padding:0 20px;


    }



    .section-title h2{


        font-size:34px;


    }


    .section-title p{


        font-size:16px;


    }



    .navbar{


        padding:20px;


    }



    .logo{


        font-size:26px;


    }



}

/*==========================
LOGO
==========================*/

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    text-decoration:none;
}

.logo img{
    width:58px;
    height:58px;
    object-fit:contain;
}

.logo-text{
    display:flex;
    flex-direction:column;
    line-height:1;
}

.logo-main{
    font-size:30px;
    font-weight:800;
    color:#0A3D91;
    letter-spacing:.5px;
}

.logo-sub{
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    color:#020202;
    margin-top:4px;
}