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

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

:root {

    --primary: #E6652F;
    --secondary: #18315B;
    --black: #1c1c1c;
    --white: #fff;
    --text: #666;
    --border: #ececec;
    --transition: .35s ease;

}

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

body {

    font-family: 'Poppins', sans-serif;
    background: black !important;
    overflow-x: hidden;
    color: var(--text);

}

h1,
h2,
h3,
h4,
h5 {

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

}

a {

    text-decoration: none;

}

img {

    max-width: 100%;

}

.container {

    max-width: 1320px;

}

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

.top-bar {

    background: var(--black);
    color: #ccc;
    height: 42px;

}

.top-bar .container {

    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 42px;

}

.top-left,
.top-right {

    display: flex;
    align-items: center;
    gap: 18px;

}

.top-left a {

    color: #d6d6d6;
    font-size: 14px;
    transition: .3s;

}

.top-left a:hover {

    color: var(--primary);

}

.top-right a {

    color: #d6d6d6;
    font-size: 14px;
    transition: .3s;

}

.top-right a:hover {

    color: var(--primary);

}

.top-right select {

    background: transparent;
    color: #ddd;
    border: none;
    outline: none;
    font-size: 14px;
    cursor: pointer;

}

.top-right option {

    color: #000;

}

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

.header {

    background: black;
    padding: 5px 0;
    border-bottom:1px solid #161111;

}

.header .container {

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

}

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

.logo {

    display: flex;
    align-items: center;
    gap: 15px;

}

.logo img {

    width:320px

}

.logo h2 {

    color: var(--secondary);
    font-size: 28px;
    font-weight: 700;
    line-height: 1;

}

.logo span {

    display: block;
    color: #888;
    letter-spacing: 6px;
    font-size: 12px;
    margin-top: 4px;

}

/*==========================
      CONTACT BOX
===========================*/

.header-contact {

    display: flex;
    gap: 45px;

}

.contact-box {
    
    display: flex;
    align-items: center;
    gap: 15px;

}

.contact-box i {

    width: 55px;
    height: 55px;
    background: rgb(230 101 47 / 21%);
    color: var(--primary);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;

}

.contact-box small {

    color: #cfcdcd;
    display: block;
    margin-bottom: 4px;

}

.contact-box h6 {

    margin: 0;
    color: #ffffffe6;
    font-size: 16px;
    font-weight: 600;

}

/*==================================================
                NAVIGATION
==================================================*/

.custom-navbar {

    background: var(--primary);
    padding: 0;

}

.custom-navbar .container {

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

}

.custom-navbar .navbar-nav {

    gap: 10px;

}

.custom-navbar .nav-link {

    color: white;
    padding: 20px 18px !important;
    font-size: 15px;
    font-weight: 500;
    transition: .3s;

}

.custom-navbar .nav-link:hover {

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

}

.custom-navbar .nav-link.active {

    background: rgba(0,0,0,.12);
    color:white;

}

.dropdown-menu {

    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: 0 15px 35px rgba(0,0,0,.08);

}

.dropdown-item {

    padding: 12px 18px;
    transition: .3s;

}

.dropdown-item:hover {

    background: var(--primary);
    color: white;

}

/*=====================
      SEARCH
======================*/

.nav-search {

    display: flex;
    align-items: center;

}

.nav-search input {

    border: none;
    outline: none;
    height: 46px;
    width: 220px;
    padding: 0 15px;
    font-size: 14px;

}

.nav-search button {

    border: none;
    width: 55px;
    height: 46px;
    background: var(--secondary);
    color: white;
    cursor: pointer;
    transition: .3s;

}

.nav-search button:hover {

    background: #102040;

}

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

.navbar-toggler {

    border: none;
    color: white;
    font-size: 28px;
    box-shadow: none !important;

}

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

.sticky {

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    animation: slideDown .4s;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);

}

@keyframes slideDown {

    from {

        transform: translateY(-100%);

    }

    to {

        transform: translateY(0);

    }

}
/*===============================
        HERO SECTION
================================*/

.hero-section{

    background:url("../images/banner.webp") no-repeat center center;

    background-size:cover;

   height:600px;

    display:flex;

    align-items:center;

}

.hero-content{

    max-width:520px;

}

.hero-subtitle{

    font-size:18px;

    color:#222;

    letter-spacing:2px;

    font-weight:500;

}

.hero-content h1{

    font-size:70px;

    font-weight:800;

    color:#111;

    line-height:1.1;

    margin:20px 0;

}

.hero-content p{

    font-size:17px;

    line-height:32px;

    color:#555;

    margin-bottom:35px;

}

.hero-btn{

    display:inline-flex;

    align-items:center;

    background:#E6652F;

    color:#fff;

    padding:16px 32px;

    border-radius:3px;

    font-weight:600;

    transition:.35s;

}

.hero-btn:hover{

    background:#17315B;

    color:#fff;

    text-decoration:none;

}

/*==========================
      FEATURE BOX
===========================*/

.feature-section{

    margin-top: -45px;
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;

}

.feature-box{

    position:relative;
    display:flex;
    align-items:center;
    gap:22px;

    padding:22px 28px;

    min-height:148px;

    color:#fff;

}

.yellow{

    background:#D79A09;

}

.orange{

    background:#F45A1F;

}

.blue{

    background:#173C8F;

}

/* ICON */

.feature-box .icon{

    width:72px;
    min-width:72px;
    height:72px;

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

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

    font-size:34px;

}

.feature-box h4{

    font-size:19px;
    font-weight:700;
    line-height:1.25;
    margin-bottom:10px;
    text-transform:uppercase;

}

.feature-box p{

    margin:0;

    font-size:14px;

    line-height:24px;

}

/* CIRCLE */

.circle{

    position:absolute;

    left:50%;
    transform:translateX(-50%);

    bottom:-19px;

    width:38px;
    height:38px;

    background:#fff;

    border-radius:50%;

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

    font-size:15px;

    transition:.35s;

}

.yellow .circle{

    border:2px solid #D79A09;
    color:#D79A09;

}

.orange .circle{

    border:2px solid #F45A1F;
    color:#F45A1F;

}

.blue .circle{

    border:2px solid #173C8F;
    color:#173C8F;

}

.feature-box:hover .circle{

    background:#173C8F;
    color:#fff;
    border-color:#173C8F;

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

.about-section{

    background:#F8EBDD;

    padding:190px 0px 80px 0px ;

}

.about-image{

    overflow:hidden;

    border-radius:4px;

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

}

.about-image img{

    width:100%;

    transition:.5s;

}

.about-image:hover img{

    transform:scale(1.05);

}

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

.section-subtitle{

    display:inline-block;

    font-size:15px;

    font-weight:600;

    letter-spacing:3px;

    color:#E6652F;

    margin-bottom:18px;

}

.about-content h2{

    font-size:42px;

    font-weight:700;

    color:#17315B;

    margin-bottom:25px;

}

.about-content p{

    font-size:16px;

    line-height:30px;

    color:#555;

    margin-bottom:18px;

}

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

.about-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    color:#17315B;

    font-weight:600;

    margin-top:20px;

    transition:.3s;

}

.about-btn i{

    font-size:22px;

    color:#E6652F;

}

.about-btn:hover{

    color:#E6652F;

}


.programSwiper{

    overflow:hidden;
    padding:5px;

}

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

.program-section{

    padding:90px 0;

    background:#fff;

}

.section-title{

    text-align:center;

    margin-bottom:55px;

}

.section-title span{

    display:block;

    color:#666;

    font-size:15px;

    letter-spacing:2px;

    margin-bottom:15px;

}

.section-title h2{

   font-size:42px;


    color:#27384C;

    font-weight:700;

}

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

.program-card{

    position:relative;

    overflow:hidden;

    height:420px;

    cursor:pointer;

}

.program-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.program-card:hover img{

    transform:scale(1.08);

}

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

.overlay{

    position:absolute;

    inset:0;

    opacity:.72;

}

.blue{

    background:#001B40;

}

.orange{

    background:#D96D22;

}

.red{

    background:#B31C31;

}

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

.program-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    color:#fff;

}

.line{

    width:70px;

    height:4px;

    background:#fff;

    margin-bottom:18px;

}

.program-content h3{

    font-size:34px;

    margin-bottom:15px;

    font-weight:700;

}

.program-content p{

    line-height:28px;

    font-size:15px;

}

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

.program-nav{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:54px;

    height:54px;

    border-radius:50%;

    border:none;

    background:#888;

    color:#fff;

    font-size:26px;

    z-index:100;

}

.prev{

    left:-70px;

}

.next{

    right:-70px;

}

.program-nav:hover{

    background:#E6652F;

}

.program-card{

    position:relative;
    height:370px;
    overflow:hidden;

}

.program-card img{

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

}

.program-prev,
.program-next{

    width:50px !important;
    height:50px !important;
    border-radius:50%;
    background:#8f8f8f;
    color:#fff;
    top:50%;

}

.program-prev{

    left:-70px;

}

.program-next{

    right:-70px;

}

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

    font-size:18px;
    font-weight:bold;

}
.program-section .position-relative {
    max-width: 1200px;
    margin:0px auto;
}
/*==================================
        WHY CHOOSE US
===================================*/

.why-section{

    position:relative;

    padding:90px 0;

    background:url('../assets/images/why-bg.jpg') center center;

    background-size:cover;

    overflow:hidden;

}

.why-section .overlay{

    position:absolute;

    inset:0;

    background:#143a8f;

    opacity:.88;

}

.why-section .container{

    position:relative;

    z-index:10;

}

.why-title{

    text-align:center;

    margin-bottom:60px;

}

.why-title span{

    color:#fff;

    letter-spacing:2px;

    font-size:15px;

}

.why-title h2{

    color:#fff;

    font-size:42px;


    font-weight:700;

    margin-top:10px;

}

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

.counter-box{

    border-right:1px solid rgba(255,255,255,.35);

    padding:10px 20px;

}

.counter-box img{

    width:46px;

    margin-bottom:18px;

}

.counter-box h2{

    color:#fff;

    font-size:42px;


    font-weight:700;

    margin-bottom:10px;

}

.counter-box p{

    color:#fff;

    font-size:18px;

    letter-spacing:1px;

}
/*=================================
        EVENTS SECTION
==================================*/

.events-section{

    padding:90px 0;

    background:#fff;

}

.events-section .section-title{

    margin-bottom:55px;

}

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

.event-card{

    background:#fff;

    transition:.35s;

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

    overflow:hidden;

}

.event-card:hover{

    transform:translateY(-8px);

}

.event-img{

    position:relative;

    /* /overflow:hidden; */

}

.event-img img{

    width:100%;

    transition:.5s;

}

.event-card:hover img{

    transform:scale(1.08);

}

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

.event-plus{

    position:absolute;

    right:20px;

    bottom:-22px;

    width:46px;

    height:46px;

    background:#F45A1F;

    color:#fff;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:22px;

    text-decoration:none;

}

.event-plus.blue{

    background:#173C8F;

}

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

.event-content{

    padding:30px;

}

.event-content h4{

    font-size:20px;

    line-height:32px;

    margin-bottom:25px;

    color:#333;

    font-weight:600;

}

.event-meta{

    display:flex;

    justify-content:space-between;

    color:#777;

    font-size:14px;

}

.event-meta i{

    color:#F45A1F;

    margin-right:5px;

}

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

.more-post{

    color:#173C8F;

    font-weight:600;

    text-decoration:none;

    letter-spacing:1px;

}

.more-post i{

    color:#F45A1F;

    margin-left:8px;

}
.event-card{

    overflow:hidden;

    transition:.4s;

    background:#fff;

}

.event-body{

    padding:22px;

    background:#fff;

    transition:.4s;

}

.event-footer{

    max-height:0;

    overflow:hidden;

    opacity:0;

    transition:.4s;

}

.event-footer hr{

    margin:18px 0;

}

.meta{

    display:flex;

    justify-content:space-between;

    font-size:13px;

}

/* Hover */

.event-card:hover .event-body{

    background:#FFF1EA;

}

.event-card:hover .event-footer{

    max-height:80px;

    opacity:1;

}

/*==================================
        OUR MENTORS
===================================*/

.mentor-section{

    padding:40px 0;

    background:#FFF2E8;

}

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

.mentor-heading{

    text-align:center;

    margin-bottom:60px;

}

.mentor-heading span{

    display:block;

    color:#8d8d8d;

    font-size:14px;

    letter-spacing:1px;

    margin-bottom:8px;

}

.mentor-heading h2{

    color:#24384E;

    font-size:42px;


    font-weight:700;

}

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

.mentor-card{

    text-align:center;

    padding:0px;

    border-right:1px solid #ead9cc;

    transition:.35s;

}
.mentor-card img{

   width: 250px;
    height: 250px;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
    margin: auto;
    box-shadow: 0 12px 30px rgba(0,0,0,.15);


}

.mentor-card h3{

    margin-top:22px;

    color:#333;

    font-size:20px;

    font-weight:700;

}

.mentor-card h5{

    color:#444;

    font-size:16px;

    font-weight:500;

    margin:8px 0 18px;

}

.mentor-card p{

    color:#666;

    line-height:32px;

    font-size:15px;

}
/*=========================================
        GALLERY SECTION
=========================================*/

.gallery-section{

    padding:90px 0;

    background:#fff;

}

.gallery-wrapper{

    max-width:1600px;

    margin:auto;

}

.gallerySwiper{

    overflow:visible;

}

/* Desktop */

.gallerySwiper .swiper-wrapper{

    display:grid;

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

    gap:2px;

}

.gallerySwiper .swiper-slide{

    width:auto !important;

}

.gallery-item{

    position:relative;

    overflow:hidden;

    height:230px;

    cursor:pointer;

}

.gallery-item img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

}

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

.gallery-overlay{

    position:absolute;

    inset:0;

    background:rgba(230,101,47,.82);

    display:flex;

    justify-content:center;

    align-items:center;

    flex-direction:column;

    color:#fff;

    opacity:0;

    transition:.45s;

}

.gallery-overlay h3{

    font-size:30px;

    font-weight:700;

    margin-bottom:8px;

}

.gallery-overlay p{

    font-size:15px;

    margin-bottom:20px;

}

.gallery-overlay a{

    width:60px;

    height:60px;

    border-radius:50%;

    border:2px solid #fff;

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

    text-decoration:none;

}

/* Hover */

.gallery-item:hover img{

    transform:scale(1.12);

}

.gallery-item:hover .gallery-overlay{

    opacity:1;

}

/* Active */

.gallery-item.active .gallery-overlay{

    opacity:1;

}

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

.gallery-item.active .gallery-overlay{

    background:rgba(232,99,40,.82);

}

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

.gallery-overlay a:hover{

    background:#fff;

    color:#E6652F;

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

.testimonial-section{

    position:relative;

    background:url('../images/Video.webp') center center;

    background-size:cover;

    padding:90px 0 40px;

    overflow:hidden;

}

.testimonial-overlay{

    position:absolute;

    inset:0;

    background:rgba(18,52,126,.82);

}

.testimonial-section .container{

    position:relative;

    z-index:5;

}

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

.testimonial-content{

    position:relative;

    text-align:center;

    color:#fff;

    max-width:1050px;

    margin:auto;

}

.testimonial-content h2{

    display:inline-block;

    font-size:42px;

    font-weight:700;

    margin-bottom:8px;

    text-transform:uppercase;

}

.title-line{

    width:180px;

    height:3px;

    background:#fff;

    margin:0 auto 35px;

}

.testimonial-content p{

    font-size:22px;

    line-height:42px;

    color:#f4f4f4;

    margin-bottom:35px;

}

.testimonial-content p a{

    color:#fff;

    font-weight:700;

    text-decoration:none;

}

.testimonial-content h5{

    color:#fff;

    font-size:20px;

    margin-bottom:30px;

}

.testimonial-content h5 span{

    font-size:14px;

    font-weight:400;

    display:block;

    margin-top:8px;

}

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

.quote-left{

    position:absolute;

    top:-10px;

    left:0;

    color:#fff;

    font-size:70px;

    opacity:.95;

}

.quote-right{

    position:absolute;

    bottom:10px;

    right:0;

    color:#fff;

    font-size:70px;

    transform:rotate(180deg);

}

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

.testimonial-users{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:18px;

    margin-top:25px;

}

.testimonial-users img{

    width:70px;

    height:70px;

    border-radius:50%;

    border:4px solid rgba(255,255,255,.4);

    object-fit:cover;

    transition:.35s;

    cursor:pointer;

}

.testimonial-users img:hover{

    transform:scale(1.08);

}

.testimonial-users img.active{

    border-color:#F39B22;

}

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

.swiper-pagination{

    position:relative !important;

    margin-top:15px;

}

.swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#fff;

    opacity:.45;

}

.swiper-pagination-bullet-active{

    opacity:1;

    background:#fff;

    .testimonial-users img{

    width:70px;
    height:70px;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.3);
    transition:.35s;

}

.testimonial-users img.active{

    border-color:#F39B22;

    transform:scale(1.1);

}
}
.testimonialSwiper {
    overflow: hidden;
}

.testimonialSwiper .swiper-slide {
    width: 100%;
}

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

.footer{
    margin-top:0;
}

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

.footer-top{

    background:black;
    padding:60px 0;
    color:#fff;

}

.footer-top h4{

    font-size:18px;
    font-weight:700;
    margin-bottom:25px;
    text-transform:uppercase;
    position:relative;

}

.footer-top h4::after{

    content:"";
    position:absolute;
    left:0;
    bottom:-8px;
    width:45px;
    height:2px;
    background:#fff;

}

.footer-top ul{

    margin:0;
    padding:0;
    list-style:none;

}

.footer-top ul li{

    margin-bottom:12px;

}

.footer-top ul li a{

    color:#fff;
    font-size:14px;
    text-decoration:none;
    transition:.35s;

}

.footer-top ul li a:hover{

    padding-left:8px;
    color:#ffe2d3;

}

.footer-top p{

    font-size:14px;
    line-height:28px;
    color:#fff;

}

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

.footer-logo{

    width:230px;
    height:90px;

    /* background:#fff; */

    margin:auto;

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

    color:#F45A1F;

    font-size:34px;
    font-weight:700;

}

.footer-top hr{

    margin:25px 0;
    border-color:rgba(255,255,255,.4);

}

.footer-logo+p{

    font-size:15px;
    line-height:28px;

}

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

.footer-bottom{

    background:#F45A1F;
    padding:40px 0;

}

.footer-box{

    min-height:100px;
    padding:0 35px;

}

.footer-box h5{

    color:#fff;
    font-size:18px;
    margin-bottom:25px;
    text-transform:uppercase;

}

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

.social{

    display:flex;
    gap:12px;

}

.social a{

    width:42px;
    height:42px;

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

    color:#fff;

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

    border-radius:50%;

    transition:.35s;

}

.social a:hover{

    background:#F45A1F;
    border-color:#F45A1F;

}

/*=====================================
        SUBSCRIBE
======================================*/

.subscribe-form{

    display:flex;

}

.subscribe-form input{

    flex:1;

    height:46px;

    border:none;

    outline:none;

    padding:0 18px;

    font-size:14px;

}

.subscribe-form button{

    width:55px;

    border:none;

    background:#18315b;

    color:#fff;

    font-size:20px;

}

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

.youtube-gallery{

    display:flex;

    gap:6px;

}

.youtube-gallery img{

    width:92px;

    height:60px;

    object-fit:cover;

    transition:.35s;

    cursor:pointer;

}

.youtube-gallery img:hover{

    transform:scale(1.05);

}

/*=====================================
        DIVIDERS
======================================*/

.footer-bottom .col-lg-4{

    position:relative;

}

.footer-bottom .col-lg-4:not(:last-child)::after{

    content:"";

    position:absolute;

    right:0;

    top:5px;

    width:1px;

    height:95px;

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

}
.video-section {
    background:#fbf6f6 !important;
}
.video-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 10px;
    text-decoration: none;
    background: #000;
    transition: 0.4s ease;
    /* box-shadow: 0 5px 10px rgba(0,0,0,.25); */
}

.video-card img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.video-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
        rgba(0,0,0,.55),
        rgba(0,0,0,.15),
        transparent);
    transition: .3s;
}

.video-card:hover img {
    transform: scale(1.08);
}

.video-card:hover::after {
    background: rgba(0,0,0,.35);
}

.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background: rgba(255,0,0,.9);
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 34px;
    z-index: 2;
    transition: .35s;
    box-shadow: 0 8px 20px rgba(255,0,0,.35);
}

.play-btn i {
    margin-left: 4px;
}

.video-card:hover .play-btn {
    transform: translate(-50%, -50%) scale(1.15);
    background: #ff0000;
}

.video-title {
    position: absolute;
    left: 20px;
    bottom: 18px;
    color: #fff;
    z-index: 2;
}

.video-title h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
}

.video-title p {
    margin: 5px 0 0;
    font-size: 14px;
    opacity: .85;
}

/* Responsive */

@media (max-width:768px){

    .video-card img{
        height:220px;
    }

    .play-btn{
        width:60px;
        height:60px;
        font-size:28px;
    }

}

.youtube-gallery .video-card {
    height: 100px;
}
.youtube-gallery .play-btn {
    width: 40px;
    height:40px;
    font-size:24px;
}


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

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:12px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    display:block;
    border-radius:8px;
    aspect-ratio:2/3;
}

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

.gallery-overlay{
    position:absolute;
    inset:0;
    background:rgba(230,101,47,.75);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    transition:.3s;
}

.gallery-overlay i{
    color:#fff;
    font-size:32px;
}

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

.gallery-item:hover .gallery-overlay{
    opacity:1;
}