/*==================================================
Project : bedanddeledadmission.com
Author  : Weblength Software Solutions
Version : 1.0
==================================================*/


/*==================================================
01. Google Fonts
==================================================*/

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


/*==================================================
02. Root Variables
==================================================*/

:root{

    --primary:#0F766E;
    --secondary:#115E59;
    --accent:#F59E0B;

    --dark:#1F2937;
    --text:#374151;

    --white:#FFFFFF;
    --light:#F8FAFC;
    --border:#E5E7EB;

    --success:#16A34A;
    --danger:#DC2626;

    --heading-font:'Poppins',sans-serif;
    --body-font:'Inter',sans-serif;

    --container:1320px;

    --radius-sm:8px;
    --radius:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    --transition:all .35s ease;

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

}


/*==================================================
03. Reset CSS
==================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

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

    font-size:16px;

    font-weight:400;

    color:var(--text);

    background:var(--white);

    line-height:1.7;

    overflow-x:hidden;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

    transition:var(--transition);

}

ul{

    list-style:none;

}

button,
input,
textarea,
select{

    outline:none;

    border:none;

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

}

button{

    cursor:pointer;

}

::selection{

    background:var(--primary);

    color:#fff;

}


/*==================================================
04. Common CSS
==================================================*/

.container{

    width:100%;

    max-width:var(--container);

    margin:auto;

    padding:0 15px;

}

.wrapper{

    position:relative;

}

section{

    padding:20px 0;

}

.section-bg{

    background:var(--light);

}

.text-center{

    text-align:center;

}

.d-flex{

    display:flex;

}

.align-center{

    align-items:center;

}

.justify-between{

    justify-content:space-between;

}

.mb-15{

    margin-bottom:15px;

}

.mb-20{

    margin-bottom:20px;

}

.mb-30{

    margin-bottom:30px;

}

.mb-40{

    margin-bottom:40px;

}

.mb-50{

    margin-bottom:50px;

}

.mt-30{

    margin-top:30px;

}


/*==================================================
05. Typography
==================================================*/

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

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

    color:var(--dark);

    font-weight:700;

    line-height:1.3;

}

h1{

    font-size:54px;

}

h2{

    font-size:42px;

}

h3{

    font-size:32px;

}

h4{

    font-size:24px;

}

h5{

    font-size:20px;

}

h6{

    font-size:18px;

}

p{

    margin-bottom:15px;

}

.section-title{

    margin-bottom:50px;

}

.section-title span{

    display:inline-block;

    color:var(--primary);

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:12px;

}

.section-title h2{

    margin-bottom:18px;

}

.section-title p{

    max-width:700px;

    margin:auto;

}


/*==================================================
06. Buttons
==================================================*/

.btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 30px;

    border-radius:var(--radius);

    transition:var(--transition);

    font-weight:600;

}

.btn-primary{

    background:var(--primary);

    color:#fff;

}

.btn-primary:hover{

    background:var(--secondary);

}

.btn-secondary{

    background:var(--accent);

    color:#fff;

}

.btn-secondary:hover{

    opacity:.9;

}

.btn-outline{

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

    color:var(--primary);

    background:#fff;

}

.btn-outline:hover{

    background:var(--primary);

    color:#fff;

}


/*==================================================
07. Forms
==================================================*/

.form-group{

    margin-bottom:20px;

}

.form-control{

    width:100%;

    height:55px;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:0 20px;

    transition:var(--transition);

    background:#fff;

}

textarea.form-control{

    height:150px;

    resize:none;

    padding:15px 20px;

}

.form-control:focus{

    border-color:var(--primary);

}


/*==================================================
08. Cards
==================================================*/

.card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius-lg);

    box-shadow:var(--shadow);

    overflow:hidden;

}


/*==================================================
09. Utilities
==================================================*/

.rounded{

    border-radius:var(--radius-lg);

}

.shadow{

    box-shadow:var(--shadow);

}

.bg-primary{

    background:var(--primary);

}

.bg-light{

    background:var(--light);

}

.text-primary{

    color:var(--primary);

}

.text-dark{

    color:var(--dark);

}

.text-white{

    color:#fff;

}

.w-100{

    width:100%;

}


/*==================================================
10. Animation
==================================================*/

.transition{

    transition:var(--transition);

}

/*==================================================
11. Topbar
==================================================*/

.topbar{

    background:var(--secondary);

    color:#fff;

    font-size:14px;

}

.topbar-wrapper{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:56px;

    gap:25px;

}

.topbar-left,
.topbar-right{

    display:flex;

    align-items:center;

    gap:30px;

}

.topbar-left a,
.topbar-right span{

    display:flex;

    align-items:center;

    gap:10px;

    color:#fff;

    font-size:15px;

    font-weight:500;

    transition:var(--transition);

}

.topbar-left a:hover{

    color:var(--accent);

}

.social-icons{

    display:flex;

    align-items:center;

    gap:15px;

}

.social-icons a{

    width:36px;

    height:36px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    color:#fff;

    font-size:15px;

    transition:var(--transition);

}

.social-icons a:hover{

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

    color:var(--accent);

    transform:translateY(-2px);

}
/*==================================================
12. Header
==================================================*/

.header{

    position:sticky;

    top:0;

    left:0;

    width:100%;

    background:#fff;

    z-index:999;

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

}

/*==========================================
Header
==========================================*/
/*==========================================
Header Container
==========================================*/
/*==========================================
Mobile Contact Bar
==========================================*/

.mobile-contact-bar{

    display:none;

}
.header .container{

    max-width:85%;

    padding:0 35px;

}
.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    min-height:115px;

    gap:30px;

}


.nav-menu{

    flex:1;

    display:flex;

    justify-content:center;

}

.nav-menu ul{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:28px;

    width:100%;

}

.nav-menu ul li{

    position:relative;

}

.nav-menu ul li a{

    color:var(--dark);

    font-weight:600;

    font-size:18px;

    transition:var(--transition);

}

.nav-menu ul li a:hover,
.nav-menu ul li a.active{

    color:var(--primary);

}

.header-right{

    display:flex;

    align-items:center;

    gap:18px;

    flex-shrink:0;

}

.btn-call{

    padding:12px 22px;

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

    color:var(--primary);

    border-radius:var(--radius);

    font-weight:600;

    transition:var(--transition);

}

.btn-call:hover{

    background:var(--primary);

    color:#fff;

}

.btn-apply{

    padding:12px 28px;

    background:var(--primary);

    color:#fff;

    border-radius:var(--radius);

    font-weight:600;

    transition:var(--transition);

}

.btn-apply:hover{

    background:var(--secondary);

}

.mobile-menu-btn{

    display:none;

    width:45px;

    height:45px;

    border-radius:8px;

    background:var(--primary);

    color:#fff;

    font-size:20px;

    cursor:pointer;

    align-items:center;

    justify-content:center;

}
/*==================================================
13. Mobile Menu
==================================================*/

.mobile-menu{

    position:fixed;

    top:0;

    left:-100%;

    width:300px;

    height:100%;

    background:#fff;

    z-index:9999;

    transition:.4s;

    overflow-y:auto;

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

}

.mobile-menu.active{

    left:0;

}

.mobile-menu-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:20px;

    border-bottom:1px solid var(--border);

}

.mobile-menu-header img{

    max-height:55px;

}

.mobile-menu-close{

    font-size:26px;

    cursor:pointer;

    color:var(--dark);

}

.mobile-menu ul{

    padding:20px;

}

.mobile-menu ul li{

    border-bottom:1px solid var(--border);

}

.mobile-menu ul li a{

    display:block;

    padding:14px 0;

    color:var(--dark);

    font-weight:500;

}

.mobile-menu ul li a:hover{

    color:var(--primary);

}

.mobile-apply-btn{

    background:var(--primary);

    color:#fff !important;

    text-align:center;

    border-radius:var(--radius);

    margin-top:15px;

}

.menu-overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}
/*==================================================
Sticky Header
==================================================*/

.header.sticky{

    animation:header .35s ease;

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

}

@keyframes header{

    from{

        transform:translateY(-100%);

    }

    to{

        transform:translateY(0);

    }

}
/*==================================================
14. Hero Section
==================================================*/

.hero{

    position:relative;

    overflow:hidden;

}

.heroSlider{

    width:100%;

    height:750px;

}

.heroSlider .swiper-wrapper{

    height:100%;

}

.heroSlider .swiper-slide{

    height:100%;

}

/* Hero Slide */

.hero-slide{

    position:relative;

    width:100%;

    height:100%;

}

.hero-slide img{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

.hero-overlay{

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(15,23,42,.82) 0%,
        rgba(15,23,42,.65) 40%,
        rgba(15,23,42,.25) 100%
    );

    z-index:1;

}

.hero-slide .container{

    position:relative;

    height:100%;

    display:flex;

    align-items:center;

    z-index:2;

}

.hero-content{

    max-width:650px;

    color:#fff;

}

.hero-subtitle{

    display:inline-block;

    padding:10px 22px;

    margin-bottom:20px;

    border-radius:50px;

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

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

    color:#fff;

    font-size:15px;

    font-weight:600;

}

.hero-content h1{

    font-size:64px;

    line-height:1.2;

    color:#fff;

    margin-bottom:25px;

}

.hero-content h1 strong{

    color:var(--accent);

    font-weight:700;

}

.hero-content p{

    max-width:600px;

    font-size:18px;

    line-height:1.8;

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

    margin-bottom:35px;

}

.hero-btn{

    display:flex;

    align-items:center;

    gap:18px;

}

.btn-outline-light{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 30px;

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

    border-radius:12px;

    color:#fff;

    transition:.35s;

}

.btn-outline-light:hover{

    background:#fff;

    color:var(--primary);

}

/* Navigation */

.hero-prev,
.hero-next{

    width:52px;

    height:52px;

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

    backdrop-filter:blur(10px);

    border-radius:50%;

    color:#fff;

    transition:.35s;

}

.hero-prev:hover,
.hero-next:hover{

    background:var(--primary);

}

.hero-prev::after,
.hero-next::after{

    font-size:18px;

    font-weight:700;

}

/* Pagination */

.hero-pagination{

    bottom:30px !important;

}

.hero-pagination .swiper-pagination-bullet{

    width:12px;

    height:12px;

    background:#fff;

    opacity:.5;

}

.hero-pagination .swiper-pagination-bullet-active{

    width:32px;

    border-radius:20px;

    background:var(--accent);

    opacity:1;

}

/* Responsive */

@media(max-width:991px){

    .heroSlider{

        height:650px;

    }

    .hero-content{

        max-width:100%;

    }

    .hero-content h1{

        font-size:46px;

    }

}

@media(max-width:767px){

    .heroSlider{

        height:580px;

    }

    .hero-content{

        text-align:center;

    }

    .hero-content h1{

        font-size:36px;

    }

    .hero-content p{

        font-size:16px;

    }

    .hero-btn{

        justify-content:center;

        flex-wrap:wrap;

    }

    .hero-prev,
    .hero-next{

        display:none;

    }

}
.heroSlider .swiper-slide{

    opacity:0 !important;

    transition:opacity 1s ease;

}

.heroSlider .swiper-slide-active{

    opacity:1 !important;

}
/*==================================================
15. Quick Enquiry
==================================================*/

.quick-enquiry{

    margin-top:-70px;

    position:relative;

    z-index:10;

}

.enquiry-wrapper{

    background:#fff;

    border-radius:20px;

    padding:45px;

    display:grid;

    grid-template-columns:1fr 420px;

    gap:50px;

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

    border:1px solid var(--border);

}

.enquiry-content{

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.section-tag{

    display:inline-block;

    color:var(--primary);

    background:rgba(15,118,110,.10);

    padding:8px 18px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:20px;

}

.enquiry-content h2{

    margin-bottom:20px;

}

.enquiry-content p{

    margin:0;

    max-width:550px;

}

.enquiry-form{

    background:var(--light);

    padding:30px;

    border-radius:16px;

}

.enquiry-form .form-group{

    margin-bottom:18px;

}

.enquiry-form .form-group:last-child{

    margin-bottom:0;

}

/*==================================================
16. About Section
==================================================*/

.about{

    position:relative;

}

.about-wrapper{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.about-content h2{

    margin-bottom:25px;

}

.about-content p{

    margin-bottom:20px;

}

.about-features{

    margin:35px 0;

}

.about-feature{

    display:flex;

    align-items:center;

    gap:12px;

    margin-bottom:18px;

    font-weight:500;

}

.about-feature i{

    color:var(--primary);

    font-size:18px;

}

/*==================================================
17. Featured Courses
==================================================*/

.featured-courses{

    position:relative;

}

.course-grid{

    display:grid;

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

    gap:30px;

}

.course-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    transition:var(--transition);

}

.course-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.course-image{

    overflow:hidden;

}

.course-image img{

    width:100%;

    height:240px;

    object-fit:cover;

    transition:.5s;

}

.course-card:hover .course-image img{

    transform:scale(1.08);

}

.course-content{

    padding:25px;

}

.course-category{

    display:inline-block;

    background:rgba(15,118,110,.08);

    color:var(--primary);

    padding:6px 14px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;

}

.course-content h3{

    font-size:22px;

    margin-bottom:18px;

}

.course-content h3 a{

    color:var(--dark);

}

.course-content h3 a:hover{

    color:var(--primary);

}

.course-info{

    margin-bottom:25px;

}

.course-info li{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:12px;

    color:var(--text);

    font-size:15px;

}

.course-info li i{

    color:var(--primary);

    width:20px;

}

.course-btn{

    margin-top:20px;

}

.course-btn .btn{

    width:100%;

}
/*==================================================
18. Admission Process
==================================================*/

.admission-process{

    position:relative;

}

.process-wrapper{

    display:grid;

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

    gap:30px;

}

.process-item{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

    transition:var(--transition);

    position:relative;

}

.process-item:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.process-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(15,118,110,.10);

    display:flex;

    align-items:center;

    justify-content:center;

}

.process-icon i{

    font-size:34px;

    color:var(--primary);

}

.process-item span{

    display:inline-block;

    margin-bottom:15px;

    color:var(--accent);

    font-size:28px;

    font-weight:700;

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

}

.process-item h4{

    margin-bottom:15px;

}

.process-item p{

    margin:0;

}

/*==================================================
19. Why Choose Us
==================================================*/

.why-choose{

    position:relative;

}

.why-wrapper{

    display:grid;

    grid-template-columns:520px 1fr;

    gap:70px;

    align-items:center;

}

.why-image{

    position:relative;

}

.why-image img{

    width:100%;

    border-radius:20px;

    box-shadow:var(--shadow);

}

.experience-box{

    position:absolute;

    right:-20px;

    bottom:30px;

    width:180px;

    background:var(--primary);

    color:#fff;

    padding:25px;

    border-radius:16px;

    text-align:center;

}

.experience-box h3{

    font-size:42px;

    color:#fff;

    margin-bottom:5px;

}

.experience-box p{

    margin:0;

    font-size:15px;

}

.why-content h2{

    margin:20px 0;

}

.why-content>p{

    margin-bottom:35px;

}

.why-list{

    display:flex;

    flex-direction:column;

    gap:25px;

    margin-bottom:35px;

}

.why-item{

    display:flex;

    gap:18px;

    align-items:flex-start;

}

.why-item i{

    color:var(--primary);

    font-size:22px;

    margin-top:5px;

}

.why-item h5{

    margin-bottom:8px;

}

.why-item p{

    margin:0;

}
/*==================================================
20. Latest Updates
==================================================*/

.latest-updates{

    position:relative;

}

.updates-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:40px;

}

.notice-box,
.blog-box{

    background:#fff;

    border-radius:20px;

    padding:35px;

    box-shadow:var(--shadow);

}

.box-title{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

}

.box-title a{

    color:var(--primary);

    font-weight:600;

}

.notice-item{

    display:flex;

    gap:20px;

    padding:20px 0;

    border-bottom:1px solid var(--border);

}

.notice-item:last-child{

    border:none;

}

.notice-date{

    width:70px;

    height:70px;

    background:var(--primary);

    color:#fff;

    border-radius:14px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    font-weight:600;

}

.notice-date span{

    font-size:24px;

}

.notice-content h5{

    margin-bottom:8px;

}

.notice-content h5 a{

    color:var(--dark);

}

.notice-content h5 a:hover{

    color:var(--primary);

}

.notice-content p{

    margin:0;

}

.blog-item{

    display:flex;

    gap:18px;

    padding:20px 0;

    border-bottom:1px solid var(--border);

}

.blog-item:last-child{

    border:none;

}

.blog-item img{

    width:95px;

    height:85px;

    object-fit:cover;

    border-radius:12px;

}

.blog-item h5{

    margin-bottom:10px;

}

.blog-item h5 a{

    color:var(--dark);

}

.blog-item h5 a:hover{

    color:var(--primary);

}

.blog-item span{

    color:#6B7280;

    font-size:14px;

}

/*==================================================
21. Study Centers
==================================================*/

.study-centers{

    position:relative;

}

.study-center-grid{

    display:grid;

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

    gap:30px;

}

.study-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    overflow:hidden;

    transition:var(--transition);

}

.study-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.study-image{

    overflow:hidden;

}

.study-image img{

    width:100%;

    height:250px;

    object-fit:cover;

    transition:.5s;

}

.study-card:hover .study-image img{

    transform:scale(1.08);

}

.study-content{

    padding:30px;

    text-align:center;

}

.study-content h3{

    margin-bottom:12px;

    font-size:24px;

}

.study-content p{

    color:#6B7280;

    margin-bottom:25px;

}

.study-content .btn{

    width:100%;

}

/*==================================================
22. Testimonials
==================================================*/

.testimonial-grid{

    display:grid;

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

    gap:30px;

}

.testimonial-card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    border:1px solid var(--border);

    transition:var(--transition);

}

.testimonial-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.quote{

    font-size:34px;

    color:var(--primary);

    margin-bottom:20px;

}

.testimonial-content p{

    margin-bottom:30px;

}

.testimonial-user{

    display:flex;

    align-items:center;

    gap:15px;

}

.testimonial-user img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

}

.testimonial-user h4{

    margin-bottom:5px;

}

.testimonial-user span{

    color:#6B7280;

    font-size:14px;

}
/*==================================================
23. Gallery
==================================================*/

.gallery{

    position:relative;

}

.gallery-grid{

    display:grid;

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

    gap:25px;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    border-radius:18px;

}

.gallery-item img{

    width:100%;

    height:280px;

    object-fit:cover;

    transition:.5s;

}

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(15,118,110,.75);

    display:flex;

    align-items:center;

    justify-content:center;

    opacity:0;

    visibility:hidden;

    transition:var(--transition);

}

.gallery-overlay i{

    width:60px;

    height:60px;

    background:#fff;

    color:var(--primary);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:20px;

}

.gallery-item:hover img{

    transform:scale(1.1);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

    visibility:visible;

}
/*==================================================
24. Call To Action
==================================================*/

.cta{

    padding:80px 0;

}

.cta-wrapper{

    background:linear-gradient(135deg,var(--primary),var(--secondary));

    border-radius:24px;

    padding:70px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:50px;

}

.cta-content{

    max-width:700px;

}

.cta-content span{

    display:inline-block;

    padding:8px 18px;

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

    color:#fff;

    border-radius:30px;

    margin-bottom:20px;

    font-size:14px;

    font-weight:600;

}

.cta-content h2{

    color:#fff;

    margin-bottom:20px;

}

.cta-content p{

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

    margin:0;

}

.cta-btn{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}

.btn-outline-white{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 30px;

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

    color:#fff;

    border-radius:12px;

    transition:var(--transition);

}

.btn-outline-white:hover{

    background:#fff;

    color:var(--primary);

}
/*==================================================
25. Contact Information
==================================================*/

.contact-info{

    position:relative;

}

.contact-grid{

    display:grid;

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

    gap:30px;

}

.contact-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:18px;

    padding:40px 30px;

    text-align:center;

    transition:var(--transition);

}

.contact-card:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}

.contact-icon{

    width:80px;

    height:80px;

    margin:0 auto 25px;

    border-radius:50%;

    background:rgba(15,118,110,.10);

    display:flex;

    align-items:center;

    justify-content:center;

}

.contact-icon i{

    font-size:32px;

    color:var(--primary);

}

.contact-card h4{

    margin-bottom:15px;

}

.contact-card p{

    margin:0;

    line-height:1.8;

    color:#6B7280;

}
/*==================================================
26. Google Map
==================================================*/

.google-map{

    position:relative;

    width:100%;

    line-height:0;

}

.google-map iframe{

    width:100%;

    height:450px;

    border:0;

    display:block;

}
/*==================================================
27. Footer
==================================================*/

.footer{

    background:#0F172A;

    color:#CBD5E1;

}

.footer-top{

    display:grid;

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

    gap:50px;

    padding:80px 0;

}

.footer-logo{

    display:inline-block;

    margin-bottom:25px;

}

.footer-logo img{

    max-height:auto;

}

.footer-widget p{

    margin-bottom:25px;

    color:#CBD5E1;

}

.footer-widget h4{

    color:#fff;

    margin-bottom:25px;

}

.footer-widget ul{

    margin:0;

    padding:0;

}

.footer-widget ul li{

    margin-bottom:15px;

}

.footer-widget ul li:last-child{

    margin-bottom:0;

}

.footer-widget ul li a{

    color:#CBD5E1;

    transition:var(--transition);

}

.footer-widget ul li a:hover{

    color:var(--accent);

    padding-left:5px;

}

.footer-contact li{

    display:flex;

    gap:12px;

    align-items:flex-start;

}

.footer-contact i{

    color:var(--accent);

    margin-top:4px;

}

.footer-social{

    display:flex;

    gap:12px;

}

.footer-social a{

    width:42px;

    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

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

    color:#fff;

    border-radius:50%;

    transition:var(--transition);

}

.footer-social a:hover{

    background:var(--primary);

}

.footer-bottom{

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

    padding:25px 0;

}

.footer-bottom-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    margin:0;

    color:#CBD5E1;

}

.footer-bottom a{

    color:#fff;

}

.footer-bottom a:hover{

    color:var(--accent);

}

.footer-links{

    display:flex;

    gap:25px;

}


html,
body{

    width:100%;

    overflow-x:hidden;

}

*{

    max-width:100%;

}

/*==================================================
Page Banner
==================================================*/

.page-banner{

    position: relative;

    background: url('../images/banner/page-banner.png') center center/cover no-repeat;

    padding: 140px 0 100px;

    overflow: hidden;

}

.page-banner-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        90deg,
        rgba(15,23,42,.82),
        rgba(15,23,42,.55)
    );

}

.page-banner .container{

    position:relative;

    z-index:2;

}

.page-banner-content{

    text-align:center;

    color:#fff;

}

.page-banner-content h1{

    font-size:52px;

    font-weight:700;

    margin-bottom:20px;

    color:#fff;

}

.breadcrumb{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

.breadcrumb li{

    color:#fff;

    font-size:16px;

}

.breadcrumb li a{

    color:#fff;

    transition:.3s;

}

.breadcrumb li a:hover{

    color:var(--accent);

}

.breadcrumb li.active{

    color:var(--accent);

    font-weight:600;

}

/*==================================================
About Page
==================================================*/

.about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:70px;

    align-items:center;

}

.about-image{

    position:relative;

}

.about-image img{

    width:100%;

    border-radius:20px;

}

.experience-box{

    position:absolute;

    left:30px;

    bottom:30px;

    background:var(--primary);

    color:#fff;

    padding:25px;

    border-radius:15px;

    text-align:center;

    min-width:170px;

}

.experience-box h3{

    color:#fff;

    font-size:42px;

    margin-bottom:5px;

}

.experience-box span{

    font-size:15px;

}

.about-content h2{

    font-size:44px;

    margin:18px 0 25px;

    line-height:1.3;

}

.about-content h2 span{

    color:var(--primary);

}

.about-content p{

    margin-bottom:18px;

    color:#6B7280;

}

.about-features{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:18px;

    margin:35px 0;

}

.feature-item{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:500;

}

.feature-item i{

    color:var(--primary);

    font-size:18px;

}

.about-btn{

    margin-top:10px;

}

/*==================================================
Mission Vision
==================================================*/

.mission-vision{

    background:#F8FAFC;

}

.mission-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.mission-card{

    background:#fff;

    padding:45px 35px;

    border-radius:20px;

    text-align:center;

    transition:.35s;

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

    border:1px solid #EEF2F7;

}

.mission-card:hover{

    transform:translateY(-10px);

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

}

.mission-icon{

    width:85px;

    height:85px;

    margin:auto;

    margin-bottom:25px;

    border-radius:50%;

    background:rgba(15,118,110,.10);

    display:flex;

    align-items:center;

    justify-content:center;

}

.mission-icon i{

    font-size:34px;

    color:var(--primary);

}

.mission-card h3{

    margin-bottom:18px;

    font-size:24px;

}

.mission-card p{

    color:#6B7280;

    line-height:1.9;

}

/*==================================================
Achievement
==================================================*/

.achievement{

    background:#fff;

}

.achievement-grid{

    display:grid;

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

    gap:30px;

    margin-top:60px;

}

.achievement-card{

    background:#fff;

    border:1px solid #EEF2F7;

    border-radius:20px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

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

}

.achievement-card:hover{

    transform:translateY(-8px);

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

}

.achievement-icon{

    width:80px;

    height:80px;

    margin:0 auto 20px;

    border-radius:50%;

    background:rgba(15,118,110,.10);

    display:flex;

    align-items:center;

    justify-content:center;

}

.achievement-icon i{

    font-size:32px;

    color:var(--primary);

}

.achievement-card h3{

    font-size:42px;

    color:var(--primary);

    margin-bottom:10px;

}

.achievement-card p{

    color:#6B7280;

    font-weight:500;

}

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

.faq{

    background:#F8FAFC;

}

.faq-wrapper{

    max-width:900px;

    margin:60px auto 0;

}

.faq-item{

    background:#fff;

    border:1px solid #E5E7EB;

    border-radius:15px;

    margin-bottom:20px;

    overflow:hidden;

    transition:.35s;

}

.faq-question{

    width:100%;

    background:none;

    border:none;

    padding:24px 30px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    cursor:pointer;

    font-size:18px;

    font-weight:600;

    color:var(--dark);

    text-align:left;

}

.faq-question i{

    color:var(--primary);

    transition:.35s;

}

.faq-answer{

    display:none;

    padding:0 30px 25px;

}

.faq-answer p{

    color:#6B7280;

    line-height:1.8;

}

.faq-item.active .faq-answer{

    display:block;

}

.faq-item.active .faq-question i{

    transform:rotate(45deg);

}

/*==================================================
GLightbox Mobile Navigation
==================================================*/

@media (max-width:768px){

    .gslide-description{
        display:none;
    }

    .gbtn{

        width:48px !important;
        height:48px !important;

        border-radius:50%;

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

    }

    .gprev{

        top:auto !important;

        bottom:20px !important;

        left:calc(50% - 70px) !important;

        right:auto !important;

        transform:none !important;

    }

    .gnext{

        top:auto !important;

        bottom:20px !important;

        left:calc(50% + 20px) !important;

        right:auto !important;

        transform:none !important;

    }

    .gclose{

        top:15px !important;

        right:15px !important;

    }

}
/*==================================================
Course Introduction
==================================================*/

.course-intro-image{

    position:relative;

}

.course-intro-image img{

    width:100%;

    border-radius:20px;

}

.course-badge{

    position:absolute;

    left:30px;

    bottom:30px;

    background:var(--primary);

    color:#fff;

    padding:20px 25px;

    border-radius:15px;

    text-align:center;

    min-width:180px;

}

.course-badge strong{

    display:block;

    font-size:36px;

    color:#fff;

    line-height:1;

}

.course-badge span{

    display:block;

    margin-top:8px;

    font-size:15px;

}

.course-intro-content h2{

    margin:20px 0;

    font-size:44px;

    line-height:1.3;

}

.course-intro-content h2 span{

    color:var(--primary);

}

.course-intro-content p{

    margin-bottom:18px;

}

.course-highlights{

    display:grid;

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

    gap:18px;

    margin-top:30px;

}

.highlight-item{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:500;

}

.highlight-item i{

    color:var(--primary);

}

/*==========================================
Notice List
==========================================*/

.course-title{

    font-size:32px;
    font-weight:700;
    color:#0f2341;
    margin-bottom:20px;

}

.notice-card{

    display:grid;
    grid-template-columns:220px 1fr 180px;

    align-items:center;

    gap:30px;

    background:#fff;

    border:1px solid #ececec;

    border-radius:15px;

    padding:30px;

    margin-bottom:20px;

    transition:.3s;

}

.notice-card:hover{

    transform:translateY(-3px);

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

}

.notice-left{

    display:flex;

    align-items:center;

    justify-content:center;

}

.notice-date-box{

    display:flex;

    align-items:center;

    gap:10px;

    background:#0d6efd;

    color:#fff;

    padding:12px 20px;

    border-radius:10px;

    font-weight:600;

    font-size:15px;

}

.notice-date-box i{

    font-size:18px;

}

.notice-center{

    text-align:center;

}

.notice-center h4{

    font-size:30px;

    margin-bottom:15px;

    color:#102542;

}

.notice-center p{

    margin:0;

    color:#666;

    line-height:1.8;

}

.notice-right{

    border-left:1px solid #e9e9e9;

    padding-left:30px;

    text-align:center;

}

.notice-right a{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:12px;

    color:#0d6efd;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.notice-right a:hover{

    color:#084298;

}

.pdf-icon{

    font-size:48px;

    color:#ff3b30;

}

.notice-right span{

    font-size:15px;

}

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

@media(max-width:991px){

.notice-card{

    grid-template-columns:1fr;

    text-align:center;

}

.notice-left{

    justify-content:center;

}

.notice-right{

    border-left:none;

    border-top:1px solid #eee;

    padding:25px 0 0;

}

.notice-date-box{

    margin:auto;

}

}
.course-title{

    position:relative;

    display:inline-block;

    font-size:32px;

    font-weight:700;

    color:#0B2545;

    margin-bottom:30px;

    padding-left:18px;

    line-height:1.2;

}

.course-title::before{

    content:"";

    position:absolute;

    left:0;

    top:2px;

    width:6px;

    height:36px;

    border-radius:10px;

    background:linear-gradient(180deg,#0d6efd,#00b894);

}

.course-title::after{

    content:"";

    position:absolute;

    left:18px;

    bottom:-10px;

    width:70px;

    height:3px;

    border-radius:10px;

    background:linear-gradient(90deg,#0d6efd,#00b894);

}
.contact-info .row{

    display:flex;
    flex-wrap:wrap;

}

.contact-info .col-lg-3{

    display:flex;
    flex:0 0 25%;
    max-width:25%;

}

.contact-card{

    width:100%;

    background:#fff;

    padding:35px 25px;

    border-radius:15px;

    border:1px solid #eee;

    text-align:center;

    transition:.3s;

}

.contact-card:hover{

    transform:translateY(-8px);

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

}

@media(max-width:991px){

.contact-info .col-lg-3{

    flex:0 0 50%;
    max-width:50%;

}

}

@media(max-width:767px){

.contact-info .col-lg-3{

    flex:0 0 100%;
    max-width:100%;

}

}

/*==========================================
Blog Grid
==========================================*/

.blog-grid{

    display: grid;

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

    gap: 30px;

}

.blog-card{

    background: #fff;

    border-radius: 15px;

    overflow: hidden;

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

    transition: .3s;

    display: flex;

    flex-direction: column;

    height: 100%;

}

.blog-card:hover{

    transform: translateY(-8px);

}

.blog-image{

    overflow: hidden;

}

.blog-image img{

    width: 100%;

    height: 260px;

    object-fit: cover;

    transition: .4s;

}

.blog-card:hover .blog-image img{

    transform: scale(1.08);

}

.blog-content{

    padding: 25px;

    display: flex;

    flex-direction: column;

    flex: 1;

}

.blog-category{

    display: inline-block;

    margin-bottom: 12px;

    font-size: 14px;

    font-weight: 600;

    color: var(--primary-color);

}

.blog-content h3{

    font-size: 24px;

    margin-bottom: 15px;

    line-height: 1.4;

}

.blog-content h3 a{

    color: #222;

    text-decoration: none;

}

.blog-content p{

    margin-bottom: 20px;

}

.blog-content .course-info{

    margin-bottom: 20px;

}

.blog-content .btn{

    margin-top: auto;

}
.facebook-btn,
.call-btn,
.whatsapp-btn{

    position:fixed;

    right:20px;

    width:60px;

    height:60px;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    color:#fff;

    text-decoration:none;

    z-index:9999;

    transition:.3s ease;

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

}

.whatsapp-btn{

    bottom:25px;

    background:#25D366;

}

.call-btn{

    bottom:100px;

    background:#F97316;

}

.facebook-btn{

    bottom:175px;

    background:#1877F2;

}

.whatsapp-btn i,
.call-btn i,
.facebook-btn i{

    font-size:28px;

    line-height:1;

}

.whatsapp-btn:hover{

    color:#fff;

    transform:scale(1.08);

}

.call-btn:hover{

    color:#fff;

    background:#2563EB;

    transform:scale(1.08);

}

.facebook-btn:hover{

    color:#fff;

    background:#0d65d9;

    transform:scale(1.08);

}
.logo-desktop{

    display:block;
    width:220px;
    height:auto;

}

.logo-mobile{

    display:none;
    width:100%;
    height:auto;
}
/*=========================
Responsive
=========================*/

@media(max-width:991px){

    .blog-grid{

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

    }

}

@media(max-width:767px){

    .blog-grid{

        grid-template-columns: 1fr;

    }

}



@media (max-width:767px){

    .logo-desktop{

        display:none;

    }

    .logo-mobile{

        display:block;

    }

}

/*==================================================
    APPLY NOW FORM
==================================================*/

.contact-form{
    background:#fff;
    border:1px solid #e9ecef;
    border-radius:18px;
    padding:40px;
    box-shadow:0 12px 35px rgba(0,0,0,.06);
    overflow:hidden;
}

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

.form-section{
    margin-bottom:45px;
    padding-bottom:35px;
    border-bottom:1px solid #eef2f7;
}

.form-section:last-child{
    margin-bottom:0;
    padding-bottom:0;
    border-bottom:none;
}

.form-section h4{
    position:relative;
    font-size:24px;
    font-weight:700;
    color:#0F172A;
    margin-bottom:30px;
    padding-left:18px;
}

.form-section h4::before{
    content:"";
    position:absolute;
    left:0;
    top:4px;
    width:6px;
    height:28px;
    border-radius:20px;
    background:var(--primary-color);
}

/*==================================================
    LABEL
==================================================*/

.form-label{
    font-size:15px;
    font-weight:600;
    color:#334155;
    margin-bottom:8px;
}

.form-label .text-danger{
    font-weight:700;
}

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

.form-control,
.form-select{

    height:55px;

    border-radius:12px;

    border:1px solid #d6dde5;

    font-size:15px;

    transition:.3s;

    box-shadow:none;

    padding-left:16px;

    background:#fff;

}

textarea.form-control{

    min-height:130px;

    height:auto;

    padding-top:14px;

    resize:vertical;

}

.form-control:hover,
.form-select:hover{

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

}

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

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

    box-shadow:0 0 0 .18rem rgba(13,110,253,.12);

}

/*==================================================
    PLACEHOLDER
==================================================*/

::placeholder{

    color:#94A3B8;

}

/*==================================================
    DECLARATION BOX
==================================================*/

.alert{

    background:#f8fbff;

    border:1px solid #dbeafe;

    border-radius:15px;

    padding:25px;

}

.alert h6{

    color:#0F172A;

    font-weight:700;

    margin-bottom:15px;

}

.alert p{

    color:#475569;

    line-height:1.8;

}

/*==================================================
    CHECKBOX
==================================================*/

.form-check{

    margin-top:25px;

}

.form-check-input{

    width:20px;

    height:20px;

    cursor:pointer;

}

.form-check-label{

    padding-left:8px;

    line-height:1.8;

    color:#334155;

    font-weight:500;

}

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

.contact-form .btn{

    min-width:260px;

    height:58px;

    border-radius:12px;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.contact-form .btn:hover{

    transform:translateY(-3px);

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

}

/*==================================================
    GRID GAP
==================================================*/

.contact-form .row{

    --bs-gutter-x:24px;

    --bs-gutter-y:24px;

}

/*==================================================
    VALIDATION
==================================================*/

.form-control:valid{

    border-color:#198754;

}

.form-control:invalid:focus{

    border-color:#dc3545;

}

.form-select:valid{

    border-color:#198754;

}

.invalid-feedback{

    font-size:13px;

}

/*==================================================
    READONLY
==================================================*/

input[readonly]{

    background:#f8fafc;

    cursor:not-allowed;

}

.contact-form .row{
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 1.5rem;
}

/*==================================================
    MOBILE
==================================================*/

@media(max-width:991px){

.contact-form{

padding:30px;

}

}

@media(max-width:767px){

.contact-form{

padding:22px;

}

.form-section{

margin-bottom:35px;

padding-bottom:28px;

}

.form-section h4{

font-size:21px;

margin-bottom:25px;

}

.contact-form .btn{

width:100%;

min-width:100%;

}

.form-control,
.form-select{

height:52px;

}

textarea.form-control{

min-height:110px;

}

}