/*==================================================
  YOUR ENGLISH MENTOR - STYLE.CSS
  Part 1
==================================================*/

/*========================
GOOGLE FONT
=========================*/

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

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

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Poppins',sans-serif;
    background:#f5f7fb;
    color:#333;
    overflow-x:hidden;
    line-height:1.6;
}

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

:root{

--primary:#0B2C6D;
--secondary:#FFC107;
--dark:#06173D;
--light:#ffffff;
--gray:#777;
--bg:#F5F7FB;

--radius:15px;

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

}

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

a{
    text-decoration:none;
}

img{
    max-width:100%;
}

.section-title{

font-size:42px;

font-weight:800;

color:var(--primary);

margin-bottom:20px;

}

.sub-heading{

display:inline-block;

padding:8px 20px;

background:var(--secondary);

border-radius:50px;

font-size:14px;

font-weight:700;

margin-bottom:15px;

}

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

.btn{

border-radius:50px;

padding:14px 32px;

font-weight:600;

transition:.3s;

}

.btn-warning{

background:var(--secondary);

border:none;

}

.btn-warning:hover{

transform:translateY(-3px);

box-shadow:var(--shadow);

}

.btn-primary{

background:var(--primary);

border:none;

}

.btn-primary:hover{

background:#082354;

}

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

#loader{

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:#fff;

display:flex;

justify-content:center;

align-items:center;

z-index:99999;

}

/*========================
TOP BAR
=========================*/

.top-bar{

background:var(--dark);

color:#fff;

padding:8px 0;

font-size:14px;

}

.top-bar i{

margin-right:5px;

color:var(--secondary);

}

.social-icons a{

color:#fff;

margin-left:15px;

font-size:18px;

transition:.3s;

}

.social-icons a:hover{

color:var(--secondary);

}

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

.custom-navbar{

background:var(--primary);

padding:15px 0;

box-shadow:0 5px 20px rgba(0,0,0,.12);

}

.navbar-brand{

display:flex;

align-items:center;

}

.brand-text{

margin-left:10px;

}

.brand-text h4{

color:#fff;

font-weight:700;

margin:0;

font-size:22px;

}

.brand-text small{

color:#FFC107;

}

.nav-link{

color:#fff!important;

margin:0 10px;

font-weight:500;

transition:.3s;

position:relative;

}

.nav-link::after{

content:"";

position:absolute;

left:0;

bottom:-5px;

width:0;

height:2px;

background:var(--secondary);

transition:.3s;

}

.nav-link:hover::after{

width:100%;

}

.nav-link:hover{

color:var(--secondary)!important;

}

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

.hero{

background:
linear-gradient(135deg,#0B2C6D,#02173f);

padding:90px 0;

color:#fff;

}

.hero-tag{

display:inline-block;

background:#ffffff20;

padding:10px 20px;

border-radius:30px;

margin-bottom:25px;

font-weight:600;

}

.hero h1{

font-size:58px;

font-weight:800;

line-height:70px;

margin-bottom:25px;

}

.hero h1 span{

color:var(--secondary);

}

.hero p{

font-size:18px;

margin-bottom:30px;

max-width:550px;

}

.hero-buttons .btn{

margin-right:15px;

margin-bottom:15px;

}

.hero-features{

display:grid;

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

gap:15px;

margin-top:40px;

}

.hero-features div{

background:#ffffff15;

padding:15px;

border-radius:12px;

font-weight:500;

}

.hero-features i{

color:var(--secondary);

margin-right:10px;

}

.hero-image{

max-height:600px;

animation:float 3s ease-in-out infinite;

}

/*========================
SLIDER
=========================*/

.slider-section{

background:#fff;

padding:30px 0;

}

#mainSlider{

border-radius:20px;

overflow:hidden;

box-shadow:var(--shadow);

}

#mainSlider img{

height:500px;

object-fit:cover;

}

/*========================
ANIMATION
=========================*/

@keyframes float{

0%{

transform:translateY(0);

}

50%{

transform:translateY(-12px);

}

100%{

transform:translateY(0);

}

}

/*========================
UTILITY
=========================*/

.shadow-box{

background:#fff;

padding:30px;

border-radius:15px;

box-shadow:var(--shadow);

}

.text-primary{

color:var(--primary)!important;

}

.text-warning{

color:var(--secondary)!important;

}

.bg-primary{

background:var(--primary)!important;

}

.bg-warning{

background:var(--secondary)!important;

}

/*==================================================
  YOUR ENGLISH MENTOR - STYLE.CSS
  Part 2
==================================================*/

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

.about{
    background:#ffffff;
    padding:80px 0;
}

.about img{
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.about p{
    color:#666;
    font-size:17px;
    line-height:1.9;
}

.about-list{
    list-style:none;
    padding:0;
    margin-top:20px;
}

.about-list li{
    padding:10px 0;
    font-size:16px;
    font-weight:500;
    color:#333;
}

.about-list li::before{
    content:"✔";
    color:#28a745;
    font-weight:bold;
    margin-right:10px;
}

/*========================
FEATURES
=========================*/

.features{
    background:#f8f9fc;
    padding:80px 0;
}

.feature-box{
    background:#fff;
    border-radius:18px;
    padding:35px 25px;
    text-align:center;
    transition:.4s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
    height:100%;
}

.feature-box:hover{
    transform:translateY(-10px);
    box-shadow:0 18px 40px rgba(0,0,0,.15);
}

.feature-box i{
    width:80px;
    height:80px;
    line-height:80px;
    border-radius:50%;
    background:#0B2C6D;
    color:#fff;
    font-size:34px;
    margin-bottom:20px;
}

.feature-box h4{
    font-size:22px;
    font-weight:700;
    margin-bottom:15px;
}

.feature-box p{
    color:#777;
}

/*========================
COURSES
=========================*/

.courses{
    background:#ffffff;
    padding:80px 0;
}

.course-card{
    background:#fff;
    border-radius:20px;
    padding:35px;
    transition:.4s;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    height:100%;
}

.course-card:hover{
    transform:translateY(-12px);
}

.course-icon{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:36px;
    margin-bottom:25px;
}

.course-card h3{
    font-size:26px;
    font-weight:700;
    margin-bottom:15px;
}

.course-card p{
    color:#666;
    margin-bottom:20px;
}

.course-card ul{
    list-style:none;
    padding:0;
    margin-bottom:25px;
}

.course-card ul li{
    padding:8px 0;
    color:#444;
}

.course-card .btn{
    border-radius:40px;
}

/*========================
WHY CHOOSE US
=========================*/

.why-us{
    background:#f5f7fb;
    padding:90px 0;
}

.why-us img{
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.why-box{
    background:#fff;
    border-radius:18px;
    padding:25px;
    text-align:center;
    transition:.4s;
    margin-bottom:25px;
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.why-box:hover{
    background:#0B2C6D;
    color:#fff;
    transform:translateY(-8px);
}

.why-box i{
    font-size:42px;
    color:#FFC107;
    margin-bottom:15px;
}

.why-box:hover i{
    color:#fff;
}

.why-box h5{
    font-weight:700;
    margin:0;
}

/*========================
COUNTER
=========================*/

.counter-section{
    background:linear-gradient(135deg,#0B2C6D,#02173f);
    padding:80px 0;
    color:#fff;
}

.counter-box{
    padding:20px;
}

.counter-box h2{
    font-size:52px;
    font-weight:800;
    color:#FFC107;
    margin-bottom:10px;
}

.counter-box p{
    font-size:18px;
    margin:0;
    font-weight:500;
}

/*========================
ACHIEVEMENTS
=========================*/

.achievements{
    background:#ffffff;
    padding:80px 0;
}

.achievement-card{
    background:#fff;
    border-radius:20px;
    overflow:hidden;
    transition:.4s;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    text-align:center;
    height:100%;
}

.achievement-card:hover{
    transform:translateY(-10px);
}

.achievement-card img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.achievement-card h4{
    margin-top:20px;
    font-weight:700;
}

.achievement-card p{
    padding:0 20px 25px;
    color:#666;
}

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

.about,
.features,
.courses,
.why-us,
.counter-section,
.achievements{
    position:relative;
}

/*========================
HOVER EFFECTS
=========================*/

.course-card,
.feature-box,
.achievement-card,
.why-box{
    transition:all .35s ease;
}


/*==================================================
  YOUR ENGLISH MENTOR - STYLE.CSS
  Part 3
==================================================*/

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

.testimonials{
    padding:90px 0;
    background:#f8f9fc;
}

.testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    text-align:center;
    box-shadow:0 12px 30px rgba(0,0,0,.08);
    transition:.35s;
    height:100%;
}

.testimonial-card:hover{
    transform:translateY(-10px);
}

.student-img{
    width:100px;
    height:100px;
    border-radius:50%;
    object-fit:cover;
    border:5px solid #FFC107;
    margin-bottom:20px;
}

.testimonial-card h5{
    font-weight:700;
    margin-bottom:10px;
}

.testimonial-card p{
    color:#666;
    margin-top:15px;
    line-height:1.8;
}

/*========================
GALLERY
=========================*/

.gallery{
    padding:90px 0;
    background:#fff;
}

.gallery-item{
    overflow:hidden;
    border-radius:20px;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.gallery-item img{
    width:100%;
    height:260px;
    object-fit:cover;
    transition:.5s;
}

.gallery-item:hover img{
    transform:scale(1.08);
}

/*========================
DEMO FORM
=========================*/

.demo-form{
    background:#f5f7fb;
    padding:90px 0;
}

.form-box{
    background:#fff;
    padding:40px;
    border-radius:20px;
    box-shadow:0 15px 35px rgba(0,0,0,.08);
}

.form-control,
.form-select{
    height:55px;
    border-radius:12px;
    border:1px solid #ddd;
}

.form-control:focus,
.form-select:focus{
    border-color:#0B2C6D;
    box-shadow:none;
}

textarea.form-control{
    height:130px;
    resize:none;
}

/*========================
FAQ
=========================*/

.faq{
    padding:90px 0;
    background:#fff;
}

.accordion-item{
    border:none;
    margin-bottom:15px;
    border-radius:15px!important;
    overflow:hidden;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.accordion-button{
    font-weight:600;
    padding:20px;
}

.accordion-button:not(.collapsed){
    background:#0B2C6D;
    color:#fff;
}

.accordion-button:focus{
    box-shadow:none;
}

.accordion-body{
    padding:20px;
    color:#666;
}

/*========================
YOUTUBE
=========================*/

.youtube-section{
    padding:90px 0;
    background:#f8f9fc;
}

.video-box{
    border-radius:20px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.1);
}

/*========================
GOOGLE MAP
=========================*/

.map-section iframe{
    width:100%;
    height:450px;
    border:0;
}

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

.final-cta{
    background:linear-gradient(135deg,#0B2C6D,#02173f);
    color:#fff;
    text-align:center;
    padding:80px 20px;
}

.final-cta h2{
    font-size:42px;
    font-weight:800;
    margin-bottom:20px;
}

.final-cta p{
    font-size:18px;
    max-width:700px;
    margin:0 auto 30px;
}

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

.footer{
    background:#06173D;
    color:#fff;
    padding:70px 0 20px;
}

.footer-title{
    color:#FFC107;
    font-weight:700;
    margin-bottom:20px;
}

.footer p{
    color:#d8d8d8;
    line-height:1.9;
}

.footer-links{
    list-style:none;
    padding:0;
}

.footer-links li{
    margin-bottom:12px;
}

.footer-links a{
    color:#fff;
    transition:.3s;
}

.footer-links a:hover{
    color:#FFC107;
    padding-left:8px;
}

.footer-social a{
    width:42px;
    height:42px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#0B2C6D;
    color:#fff;
    margin-right:10px;
    transition:.3s;
}

.footer-social a:hover{
    background:#FFC107;
    color:#000;
}

.footer hr{
    border-color:rgba(255,255,255,.15);
}

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

.floating-whatsapp,
.floating-call{

position:fixed;
right:20px;

width:60px;
height:60px;

border-radius:50%;

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

font-size:26px;

color:#fff;

text-decoration:none;

z-index:9999;

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

transition:.3s;

}

.floating-whatsapp{

bottom:90px;
background:#25D366;

}

.floating-call{

bottom:20px;
background:#ff5722;

}

.floating-whatsapp:hover,
.floating-call:hover{

transform:scale(1.08);
color:#fff;

}

/*========================
SCROLL TOP
=========================*/

#scrollTop{

position:fixed;

left:20px;

bottom:20px;

width:55px;
height:55px;

border:none;

border-radius:50%;

background:#0B2C6D;

color:#fff;

font-size:20px;

display:none;

cursor:pointer;

transition:.3s;

z-index:9999;

}

#scrollTop:hover{

background:#FFC107;
color:#000;

}

/*==================================================
 YOUR ENGLISH MENTOR
 STYLE.CSS - PART 4
 Responsive + Animation + Utilities
==================================================*/

/*=========================
SMOOTH TRANSITION
=========================*/

*{
transition:all .3s ease;
}

/*=========================
IMAGE EFFECT
=========================*/

img{

max-width:100%;

height:auto;

display:block;

}

img:hover{

transform:scale(1.02);

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#f1f1f1;

}

::-webkit-scrollbar-thumb{

background:#0B2C6D;

border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

background:#FFC107;

}

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

::selection{

background:#FFC107;

color:#000;

}

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

.spinner-border{

width:3.5rem;

height:3.5rem;

}

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

.btn{

overflow:hidden;

position:relative;

}

.btn:before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

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

transition:.5s;

}

.btn:hover:before{

left:100%;

}

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

.feature-box,
.course-card,
.why-box,
.testimonial-card,
.achievement-card{

cursor:pointer;

}

.feature-box:hover,
.course-card:hover,
.why-box:hover,
.testimonial-card:hover,
.achievement-card:hover{

transform:translateY(-10px);

}

/*=========================
INPUT STYLE
=========================*/

input,
textarea,
select{

outline:none;

}

input:focus,
textarea:focus,
select:focus{

border-color:#0B2C6D!important;

box-shadow:0 0 10px rgba(11,44,109,.15)!important;

}

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

section{

position:relative;

overflow:hidden;

}

/*=========================
UTILITY CLASSES
=========================*/

.radius{

border-radius:20px;

}

.shadow{

box-shadow:0 15px 35px rgba(0,0,0,.08)!important;

}

.text-blue{

color:#0B2C6D;

}

.text-yellow{

color:#FFC107;

}

.bg-blue{

background:#0B2C6D;

}

.bg-yellow{

background:#FFC107;

}

/*=========================
ANIMATION
=========================*/

.fade-up{

animation:fadeUp .8s ease;

}

@keyframes fadeUp{

0%{

opacity:0;

transform:translateY(40px);

}

100%{

opacity:1;

transform:translateY(0);

}

}

.zoom{

animation:zoom .8s;

}

@keyframes zoom{

0%{

transform:scale(.8);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

.rotate:hover{

transform:rotate(3deg);

}

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

@media(max-width:1200px){

.hero h1{

font-size:48px;

line-height:60px;

}

.section-title{

font-size:36px;

}

}

@media(max-width:992px){

.navbar{

padding:12px 0;

}

.hero{

padding:70px 0;

text-align:center;

}

.hero h1{

font-size:42px;

line-height:55px;

}

.hero-buttons{

margin-bottom:30px;

}

.hero-features{

grid-template-columns:1fr;

}

.about img{

margin-bottom:30px;

}

.section-title{

font-size:34px;

}

.footer{

text-align:center;

}

.footer-social{

margin-top:20px;

}

}

@media(max-width:768px){

.top-bar{

display:none;

}

.hero{

padding:60px 0;

}

.hero h1{

font-size:34px;

line-height:45px;

}

.hero p{

font-size:16px;

}

.hero-image{

margin-top:30px;

}

#mainSlider img{

height:250px;

}

.section-title{

font-size:30px;

}

.course-card{

margin-bottom:30px;

}

.counter-box h2{

font-size:38px;

}

.final-cta h2{

font-size:30px;

}

.form-box{

padding:25px;

}

}

@media(max-width:576px){

.hero{

padding:50px 0;

}

.hero-tag{

font-size:14px;

}

.hero h1{

font-size:28px;

line-height:38px;

}

.btn{

width:100%;

margin-bottom:15px;

}

.feature-box{

padding:25px;

}

.course-card{

padding:25px;

}

.testimonial-card{

padding:25px;

}

.floating-whatsapp,
.floating-call{

width:55px;

height:55px;

font-size:22px;

}

#scrollTop{

width:50px;

height:50px;

}

}

/*=========================
PRINT
=========================*/

@media print{

.navbar,
.footer,
.floating-whatsapp,
.floating-call,
#scrollTop{

display:none!important;

}

body{

background:#fff;

}

}