* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    transition: .3s;
}

body {
    font-family: 'Roboto',sans-serif;
    background: #f7f9fc;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat',sans-serif;
}

/* Navbar */

nav {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    padding: 0 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000;
    transition: .4s;
}

    nav.scrolled {
        position: fixed;
        background: #fff;
        box-shadow: 0 5px 20px rgba(0,0,0,0.2);
    }

        nav.scrolled .nav-menu li a {
            color: #000;
        }

            nav.scrolled .nav-menu li a::after {
                background: #000;
            }

        nav.scrolled .login-btn {
            border: 2px solid #000;
            color: #000;
        }

            nav.scrolled .login-btn:hover {
                background: #000;
                color: #fff;
            }


        nav.scrolled .menu-toggle div {
            background: #000;
        }

.nav-logo img {
    width: 7rem;
}

/* Menu */

.nav-menu {
    display: flex;
    align-items: center;
    gap: 25px;
    list-style: none;
}

    .nav-menu li {
        position: relative;
    }

        .nav-menu li a {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
            padding: 5px 0;
            position: relative;
        }

            .nav-menu li a::after {
                content: '';
                position: absolute;
                width: 0;
                height: 2px;
                background: #fff;
                left: 0;
                bottom: -5px;
                transition: .3s;
            }

            .nav-menu li a:hover::after {
                width: 100%;
            }

nav.scrolled .nav-menu li a {
    color: #000;
}

/* Submenu */

.nav-menu li ul {
    position: absolute;
    top: 25px;
    left: 0;
    background: rgba(0,0,0,.9);
    padding: 10px 0;
    display: none;
    list-style: none;
    border-radius: 5px;
    min-width: 150px;
}

.nav-menu li:hover ul {
    display: block;
}

.nav-menu li ul li a {
    color: #fff;
    padding: 10px 20px;
    display: block;
}

/* Login Register Buttons */

.nav-buttons {
    display: flex;
    gap: 15px;
}

.login-btn {
    padding: 7px 18px;
    border: 2px solid #fff;
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
}

.register-btn {
    padding: 8px 20px;
    background: linear-gradient(45deg,#2193b0,#6dd5ed);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 500;
}

.login-btn:hover {
    background: #fff;
    color: #000;
}

.register-btn:hover {
    background: linear-gradient(45deg,#ff6d00,#d50000);
}

/* Mobile Menu */

.menu-toggle {
    display: none;
    flex-direction: column;
    cursor: pointer;
    z-index: 2000;
}

    .menu-toggle div {
        width: 28px;
        height: 3px;
        background: #fff;
        margin: 4px 0;
        border-radius: 2px;
        transition: .3s;
    }

    .menu-toggle.open div:nth-child(1) {
        transform: rotate(45deg) translate(6px,10px);
    }

    .menu-toggle.open div:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.open div:nth-child(3) {
        transform: rotate(-50deg) translate(6px,-8px);
    }

/* Mobile */

@media(max-width:992px) {

    nav {
        padding: 0 20px;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        left: -100%;
        width: 75%;
        height: 100%;
        background: linear-gradient(45deg,#bbdefb,#c8e6c9,#ffe0b2,#bbdefb);
        display: flex;
        align-items: start;
        flex-direction: column;
        gap: 25px;
        padding: 100px 20px 20px 20px;
    }

        .nav-menu.active {
            left: 0;
        }

        .nav-menu li a {
            font-size: 16px;
            font-weight: 500;
        }

    .nav-menu li a {
        color: #000;
    }

    /* LOGIN REGISTER BUTTONS MENU KE NICHE */
    .nav-buttons {
        flex-direction: column;
        gap: 15px;
        width: 7rem;
    }

        .nav-buttons a {
            text-align: center;
            width: auto;
        }

    .login-btn {
        color: #000;
        text-decoration: none;
        color: #000;
        border: 2px solid #000;
        font-weight: 500;
    }

        .login-btn:hover {
            background: #000;
            color: #fff;
        }

    .menu-toggle {
        display: flex;
    }
}








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

.hero {
    width: 100%;
    height: 82vh;
    position: relative;
    overflow: hidden;
}

    /* ❌ REMOVE old overlay (important) */
    .hero::before {
        display: none;
    }

/* ========================= */
/* SWIPER */
/* ========================= */

.swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    position: relative;
}

    /* ✅ Overlay ONLY on image */
    .swiper-slide::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient( rgba(0,0,0,0.7), rgba(0,0,0,0.4) );
        z-index: 1;
    }

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

.swiper-button-next,
.swiper-button-prev {
    color: #fff;
    background: rgba(0,0,0,0.5);
    padding: 14px;
    border-radius: 50%;
    backdrop-filter: blur(6px);
    transition: all 0.3s ease;
    z-index: 3;
}

    .swiper-button-next:hover,
    .swiper-button-prev:hover {
        background: linear-gradient(45deg,#00c853,#00b0ff,#ff6d00,#d50000);
        transform: scale(1.15);
    }

/* ========================= */
/* SLIDE CONTENT */
/* ========================= */

.slide-content {
    position: absolute;
    top: 25%;
    left: 8%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 2; 
    max-width: 800px;
    opacity: 0;
    animation: fadeUp 1s ease forwards;
}

/* Animation */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(-50%);
    }
}

/* Heading */
.slide-content h1 {
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 12px;
    line-height: 1.2;
    background: linear-gradient(45deg,#00e676,#00b0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 3px 15px rgba(0,0,0,0.6);
}

/* Sub Heading */
.slide-content h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: #f1f1f1;
}

/* Paragraph */
.slide-content p {
    font-size: 16px;
    line-height: 1.8;
    color: #e0e0e0;
}

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

@media(max-width:768px) {

    .hero {
        height: 80vh;
    }

    .slide-content {
        left: 5%;
        right: 5%;
    }

        .slide-content h1 {
            font-size: 30px;
        }

        .slide-content h3 {
            font-size: 18px;
        }

        .slide-content p {
            font-size: 14px;
        }
}


@media (max-width: 578px) {
    .slide-content h1 {
        font-size: 20px;
    }

    .slide-content h3 {
        font-size: 16px;
    }
}















/* section 2 */

.about-section {
    padding: 80px 20px;
    background: #f9fafc;
    color: #222;
    font-family: 'Poppins', sans-serif;
}

    .about-section .about-container {
        max-width: 1200px;
        margin: auto;
        display: flex;
        align-items: center;
        gap: 60px;
        flex-wrap: wrap;
    }


    .about-section .about-img {
        flex: 1;
        position: relative;
    }

        .about-section .about-img img {
            width: 100%;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.15);
            transition: 0.4s;
        }

            .about-section .about-img img:hover {
                transform: scale(1.05);
            }

        .about-section .about-img::after {
            content: '';
            position: absolute;
            inset: 0;
            border-radius: 20px;
            background: linear-gradient(45deg,#00c853,#00b0ff);
            opacity: 0.15;
            z-index: -1;
            filter: blur(25px);
        }


    .about-section .about-content {
        flex: 1;
    }

        .about-section .about-content h2 {
            font-size: 42px;
            margin-bottom: 20px;
            line-height: 1.3;
            font-weight: 700;
            background: linear-gradient(45deg,#00c853,#00b0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .about-section .about-content p {
            font-size: 16px;
            line-height: 1.8;
            color: #555;
            margin-bottom: 15px;
        }

    .about-section .about-btn {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 28px;
        border-radius: 30px;
        background: linear-gradient(45deg,#00c853,#00b0ff);
        color: #fff;
        text-decoration: none;
        font-weight: 600;
        transition: 0.3s;
        box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    }

        .about-section .about-btn:hover {
            background: linear-gradient(45deg,#ff6d00,#d50000);
            transform: translateY(-3px);
        }

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

@media(max-width:768px) {

    .about-section .about-container {
        flex-direction: column;
    }

    .about-section .about-content {
        order: 1;
    }

    .about-section .about-img {
        order: 2;
    }

    .about-section .about-content h2 {
        font-size: 28px;
    }

    .about-section .about-content p {
        font-size: 14px;
    }
}

@media (max-width: 578px) {
    .about-section .about-content h2 {
        font-size: 22px;
    }
}

   /*  section 3  */


.mission-section {
    position: relative;
    padding: 120px 8%;
    
    background: url('../images/slider1.jpg') center/cover no-repeat;
    background-attachment: fixed;
    color: #fff;
    overflow: hidden;
}

    .mission-section .mission-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.8);
        z-index: 1;
    }

    .mission-section .mission-container {
        position: relative;
        z-index: 2;
        max-width: 900px; /* 👈 centered content */
        margin: auto;
        text-align: justify;
    }

/* CONTENT */

    .mission-section .mission-subtitle {
        font-size: 22px;
        margin-bottom: 10px;
        letter-spacing: 1px;
        color: #ccc;
    }

    .mission-section .mission-title {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 20px;
        background: linear-gradient(45deg,#64b5f6,#81c784,#ffb74d);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .mission-section .mission-text {
        font-size: 17px;
        line-height: 1.8;
        margin-bottom: 18px;
        color: #e5e5e5;
    }

/* HIGHLIGHTS */

    .mission-section .mission-highlights {
        margin-top: 35px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: center;
    }

    .mission-section .mission-box {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 12px 18px;
        background: linear-gradient(135deg,#43cea2,#185a9d);
        border-radius: 30px;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 8px 20px rgba(0,0,0,0.4);
        transition: .3s;
    }

        .mission-section .mission-box i {
            font-size: 16px;
        }

        .mission-section .mission-box:hover {
            transform: translateY(-5px) scale(1.05);
        }

/* RESPONSIVE */

@media(max-width:900px) {

    .mission-section .mission-title {
        font-size: 30px;
    }

    .mission-section .mission-text {
        font-size: 15px;
    }
}

@media (max-width:768px) {
    .mission-section .mission-title {
        font-size: 20px;
    }
}













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

.income-section {
    padding: 100px 20px;
    text-align: justify;
}

/* TITLE */

    .income-section .income-subtitle {
        font-size: 18px;
        color: #777;
        margin-bottom: 10px;
        text-align:center;
    }

    .income-section .income-title {
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 20px;
        background: linear-gradient(45deg,#00c853,#00b0ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: center;
    }

/* TEXT */

    .income-section .income-text {
        max-width: 900px;
        margin: auto;
        font-size: 16px;
        color: #555;
        line-height: 1.8;
        margin-bottom: 20px;
    }

/* GRID */

    .income-section .income-list {
        margin-top: 50px;
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(4,1fr);
        gap: 25px;
    }

/* CARD */

    .income-section .income-item {
        position: relative;
        padding: 30px 20px;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 10px 30px rgba(0,0,0,0.08);
        transition: 0.4s;
        overflow: hidden;
    }

    /* ICON */

        .income-section .income-item i {
            font-size: 30px;
            margin-bottom: 15px;
            color: #00c853;
        }

    /* TEXT */

        .income-section .income-item h4 {
            font-size: 16px;
            font-weight: 600;
            color: #222;
            margin-bottom: 10px;
        }

        .income-section .income-item p {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }

    /* HOVER EFFECT */

        .income-section .income-item::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg,#00c853,#00b0ff);
            opacity: 0;
            transition: 0.4s;
        }

        .income-section .income-item:hover::before {
            opacity: 1;
        }

        .income-section .income-item:hover {
            transform: translateY(-10px);
        }

            .income-section .income-item:hover h4,
            .income-section .income-item:hover p,
            .income-section .income-item:hover i {
                color: #fff;
                position: relative;
                z-index: 2;
            }

/* RESPONSIVE */

@media(max-width:1000px) {
    .income-section .income-list {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {
    .income-section .income-list {
        grid-template-columns: 1fr;
    }

    .income-section .income-title {
        font-size: 22px;
    }

    .income-section .income-text {
        font-size: 14px;
    }
}

/* section 5 */


.video-section {
    padding: 80px 20px;
    background: linear-gradient(135deg,#e0f7fa,#fff3e0,#e8f5e9);
}

    .video-section .video-container {
        max-width: 1200px;
        margin: auto;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 50px;
        align-items: center;
    }

    /* IMAGE */
    .video-section .video-thumb {
        position: relative;
        cursor: pointer;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
    }

        .video-section .video-thumb img {
            width: 100%;
            transition: .4s;
        }

        .video-section .video-thumb:hover img {
            transform: scale(1.1);
        }

    /* PLAY BUTTON */
    .video-section .play-btn {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        width: 70px;
        height: 70px;
        background: linear-gradient(45deg,#00bcd4,#ff9800,#2e7d32);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 22px;
        box-shadow: 0 0 20px rgba(0,0,0,0.3);
    }

        .video-section .play-btn:hover {
            transform: translate(-50%,-50%) scale(1.1);
        }

    /* RIGHT CONTENT */
    .video-section .video-right h2 {
        font-size: 34px;
        margin-bottom: 10px;
        background: linear-gradient(135deg, #00c853, #00b0ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .video-section .video-right h4 {
        color: #2e7d32;
        margin-bottom: 20px;
    }

    .video-section .video-right p {
        color: #444;
        line-height: 1.7;
        margin-bottom: 15px;
    }

    /* BUTTON */
    .video-section .video-btn {
        display: inline-block;
        margin-top: 10px;
        padding: 12px 25px;
        border-radius: 8px;
        background: linear-gradient(45deg,#00bcd4,#ff9800,#2e7d32);
        color: #fff;
        text-decoration: none;
        transition: .3s;
    }

        .video-section .video-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
        }

/* RESPONSIVE */
@media(max-width:992px) {
    .video-section .video-container {
        grid-template-columns: 1fr;
    }

    .video-section .video-right h2 {
        font-size: 22px;
    }
}



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

.footer {
    background: #000;
    color: #bbb;
    padding: 80px 20px 30px;
}

    /* top gradient border */

    .footer::before {
        content: "";
        display: block;
        height: 4px;
        width: 100%;
        background: linear-gradient(45deg,#42a5f5,#66bb6a,#ffa726);
        position: absolute;
        left: 0;
        top: 0;
    }

.footer {
    position: relative;
}

.footer-container {
    max-width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 40px;
}

/* LOGO */

.footer-logo {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    background: linear-gradient(45deg,#42a5f5,#66bb6a,#ffa726);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* TEXT */

.footer p {
    font-size: 15px;
    line-height: 1.8;
}

/* HEADINGS */

.footer h4 {
    font-size: 18px;
    margin-bottom: 18px;
    color: #fff;
    position: relative;
}

    .footer h4::after {
        content: "";
        width: 45px;
        height: 3px;
        background: linear-gradient(45deg,#42a5f5,#66bb6a,#ffa726);
        position: absolute;
        left: 0;
        bottom: -6px;
    }

/* LINKS */

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

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

        .footer ul li a {
            text-decoration: none;
            color: #bbb;
            font-size: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
            transition: .3s;
        }

            .footer ul li a:hover {
                color: #ffa726;
                padding-left: 6px;
            }

/* CONTACT ICON */

.footer-col p i {
    margin-right: 8px;
    background: linear-gradient(45deg,#42a5f5,#66bb6a,#ffa726);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SOCIAL ICONS */

.footer-social {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

    .footer-social a {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(45deg, #42a5f5, #66bb6a, #ffa726);
        border-radius: 50%;
        color: #fff; /* icon color stays white */
        font-size: 16px;
        transition: .3s;
        text-decoration: none;
    }

        .footer-social a:hover {
            transform: scale(1.1);
        }

/* BOTTOM */

.footer-bottom {
    margin-top: 50px;
    border-top: 1px solid #222;
    padding-top: 20px;
    text-align: center;
    font-size: 14px;
    color: #777;
}

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

@media(max-width:992px) {

    .footer-container {
        grid-template-columns: repeat(2,1fr);
    }
}

@media(max-width:600px) {

    .footer-container {
        grid-template-columns: 1fr;
       /* text-align: center;*/
    }

    /*.footer-social {
        justify-content: center;
    }*/

    .footer h4::after {
        left: 10%;
        transform: translateX(-50%);
    }
/*
    .footer ul {
        place-items: center;
    }*/

}


/*  ABOUT PAGE STYLE  */



/* ========================= */
/* HERO IMAGE SECTION */
/* ========================= */

.about-hero-img {
    position: relative;
    height: 45vh;
    background: url('../images/ABOUT-BANNER.jpg') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* overlay */
    .about-hero-img::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.7);
    }

    .about-hero-img .hero-text {
        position: relative;
        color: #fff;
        text-align: center;
        z-index: 2;
    }

        .about-hero-img .hero-text h1 {
            font-size: 50px;
            font-weight: 700;
            background: linear-gradient(45deg,#00e676,#00b0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .about-hero-img .hero-text p {
            font-size: 18px;
            color: #ddd;
        }

/* ========================= */
/* ABOUT CONTENT SECTION - MODERN STYLE */
/* ========================= */

/* ========================= */
/* ABOUT CONTENT SECTION - ADJUSTED & ATTRACTIVE */
/* ========================= */

.about-section2 {
    padding: 60px 6%;
    background: #f5f7fa;
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

    /* Container */
    .about-section2 .about-container {
        max-width: 100%;
        margin: auto;
        display: flex;
        align-items: center; /* Align text and image at top */
        gap: 60px;
        flex-wrap: wrap;
    }

    /* LEFT CONTENT */
    .about-section2 .about-left {
        flex: 1;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px 15px;
    }

        /* Gradient heading with underline animation */
        .about-section2 .about-left h2 {
            font-size: 38px;
            margin-bottom: 12px;
            background: linear-gradient(135deg, #00c853, #00b0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            font-weight: 700;
            line-height: 1.2;
            position: relative;
        }

            .about-section2 .about-left h2::after {
                content: '';
                position: absolute;
                left: 0;
                bottom: -5px;
                width: 50px;
                height: 4px;
                background: linear-gradient(90deg, #00c853, #00b0ff);
                border-radius: 2px;
                transition: width 0.3s ease;
            }

            .about-section2 .about-left h2:hover::after {
                width: 100px;
            }

        /* Subheading */
        .about-section2 .about-left h4 {
            font-size: 16px;
            color: #555;
            margin-bottom: 18px;
            font-weight: 500;
        }

        /* Paragraphs */
        .about-section2 .about-left p {
            font-size: 15px;
            color: #333;
            line-height: 1.7;
            margin-bottom: 15px;
            text-align: justify;
            transition: color 0.3s ease;
        }

            .about-section2 .about-left p:hover {
                color: #00b0ff;
            }

    /* RIGHT IMAGE */
    .about-section2 .about-right {
        flex: 1;
        text-align: center;
        min-width: 300px;
        display: flex;
        align-items: flex-start; /* Align image with text top */
        justify-content: center;
        padding: 10px;
    }

        /* Image card with dynamic height matching text */
        .about-section2 .about-right img {
            width: auto; /* maintain aspect ratio */
            max-width: 100%;
            height: auto;
            max-height: 100%; /* Image will not exceed text height */
            border-radius: 30px;
            box-shadow: 0 25px 60px rgba(0, 0, 0, 0.15);
            transition: transform 0.5s ease, box-shadow 0.5s ease;
            object-fit: cover; /* crop if needed */
        }

            .about-section2 .about-right img:hover {
                transform: scale(1.05) rotate(1deg);
                box-shadow: 0 35px 80px rgba(0, 0, 0, 0.2);
            }

        


            /* RESPONSIVE STYLES */
            /* ========================= */
            /* Medium screens (tablets) */
            @media (max-width: 992px) {
    .about-section2 .about-container {
        flex-direction: column;
        text-align: center;
        flex-wrap: nowrap;
        gap: 40px;
    }

    .about-section2 .about-left {
        order: 1;
    }

    .about-section2 .about-right {
        order: 2;
    }

    .about-section2 .about-left p {
        text-align: left;
        font-size: 15px;
        line-height: 1.7;
    }

    .about-hero-img .hero-text h1 {
        font-size: 36px;
    }

    .about-hero-img .hero-text p {
        font-size: 16px;
    }

    .about-section2 .about-left h2 {
        font-size: 32px;
    }

    .about-section2 .about-left h4 {
        font-size: 16px;
    }
}
            /* Small screens (mobile) */
            @media (max-width: 768px) {
    .about-section2 {
        padding: 50px 5%;
    }

    .about-hero-img {
        height: 35vh;
    }

        .about-hero-img .hero-text h1 {
            font-size: 28px;
        }

        .about-hero-img .hero-text p {
            font-size: 14px;
        }

    .about-section2 .about-left h2 {
        font-size: 28px;
    }

    .about-section2 .about-left h4 {
        font-size: 14px;
    }

    .about-section2 .about-left p {
        font-size: 14px;
        line-height: 1.6;
    }

    .about-section2 .about-right img {
        max-width: 100%;
        margin-top: 20px;
        height: auto;
    }

    .about-section2 .about-container {
        gap: 20px; /* smaller gap */
    }
}
            /* Extra small screens (very small mobile) */
            @media (max-width: 578px) {
    .about-hero-img {
        height: 40vh;
    }

        .about-hero-img .hero-text h1 {
            font-size: 24px;
        }

        .about-hero-img .hero-text p {
            font-size: 12px;
        }

    .about-section2 .about-left h2 {
        font-size: 24px;
    }

    .about-section2 .about-left h4 {
        font-size: 13px;
    }

    .about-section2 .about-left p {
        font-size: 13px;
        line-height: 1.5;
    }

    .about-section2 .about-right img {
        max-width: 100%;
        margin-top: 15px;
        height: auto;
    }
}



/* about section 3 */


/* ========================= */
/* MISSION & VISION SECTION */
/* ========================= */
.mission_section {
    width: 88%;
    place-self: center;
    position: relative;
    background: url('../images/vision-mosion.jpg') center/cover no-repeat fixed;
    background-size: cover;
    color: #fff;
    padding: 80px 8%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    border-radius: 25px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
}

    /* Dark overlay */
    .mission_section::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        pointer-events: none;
    }

.mission-content {
    position: relative;
    max-width: 900px;
    z-index: 2;
    animation: fadeInUp 1s ease forwards;
}

    /* HEADINGS */
    .mission-content h2 {
        font-size: 46px;
        font-weight: 900;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
        background: linear-gradient(135deg, #00c853, #00b0ff);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        position: relative;
        display: inline-block;
    }

        .mission-content h2::after {
            content: '';
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 80px;
            height: 5px;
            background: linear-gradient(90deg, #00c853, #00b0ff);
            border-radius: 3px;
            transition: width 0.3s ease;
        }

        .mission-content h2:hover::after {
            width: 150px;
        }

    .mission-content h3 {
        font-size: 30px;
        font-weight: 600;
        margin-bottom: 30px;
        color: #fff;
    }

    /* PARAGRAPH */
    .mission-content p {
        font-size: 18px;
        line-height: 1.8;
        margin-bottom: 35px;
        color: #eee;
        text-align: justify;
        transition: color 0.3s ease;
    }

        .mission-content p:hover {
            color: #00b0ff;
        }

/* TAGS / SLOGANS */
.mission-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: center;
}

    .mission-tags span {
        background: rgba(0, 176, 255, 0.2);
        color: #fff;
        padding: 12px 25px;
        border-radius: 30px;
        font-weight: 600;
        font-size: 16px;
        transition: all 0.3s ease;
        cursor: default;
    }

        .mission-tags span:hover {
            background: rgba(0, 200, 83, 0.3);
            transform: translateY(-3px) scale(1.05);
        }

/* Fade in animation */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================= */
/* RESPONSIVE STYLES */
/* ========================= */
@media(max-width: 992px) {
    .mission-section {
        width: 100%;
        padding: 80px 6%;
    }

    .mission-content h2 {
        font-size: 38px;
    }

    .mission-content h3 {
        font-size: 26px;
    }

    .mission-content p {
        font-size: 16px;
    }
}

@media(max-width: 768px) {
    .mission-section {
        padding: 60px 5%;
    }

    .mission-content h2 {
        font-size: 32px;
    }

    .mission-content h3 {
        font-size: 22px;
    }

    .mission-content p {
        font-size: 15px;
    }

    .mission-tags {
        flex-direction: column;
        gap: 12px;
    }
}

@media(max-width: 578px) {
    .mission-section {
        padding: 50px 2%;
    }

    .mission-content h2 {
        font-size: 22px;
       
    }

    .mission-content h3 {
        font-size: 18px;
    }

    .mission-content p {
        font-size: 14px;
    }
}

/* about section 4 */


/* ========================= */
/* STRENGTH SECTION */
/* ========================= */
.strength-section {
    padding: 80px 6%;
    position: relative;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.1);
    overflow: hidden;
}

    .strength-section .strength-content {
        max-width: 100%;
        margin: auto;
        text-align: center;
    }

    /* Heading */
        .strength-section .strength-content h2 {
            font-size: 42px;
            font-weight: 800;
            margin-bottom: 15px;
            background: linear-gradient(135deg,#00c853,#00b0ff);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            position: relative;
        }

            .strength-section .strength-content h2::after {
                content: '';
                position: absolute;
                left: 50%;
                bottom: -10px;
                transform: translateX(-50%);
                width: 80px;
                height: 5px;
                background: linear-gradient(90deg,#00c853,#00b0ff);
                border-radius: 3px;
            }

        .strength-section .strength-content h3 {
            font-size: 26px;
            font-weight: 500;
            color: #555;
            margin-bottom: 30px;
        }

        .strength-section .strength-content p {
            font-size: 18px;
            line-height: 1.8;
            color: #444;
            max-width: 900px;
            margin: auto;
            margin-bottom: 50px;
        }

/* Cards Grid */
    .strength-section .strength-cards {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
        justify-content: center;
    }

/* Individual Card */
    .strength-section .strength-card {
        position: relative;
        background: #fff;
        flex: 1 1 280px;
        max-width: 320px;
        border-radius: 25px;
        padding: 40px 25px 25px 25px;
        box-shadow: 0 15px 40px rgba(0,0,0,0.08);
        transition: transform 0.5s ease, box-shadow 0.5s ease, background 0.5s ease;
        text-align: left;
        overflow: hidden;
    }

        .strength-section .strength-card p{
            margin-bottom: 0;
        }

        .strength-section .strength-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: -50%;
            width: 200%;
            height: 100%;
            background: linear-gradient(120deg,#00c853,#00b0ff);
            opacity: 0;
            transform: skewX(-20deg);
            transition: opacity 0.5s ease;
            z-index: 0;
        }

        .strength-section .strength-card:hover::before {
            opacity: 0.08;
        }

        .strength-section .strength-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 25px 60px rgba(0,0,0,0.15);
        }

    /* Number badge */
        .strength-section .strength-card .icon {
            position: absolute;
            top: -15px;
            left: -15px;
            width: 60px;
            height: 60px;
            background: linear-gradient(135deg,#00c853,#00b0ff);
            color: #fff;
            font-weight: 700;
            font-size: 22px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            z-index: 2;
        }

    /* Card Text */
        .strength-section .strength-card h4 {
            font-size: 20px;
            font-weight: 700;
            color: #00b0ff;
            margin-bottom: 12px;
            margin-top: 7px;
            position: relative;
            z-index: 1;
        }

        .strength-section .strength-card p {
            font-size: 16px;
            color: #555;
            line-height: 1.8;
            position: relative;
            z-index: 1;
        }

/* ========================= */
/* RESPONSIVE STYLES */
/* ========================= */
@media(max-width: 992px) {
    .strength-section {
        padding: 80px 5%;
    }

    .strength-section .strength-content h2 {
        font-size: 36px;
    }

    .strength-section .strength-content h3 {
        font-size: 22px;
    }

    .strength-section .strength-content p {
        font-size: 16px;
    }
}

@media(max-width: 768px) {
    .strength-section {
        padding: 60px 4%;
    }

        .strength-section .strength-content h2 {
            font-size: 32px;
        }

        .strength-section .strength-content h3 {
            font-size: 20px;
        }

        .strength-section .strength-content p {
            font-size: 15px;
        }

        .strength-section .strength-cards {
            flex-direction: column;
            align-items: center;
        }
}

@media(max-width: 480px) {
    .strength-section {
        padding: 50px 3%;
    }

        .strength-section .strength-content h2 {
            font-size: 22px;
        }

        .strength-section .strength-content h3 {
            font-size: 18px;
        }

        .strength-section .strength-content p {
            font-size: 14px;
            text-align: justify;
        }

        .strength-section .strength-card {
            max-width: 100%;
            padding: 15px;
            flex: 1 1 auto;
        }

            .strength-section .strength-card .icon {
                width: 50px;
                height: 50px;
                font-size: 18px;
                top: -15px;
                left: -15px;
                display: none;
            }
}


/* SERVICES PAGE STYLE */


/* ========================= */
/* HERO */
/* ========================= */
.service-hero .hero {
    width: 100%;
    height: 70vh;
    background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('../images/services.jpg') no-repeat center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 0 20px;
}

.service-hero .hero-content {
    max-width: 1000px;
    animation: fadeUp 1s ease;
}

.service-hero .hero h1 {
    font-size: 40px;
    margin-bottom: 15px;
    background: linear-gradient(45deg, #00e676, #00b0ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.service-hero .hero h3 {
    font-size: 20px;
    margin-bottom: 20px;
}

.service-hero .hero p {
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 30px;
    text-align: justify
}

.service-hero .hero-btns {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

.service-hero .btn-primary {
    padding: 12px 28px;
    background: linear-gradient(45deg,#43a047,#1b5e20);
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    transition: .3s;
}

    .service-hero .btn-primary:hover {
        transform: translateY(-3px);
    }

.service-hero .btn-secondary {
    padding: 12px 28px;
    border: 2px solid #fff;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
}

    .service-hero .btn-secondary:hover {
        background: #fff;
        color: #0a3d2c;
    }

@media (max-width:1200px) {
    .service-hero .hero h1 {
        font-size: 40px;
    }
}

@media (max-width:992px) {
    .service-hero .hero {
        height: 80vh;
        padding: 80px 20px;
    }

        .service-hero .hero h1 {
            font-size: 34px;
        }

        .service-hero .hero h3 {
            font-size: 18px;
        }

        .service-hero .hero p {
            font-size: 15px;
            margin-bottom: 10px;
        }
}

@media(max-width:768px) {
    .service-hero .hero {
        padding: 70px 15px;
    }

        .service-hero .hero h1 {
            font-size: 28px;
            line-height: 1.3;
        }

        .service-hero .hero h3 {
            font-size: 16px;
        }

        .service-hero .hero p {
            font-size: 14px;
        }
}

@media(max-width:576px) {
    .service-hero .hero {
        padding: 60px 15px;
    }

        .service-hero .hero h1 {
            font-size: 24px;
        }

        .service-hero .hero h3 {
            font-size: 15px;
        }

        .service-hero .hero p {
            font-size: 13px;
        }
}

@media(max-width:400px) {
    .service-hero .hero h1 {
        font-size: 20px;
    }

    .service-hero .hero h3 {
        font-size: 14px;
    }
}


@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* SERVICES SECTION 1 */

/* ========================= */
/* SECTION */
/* ========================= */
.wellness {
    padding: 90px 20px;
}

    .wellness .wellness-container {
        max-width: 1300px;
        margin: auto;
    }

    /* HEADING */
    .wellness .wellness-header {
        text-align: center;
        margin-bottom: 60px;
    }

        .wellness .wellness-header h2 {
            font-size: 40px;
            margin-bottom: 10px;
            background: linear-gradient(45deg,#00bcd4,#2e7d32);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .wellness .wellness-header p {
            font-size: 16px;
            color: #555;
            max-width: 750px;
            margin: auto;
        }

    /* CONTENT */
    .wellness .wellness-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: center;
    }

    /* TEXT */
    .wellness .wellness-text p {
        font-size: 15px;
        color: #444;
        line-height: 1.8;
        margin-bottom: 20px;
    }

    /* HIGHLIGHTS */
    .wellness .highlights {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 20px;
        margin-top: 30px;
    }

    .wellness .highlight-box {
        background: rgba(255,255,255,0.7);
        backdrop-filter: blur(10px);
        padding: 18px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        gap: 15px;
        box-shadow: 0 8px 20px rgba(0,0,0,0.08);
        transition: .3s;
    }

        .wellness .highlight-box:hover {
            transform: translateY(-6px) scale(1.02);
        }

    /* ICON STYLE */
    .wellness .highlight-icon {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        background: linear-gradient(45deg,#00bcd4,#2e7d32);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 18px;
    }

    /* IMAGE */
    .wellness .wellness-img img {
        width: 100%;
        border-radius: 20px;
        box-shadow: 0 15px 35px rgba(0,0,0,0.2);
        transition: .4s;
    }

        .wellness .wellness-img img:hover {
            transform: scale(1.05);
        }

/* ========================= */
/* RESPONSIVE */
/* ========================= */
@media(max-width:992px) {
    .wellness .wellness-content {
        grid-template-columns: 1fr;
    }

    .wellness .wellness-header h2 {
        font-size: 32px;
    }
}

@media(max-width:576px) {
    .wellness .wellness-header h2 {
        font-size: 22px;
    }

    .wellness .highlights {
        grid-template-columns: 1fr;
    }
}


/* contact page style */



/* ================= HERO ================= */
.contact .contact-hero {
    height: 60vh;
    background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)), url('../images/slider2.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
}

    .contact .contact-hero h1 {
        font-size: 44px;
        letter-spacing: 1px;
    }

/* ================= SECTION ================= */
.contact .contact-section {
    padding: 80px 20px;
    background: linear-gradient(135deg,#e0f7fa,#fff3e0,#e8f5e9);
}

.contact .container {
    max-width: 1200px;
    margin: auto;
}

/* ================= CARDS ================= */
.contact .contact-cards {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 25px;
    margin-bottom: 50px;
}

.contact .contact-card {
    background: rgba(255,255,255,0.6);
    backdrop-filter: blur(12px);
    padding: 30px;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    transition: .4s;
}

    .contact .contact-card:hover {
        transform: translateY(-10px) scale(1.03);
    }

.contact .contact-icon {
    font-size: 32px;
    background: linear-gradient(45deg,#00bcd4,#ff9800,#2e7d32);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15px;
}

/* ================= FORM ================= */
.contact .contact-form {
    background: rgba(255,255,255,0.7);
    backdrop-filter: blur(12px);
    padding: 35px;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    /* NEW CHANGE */
    max-width: 600px;
    margin: 0 auto 40px auto;
}

    .contact .contact-form h3 {
        margin-bottom: 20px;
        font-size: 24px;
    }

.contact .form-group {
    margin-bottom: 18px;
}

    .contact .form-group input,
    .contact .form-group textarea {
        width: 100%;
        padding: 14px;
        border: 1px solid rgba(0,0,0,0.1);
        border-radius: 10px;
        outline: none;
        transition: .3s;
    }

        .contact .form-group input:focus,
        .contact .form-group textarea:focus {
            border-color: #00bcd4;
            box-shadow: 0 0 8px rgba(0,188,212,0.3);
        }

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

.contact .submit-div {
    width: 100%;
    display: flex;
    justify-content: end;
}

/* BUTTON */
.contact .btn-submit {
    width: auto;
    padding: 14px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(45deg,#00bcd4,#ff9800,#2e7d32);
    color: #fff;
    font-size: 16px;
    cursor: pointer;
    transition: .3s;
}

    .contact .btn-submit:hover {
        transform: scale(1.05);
        box-shadow: 0 10px 20px rgba(0,0,0,0.2);
    }

/* ================= MAP FULL WIDTH ================= */
.contact .map-full {
    width: 100%;
}

    .contact .map-full iframe {
        width: 100%;
        height: 400px;
        border: none;
        border-radius: 0; /* edge-to-edge look */
    }

/* ================= RESPONSIVE ================= */
@media(max-width:992px) {
    .contact .contact-cards {
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width:576px) {
    .contact .contact-cards {
        grid-template-columns: 1fr;
    }

    .contact .contact-hero h1 {
        font-size: 28px;
    }

    .contact .contact-form{
        padding: 20px 15px;
    }
}


/* R-BV-HLP PAGE STYLE */


.r-bv-hlp .hero {
    height: 350px;
    background: url('../images/r-bv.jpg') no-repeat center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* DARK OVERLAY */
    .r-bv-hlp .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.10);
    }

    .r-bv-hlp .hero .overlay{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        display: flex;
        flex-direction: column;
         align-items:center;
         justify-content: center;
        
    }
    /* HERO CONTENT */
    .r-bv-hlp .hero-content {
        position: relative;
        color: #fff;
        text-align: center;
        z-index: 2;
        padding: 0 15px;
    }

    .r-bv-hlp .hero-content h1 {
        font-size: 34px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .r-bv-hlp .hero-content p {
        font-size: 16px;
        opacity: 0.9;
    }

/* ================= FILTER BAR ================= */
.r-bv-hlp .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin: -40px 20px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    justify-content: center;
    position: relative;
    z-index: 5;
}

    .r-bv-hlp .filter-bar select,
    .r-bv-hlp .filter-bar input {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ddd;
        min-width: 200px;
    }

/* BUTTONS */
.r-bv-hlp .btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
}

.r-bv-hlp .btn-search {
    background: linear-gradient(45deg,#00c853,#00b0ff);
}

.r-bv-hlp .btn-refresh {
    background: linear-gradient(45deg,#ff6d00,#d50000);
}

/* ================= PRODUCT GRID ================= */
.r-bv-hlp .product-section {
    padding: 20px 6rem;
}

.r-bv-hlp .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 260px));
    gap: 20px;
    justify-content: start;
}

/* ================= CARD ================= */
/* ================= CARD ================= */
.r-bv-hlp .product-card {
    width: 260px;
    /*height: 420px;*/
    height: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    cursor: pointer;
}

    /* GLOW BORDER EFFECT */
    .r-bv-hlp .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 2px;
        background: linear-gradient(45deg,#00c853,#00b0ff,#ff6d00);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        opacity: 0;
        transition: 0.4s;
    }

    /* HOVER MAIN */
    .r-bv-hlp .product-card:hover {
        transform: translateY(-12px) scale(1.01);
        box-shadow: 0 25px 60px rgba(0,0,0,0.18);
    }

        /* BORDER SHOW */
        .r-bv-hlp .product-card:hover::before {
            opacity: 1;
        }

    /* IMAGE */
    .r-bv-hlp .product-card img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: 0.4s;
    }

    /* IMAGE ZOOM */
    .r-bv-hlp .product-card:hover img {
        transform: scale(1.1);
    }

/* CONTENT */
.product-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* TITLE */
.r-bv-hlp .product-title {
    font-size: 15px;
    font-weight: 600;
    color: #00b0ff;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

/* META */
.r-bv-hlp .product-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
}

/* PRICE */
.r-bv-hlp .product-price {
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

/* OLD PRICE */
.r-bv-hlp .old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
}

.r-bv-hlp .add-cart-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(45deg,#00c853,#00b0ff);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 0.7rem;
}

    .r-bv-hlp .add-cart-btn:hover {
        background: linear-gradient(45deg,#ff6d00,#d50000);
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .r-bv-hlp .add-cart-btn:active {
        transform: scale(0.95);
    }

/* ================= RESPONSIVE ================= */
@media(max-width:768px) {
    .r-bv-hlp .product-section {
        padding: 20px 10px;
    }

    .r-bv-hlp .hero {
        height: 260px;
    }

    .r-bv-hlp .hero-content h1 {
        font-size: 24px;
    }

    .r-bv-hlp .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .r-bv-hlp .product-card {
        width: 100%;
        height: auto;
    }

        .r-bv-hlp .product-card img {
            height: 140px;
        }

    .r-bv-hlp .filter-bar select, .filter-bar input {
        width: 100%;
    }

    .r-bv-hlp .filter-bar {
        flex-direction: column;
        align-items: center;
    }
}








/* R-BV-otherBrand PAGE STYLE */


.r-bv-other .hero {
    height: 350px;
    background: url('../images/r-bv-other.jpg') no-repeat center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* DARK OVERLAY */
    .r-bv-other .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.10);
    }

    .r-bv-other .hero .overlay {
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
/* HERO CONTENT */
.r-bv-other .hero-content {
    position: relative;
    color: #fff;
    text-align: center;
    z-index: 2;
    padding: 0 15px;
}

    .r-bv-other .hero-content h1 {
        font-size: 34px;
        margin-bottom: 10px;
        font-weight: 700;
    }

    .r-bv-other .hero-content p {
        font-size: 16px;
        opacity: 0.9;
    }

/* ================= FILTER BAR ================= */
.r-bv-other .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    margin: -40px 20px 20px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.08);
    justify-content: center;
    position: relative;
    z-index: 5;
}

    .r-bv-other .filter-bar select,
    .r-bv-other .filter-bar input {
        padding: 10px;
        border-radius: 8px;
        border: 1px solid #ddd;
        min-width: 200px;
    }

/* BUTTONS */
.r-bv-other .btn {
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
}

.r-bv-other .btn-search {
    background: linear-gradient(45deg,#00c853,#00b0ff);
}

.r-bv-other .btn-refresh {
    background: linear-gradient(45deg,#ff6d00,#d50000);
}

/* ================= PRODUCT GRID ================= */
.r-bv-other .product-section {
    padding: 20px 6rem;
}

.r-bv-other .product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 260px));
    gap: 20px;
    justify-content: start;
}

/* ================= CARD ================= */
/* ================= CARD ================= */
.r-bv-other .product-card {
    width: 260px;
    /*height: 420px;*/
    height: auto;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    cursor: pointer;
}

    /* GLOW BORDER EFFECT */
    .r-bv-other .product-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 18px;
        padding: 2px;
        background: linear-gradient(45deg,#00c853,#00b0ff,#ff6d00);
        -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        opacity: 0;
        transition: 0.4s;
    }

    /* HOVER MAIN */
    .r-bv-other .product-card:hover {
        transform: translateY(-12px) scale(1.01);
        box-shadow: 0 25px 60px rgba(0,0,0,0.18);
    }

        /* BORDER SHOW */
        .r-bv-other .product-card:hover::before {
            opacity: 1;
        }

    /* IMAGE */
    .r-bv-other .product-card img {
        width: 100%;
        height: 280px;
        object-fit: cover;
        transition: 0.4s;
    }

    /* IMAGE ZOOM */
    .r-bv-other .product-card:hover img {
        transform: scale(1.1);
    }

/* CONTENT */
.r-bv-other .product-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* TITLE */
.r-bv-other .product-title {
    font-size: 15px;
    font-weight: 600;
    color: #00b0ff;
    margin-bottom: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 40px;
}

/* META */
.r-bv-other .product-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
}

/* PRICE */
.r-bv-other .product-price {
    font-size: 18px;
    font-weight: bold;
    color: #222;
}

/* OLD PRICE */
.r-bv-other .old-price {
    text-decoration: line-through;
    color: #999;
    font-size: 13px;
}

.r-bv-other .add-cart-btn {
    margin-top: auto;
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(45deg,#00c853,#00b0ff);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 0.7rem;
}

    .r-bv-other .add-cart-btn:hover {
        background: linear-gradient(45deg,#ff6d00,#d50000);
        transform: scale(1.05);
        box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    }

    .r-bv-other .add-cart-btn:active {
        transform: scale(0.95);
    }

/* ================= RESPONSIVE ================= */
@media(max-width:768px) {
    .r-bv-other .product-section {
        padding: 20px 10px;
    }

    .r-bv-other .hero {
        height: 310px;
    }

    .r-bv-other .hero-content h1 {
        font-size: 24px;
    }

    .r-bv-other .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .r-bv-other .product-card {
        width: 100%;
        height: auto;
    }

        .r-bv-other .product-card img {
            height: 140px;
        }

    .r-bv-other .filter-bar select, .filter-bar input {
        width: 100%;
    }

    .r-bv-other .filter-bar {
        flex-direction: column;
        align-items: center;
    }
}


/* Opportunity page style */


.opportunity .hero {
    height: 350px;
    background: url('../images/opportunity.jpg') no-repeat center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.opportunity .hero-content {
    position: relative;
    text-align: center;
    z-index: 2;
    color: #fff;
    padding: 0 15px;
}

.opportunity .gradient-text {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(45deg, #00c853, #00b0ff, #ff6d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.opportunity .hero-content p {
    font-size: 16px;
    margin-top: 10px;
    opacity: 0.9;
}

@media(max-width:768px) {
    .opportunity .hero {
        height: 260px;
    }

    .opportunity .gradient-text {
        font-size: 26px;
    }
}

.opportunity .business-section {
    padding: 70px 20px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.opportunity .overlay {
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.opportunity .business-section::before {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0,176,255,0.15), transparent 70%);
    top: 20%;
    left: 10%;
    z-index: 0;
}

.opportunity .business-section::after {
    content: "";
    position: absolute;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(0,200,83,0.15), transparent 70%);
    bottom: 10%;
    right: 10%;
    z-index: 0;
}

.opportunity .business-content {
    max-width: 700px;
    background: #fff;
    padding: 40px 30px;
    border-radius: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08);
    transition: 0.4s ease;
}

    .opportunity .business-content:hover {
        transform: translateY(-8px);
        box-shadow: 0 30px 80px rgba(0,0,0,0.12);
    }

.opportunity .gradient-text {
    font-size: 40px;
    font-weight: 700;
    line-height: 1.3;
    background: linear-gradient(45deg, #00c853, #00b0ff, #ff6d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 20px;
}

.opportunity .sub-text {
    font-size: 16px;
    color: #555;
    margin-bottom: 30px;
}

.opportunity .btn-pdf {
    display: inline-block;
    padding: 12px 30px;
    background: linear-gradient(45deg, #00c853, #00b0ff);
    color: #fff;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.5px;
    box-shadow: 0 10px 25px rgba(0,176,255,0.3);
    transition: 0.3s ease;
}

    .opportunity .btn-pdf:hover {
        background: linear-gradient(45deg, #ff6d00, #d50000);
        transform: translateY(-3px) scale(1.05);
        box-shadow: 0 15px 35px rgba(255,109,0,0.35);
    }

@media (max-width: 768px) {

    .opportunity .gradient-text {
        font-size: 26px;
    }

    .opportunity .sub-text {
        font-size: 14px;
    }

    .opportunity .business-content {
        padding: 30px 20px;
    }

    .opportunity .business-section {
        padding: 60px 15px;
    }
}



/* IMAGE GALLERY PAGE STYLE */


/* ================= HERO ================= */
.gallery-hero {
    height: 320px;
    background: url('../images/img-gallery.jpg') no-repeat center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* OVERLAY */
    .gallery-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.5);
    }

/* HERO CONTENT */
.gallery-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
    padding: 0 15px;
}

/* GRADIENT TITLE */
.gradient-text {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(45deg,#00c853,#00b0ff,#ff6d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* SUBTEXT */
.gallery-hero-content p {
    margin-top: 10px;
    font-size: 16px;
    opacity: 0.9;
}

/* ================= GALLERY ================= */
.gallery-section {
    padding: 80px 40px;
    background: #fff;
}

/* GRID */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

/* CARD */
.gallery-card {
    width: 25%;
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    cursor: pointer;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}

    /* IMAGE */
    .gallery-card img {
        width: 100%;
        height: 250px;
        object-fit: cover;
        transition: 0.5s ease;
    }

    /* OVERLAY */
    .gallery-card::before {
        content: "View Image";
        position: absolute;
        inset: 0;
        background: linear-gradient(45deg, rgba(0,200,83,0.7), rgba(0,176,255,0.7));
        color: #fff;
        font-weight: 600;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
    }

    /* HOVER EFFECT */
    .gallery-card:hover::before {
        opacity: 1;
    }

    .gallery-card:hover img {
        transform: scale(1.1);
    }

    .gallery-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 25px 60px rgba(0,0,0,0.15);
    }

/* ================= RESPONSIVE ================= */
@media(max-width:768px) {

    .gallery-hero {
        height: 250px;
    }

    .gradient-text {
        font-size: 26px;
    }
    .gallery-card {
        width: 100%;
    }
    .gallery-section {
        padding: 50px 15px;
    }

    .gallery-card img {
        height: 200px;
    }
}


/* vedio gallery page style */


/* ================= HERO ================= */
.vedio-gallery .video-hero {
    height: 320px;
    background: url('../images/vedio-gallery.jpg') no-repeat center/cover;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .vedio-gallery .video-hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(0,0,0,0.7);
    }

.vedio-gallery .video-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.vedio-gallery .gradient-text {
    font-size: 36px;
    font-weight: 700;
    background: linear-gradient(45deg,#00c853,#00b0ff,#ff6d00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.vedio-gallery .video-hero-content p {
    margin-top: 10px;
}

/* ================= VIDEO SECTION ================= */
.vedio-gallery .video-section {
    padding: 80px 40px;
    background: #fff;
}
/* GRID */
.vedio-gallery .video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 300px));
    gap: 20px;
    justify-content: start;
}

/* CARD */
.vedio-gallery .video-card {
    width: 300px;
    height: auto;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
}

    /* IMAGE */
    .vedio-gallery .video-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* PLAY BUTTON */
    .vedio-gallery .video-card::before {
        content: "▶";
        position: absolute;
        font-size: 24px;
        color: #fff;
        background: rgba(0,0,0,0.6);
        width: 55px;
        height: 55px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: 0.3s;
    }

    /* HOVER */
    .vedio-gallery .video-card:hover {
        transform: translateY(-6px) scale(1.03);
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    }

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

        .vedio-gallery .video-card:hover::before {
            background: linear-gradient(45deg,#00c853,#00b0ff);
            transform: translate(-50%, -50%) scale(1.1);
        }

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

/* ================= POPUP ================= */
.vedio-gallery .video-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.8);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
    
}

    .vedio-gallery .video-popup iframe {
        width: 80%;
        height: 450px;
        border-radius: 10px;
    }

/* CLOSE BUTTON */
.vedio-gallery .close-btn {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    margin-top: 4rem;
}

/* ================= RESPONSIVE ================= */
@media(max-width:768px) {

    .vedio-gallery .video-hero {
        height: 250px;
    }

    .vedio-gallery .gradient-text {
        font-size: 26px;
    }

    .vedio-gallery .video-section {
        padding: 50px 15px;
    }

    .vedio-gallery .video-card img {
        height: 180px;
    }

    .vedio-gallery .video-popup iframe {
        width: 95%;
        height: 250px;
    }
}



@media(max-width:768px) {

    .vedio-gallery .video-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 cards */
        gap: 12px;
    }

    .vedio-gallery .video-card {
        width: 100%;
        height: 140px; /* mobile size */
    }
}