/* ==========================================================
   GITAMARG EDUCATION
   STYLE.CSS
   Part 1 - Base Styles
========================================================== */


/*==========================================================
  GOOGLE FONTS
==========================================================*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&family=Nunito:wght@400;500;600;700&display=swap');


/*==========================================================
  CSS VARIABLES
==========================================================*/

:root{

    --primary:#1E3A8A;
    --primary-dark:#142b67;

    --secondary:#F59E0B;

    --green:#16A34A;

    --white:#ffffff;

    --background:#FFFDF8;

    --light:#F6F8FC;

    --text:#233044;

    --text-light:#6B7280;

    --border:#E8ECF3;

    --shadow:
        0 12px 35px rgba(0,0,0,.08);

    --shadow-hover:
        0 18px 45px rgba(0,0,0,.15);

    --radius:18px;

    --transition:.35s ease;

}


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

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


html{

    scroll-behavior:smooth;

}


body{

    background:var(--background);

    color:var(--text);

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

    line-height:1.7;

    overflow-x:hidden;

}


/*==========================================================
 IMAGES
==========================================================*/

img{

    max-width:100%;

    display:block;

}


/*==========================================================
 LINKS
==========================================================*/

a{

    text-decoration:none;

    color:inherit;

}


/*==========================================================
 LISTS
==========================================================*/

ul{

    list-style:none;

}


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

.container{

    width:min(1200px,92%);

    margin:auto;

}


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

section{

    padding:90px 0;

}


/*==========================================================
 TYPOGRAPHY
==========================================================*/

h1,h2,h3,h4{

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

    color:var(--primary);

    line-height:1.2;

}


h1{

    font-size:3.8rem;

    font-weight:800;

}


h2{

    font-size:2.6rem;

    font-weight:700;

}


h3{

    font-size:1.35rem;

    font-weight:600;

}


h4{

    font-size:1.1rem;

}


p{

    color:var(--text-light);

    font-size:1.05rem;

    margin-top:15px;

}


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

.section-title{

    text-align:center;

    margin-bottom:70px;

}


.section-title span{

    color:var(--secondary);

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    font-size:.85rem;

}


.section-title h2{

    margin-top:12px;

    margin-bottom:18px;

}


.section-title p{

    max-width:700px;

    margin:auto;

}


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

.logo{

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

    font-size:1.8rem;

    font-weight:800;

}


.logo-blue{

    color:var(--primary);

}


.logo-gold{

    color:var(--secondary);

}


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

.btn-primary,
.btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:15px 34px;

    border-radius:999px;

    font-weight:700;

    transition:var(--transition);

    cursor:pointer;

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

}


.btn-primary{

    background:var(--primary);

    color:white;

    box-shadow:var(--shadow);

}


.btn-primary:hover{

    background:var(--primary-dark);

    transform:translateY(-4px);

    box-shadow:var(--shadow-hover);

}


.btn-secondary{

    background:white;

    color:var(--primary);

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

}


.btn-secondary:hover{

    background:var(--primary);

    color:white;

    transform:translateY(-4px);

}


/*==========================================================
 CARDS
==========================================================*/

.card{

    background:white;

    border-radius:var(--radius);

    box-shadow:var(--shadow);

    transition:var(--transition);

}


.card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow-hover);

}


/*==========================================================
 TAGS
==========================================================*/

.book-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#FFF5DA;

    color:#B76E00;

    font-size:.82rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:18px;

}


/*==========================================================
 HIGHLIGHTS
==========================================================*/

.book-highlights{

    display:grid;

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

    gap:14px;

    margin:35px 0;

}


.book-highlights div{

    background:white;

    padding:14px;

    border-radius:12px;

    box-shadow:0 6px 15px rgba(0,0,0,.05);

}


/*==========================================================
 UTILITIES
==========================================================*/

.text-center{

    text-align:center;

}


.mt-20{

    margin-top:20px;

}


.mt-40{

    margin-top:40px;

}


.mb-40{

    margin-bottom:40px;

}


.hidden{

    display:none;

}


/*==========================================================
 SELECTION
==========================================================*/

::selection{

    background:var(--secondary);

    color:white;

}


/*==========================================================
 SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

    width:10px;

}


::-webkit-scrollbar-track{

    background:#edf2f7;

}


::-webkit-scrollbar-thumb{

    background:var(--primary);

    border-radius:20px;

}


::-webkit-scrollbar-thumb:hover{

    background:var(--primary-dark);

}


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

@media(max-width:992px){

h1{

    font-size:3rem;

}

h2{

    font-size:2.2rem;

}

section{

    padding:75px 0;

}

}


@media(max-width:768px){

.container{

    width:94%;

}

h1{

    font-size:2.4rem;

}

h2{

    font-size:1.9rem;

}

.book-highlights{

    grid-template-columns:1fr;

}

.btn-primary,
.btn-secondary{

    width:100%;

    margin-top:12px;

}

}


@media(max-width:480px){

h1{

    font-size:2rem;

}

h2{

    font-size:1.6rem;

}

p{

    font-size:1rem;

}

}
/*==========================================================
    HEADER
==========================================================*/

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:999;

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

    backdrop-filter:blur(14px);

    border-bottom:1px solid rgba(0,0,0,.05);

    transition:.35s;

}

.header .container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    height:85px;

}

.navbar ul{

    display:flex;

    gap:35px;

}

.navbar a{

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

    font-weight:600;

    color:var(--text);

    position:relative;

    transition:.3s;

}

.navbar a:hover{

    color:var(--primary);

}

.navbar a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    background:var(--secondary);

    transition:.35s;

    border-radius:20px;

}

.navbar a:hover::after{

    width:100%;

}

.mobile-menu{

    display:none;

    font-size:1.6rem;

    cursor:pointer;

    color:var(--primary);

}


/*==========================================================
    HERO
==========================================================*/

.hero{

    position:relative;

    overflow:hidden;

    padding-top:170px;

    padding-bottom:120px;

    background:
    linear-gradient(135deg,
    #EEF5FF 0%,
    #FFFFFF 45%,
    #FFF8EC 100%);

}

.hero-container{

    display:grid;

    grid-template-columns:1.1fr 1fr;

    align-items:center;

    gap:70px;

}

.hero-left h1{

    margin:20px 0;

}

.hero-left h1 span{

    color:var(--secondary);

    display:block;

}

.hero-left p{

    font-size:1.15rem;

    max-width:560px;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:12px;

    background:white;

    padding:10px 22px;

    border-radius:999px;

    box-shadow:var(--shadow);

    font-weight:700;

    color:var(--primary);

}

.hero-buttons{

    display:flex;

    gap:18px;

    margin-top:40px;

    flex-wrap:wrap;

}

.hero-features{

    display:flex;

    gap:28px;

    margin-top:45px;

    flex-wrap:wrap;

}

.hero-features div{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

    color:var(--text);

}

.hero-features i{

    color:var(--green);

    font-size:1.2rem;

}


/*==========================================================
 BOOKS
==========================================================*/

.hero-right{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

}

.books-wrapper{

    position:relative;

    width:420px;

    height:420px;

}

.book{

    position:absolute;

    width:220px;

    border-radius:16px;

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

    transition:.4s;

}

.book:hover{

    transform:scale(1.05);

}

.gita-book{

    left:0;

    top:60px;

    transform:rotate(-10deg);

    animation:floatBook1 5s ease-in-out infinite;

}

.ai-book{

    right:0;

    top:0;

    transform:rotate(10deg);

    animation:floatBook2 5s ease-in-out infinite;

}


/*==========================================================
BACKGROUND CIRCLES
==========================================================*/

.hero-bg-circle{

    position:absolute;

    border-radius:50%;

    filter:blur(60px);

    opacity:.25;

}

.circle1{

    width:350px;

    height:350px;

    background:#FFD66B;

    top:-120px;

    left:-100px;

}

.circle2{

    width:400px;

    height:400px;

    background:#7CB8FF;

    bottom:-180px;

    right:-150px;

}


/*==========================================================
WAVE
==========================================================*/

.wave{

    position:absolute;

    left:0;

    bottom:-8px;

    width:100%;

}

.wave svg{

    display:block;

    width:100%;

}


/*==========================================================
ANIMATIONS
==========================================================*/

@keyframes floatBook1{

0%{

transform:translateY(0px) rotate(-10deg);

}

50%{

transform:translateY(-16px) rotate(-7deg);

}

100%{

transform:translateY(0px) rotate(-10deg);

}

}



@keyframes floatBook2{

0%{

transform:translateY(0px) rotate(10deg);

}

50%{

transform:translateY(16px) rotate(13deg);

}

100%{

transform:translateY(0px) rotate(10deg);

}

}



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

@media(max-width:992px){

.hero-container{

grid-template-columns:1fr;

text-align:center;

}

.hero-left p{

margin:auto;

}

.hero-buttons{

justify-content:center;

}

.hero-features{

justify-content:center;

}

.books-wrapper{

margin-top:40px;

}

}



@media(max-width:768px){

.header .btn-primary{

display:none;

}

.navbar{

display:none;

}

.mobile-menu{

display:block;

}

.hero{

padding-top:130px;

}

.books-wrapper{

width:320px;

height:300px;

}

.book{

width:160px;

}

.gita-book{

top:60px;

}

.ai-book{

top:10px;

}

.hero-features{

gap:18px;

}

}



@media(max-width:480px){

.hero{

padding-bottom:80px;

}

.books-wrapper{

width:260px;

height:240px;

}

.book{

width:130px;

}

.hero-features{

flex-direction:column;

align-items:center;

gap:15px;

}

.hero-buttons{

flex-direction:column;

}

}
/*==========================================================
    WHY PARENTS SECTION
==========================================================*/

.why-us{

    background:#ffffff;

    position:relative;

}

.feature-grid{

    display:grid;

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

    gap:30px;

}

.feature-card{

    background:#ffffff;

    padding:40px 30px;

    border-radius:22px;

    text-align:center;

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

    transition:.35s;

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

}

.feature-card:hover{

    transform:translateY(-12px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.feature-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:2.2rem;

    border-radius:50%;

    background:linear-gradient(135deg,#eef5ff,#fff4dc);

}

.feature-card h3{

    margin-bottom:15px;

}

.feature-card p{

    margin-top:0;

}


/*==========================================================
    BOOKS SECTION
==========================================================*/

.books{

    background:#F8FBFF;

}

.book-row{

    display:grid;

    grid-template-columns:420px 1fr;

    align-items:center;

    gap:70px;

    margin-bottom:100px;

}

.book-row:last-child{

    margin-bottom:0;

}

.book-row.reverse{

    grid-template-columns:1fr 420px;

}

.book-row.reverse .book-image{

    order:2;

}

.book-row.reverse .book-content{

    order:1;

}

.book-image{

    display:flex;

    justify-content:center;

}

.book-image img{

    width:320px;

    border-radius:18px;

    box-shadow:
    0 30px 60px rgba(0,0,0,.18);

    transition:.4s;

}

.book-image img:hover{

    transform:translateY(-10px) rotate(-2deg);

}

.book-content h2{

    margin:20px 0;

}

.book-content p{

    max-width:600px;

}

.book-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

    margin-top:35px;

}


/*==========================================================
    TRUST STRIP
==========================================================*/

.trust-strip{

    margin-top:90px;

    display:grid;

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

    gap:25px;

    text-align:center;

}

.trust-strip div{

    background:white;

    padding:30px;

    border-radius:18px;

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

}

.trust-strip h3{

    color:var(--secondary);

    font-size:2rem;

    margin-bottom:8px;

}

.trust-strip p{

    margin:0;

    color:var(--text);

    font-weight:700;

}


/*==========================================================
    BOOK TAG
==========================================================*/

.book-tag{

    display:inline-block;

    background:#FFF2D6;

    color:#C97B00;

    padding:8px 18px;

    border-radius:50px;

    font-size:.85rem;

    font-weight:700;

    letter-spacing:1px;

}


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

@media(max-width:1100px){

.feature-grid{

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

}

.book-row{

    grid-template-columns:1fr;

    text-align:center;

}

.book-row.reverse{

    grid-template-columns:1fr;

}

.book-row.reverse .book-image,

.book-row.reverse .book-content{

    order:unset;

}

.book-content p{

    margin:auto;

}

.book-buttons{

    justify-content:center;

}

.trust-strip{

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

}

}


@media(max-width:768px){

.feature-grid{

    grid-template-columns:1fr;

}

.feature-card{

    padding:35px 25px;

}

.book-image img{

    width:240px;

}

.trust-strip{

    grid-template-columns:1fr;

}

.book-buttons{

    flex-direction:column;

}

.book-buttons .btn-primary,

.book-buttons .btn-secondary{

    width:100%;

}

}


@media(max-width:480px){

.book-image img{

    width:200px;

}

.feature-icon{

    width:70px;

    height:70px;

    font-size:1.8rem;

}

.trust-strip h3{

    font-size:1.6rem;

}

}
/*==========================================================
                    ABOUT SECTION
==========================================================*/

.about{

    background:#ffffff;

}

.about .container{

    display:grid;

    grid-template-columns:380px 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:30px;

    box-shadow:0 30px 70px rgba(0,0,0,.18);

    transition:.4s;

}

.about-image img:hover{

    transform:translateY(-8px);

}

.section-tag{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#FFF4D8;

    color:#C27C00;

    font-size:.8rem;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.about-content h2{

    margin-bottom:20px;

}

.about-content h2 span{

    color:var(--secondary);

}

.about-content p{

    margin-bottom:18px;

}

.author-highlights{

    display:grid;

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

    gap:15px;

    margin:35px 0;

}

.author-highlights div{

    background:#F8FBFF;

    padding:18px;

    border-radius:16px;

    text-align:center;

    font-weight:700;

    box-shadow:0 8px 20px rgba(0,0,0,.05);

}

.author-highlights i{

    display:block;

    font-size:1.5rem;

    color:var(--secondary);

    margin-bottom:10px;

}

.about-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}



/*==========================================================
                LEARNING HUB
==========================================================*/

.resources{

    background:#FFFDF6;

}

.resource-grid{

    display:grid;

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

    gap:30px;

}

.resource-card{

    background:white;

    padding:35px;

    border-radius:22px;

    text-align:center;

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

    transition:.35s;

}

.resource-card:hover{

    transform:translateY(-10px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.resource-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:linear-gradient(135deg,#EEF6FF,#FFF4D9);

    font-size:2rem;

}

.resource-card h3{

    margin-bottom:15px;

}

.coming{

    display:inline-block;

    margin-top:25px;

    padding:8px 18px;

    background:#EEF7FF;

    color:var(--primary);

    border-radius:999px;

    font-size:.85rem;

    font-weight:700;

}



/*==========================================================
                TESTIMONIALS
==========================================================*/

.testimonials{

    background:white;

}

.testimonial-grid{

    display:grid;

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

    gap:30px;

}

.testimonial-card{

    background:#ffffff;

    padding:35px;

    border-radius:22px;

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

    transition:.35s;

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.12);

}

.testimonial-card p{

    margin:25px 0;

    font-style:italic;

    color:#555;

}

.testimonial-card h4{

    color:var(--secondary);

    font-weight:700;

}

.review-button{

    margin-top:55px;

    text-align:center;

}



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

@media(max-width:1100px){

.about .container{

    grid-template-columns:1fr;

    text-align:center;

}

.about-image{

    max-width:350px;

    margin:auto;

}

.author-highlights{

    grid-template-columns:1fr 1fr 1fr;

}

.about-buttons{

    justify-content:center;

}

.resource-grid{

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

}

.testimonial-grid{

    grid-template-columns:1fr;

}

}

@media(max-width:768px){

.author-highlights{

    grid-template-columns:1fr;

}

.resource-grid{

    grid-template-columns:1fr;

}

.resource-card{

    padding:30px;

}

.about-buttons{

    flex-direction:column;

}

.about-buttons .btn-primary,

.about-buttons .btn-secondary{

    width:100%;

}

}

@media(max-width:480px){

.about{

    text-align:center;

}

.about-content h2{

    font-size:2rem;

}

.resource-icon{

    width:70px;

    height:70px;

    font-size:1.7rem;

}

}
/*==========================================================
                    FAQ SECTION
==========================================================*/

.faq{

    background:#F8FBFF;

}

.faq-container{

    max-width:900px;

    margin:auto;

}

.faq-item{

    background:#fff;

    border-radius:18px;

    margin-bottom:20px;

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

    overflow:hidden;

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:24px 30px;

    text-align:left;

    font-size:1.05rem;

    font-weight:700;

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

    color:var(--primary);

    cursor:pointer;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.faq-question span{

    font-size:1.4rem;

    color:var(--secondary);

}

.faq-answer{

    max-height:0;

    overflow:hidden;

    transition:max-height .4s ease;

    padding:0 30px;

}

.faq-item.active .faq-answer{

    max-height:250px;

    padding:0 30px 25px;

}



/*==========================================================
                FINAL CTA
==========================================================*/

.final-cta{

    background:
    linear-gradient(135deg,
    var(--primary),
    #304FB5);

    color:white;

    text-align:center;

    position:relative;

    overflow:hidden;

}

.final-cta h2{

    color:white;

    font-size:2.7rem;

}

.final-cta p{

    color:#EAEAEA;

    font-size:1.15rem;

    margin:20px 0 40px;

}

.cta-buttons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.final-cta .btn-secondary{

    background:white;

    color:var(--primary);

}



/*==========================================================
                    FOOTER
==========================================================*/

footer{

    background:#0E1B46;

    color:#fff;

    padding:80px 0 20px;

}

.footer-grid{

    display:grid;

    grid-template-columns:2fr 1fr 1fr 1fr;

    gap:40px;

    margin-bottom:50px;

}

footer h3,

footer h4{

    color:#fff;

    margin-bottom:18px;

}

footer p{

    color:#C7D0EA;

}

footer ul{

    padding:0;

}

footer li{

    margin-bottom:12px;

}

footer a{

    color:#C7D0EA;

    transition:.3s;

}

footer a:hover{

    color:white;

}

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.12);

    padding-top:20px;

    text-align:center;

}

.footer-bottom p{

    margin:8px 0;

    color:#B8C4E0;

}



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

.whatsapp{

    position:fixed;

    right:25px;

    bottom:25px;

    width:65px;

    height:65px;

    border-radius:50%;

    background:#25D366;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:2rem;

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

    z-index:999;

    transition:.35s;

}

.whatsapp:hover{

    transform:scale(1.08);

}



/*==========================================================
            SCROLL TO TOP BUTTON
==========================================================*/

.scroll-top{

    position:fixed;

    right:25px;

    bottom:105px;

    width:55px;

    height:55px;

    border-radius:50%;

    background:var(--secondary);

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:1.2rem;

    cursor:pointer;

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:998;

}

.scroll-top.show{

    opacity:1;

    visibility:visible;

}



/*==========================================================
            FADE-IN ANIMATION
==========================================================*/

.fade-up{

    opacity:0;

    transform:translateY(40px);

    transition:all .8s ease;

}

.fade-up.show{

    opacity:1;

    transform:translateY(0);

}



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

@media(max-width:992px){

.footer-grid{

grid-template-columns:1fr 1fr;

}

}

@media(max-width:768px){

.final-cta h2{

font-size:2rem;

}

.cta-buttons{

flex-direction:column;

}

.cta-buttons .btn-primary,

.cta-buttons .btn-secondary{

width:100%;

}

.footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.whatsapp{

width:58px;

height:58px;

font-size:1.8rem;

right:18px;

bottom:18px;

}

.scroll-top{

right:18px;

bottom:90px;

}

}

@media(max-width:480px){

.faq-question{

padding:18px;

font-size:.95rem;

}

.faq-answer{

padding:0 18px;

}

.faq-item.active .faq-answer{

padding:0 18px 18px;

}

}
/*==========================================================
                PREMIUM ANIMATIONS
==========================================================*/

/* Fade In */

@keyframes fadeIn{

0%{

opacity:0;

transform:translateY(30px);

}

100%{

opacity:1;

transform:translateY(0);

}

}


/* Slide Left */

@keyframes slideLeft{

0%{

opacity:0;

transform:translateX(-60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}


/* Slide Right */

@keyframes slideRight{

0%{

opacity:0;

transform:translateX(60px);

}

100%{

opacity:1;

transform:translateX(0);

}

}


/* Scale */

@keyframes scaleIn{

0%{

opacity:0;

transform:scale(.8);

}

100%{

opacity:1;

transform:scale(1);

}

}


/* Floating */

@keyframes floating{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0px);

}

}


/* Pulse */

@keyframes pulse{

0%{

transform:scale(1);

}

50%{

transform:scale(1.05);

}

100%{

transform:scale(1);

}

}


/*==========================================================
PAGE LOAD
==========================================================*/

.hero-left{

animation:slideLeft 1s ease;

}

.hero-right{

animation:slideRight 1s ease;

}

.section-title{

animation:fadeIn .8s ease;

}


/*==========================================================
BUTTON EFFECT
==========================================================*/

.btn-primary{

position:relative;

overflow:hidden;

}

.btn-primary::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:

linear-gradient(

90deg,

transparent,

rgba(255,255,255,.35),

transparent

);

transition:.6s;

}

.btn-primary:hover::before{

left:100%;

}


/*==========================================================
CARD HOVER
==========================================================*/

.feature-card,

.resource-card,

.testimonial-card,

.card{

overflow:hidden;

position:relative;

}

.feature-card::before,

.resource-card::before,

.testimonial-card::before{

content:"";

position:absolute;

top:0;

left:0;

height:4px;

width:0;

background:var(--secondary);

transition:.35s;

}

.feature-card:hover::before,

.resource-card:hover::before,

.testimonial-card:hover::before{

width:100%;

}


/*==========================================================
BOOK IMAGE
==========================================================*/

.book-image img{

animation:floating 5s ease-in-out infinite;

}


/*==========================================================
TRUST STRIP
==========================================================*/

.trust-strip div{

transition:.35s;

}

.trust-strip div:hover{

transform:translateY(-10px);

}


/*==========================================================
SOCIAL ICONS
==========================================================*/

footer i{

transition:.3s;

}

footer i:hover{

color:var(--secondary);

}


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

.logo{

transition:.35s;

}

.logo:hover{

transform:scale(1.05);

}


/*==========================================================
TEXT SELECTION
==========================================================*/

::selection{

background:var(--secondary);

color:white;

}


/*==========================================================
SMOOTH IMAGES
==========================================================*/

img{

user-select:none;

-webkit-user-drag:none;

}


/*==========================================================
SCROLLBAR
==========================================================*/

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#EDF2F7;

}

::-webkit-scrollbar-thumb{

background:var(--primary);

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:var(--primary-dark);

}


/*==========================================================
REDUCED MOTION
==========================================================*/

@media (prefers-reduced-motion: reduce){

*{

animation:none !important;

transition:none !important;

scroll-behavior:auto !important;

}

}