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

.hero-section{

padding:90px 0;

background:linear-gradient(135deg,#FFF8F8,#FFFFFF,#F5FAFF);

position:relative;

overflow:hidden;

}

.hero-content{

animation:fadeLeft .8s ease;

}

.hero-badge{

display:inline-block;

padding:10px 20px;

background:#FFE8E8;

color:#E53935;

border-radius:40px;

font-size:14px;

font-weight:600;

margin-bottom:25px;

}

.hero-content h1{

font-size:56px;

font-weight:800;

line-height:1.2;

color:#1F2937;

margin-bottom:25px;

}

.hero-content h1 span{

color:#E53935;

}

.hero-content p{

font-size:18px;

line-height:32px;

color:#666;

margin-bottom:35px;

max-width:620px;

}

.hero-btns{

display:flex;

gap:20px;

margin-bottom:35px;

}

.btn-trial{

background:#E53935;

color:#fff;

padding:15px 35px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-trial:hover{

background:#C62828;

color:#fff;

transform:translateY(-3px);

}

.btn-contact{

border:2px solid #E53935;

color:#E53935;

padding:15px 35px;

border-radius:50px;

font-weight:600;

transition:.3s;

}

.btn-contact:hover{

background:#E53935;

color:#fff;

}

.hero-features{

display:grid;

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

gap:15px;

margin-top:20px;

}

.hero-features div{

font-size:16px;

font-weight:500;

color:#444;

}

.hero-features i{

color:#E53935;

margin-right:8px;

}

@keyframes fadeLeft{

from{

opacity:0;

transform:translateX(-40px);

}

to{

opacity:1;

transform:translateX(0);

}

}

@media(max-width:991px){

.hero-section{

padding:70px 0;

}

.hero-content{

text-align:center;

}

.hero-content h1{

font-size:40px;

}

.hero-content p{

max-width:100%;

}

.hero-btns{

justify-content:center;

flex-wrap:wrap;

}

.hero-features{

grid-template-columns:1fr;

text-align:left;

margin-top:40px;

}

}

@media(max-width:576px){

.hero-content h1{

font-size:32px;

}

.hero-content p{

font-size:16px;

line-height:28px;

}

}



/*=========================
Hero Form
==========================*/

.hero-form{

background:#fff;

padding:40px;

border-radius:25px;

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

animation:fadeRight .8s ease;

position:relative;

z-index:10;

}

.hero-form h3{

font-size:30px;

font-weight:700;

margin-bottom:10px;

color:#1F2937;

}

.hero-form p{

color:#666;

margin-bottom:25px;

}

.hero-form .form-control,
.hero-form .form-select{

height:56px;

border-radius:14px;

border:1px solid #e5e7eb;

box-shadow:none;

}

.hero-form .form-control:focus,
.hero-form .form-select:focus{

border-color:#E53935;

box-shadow:0 0 0 4px rgba(229,57,53,.12);

}

.hero-submit{

width:100%;

height:58px;

border:none;

background:#E53935;

color:#fff;

font-size:17px;

font-weight:600;

border-radius:14px;

transition:.35s;

}

.hero-submit:hover{

background:#C62828;

transform:translateY(-2px);

}

@keyframes fadeRight{

from{

opacity:0;

transform:translateX(40px);

}

to{

opacity:1;

transform:translateX(0);

}

}



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

.about-section{

    padding:110px 0;

    background:#fff;

    position:relative;

    overflow:hidden;

}

/*=========================
Background Shapes
=========================*/

.about-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

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

    border-radius:50%;

    top:-180px;

    left:-180px;

}

.about-section::after{

    content:"";

    position:absolute;

    width:260px;

    height:260px;

    background:rgba(229,57,53,.04);

    border-radius:50%;

    right:-120px;

    bottom:-120px;

}

/*=========================
Content
=========================*/

.about-content{

    position:relative;

    z-index:2;

}

.about-content h2{

    font-size:48px;

    font-weight:800;

    color:#111827;

    line-height:1.25;

    margin:22px 0;

}

.about-content h2 span{

    display:block;

    color:#E53935;

}

.about-content p{

    font-size:17px;

    line-height:32px;

    color:#6B7280;

    margin-bottom:20px;

}

/*=========================
Features
=========================*/

.about-features{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:14px;

    background:#F8FAFC;

    padding:16px 18px;

    border-radius:14px;

    transition:.35s;

    border:1px solid #ECECEC;

}

.feature-item:hover{

    transform:translateY(-5px);

    border-color:#E53935;

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

}

.feature-item i{

    width:42px;

    height:42px;

    border-radius:50%;

    background:linear-gradient(135deg,#E53935,#C62828);

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:18px;

}

.feature-item span{

    font-weight:600;

    color:#111827;

    font-size:15px;

}

/*=========================
Buttons
=========================*/

.about-buttons{

    display:flex;

    gap:18px;

    margin-top:15px;

}

.primary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    background:linear-gradient(135deg,#E53935,#C62828);

    color:#fff;

    font-weight:600;

    transition:.35s;

}

.primary-btn:hover{

    transform:translateY(-4px);

    color:#fff;

    box-shadow:0 18px 35px rgba(229,57,53,.28);

}

.secondary-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    border-radius:50px;

    border:2px solid #111827;

    color:#111827;

    font-weight:600;

    transition:.35s;

}

.secondary-btn:hover{

    background:#111827;

    color:#fff;

}

/*=========================
Image
=========================*/

.about-image{

    position:relative;

    text-align:center;

}

.about-image img{

    width:100%;

    max-width:540px;

    border-radius:28px;

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

    transition:.4s;

}

.about-image:hover img{

    transform:translateY(-10px) scale(1.02);

}

/* Floating Badge */

.about-image::before{

    content:"10K+ Students";

    position:absolute;

    left:-20px;

    top:35px;

    background:#111827;

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

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

}

.about-image::after{

    content:"500+ Tutors";

    position:absolute;

    right:-20px;

    bottom:35px;

    background:#E53935;

    color:#fff;

    padding:14px 22px;

    border-radius:14px;

    font-size:15px;

    font-weight:700;

    box-shadow:0 15px 30px rgba(229,57,53,.25);

}

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

@media(max-width:991px){

.about-section{

padding:80px 0;

}

.about-content h2{

font-size:38px;

}

.about-features{

grid-template-columns:1fr;

}

.about-buttons{

flex-wrap:wrap;

}

.about-image{

margin-top:40px;

}

.about-image::before,
.about-image::after{

display:none;

}

}

@media(max-width:576px){

.about-content h2{

font-size:30px;

}

.about-content p{

font-size:15px;

line-height:28px;

}

.primary-btn,
.secondary-btn{

width:100%;

}

}





/*====================================
WHY LEARNING SECTION
====================================*/

.why-learning{
    position:relative;
    padding:110px 0;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff,#fff8f8);
}

/* Background */

.shape{
    position:absolute;
    border-radius:50%;
    filter:blur(100px);
    z-index:0;
}

.shape-1{
    width:260px;
    height:260px;
    background:#ff4b5c;
    top:-80px;
    left:-80px;
    opacity:.12;
}

.shape-2{
    width:220px;
    height:220px;
    background:#3b82f6;
    right:-60px;
    top:180px;
    opacity:.10;
}

.shape-3{
    width:280px;
    height:280px;
    background:#f59e0b;
    bottom:-120px;
    left:45%;
    opacity:.08;
}

/* Heading */

.why-heading{
    position:relative;
    z-index:2;
    max-width:760px;
    margin:auto;
}

.mini-title{

display:inline-flex;

align-items:center;

gap:8px;

padding:10px 22px;

background:#fff;

border-radius:50px;

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

color:#e53935;

font-weight:600;

margin-bottom:20px;

}

.why-heading h2{

font-size:52px;

font-weight:800;

color:#1f2937;

margin-bottom:18px;

}

.why-heading h2 span{

color:#e53935;

}

.why-heading p{

font-size:18px;

line-height:32px;

color:#666;

}

/* Cards */

.feature-card{

position:relative;

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

backdrop-filter:blur(18px);

border-radius:24px;

padding:35px;

height:100%;

overflow:hidden;

transition:.4s;

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

box-shadow:0 20px 45px rgba(0,0,0,.06);

z-index:2;

}

.feature-card::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:100%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,.45),
transparent
);

transition:.8s;

}

.feature-card:hover::before{

left:120%;

}

.feature-card:hover{

transform:translateY(-12px);

box-shadow:0 35px 70px rgba(229,57,53,.15);

}

/* Icon */

.feature-icon{

width:82px;

height:82px;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

margin-bottom:25px;

transition:.35s;

}

.feature-card:hover .feature-icon{

transform:rotate(-10deg) scale(1.1);

}

.red{

background:linear-gradient(135deg,#ff5a5f,#ff2f45);

}

.blue{

background:linear-gradient(135deg,#4f8cff,#2563eb);

}

.green{

background:linear-gradient(135deg,#22c55e,#16a34a);

}

.orange{

background:linear-gradient(135deg,#ff9800,#f97316);

}

.purple{

background:linear-gradient(135deg,#9b5cf6,#7c3aed);

}

.cyan{

background:linear-gradient(135deg,#06b6d4,#0891b2);

}

/* Text */

.feature-text h4{

font-size:24px;

font-weight:700;

margin-bottom:12px;

color:#1f2937;

}

.feature-text p{

font-size:16px;

line-height:28px;

color:#666;

margin:0;

}

/* Floating Icons */

.floating-icons{

position:absolute;

left:0;

top:0;

width:100%;

height:100%;

pointer-events:none;

}

.icon{

position:absolute;

font-size:40px;

color:rgba(229,57,53,.08);

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

}

.i1{

left:6%;

top:20%;

}

.i2{

right:8%;

top:14%;

animation-delay:1s;

}

.i3{

left:14%;

bottom:10%;

animation-delay:2s;

}

.i4{

right:20%;

bottom:14%;

animation-delay:3s;

}

.i5{

left:48%;

top:8%;

animation-delay:4s;

}

.i6{

right:4%;

bottom:45%;

animation-delay:5s;

}

@keyframes floating{

50%{

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

}

}

/* Responsive */

@media(max-width:1200px){

.why-heading h2{

font-size:42px;

}

}

@media(max-width:992px){

.why-learning{

padding:80px 0;

}

.why-heading h2{

font-size:34px;

}

.feature-card{

padding:28px;

}

}

@media(max-width:768px){

.feature-icon{

width:70px;

height:70px;

font-size:28px;

}

.feature-text h4{

font-size:21px;

}

}

@media(max-width:576px){

.why-heading h2{

font-size:28px;

line-height:40px;

}

.why-heading p{

font-size:16px;

line-height:28px;

}

.feature-card{

text-align:center;

padding:25px;

border-radius:20px;

}

.feature-icon{

margin:auto auto 20px;

}

}


/*========================================
ACADEMIC SUBJECTS
========================================*/

.subjects-section{

padding:110px 0;

background:#fff;

position:relative;

overflow:hidden;

}

.section-badge{

display:inline-flex;

align-items:center;

gap:10px;

padding:12px 22px;

background:#FFF1F1;

border-radius:50px;

color:#E53935;

font-weight:600;

margin-bottom:20px;

}

.section-badge i{

font-size:18px;

}

.subjects-section h2{

font-size:42px;

font-weight:800;

margin-bottom:20px;

color:#1F2937;

}

.subjects-section h2 span{

color:#ff7504;

}

.subjects-section p{

font-size:18px;

color:#666;

max-width:720px;

margin:auto;

line-height:32px;

}

.subject-card{

background:#fff;

border-radius:24px;

padding:30px;

height:100%;

box-shadow:0 15px 40px rgba(0,0,0,.06);

transition:.35s;

position:relative;

overflow:hidden;

border:1px solid #f2f2f2;

animation:fadeUp .7s ease;

}

.subject-card::before{

content:"";

position:absolute;

left:-100%;

top:0;

width:100%;

height:100%;

background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);

transition:.8s;
  
}

.subject-card:hover::before{

left:100%;

}

.subject-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(229,57,53,.15);

}

.subject-icon{

width:78px;

height:78px;

border-radius:20px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

margin-bottom:25px;

transition:.4s;

}

.subject-card:hover .subject-icon{

transform:rotate(-10deg) scale(1.1);

}


.subject-card h4{

font-size:24px;

font-weight:700;

margin-bottom:12px;

}

.subject-card p{

font-size:15px;

line-height:28px;

margin-bottom:20px;

color:#666;

}

.subject-card a{

display:inline-flex;

align-items:center;

gap:8px;

font-weight:600;

color:#E53935;

transition:.3s;

}

.subject-card:hover a{

gap:15px;

}

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(40px);

}

to{

opacity:1;

transform:translateY(0);

}

}

@media(max-width:992px){

.subjects-section{

padding:80px 0;

}

.subjects-section h2{

font-size:38px;

}

}

@media(max-width:576px){

.subjects-section h2{

font-size:30px;

}

.subject-card{

padding:24px;

}

.subject-icon{

width:68px;

height:68px;

font-size:28px;

}

}




/*==================================
Learning Process
==================================*/

.process-section{

padding:110px 0;

background:linear-gradient(180deg,#fff,#f8fbff);

position:relative;

overflow:hidden;

}

.process-wrapper{

position:relative;

display:grid;

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

gap:35px;

margin-top:70px;

}

.process-line{

position:absolute;

top:65px;

left:10%;

right:10%;

height:4px;

background:linear-gradient(90deg,#E53935,#2563EB,#10B981,#F97316);

border-radius:20px;

z-index:1;

}

.process-card{

position:relative;

z-index:2;

background:#fff;

border-radius:24px;

padding:35px 25px;

text-align:center;

box-shadow:0 20px 45px rgba(0,0,0,.06);

transition:.4s;

overflow:hidden;

}

.process-card:hover{

transform:translateY(-12px);

box-shadow:0 30px 70px rgba(229,57,53,.15);

}

.step-number{

position:absolute;

right:20px;

top:20px;

font-size:48px;

font-weight:800;

color:#f5f5f5;

line-height:1;

}

.process-icon{

width:90px;

height:90px;

margin:auto;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:36px;

color:#fff;

margin-bottom:25px;

transition:.4s;

}

.process-card:hover .process-icon{

transform:rotate(-10deg) scale(1.12);

}

.process-card h4{

font-size:24px;

font-weight:700;

margin-bottom:12px;

}

.process-card p{

font-size:15px;

line-height:28px;

color:#666;

margin:0;

}

/* Colors */

.trial{

background:linear-gradient(135deg,#EF4444,#DC2626);

}

.teacher{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

}

.learning{

background:linear-gradient(135deg,#10B981,#059669);

}

.success{

background:linear-gradient(135deg,#F97316,#EA580C);

}


@media(max-width:991px){

.process-wrapper{

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

}

.process-line{

display:none;

}

}

@media(max-width:576px){

.process-section{

padding:70px 0;

}

.process-wrapper{

grid-template-columns:1fr;

gap:25px;

}

.process-card{

padding:28px 20px;

}

.step-number{

font-size:36px;

}

.process-icon{

width:75px;

height:75px;

font-size:30px;

}

.process-card h4{

font-size:20px;

}

}

/*==================================
Parent Trust Section
==================================*/

.trust-section{

padding:120px 0;

background:#fff;

}

.trust-content h2{

font-size:52px;

font-weight:800;

line-height:1.2;

margin:20px 0;

color:#1F2937;

}

.trust-content h2 span{

color:#E53935;

}

.trust-content p{

font-size:18px;

line-height:32px;

color:#666;

margin-bottom:35px;

}

.trust-list{

padding:0;

margin:0 0 35px;

list-style:none;

}

.trust-list li{

display:flex;

align-items:center;

gap:12px;

margin-bottom:18px;

font-size:17px;

font-weight:500;

}

.trust-list i{

color:#22C55E;

font-size:20px;

}

.trust-btn{

display:inline-flex;

align-items:center;

gap:12px;

background:#E53935;

color:#fff;

padding:16px 34px;

border-radius:50px;

font-weight:600;

transition:.35s;

}

.trust-btn:hover{

gap:18px;

color:#fff;

background:#C62828;

}

.stat-card{

background:#fff;

padding:35px;

border-radius:24px;

text-align:center;

height:100%;

border:1px solid #eef2f7;

box-shadow:0 15px 40px rgba(0,0,0,.06);

transition:.4s;

}

.stat-card:hover{

transform:translateY(-12px);

box-shadow:0 25px 60px rgba(229,57,53,.15);

}

.stat-icon{

width:82px;

height:82px;

margin:auto;

border-radius:22px;

display:flex;

align-items:center;

justify-content:center;

font-size:34px;

color:#fff;

margin-bottom:20px;

transition:.35s;

}

.stat-card:hover .stat-icon{

transform:rotate(-10deg) scale(1.1);

}

.students{

background:linear-gradient(135deg,#EF4444,#DC2626);

}

.tutors{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

}

.countries{

background:linear-gradient(135deg,#10B981,#059669);

}

.rating{

background:linear-gradient(135deg,#F59E0B,#D97706);

}

.stat-card h3{

font-size:42px;

font-weight:800;

margin-bottom:10px;

color:#1F2937;

}

.stat-card p{

margin:0;

color:#666;

font-size:16px;

}

@media(max-width:991px){

.trust-section{

padding:80px 0;

}

.trust-content{

text-align:center;

margin-bottom:30px;

}

.trust-list{

display:inline-block;

text-align:left;

}

.trust-content h2{

font-size:36px;

}

}

@media(max-width:576px){

.trust-content h2{

font-size:30px;

}

.stat-card{

padding:28px;

}

.stat-card h3{

font-size:34px;

}

}


/*==================================
TUTORS
==================================*/

.tutors-section{

padding:110px 0;

background:#f8fbff;

}

.tutor-card{

position:relative;

background:#fff;

border-radius:28px;

padding:35px;

text-align:center;

border:1px solid #edf2f7;

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

transition:.35s;

height:100%;

overflow:hidden;

}

.tutor-card:hover{

transform:translateY(-12px);

box-shadow:0 28px 70px rgba(229,57,53,.15);

}

.verified-badge{

position:absolute;

top:20px;

right:20px;

padding:8px 16px;

background:#E53935;

color:#fff;

border-radius:30px;

font-size:13px;

font-weight:600;

display:flex;

align-items:center;

gap:6px;

}

.tutor-avatar{

width:110px;

height:110px;

margin:auto;

border-radius:50%;

background:linear-gradient(135deg,#EF4444,#DC2626);

display:flex;

align-items:center;

justify-content:center;

font-size:52px;

color:#fff;

margin-bottom:25px;

transition:.4s;

}

.blue{

background:linear-gradient(135deg,#2563EB,#1D4ED8);

}

.green{

background:linear-gradient(135deg,#16A34A,#15803D);

}

.tutor-card:hover .tutor-avatar{

transform:rotate(-10deg) scale(1.08);

}

.tutor-card h4{

font-size:26px;

font-weight:700;

margin-bottom:8px;

}

.designation{

display:block;

color:#E53935;

font-weight:600;

margin-bottom:25px;

}

.tutor-info{

list-style:none;

padding:0;

margin:0 0 30px;

text-align:left;

}

.tutor-info li{

display:flex;

gap:10px;

margin-bottom:14px;

font-size:15px;

color:#555;

}

.tutor-info i{

color:#E53935;

}

.tutor-btn{

display:block;

padding:15px;

border-radius:50px;

background:#E53935;

color:#fff;

font-weight:600;

transition:.35s;

}

.tutor-btn:hover{

background:#C62828;

color:#fff;

}

@media(max-width:576px){

.tutors-section{

padding:70px 0;

}

.tutor-card{

padding:28px;

}

.tutor-avatar{

width:90px;

height:90px;

font-size:42px;

}

}


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

.testimonial-section{

    padding:110px 0;

    background:#F9FAFB;

    overflow:hidden;

    position:relative;

}

/*========================*/

.testimonialSwiper{

    margin-top:70px;

    padding-bottom:70px;

}

/*========================*/

.testimonial-card{

    position:relative;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:28px;

    padding:40px;

    height:100%;

    transition:.35s;

    overflow:hidden;

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

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

/*========================*/

.testimonial-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#111827;

    transform:scaleX(0);

    transition:.35s;

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

/*========================*/

.quote-icon{

    width:65px;

    height:65px;

    border-radius:18px;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:25px;

    transition:.35s;

}

.testimonial-card:hover .quote-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*========================*/

.rating{

    display:flex;

    gap:6px;

    margin-bottom:20px;

}

.rating i{

    color:#FBBF24;

    font-size:18px;

}

/*========================*/

.testimonial-card p{

    color:#4B5563;

    line-height:32px;

    font-size:17px;

    margin-bottom:35px;

}

/*========================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:18px;

}

.user-avatar{

    width:68px;

    height:68px;

    border-radius:50%;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:22px;

    flex-shrink:0;

}

/*========================*/

.testimonial-user h5{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#111827;

}

.testimonial-user span{

    color:#6B7280;

    font-size:15px;

}

/*========================*/

.swiper-pagination{

    bottom:0!important;

}

.swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#D1D5DB;

    opacity:1;

}

.swiper-pagination-bullet-active{

    width:34px;

    border-radius:20px;

    background:#111827;

}

/*========================*/

.swiper-button-next,

.swiper-button-prev{

    color:#111827;

}

/*========================*/

@media(max-width:992px){

.testimonial-section{

padding:80px 0;

}

.testimonial-card{

padding:30px;

}

}

/*========================*/

@media(max-width:576px){

.testimonial-section{

padding:70px 0;

}

.testimonialSwiper{

margin-top:45px;

}

.testimonial-card{

padding:25px;

border-radius:22px;

}

.quote-icon{

width:55px;

height:55px;

font-size:22px;

}

.testimonial-card p{

font-size:15px;

line-height:28px;

}

.user-avatar{

width:58px;

height:58px;

font-size:18px;

}

.testimonial-user h5{

font-size:18px;

}

.testimonial-user span{

font-size:14px;

}

}


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

.testimonial-section{

    padding:100px 0;

    background:#F8FAFC;

    overflow:hidden;

    position:relative;

}

.testimonialSwiper{

    margin-top:60px;

    padding:15px 5px 70px;

}

.testimonialSwiper .swiper-wrapper{

    align-items:stretch;

}

.testimonialSwiper .swiper-slide{

    height:auto;

    display:flex;

}

/*========================*/

.testimonial-card{

    width:100%;

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:35px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    transition:.35s;

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

    position:relative;

    overflow:hidden;

}

.testimonial-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:4px;

    background:#111827;

    transform:scaleX(0);

    transition:.35s;

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

.testimonial-card:hover{

    transform:translateY(-10px);

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

}

/*========================*/

.quote-icon{

    width:60px;

    height:60px;

    border-radius:18px;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

    margin-bottom:20px;

    transition:.35s;

}

.testimonial-card:hover .quote-icon{

    transform:rotate(-10deg);

}

/*========================*/

.stars{

    display:flex;

    gap:5px;

    margin-bottom:18px;

}

.stars i{

    color:#FBBF24;

    font-size:17px;

}

/*========================*/

.testimonial-card p{

    color:#4B5563;

    line-height:30px;

    font-size:16px;

    margin-bottom:25px;

    flex:1;

}

/*========================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

    margin-top:20px;

}

.avatar{

    width:62px;

    height:62px;

    border-radius:50%;

    background:#fe923f;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    font-size:20px;

    transition:.35s;

    flex-shrink:0;

}

.testimonial-card:hover .avatar{

    transform:scale(1.08);

}

.testimonial-user h5{

    margin:0;

    font-size:19px;

    font-weight:700;

    color:#111827;

}

.testimonial-user span{

    color:#6B7280;

    font-size:14px;

}

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

.testimonial-navigation{

    margin-top:40px;

    display:flex;

    justify-content:center;

    gap:15px;

}

.testimonial-prev,

.testimonial-next{

    position:relative !important;

    inset:auto !important;

    width:50px;

    height:50px;

    border-radius:50%;

    background:#fff;

    border:1px solid #E5E7EB;

    color:#111827;

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

    transition:.3s;

}

.testimonial-prev:hover,

.testimonial-next:hover{

    background:#111827;

    color:#fff;

}

.testimonial-prev::after,

.testimonial-next::after{

    font-size:18px;

    font-weight:700;

}

/*==========================
Pagination
==========================*/

.testimonial-pagination{

    position:relative;

    margin-top:30px;

}

.testimonial-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#D1D5DB;

    opacity:1;

}

.testimonial-pagination .swiper-pagination-bullet-active{

    width:34px;

    border-radius:30px;

    background:#111827;

}

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

@media(max-width:991px){

.testimonial-section{

padding:80px 0;

}

.testimonial-card{

padding:28px;

}

}

@media(max-width:576px){

.testimonial-section{

padding:70px 0;

}

.testimonial-card{

padding:22px;

}

.quote-icon{

width:52px;

height:52px;

font-size:22px;

}

.avatar{

width:55px;

height:55px;

font-size:18px;

}

.testimonial-user h5{

font-size:17px;

}

.testimonial-card p{

font-size:15px;

line-height:28px;

}

.testimonial-prev,

.testimonial-next{

display:none;

}

}


.avatar{

width:65px;
height:65px;
border-radius:50%;
overflow:hidden;
flex-shrink:0;

}

.avatar img{

width:100%;
height:100%;
object-fit:cover;

}


/*=========================================
OUR TEACHING METHODOLOGY
=========================================*/

.methodology-section{

    padding:110px 0;

    background:#F8FAFC;

    position:relative;

    overflow:hidden;

}

/*==========================*/

.methodology-wrapper{

    position:relative;

    max-width:1100px;

    margin:auto;

}

/*==========================
Center Line
==========================*/

.method-line{

    position:absolute;

    left:50%;

    top:0;

    width:3px;

    height:100%;

    background:#E5E7EB;

    transform:translateX(-50%);

}

/*==========================*/

.method-item{

    position:relative;

    width:50%;

    padding:20px 45px;

    margin-bottom:35px;

}

.method-item.left{

    left:0;

}

.method-item.right{

    left:50%;

}

/*==========================
Timeline Dot
==========================*/

.method-item::before{

    content:"";

    position:absolute;

    top:50%;

    width:22px;

    height:22px;

    background:#111827;

    border:5px solid #fff;

    border-radius:50%;

    box-shadow:0 0 0 4px #E5E7EB;

    transform:translateY(-50%);

    z-index:10;

}

.method-item.left::before{

    right:-11px;

}

.method-item.right::before{

    left:-11px;

}

/*==========================*/

.method-card{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:22px;

    padding:28px;

    display:flex;

    gap:20px;

    align-items:flex-start;

    transition:.35s;

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

}

.method-card:hover{

    transform:translateY(-8px);

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

    border-color:#111827;

}

/*==========================*/

.method-icon{

    width:70px;

    height:70px;

    min-width:70px;

    border-radius:18px;

    background:#111827;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:30px;

    transition:.35s;

}

.method-card:hover .method-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*==========================*/

.method-content span{

    display:inline-block;

    font-size:13px;

    font-weight:600;

    color:#6B7280;

    margin-bottom:8px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.method-content h4{

    font-size:24px;

    font-weight:700;

    color:#111827;

    margin-bottom:12px;

}

.method-content p{

    margin:0;

    color:#4B5563;

    font-size:16px;

    line-height:30px;

}

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

@media(max-width:991px){

.method-line{

display:none;

}

.method-item{

width:100%;

left:0 !important;

padding:0;

margin-bottom:25px;

}

.method-item::before{

display:none;

}

.method-card{

padding:25px;

}

}

@media(max-width:576px){

.methodology-section{

padding:70px 0;

}

.method-card{

flex-direction:column;

text-align:center;

}

.method-icon{

margin:auto;

}

.method-content h4{

font-size:21px;

}

.method-content p{

font-size:15px;

line-height:28px;

}

}

/*==================================
Premium Background
==================================*/

.methodology-section{

    position:relative;

    overflow:hidden;

}

/* Floating Background Shapes */

.methodology-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(17,24,39,.03);

    top:-120px;

    left:-120px;

    filter:blur(10px);

}

.methodology-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(17,24,39,.03);

    right:-100px;

    bottom:-100px;

}

/*==================================
Animated Timeline
==================================*/

.method-line{

    background:linear-gradient(

        to bottom,

        #111827,

        #6B7280,

        #E5E7EB

    );

    animation:lineMove 6s linear infinite;

}

@keyframes lineMove{

0%{

background-position:0 0;

}

100%{

background-position:0 400px;

}

}

/*==================================
Card Hover
==================================*/

.method-card{

    position:relative;

}

.method-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#111827;

    transform:scaleX(0);

    transition:.35s;

}

.method-card:hover::before{

    transform:scaleX(1);

}

.method-card:hover{

    transform:translateY(-10px);

}

/*==================================
Icon
==================================*/

.method-icon{

    position:relative;

}

.method-icon::after{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:18px;

    border:2px solid #111827;

    transform:scale(1.2);

    opacity:0;

    transition:.35s;

}

.method-card:hover .method-icon::after{

    transform:scale(1);

    opacity:.15;

}

/*==================================
Step Badge
==================================*/

.method-content span{

    background:#F3F4F6;

    padding:6px 14px;

    border-radius:30px;

}

/*==================================
Card Shine
==================================*/

.method-card{

    overflow:hidden;

}

.method-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:

    linear-gradient(

    90deg,

    transparent,

    rgba(255,255,255,.6),

    transparent

    );

    transition:.8s;

}

.method-card:hover::after{

    left:150%;

}

/*==================================
Timeline Dot
==================================*/

.method-item::before{

    transition:.35s;

}

.method-item:hover::before{

    transform:translateY(-50%) scale(1.3);

    background:#000;

}

/*==================================
Heading
==================================*/

.method-content h4{

    transition:.35s;

}

.method-card:hover h4{

    color:#000;

}


/*=========================================
COUNTRIES WE SERVE
=========================================*/

.countries-section{

    padding:110px 0;

    background:#F8FAFC;

    position:relative;

    overflow:hidden;

}

/*==============================
Background Shapes
==============================*/

.countries-section::before{

    content:"";

    position:absolute;

    width:350px;

    height:350px;

    border-radius:50%;

    background:rgba(17,24,39,.03);

    left:-120px;

    top:-120px;

}

.countries-section::after{

    content:"";

    position:absolute;

    width:300px;

    height:300px;

    border-radius:50%;

    background:rgba(17,24,39,.03);

    right:-100px;

    bottom:-100px;

}

/*==============================
Country Card
==============================*/

.country-card{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:24px;

    padding:35px 28px;

    text-align:center;

    height:100%;

    transition:.35s;

    position:relative;

    overflow:hidden;

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

}

.country-card:hover{

    transform:translateY(-10px);

    border-color:#111827;

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

}

/*==============================
Top Border Animation
==============================*/

.country-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:4px;

    background:#111827;

    transform:scaleX(0);

    transition:.35s;

}

.country-card:hover::before{

    transform:scaleX(1);

}

/*==============================
Flag
==============================*/

.country-flag{

    width:80px;

    height:80px;

    margin:auto;

    margin-bottom:22px;

    background:#ff7504;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:42px;

    transition:.35s;

}

.country-card:hover .country-flag{

    transform:rotate(-8deg) scale(1.08);

}

/*==============================
Heading
==============================*/

.country-card h4{

    font-size:24px;

    font-weight:700;

    color:#111827;

    margin-bottom:10px;

}

/*==============================
Student Count
==============================*/

.country-card span{

    display:inline-block;

    padding:8px 16px;

    border-radius:30px;

    background: linear-gradient(135deg, #FBBF24, #F59E0B);

    color:#fff;

    font-size:13px;

    font-weight:600;

    margin-bottom:18px;

}

/*==============================
Description
==============================*/

.country-card p{

    margin:0;

    color:#6B7280;

    line-height:28px;

    font-size:15px;

}

/*==============================
Hover Text
==============================*/

.country-card:hover h4{

    color:#000;

}

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

@media(max-width:991px){

.countries-section{

padding:80px 0;

}

.country-card{

padding:28px 22px;

}

.country-card h4{

font-size:21px;

}

}

@media(max-width:576px){

.countries-section{

padding:70px 0;

}

.country-card{

padding:25px 20px;

}

.country-flag{

width:70px;

height:70px;

font-size:36px;

}

.country-card h4{

font-size:19px;

}

.country-card p{

font-size:14px;

line-height:26px;

}

}


/*=========================================
Premium Background Shapes
=========================================*/

.countries-section{

    position:relative;

    overflow:hidden;

}

.countries-section::before{

    content:"";

    position:absolute;

    width:450px;

    height:450px;

    border-radius:50%;

    background:rgba(17,24,39,.03);

    top:-180px;

    left:-180px;

    filter:blur(10px);

}

.countries-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:rgba(17,24,39,.03);

    bottom:-150px;

    right:-150px;

    filter:blur(10px);

}

/*=========================================
Floating Shapes
=========================================*/

.country-shape{

    position:absolute;

    border-radius:50%;

    background:#F3F4F6;

    animation:floatCountry 8s ease-in-out infinite;

}

.shape-one{

    width:18px;

    height:18px;

    top:20%;

    left:8%;

}

.shape-two{

    width:25px;

    height:25px;

    right:8%;

    top:35%;

    animation-delay:2s;

}

.shape-three{

    width:14px;

    height:14px;

    bottom:18%;

    left:15%;

    animation-delay:4s;

}

@keyframes floatCountry{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================
Premium Hover Shine
=========================================*/

.country-card{

    overflow:hidden;

}

.country-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:70%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.55),

        transparent

    );

    transition:.9s;

}

.country-card:hover::after{

    left:160%;

}

/*=========================================
Flag Ring Animation
=========================================*/

.country-flag{

    position:relative;

}

.country-flag::before{

    content:"";

    position:absolute;

    width:100%;

    height:100%;

    border-radius:50%;

    border:2px solid #111827;

    opacity:0;

    transform:scale(1.25);

    transition:.35s;

}

.country-card:hover .country-flag::before{

    opacity:.15;

    transform:scale(1);

}

/*=========================================
Student Count Hover
=========================================*/

.country-card span{

    transition:.35s;

}

.country-card:hover span{

    transform:translateY(-3px);

}

/*=========================================
Flag Hover
=========================================*/

.country-card:hover .country-flag{

    transform:scale(1.12) rotate(-8deg);

}

/*=========================================
Card Heading
=========================================*/

.country-card h4{

    transition:.35s;

}

.country-card:hover h4{

    letter-spacing:.4px;

}

/*=========================================
Description
=========================================*/

.country-card p{

    transition:.35s;

}

.country-card:hover p{

    color:#374151;

}


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

.contact-section{

    position:relative;

    padding:120px 0;

    background:#F8FAFC;

    overflow:hidden;

}

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

.contact-shape{

    position:absolute;

    border-radius:50%;

    background:rgba(229,57,53,.06);

    animation:floatShape 8s infinite ease-in-out;

}

.shape-1{

    width:180px;

    height:180px;

    top:-60px;

    left:-60px;

}

.shape-2{

    width:120px;

    height:120px;

    right:8%;

    top:15%;

    animation-delay:2s;

}

.shape-3{

    width:250px;

    height:250px;

    right:-120px;

    bottom:-120px;

    animation-delay:4s;

}

@keyframes floatShape{

    50%{

        transform:translateY(-20px);

    }

}

/*==================================================
LEFT SIDE
==================================================*/

.contact-left{

    position:relative;

    z-index:2;

}

.contact-left h3{

    font-size:42px;

    font-weight:700;

    color:#111827;

    margin-bottom:18px;

}

.contact-left p{

    color:#6B7280;

    line-height:30px;

    margin-bottom:40px;

}

/*==========================
Contact Card
==========================*/

.contact-card{

    display:flex;

    align-items:center;

    gap:20px;

    padding:22px;

    background:#fff;

    border-radius:20px;

    margin-bottom:18px;

    border:1px solid #ECECEC;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.contact-card:hover{

    transform:translateX(10px);

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

}

/*==========================
Icon
==========================*/

.contact-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:20px;

    background:linear-gradient(135deg,#E53935,#B71C1C);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:28px;

    transition:.35s;

}

.contact-card:hover .contact-icon{

    transform:rotate(-8deg) scale(1.08);

}

/*==========================*/

.contact-content small{

    display:block;

    color:#9CA3AF;

    font-size:13px;

    margin-bottom:5px;

    text-transform:uppercase;

    letter-spacing:1px;

}

.contact-content h5{

    margin:0;

    font-size:19px;

    font-weight:700;

    color:#111827;

}

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

.contact-social{

    display:flex;

    gap:15px;

    margin-top:35px;

}

.contact-social a{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

    color:#111827;

    font-size:20px;

    border:1px solid #ECECEC;

    transition:.35s;

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

}

.contact-social a:hover{

    background:#E53935;

    color:#fff;

    transform:translateY(-6px);

}

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

.contact-form-card{

    background:linear-gradient(135deg,#f0ac74,#d7a2a2,#e09a9a);

    border-radius:30px;

    padding:45px;

    color:#fff;

    box-shadow:0 30px 70px rgba(229,57,53,.28);

    position:relative;

    overflow:hidden;

}

/*==========================*/

.contact-form-card::before{

    content:"";

    position:absolute;

    width:280px;

    height:280px;

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

    border-radius:50%;

    top:-120px;

    right:-100px;

}

.contact-form-card::after{

    content:"";

    position:absolute;

    width:180px;

    height:180px;

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

    border-radius:50%;

    bottom:-80px;

    left:-80px;

}

/*==========================*/

.form-top{

    position:relative;

    z-index:2;

    margin-bottom:35px;

}

.form-top span{

    display:inline-block;

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

    padding:8px 18px;

    border-radius:30px;

    font-size:14px;

    font-weight:600;

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

}

.form-top h3{

    font-size:36px;

    margin:20px 0 12px;

    font-weight:700;

    color:#fff;

}

.form-top p{

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

    line-height:28px;

}

/*==================================================
INPUT BOX
==================================================*/

.input-box{

    position:relative;

}

.input-box i{

    position:absolute;

    left:18px;

    top:50%;

    transform:translateY(-50%);

    color:#E53935;

    font-size:18px;

    z-index:2;

}

.textarea-box i{

    top:25px;

    transform:none;

}

/*==========================*/

.form-group label{

    color:#fff;

    font-size:14px;

    margin-bottom:10px;

    font-weight:600;

    display:block;

}


/*==================================================
INPUTS
==================================================*/

.input-box .form-control,
.input-box .form-select{

    height:58px;

    padding-left:55px;

    border:none;

    border-radius:16px;

    background:#fff;

    color:#111827;

    font-size:15px;

    font-weight:500;

    box-shadow:none;

    transition:.35s;

}

.textarea-box .form-control{

    height:160px;

    padding-top:18px;

    resize:none;

}

/*==========================*/

.input-box .form-control::placeholder{

    color:#9CA3AF;

}

.input-box .form-control:focus,
.input-box .form-select:focus{

    background:#fff;

    border:none;

    outline:none;

    box-shadow:0 0 0 5px rgba(255,255,255,.18);

}

.input-box:focus-within{

    transform:translateY(-2px);

    transition:.3s;

}

/*==================================================
SUBMIT BUTTON
==================================================*/

.contact-submit-btn{

    width:100%;

    height:62px;

    border:none;

    border-radius:50px;

    background:#111827;

    color:#fff;

    font-size:17px;

    font-weight:700;

    letter-spacing:.3px;

    transition:.35s;

    position:relative;

    overflow:hidden;

    cursor:pointer;

}

.contact-submit-btn::before{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:60%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.45),

        transparent

    );

    transition:.8s;

}

.contact-submit-btn:hover::before{

    left:160%;

}

.contact-submit-btn:hover{

    background:#000;

    transform:translateY(-4px);

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

}

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

.form-group{

    position:relative;

}

.form-group:hover label{

    color:#FFEAEA;

}

.contact-form-card{

    transition:.35s;

}

.contact-form-card:hover{

    transform:translateY(-5px);

}

/*==================================================
GLASS GLOW
==================================================*/

.contact-form-card{

    backdrop-filter:blur(15px);

}

.contact-card{

    position:relative;

    overflow:hidden;

}

.contact-card::after{

    content:"";

    position:absolute;

    left:-120%;

    top:0;

    width:55%;

    height:100%;

    background:linear-gradient(

        90deg,

        transparent,

        rgba(255,255,255,.65),

        transparent

    );

    transition:.9s;

}

.contact-card:hover::after{

    left:160%;

}

/*==================================================
SOCIAL ICON EFFECT
==================================================*/

.contact-social a{

    position:relative;

    overflow:hidden;

}

.contact-social a::before{

    content:"";

    position:absolute;

    inset:0;

    border-radius:50%;

    background:linear-gradient(135deg,#E53935,#B71C1C);

    transform:scale(0);

    transition:.35s;

    z-index:0;

}

.contact-social a i{

    position:relative;

    z-index:2;

}

.contact-social a:hover::before{

    transform:scale(1);

}

.contact-social a:hover{

    color:#fff;

    border-color:#E53935;

}

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

@media(max-width:991px){

.contact-section{

    padding:80px 0;

}

.contact-left{

    margin-bottom:20px;

}

.contact-form-card{

    padding:35px;

}

.form-top h3{

    font-size:30px;

}

.contact-left h3{

    font-size:34px;

}

}

@media(max-width:767px){

.contact-section{

    padding:70px 0;

}

.contact-form-card{

    padding:25px;

    border-radius:24px;

}

.contact-card{

    padding:18px;

}

.contact-icon{

    width:60px;

    height:60px;

    min-width:60px;

    font-size:24px;

}

.contact-content h5{

    font-size:16px;

}

.form-top h3{

    font-size:24px;

}

.form-top p{

    font-size:15px;

}

.input-box .form-control,
.input-box .form-select{

    height:54px;

}

.textarea-box .form-control{

    height:140px;

}

.contact-submit-btn{

    height:56px;

    font-size:16px;

}

.contact-social{

    justify-content:center;

}

}


.blue1 i{

    background:#2646e3;

    color:#fdfdfd;

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

}

.green1 i{

    background:#0ea109;

    color:#f6f8f7;

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

}



/*=============================
        CONTACT PAGE CSS
==============================*/

.contact-breadcrumb{
    padding:90px 0;
    background:linear-gradient(135deg,#fff5f5,#fff9d9);
    position:relative;
    overflow:hidden;
}

.contact-breadcrumb::before{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    background:rgba(255,77,79,.08);
    border-radius:50%;
    top:-100px;
    left:-100px;
}

.contact-breadcrumb::after{
    content:"";
    position:absolute;
    width:260px;
    height:260px;
    background:rgba(255,193,7,.10);
    border-radius:50%;
    bottom:-100px;
    right:-80px;
}

.contact-breadcrumb .container{
    position:relative;
    z-index:2;
}

.page-tag{
    display:inline-block;
    padding:8px 22px;
    background:#ff4d4f;
    color:#fff;
    border-radius:30px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.contact-breadcrumb h1{
    font-size:48px;
    font-weight:700;
    color:#222;
    margin-bottom:20px;
}

.contact-breadcrumb p{
    color:#666;
    font-size:17px;
    line-height:30px;
    max-width:600px;
}

.breadcrumb-nav{
    display:inline-flex;
    gap:12px;
    padding:15px 28px;
    background:#fff;
    border-radius:50px;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.breadcrumb-nav a{
    color:#0d6efd;
    text-decoration:none;
    font-weight:600;
}

.breadcrumb-nav strong{
    color:#ff4d4f;
}


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

.contact-cards{
    margin-top:-45px;
    margin-bottom:70px;
    position:relative;
    z-index:20;
}

.contact-card{

    background:#fff;
    border-radius:25px;
    padding:35px;
    text-align:center;
    height:100%;

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

    transition:.35s;
}

.contact-card:hover{

    transform:translateY(-10px);

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

}

.contact-card .icon{

    width:85px;
    height:85px;

    border-radius:50%;

    background:#0d6efd;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:auto;

    margin-bottom:25px;

    font-size:35px;

}

.contact-card .green{

    background:#28a745;

}

.contact-card .red{

    background:#ff4d4f;

}

.contact-card h4{

    font-size:26px;

    font-weight:700;

    margin-bottom:20px;

}

.contact-card p{

    color:#666;

    line-height:32px;

    margin-bottom:20px;

}

.contact-card a{

    color:#0d6efd;

    font-weight:700;

    text-decoration:none;

}



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

.contact-main{

    padding-bottom:80px;

}

.contact-form-box{

    background:#fff;

    border-radius:25px;

    padding:45px;

    box-shadow:0 15px 50px rgba(0,0,0,.08);

}

.small-title{

    display:inline-block;

    color:#ff4d4f;

    font-weight:700;

    margin-bottom:10px;

}

.contact-form-box h2{

    font-size:38px;

    font-weight:700;

    margin-bottom:35px;

}

.form-control{

    min-height:60px;

    border-radius:15px;

    border:1px solid #ddd;

    padding:15px 20px;

    font-size:16px;

    transition:.3s;

}

textarea.form-control{

    min-height:200px;

}

.form-control:focus{

    border-color:#0d6efd;

    box-shadow:0 0 0 5px rgba(13,110,253,.10);

}



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

.send-btn{

    background:linear-gradient(90deg,#ff4d4f,#ff7b42);

    color:#fff;

    border:none;

    padding:16px 45px;

    border-radius:50px;

    font-weight:700;

    transition:.3s;

}

.send-btn:hover{

    color:#fff;

    transform:translateY(-3px);

    box-shadow:0 20px 35px rgba(255,77,79,.30);

}



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

.map-box{

    background:#fff;

    border-radius:25px;

    overflow:hidden;

    height:100%;

    min-height:640px;

    box-shadow:0 15px 50px rgba(0,0,0,.08);

}

.map-box iframe{

    width:100%;

    height:100%;

    border:none;

}



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

.contact-cta{

    background:#0d6efd;

    padding:70px 0;

    color:#fff;

}

.contact-cta h2{

    font-size:42px;

    font-weight:700;

    margin-bottom:15px;

}

.contact-cta p{

    font-size:18px;

    opacity:.9;

}

.call-btn{

    display:inline-block;

    background:#fff;

    color:#0d6efd;

    text-decoration:none;

    padding:18px 40px;

    border-radius:50px;

    font-size:18px;

    font-weight:700;

    transition:.3s;

}

.call-btn:hover{

    background:#ff4d4f;

    color:#fff;

}



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

@media(max-width:1199px){

.contact-breadcrumb h1{

font-size:40px;

}

.contact-form-box h2{

font-size:32px;

}

}

@media(max-width:991px){

.contact-cards{

margin-top:40px;

}

.contact-form-box{

margin-bottom:30px;

}

.map-box{

min-height:500px;

}

.contact-breadcrumb{

text-align:center;

}

.breadcrumb-nav{

margin-top:30px;

}

.contact-cta{

text-align:center;

}

.call-btn{

margin-top:25px;

display:inline-block;

}

}

@media(max-width:767px){

.contact-breadcrumb{

padding:70px 0;

}

.contact-breadcrumb h1{

font-size:32px;

}

.contact-card{

padding:30px 25px;

}

.contact-card h4{

font-size:22px;

}

.contact-form-box{

padding:30px;

}

.contact-form-box h2{

font-size:28px;

}

.contact-cta h2{

font-size:30px;

}

.map-box{

min-height:400px;

}

}

@media(max-width:576px){

.contact-breadcrumb{

padding:60px 0;

}

.contact-breadcrumb h1{

font-size:28px;

}

.page-tag{

font-size:13px;

}

.contact-card{

padding:25px;

}

.contact-card .icon{

width:70px;
height:70px;
font-size:28px;

}

.contact-form-box{

padding:25px;

}

.send-btn{

width:100%;

}

.call-btn{

width:100%;
text-align:center;

}

}