body {
    padding-top: 65px;
}

a {
    color: #00ffc3;
    text-decoration: none;
    transition: all 0.3s ease;
}

a:hover {
    color: #9a8d17;
    text-shadow: 0 0 8px rgba(255, 235, 59, 0.7);
}

/* ==========================================
🌑 GLOBAL BASE STYLES
========================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

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

/* ==========================================
🔰 NAVBAR
========================================== */
header {
    background: #000;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    height: auto !important;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 15px;
    border-bottom: 1px solid #ecde0d;
    background: #000;
    backdrop-filter: blur(2px);
    z-index: 1000;
}

.logo a {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.logo img {
    height: 48px;
}

.logo strong {
    color: #ffc109;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-shadow: 0 0 6px rgba(0, 255, 195, 0.4);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 40px;
}

.nav-links a {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.nav-links a:hover {
    color: #00ffc3;
    text-shadow: 0 0 6px rgba(0, 255, 195, 0.8);
}

.nav-links a.active {
    color: #fff200;
    background: rgba(0, 255, 195, 0.08);
    border: 1px solid #00ffc3;
    box-shadow: 0 0 10px rgba(0, 255, 195, 0.5),
        inset 0 0 10px rgba(0, 255, 195, 0.3);
}

.nav-links,
.nav-links ul,
.nav-links li {
    list-style: none !important;
    margin: 0;
    padding: 0;
}

section,
.hero,
.event-hero,
.training-vigilance,
.security-services-page,
.about-section,
.contact-section,
.it-info,
.it-services,
.cloud-about,
.cloud-offerings,
.cloud-why,
.cloud-cta {
    margin-top: 0 !important;
}

/* ===== Menu Toggle ===== */
.menu-toggle {
    display: none;
    color: #00ffc3;
    font-size: 1.8rem;
    cursor: pointer;
}

/* ===== Mobile & Tablet Navbar ===== */
@media (max-width: 1024px) {

    .navbar {
        padding: 12px 20px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 2000;
    }

    .menu-toggle {
        display: block;
        font-size: 2rem;
        cursor: pointer;
        color: #00ffc3;
        margin-left: auto;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        background: rgba(0, 0, 0, 0.95);
        border-top: 1px solid #00ffc3;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 25px 0;
        gap: 20px;
        text-align: center;
        z-index: 1500;
    }

    .nav-links.show {
        display: flex !important;
    }
}


@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

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

/* ==========================================
🔰 SECURITY SERVICES DROPDOWN MENU
========================================== */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropbtn {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    font-size: 1rem;
    padding: 8px 15px;
    border-radius: 8px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.dropbtn:hover {
    color: #00ffc3;
    text-shadow: 0 0 6px rgba(0, 255, 195, 0.8);
}

.dropdown-content {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    min-width: 200px;
    border: 1px solid #00ffc3;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 255, 195, 0.3);
    top: 110%;
    left: 0;
    z-index: 9999;
}

.dropdown-content a {
    color: #00bfff;
    padding: 10px 15px;
    display: block;
    text-decoration: none;
    transition: background 0.3s ease;
}

.dropdown-content a:hover {
    background: rgba(0, 255, 195, 0.1);
    color: #00ffc3;
}

@media (min-width: 1025px) {
    .dropdown:hover .dropdown-content {
        display: block;
    }
}

/* =============== MOBILE (Click Toggle) =============== */
@media (max-width: 1024px) {
    .dropdown {
        width: 100%;
        text-align: center;
    }

    .dropdown-content {
        position: static;
        background: rgba(0, 0, 0, 0.9);
        border: none;
        box-shadow: none;
        margin-top: 10px;
    }

    .dropdown-content a {
        padding: 12px;
        border-top: 1px solid rgba(0, 255, 195, 0.2);
    }

    .dropdown.active .dropdown-content {
        display: block;
    }
}


/* ==========================================
🖼️ HERO SECTION (Full Image + Text Below)
========================================== */
header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #000;
    margin-top: 80px;
}

.hero-slide {
    text-align: center;
}

.hero-slide img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    display: block;
    background-color: #000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.hero-text {
    text-align: center;
    background: #0b0c10;
    color: #fff;
    padding: 25px 20px 40px;
    border-top: 1px solid rgba(255, 255, 0, 0.3);
    border-bottom: 1px solid rgba(0, 255, 195, 0.2);
}

.hero-text h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #ffeb3b;
    margin-bottom: 12px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

.hero-text p {
    font-size: 1.1rem;
    color: #e0e0e0;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
}

/* ===== Responsive ===== */
@media (min-width: 1025px) {
    .hero-slide img {
        max-height: 90vh;
    }
}

@media (max-width: 1024px) {
    .hero-text h2 {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .hero-text {
        padding: 20px 15px 35px;
    }

    .hero-text h2 {
        font-size: 1.5rem;
    }

    .hero-text p {
        font-size: 0.95rem;
    }
}

@media (max-width: 768px) {
    .hero {
        margin-top: 100px;
    }
}

/* ==========================================
🤝 OUR CLIENTS
========================================== */
.clients-slider {
    text-align: center;
    padding: 80px 20px;
    background: #111317;
    border-bottom: 1px solid #1f2833;
}

.clients-slider h2 {
    color: #66fcf1;
    font-size: 2rem;
    margin-bottom: 10px;
}

.clients-info {
    color: #dcdcdc;
    max-width: 900px;
    margin: 0 auto 40px;
    font-size: 1rem;
}

.logo-slider {
    overflow: hidden;
    white-space: nowrap;
}

.logo-track {
    display: inline-flex;
    animation: slide 20s linear infinite;
}

.logo-slide img {
    height: 70px;
    margin: 0 40px;
    filter: grayscale(20%);
    transition: filter 0.3s ease;
}

.logo-slide img:hover {
    filter: grayscale(0%);
}

.hero,
.hero-slide img,
.event-hero,
.slider-container,
.home-hero-box {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

@keyframes slide {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Responsive */
@media (max-width: 900px) {
    .clients-slider {
        padding: 50px 15px;
    }

    .clients-info {
        font-size: 0.95rem;
    }

    .clients-slider h2 {
        font-size: 1.6rem;
    }

    .logo-slide img {
        height: 55px;
        margin: 0 25px;
    }
}

/* ==========================================
🗺️ PRESENCE SECTION
========================================== */
.presence-section {
    padding: 80px 20px;
    background: #0b0c10;
    border-bottom: 1px solid #1f2833;
    color: #fff;
}

/* ===== Heading ===== */
.presence-section h2 {
    color: #00ffc3;
    text-align: center;
    font-size: 2.4rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.presence-subtext {
    color: #dcdcdc;
    text-align: center;
    max-width: 850px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

/* ===== Card Layout ===== */
.presence-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    background: #111317;
    border-radius: 14px;
    padding: 40px 30px;
    gap: 40px;
    box-shadow: 0 0 25px rgba(0, 255, 195, 0.15);
}

/* ===== Map Area ===== */
.presence-map {
    flex: 1 1 45%;
    text-align: center;
}

.presence-map img {
    width: 100%;
    max-width: 480px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 255, 195, 0.2);
    transition: transform 0.3s ease;
}

.presence-map img:hover {
    transform: scale(1.03);
}

/* ===== Info Area ===== */
.presence-info {
    flex: 1 1 45%;
}

.presence-info h3 {
    color: #ffeb3b;
    margin-bottom: 15px;
    font-size: 1.6rem;
}

.presence-info ul {
    list-style-type: none;
    color: #dcdcdc;
    padding-left: 25px;
    margin-bottom: 20px;
}

.presence-info ul li {
    margin-bottom: 8px;
    line-height: 1.5;
}

/* ===== Responsive Design ===== */
@media (max-width: 1024px) {
    .presence-card {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .presence-map img {
        width: 90%;
        max-width: 350px;
    }

    .presence-section h2 {
        font-size: 2rem;
    }

    .presence-info h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 600px) {
    .presence-section {
        padding: 60px 15px;
    }

    .presence-section h2 {
        font-size: 1.7rem;
    }

    .presence-subtext {
        font-size: 0.95rem;
        margin-bottom: 35px;
    }

    .presence-info ul {
        padding-left: 18px;
    }
}

/* ==========================================
🛡️ OUR MOTTO
========================================== */
#our-motto {
    text-align: center;
    padding: 80px 20px 100px;
    background: #111317;
    border-bottom: 1px solid #1f2833;
}

.motto-header h2 {
    color: #66fcf1;
    font-size: 2rem;
    margin-bottom: 10px;
}

.motto-header p {
    color: #dcdcdc;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.6;
}

.motto-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    background: #0b0c10;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 255, 195, 0.2);
    max-width: 1000px;
    margin: 0 auto;
}

.motto-slide img {
    width: 100%;
    max-height: 380px;
    object-fit: contain;
    border-radius: 10px;
    background: #000;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.3);
}

.motto-content {
    color: #fff;
    text-align: center;
    padding: 10px 20px 0;
}

.motto-content h3 {
    color: #ffeb3b;
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.motto-content p {
    color: #ccc;
    line-height: 1.6;
    font-size: 1rem;
}

@media (max-width: 1024px) {
    #our-motto {
        padding: 70px 15px 90px;
    }

    .motto-slide img {
        width: 90%;
        max-height: 340px;
    }

    .motto-content h3 {
        font-size: 1.5rem;
    }
}

@media (max-width: 600px) {
    #our-motto {
        padding: 60px 15px 80px;
    }

    .motto-slide {
        padding: 15px;
        gap: 15px;
    }

    .motto-slide img {
        max-height: 260px;
    }

    .motto-content h3 {
        font-size: 1.3rem;
    }

    .motto-content p {
        font-size: 0.9rem;
    }
}

/* ==========================================
🌿 GO GREEN SECTION
========================================== */
.go-green-container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    padding: 80px 0;
    background: #0b0c10;
    border-bottom: 1px solid #1f2833;
}

.go-green-text {
    flex: 1 1 50%;
}

.go-green-text h2 {
    color: #66fcf1;
    margin-bottom: 15px;
}

.go-green-text p {
    color: #dcdcdc;
    margin-bottom: 10px;
}

.go-green-image {
    flex: 1 1 40%;
}

.go-green-image img {
    width: 100%;
    border-radius: 10px;
    object-fit: cover;
}

@media (max-width: 1024px) {
    .go-green-container {
        flex-direction: column-reverse;
        text-align: center;
    }

    .go-green-image img {
        width: 90%;
        max-width: 400px;
    }

    .go-green-text h2 {
        font-size: 1.6rem;
    }

    .go-green-text p {
        font-size: 0.95rem;
    }
}

/* =========================================================
   🚀 FOOTER — MAIN WRAPPER
========================================================= */


.site-footer {
    background: #0b0c10;
    color: #fff;
    padding: 60px 20px 25px;
    font-family: "Poppins", sans-serif;
    border-top: 3px solid #00ffc3;
}

@media (max-width: 768px) {
    .site-footer {
        padding: 50px 15px 20px;
    }
}

/* =========================================================
   🟦 FOOTER GRID LAYOUT
========================================================= */
.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    max-width: 1300px;
    margin: 0 auto;
}

@media (max-width: 1024px) {
    .footer-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 22px;
    }
}

@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* =========================================================
   🟩 COMMON FOOTER COLUMN BOX STYLE (ALL 4 BOXES)
========================================================= */
.footer-column {
    background: #101417;
    border: 1px solid rgba(0, 255, 195, 0.20);
    border-radius: 12px;
    box-shadow: 0 0 18px rgba(0, 255, 195, 0.10);
    padding: 25px 30px;
    margin-bottom: 22px;
}

@media (max-width: 768px) {
    .footer-column {
        padding: 28px 22px !important;
    }
}

/* =========================================================
   🟨 FOOTER HEADINGS (Uniform for ALL)
========================================================= */
.footer-column h2,
.footer-column h3 {
    color: #00ffc3;
    font-size: 1.35rem;
    font-weight: 600;
    margin-bottom: 14px;
    text-align: left !important;
    /* All headings LEFT */
}

@media (max-width: 768px) {

    .footer-column h2,
    .footer-column h3 {
        font-size: 1.2rem;
    }
}

/* =========================================================
   🟧 PARAGRAPH TEXT
========================================================= */
.footer-column p {
    color: #dcdcdc;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* =========================================================
   🔗 UNIVERSAL LINK STYLE (Call + Email + Social)
========================================================= */
.contact-link,
.footer-social a,
.gmail-link {
    color: #00cfff;
    text-decoration: none;
    transition: 0.3s ease;
}

.contact-link:hover,
.footer-social a:hover,
.gmail-link:hover {
    color: #00ffc3;
}

/* =========================================================
   📞 QUICK CONTACT – Links
========================================================= */
.contact-info a {
    display: block;
    margin-bottom: 6px;
    font-size: 1rem;
}

/* =========================================================
   🌐 FOLLOW US — MATCH EMAIL US BOX
========================================================= */

/* Column left alignment */
.footer-column.social-links {
    text-align: left !important;
}

/* Social list (left aligned, stacked) */
.footer-social {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start !important;
    width: 100%;
}

/* Social button items (full width like email items) */
.footer-social a {
    background: rgba(255, 255, 255, 0.08);
    padding: 10px 14px;
    border-radius: 8px;
    width: 100% !important;
    max-width: none !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    color: #fff;
    font-size: 0.95rem;
}

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

/* Social icon size */
.footer-social img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

/* =========================================================
   ✉️ GMAIL SECTION (Already in box)
========================================================= */
.gmail-section {
    background: #101417;
    border: 1px solid rgba(0, 255, 195, 0.20);
    box-shadow: 0 0 18px rgba(0, 255, 195, 0.10);
}

.gmail-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 12px;
}

.gmail-link {
    background: rgba(0, 255, 195, 0.10);
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 0.95rem;
}

.gmail-link:hover {
    background: rgba(0, 255, 195, 0.20);
    transform: scale(1.04);
}

/* =========================================================
   🟫 COPYRIGHT BOTTOM BAR
========================================================= */
.footer-bottom {
    text-align: center;
    padding: 18px 0;
    margin-top: 35px;
    font-size: 0.95rem;
    color: #cfcfcf;
    letter-spacing: 0.4px;
}

@media (max-width: 768px) {
    .footer-bottom {
        font-size: 0.9rem;
        margin-top: 30px;
    }
}

/* ===================================================================
🌐 SECURITY.HTML — Training, Vigilance & Security Services
=================================================================== */

/* ===== Training & Vigilance Section ===== */
.training-vigilance {
    background: #0b0c10;
    color: #fff;
    text-align: center;
    padding: 80px 5%;
    overflow: hidden;
}

.training-vigilance h2 {
    color: #00bfff;
    font-size: 2rem;
    margin-bottom: 15px;
}

.training-vigilance p {
    max-width: 800px;
    margin: 0 auto 50px;
    color: #ccc;
    line-height: 1.6;
}

/* ===== Slider ===== */
.training-slider {
    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    overflow: hidden;
}

.training-slide {
    display: none;
    animation: fade 0.8s ease-in-out;
}

.training-slide.active {
    display: block;
}

/* ===== Slide Layout ===== */
.slide-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    background: #10121a;
    border-radius: 15px;
    padding: 40px;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.2);
}

.slide-content img {
    width: 35%;
    height: 350px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.25);
}

.text-box {
    width: 48%;
    text-align: left;
}

.text-box h3 {
    color: #00bfff;
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.text-box p {
    color: #ddd;
    font-size: 1rem;
    line-height: 1.6;
}

@keyframes fade {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .slide-content {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }

    .slide-content img {
        width: 90%;
        height: 300px;
        object-fit: contain;
    }

    .text-box {
        width: 100%;
        text-align: center;
    }

    .text-box h3 {
        font-size: 1.4rem;
    }
}

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

    .training-vigilance h2 {
        font-size: 1.8rem;
    }

    .slide-content img {
        height: 260px;
    }

    .text-box h3 {
        font-size: 1.2rem;
    }

    .text-box p {
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
    .training-vigilance {
        padding: 50px 3%;
    }

    .slide-content {
        padding: 20px;
    }

    .slide-content img {
        width: 100%;
        height: 220px;
    }

    .text-box {
        text-align: center;
        padding: 10px 0;
    }

    .text-box p {
        font-size: 0.9rem;
    }
}

/* ===== Security Services Grid ===== */
.security-services-page {
    background: #0b0c10;
    color: #fff;
    text-align: center;
    padding: 60px 5%;
    border-top: 1px solid #1f2833;
}

.security-services-page h2 {
    color: #66fcf1;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.security-services-page p {
    color: #dcdcdc;
    max-width: 850px;
    margin: 0 auto 50px;
    font-size: 1rem;
    line-height: 1.6;
}

/* ===== Grid Layout ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    justify-content: center;
}

.service-card {
    background: #1f2833;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
    transition: 0.3s ease;
    display: flex;
    flex-direction: column;
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 3px solid #66fcf1;
    transition: transform 0.4s ease;
}

.service-content {
    padding: 20px;
}

.service-content h3 {
    color: #ffeb3b;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.service-content p {
    color: #dcdcdc;
    font-size: 0.95rem;
    line-height: 1.5;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(102, 252, 241, 0.4);
}

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

/* ===== Responsive ===== */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .service-card img {
        height: 180px;
    }

    .security-services-page h2 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }

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

    .service-content {
        padding: 15px;
    }

    .security-services-page {
        padding: 40px 4%;
    }

    .security-services-page h2 {
        font-size: 1.6rem;
    }

    .security-services-page p {
        font-size: 0.9rem;
    }
}

/* ==========================================================================
   🌐 EVENT PAGE – CLEAN & OPTIMIZED CSS
   ========================================================================== */

/* =====================================================
   1️⃣ EVENT HERO SECTION
   ===================================================== */
.event-hero {
    position: relative;
    width: 100%;
    height: 90vh;
    background: url("images/eveent/event-main.png") center/contain no-repeat;
    background-color: #000;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color: #fff;
    padding-bottom: 60px;
    overflow: hidden;
    margin-top: 65px;
    /* FIX for navbar */
}

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

.event-hero-content {
    position: relative;
    text-align: center;
    max-width: 800px;
    padding: 0 15px;
    z-index: 2;
}

.event-hero-content h1 {
    font-size: 2.8rem;
    color: #66fcf1;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.event-hero-content p {
    font-size: 1.2rem;
    color: #f0f0f0;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* -------- RESPONSIVE -------- */

/* 🟦 Tablet (1024px ↓) */
@media (max-width: 1024px) {

    .event-hero {
        height: 70vh;
        /* Tablet height balanced */
        margin-top: 65px;
        /* Navbar ka fix */
        background-size: cover !important;
    }

    .event-hero-content h1 {
        font-size: 2rem;
    }

    .event-hero-content p {
        font-size: 1rem;
    }
}


/* 🟩 Mobile (768px ↓) */
@media (max-width: 768px) {

    .event-hero {
        height: 55vh;
        /* Mobile ke liye perfect */
        margin-top: 60px;
        /* Navbar overlap avoid */
        padding-bottom: 30px;
        /* Button/text better spacing */
        background-size: cover !important;
        background-position: top center !important;
    }

    .event-hero-content {
        padding: 0 10px;
    }

    .event-hero-content h1 {
        font-size: 1.6rem;
        /* Mobile heading size */
        line-height: 1.2;
    }

    .event-hero-content p {
        font-size: 0.9rem;
        /* Mobile paragraph size */
        line-height: 1.4;
    }
}


/* 🟧 Extra Small Devices (480px ↓) */
@media (max-width: 480px) {

    .event-hero {
        height: 50vh;
        padding-bottom: 20px;
    }

    .event-hero-content h1 {
        font-size: 1.4rem;
    }

    .event-hero-content p {
        font-size: 0.85rem;
    }
}

/* =====================================================
   2️⃣ STAT COUNTERS SECTION
   ===================================================== */
.stats-section {
    background: #0b0c10;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    padding: 60px 10%;
    text-align: center;
}

.stat-card {
    background: #1f2833;
    border-radius: 12px;
    padding: 30px 20px;
    transition: 0.3s ease;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.4);
}

.stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(102, 252, 241, 0.4);
}

.stat-card h3 {
    font-size: 2rem;
    color: #ffeb3b;
    margin-bottom: 10px;
}

.stat-card p {
    color: #dcdcdc;
}

/* -------- RESPONSIVE -------- */
@media(max-width:1024px) {
    .stats-section {
        grid-template-columns: repeat(2, 1fr);
        padding: 50px 8%;
    }
}

@media(max-width:768px) {
    .stats-section {
        grid-template-columns: 1fr;
        padding: 40px 10%;
    }
}

/* =====================================================
   3️⃣ EVENT DETAILS SECTION
   ===================================================== */
.event-page {
    background: #0b0c10;
    color: #fff;
    padding: 70px 5%;
}

.event-section {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

.event-section h2 {
    color: #66fcf1;
    font-size: 2rem;
    margin-bottom: 15px;
}

.event-section p {
    color: #dcdcdc;
    margin-bottom: 40px;
    font-size: 1rem;
    line-height: 1.6;
}

/* --- IMAGE + TEXT ROWS --- */
.event-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
}

.event-row.reverse {
    flex-direction: row-reverse;
}

.event-img-box {
    flex: 1;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.event-img-box img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: 0.4s ease;
}

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

.event-content {
    flex: 1;
    text-align: left;
}

.event-content h3 {
    color: #ffeb3b;
    font-size: 1.4rem;
    margin-bottom: 10px;
}

.event-content p {
    color: #dcdcdc;
    line-height: 1.6;
}

/* -------- RESPONSIVE -------- */
@media(max-width:1024px) {
    .event-row {
        flex-direction: column;
        text-align: center;
    }

    .event-img-box img {
        height: 250px;
    }
}

@media(max-width:768px) {
    .event-img-box img {
        height: 220px;
    }

    .event-section h2 {
        font-size: 1.6rem;
    }
}

/* =====================================================
   4️⃣ CTA BUTTON
   ===================================================== */
.hire-section {
    text-align: center;
    margin-top: 50px;
}

.hire-btn {
    display: inline-block;
    padding: 12px 28px;
    background: #66fcf1;
    color: #0b0c10;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 8px;
    transition: 0.3s;
}

.hire-btn:hover {
    transform: scale(1.05);
    background: #45e0d0;
}

@media(max-width:768px) {
    .hire-btn {
        padding: 10px 24px;
        font-size: 0.95rem;
    }
}

/* =====================================================
   5️⃣ HIERARCHY TREE
   ===================================================== */
.event-hierarchy {
    background: #0b0c10;
    text-align: center;
    padding: 70px 5%;
    border-top: 1px solid #1f2833;
}

.event-hierarchy h2 {
    font-size: 2rem;
    color: #66fcf1;
    margin-bottom: 10px;
}

.event-hierarchy p {
    color: #dcdcdc;
    margin-bottom: 40px;
}

.tree {
    display: flex;
    justify-content: center;
    overflow-x: auto;
}

.tree ul {
    display: flex;
    justify-content: center;
    padding-top: 20px;
}

.tree li {
    list-style: none;
    padding: 20px 5px 0;
    position: relative;
    text-align: center;
}

.tree li::before,
.tree li::after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    border-top: 2px solid #66fcf1;
    height: 20px;
}

.tree li::before {
    right: 50%;
}

.tree li::after {
    left: 50%;
    border-right: 2px solid #66fcf1;
}

.tree li:only-child::before,
.tree li:only-child::after {
    display: none;
}

.node {
    padding: 12px 18px;
    background: #1f2833;
    border: 2px solid #66fcf1;
    border-radius: 8px;
    min-width: 180px;
    transition: 0.3s;
}

.node:hover {
    background: #66fcf1;
    color: #0b0c10;
    transform: scale(1.05);
}

.node.top {
    background: #ffeb3b;
    color: #0b0c10;
    font-weight: 700;
}

.node.mid {
    background: #45e0d0;
    color: #0b0c10;
    font-weight: 600;
}

/* -------- RESPONSIVE -------- */
@media(max-width:1024px) {
    .tree ul {
        flex-direction: column;
    }

    .tree li::before,
    .tree li::after {
        display: none;
    }
}

@media(max-width:768px) {
    .event-hierarchy h2 {
        font-size: 1.6rem;
    }

    .event-hierarchy p {
        font-size: 0.9rem;
    }
}

/* ================== SHIFT PAGE===========================*/
main.container {
    background: #0b0c10;
    color: #fff;
    font-family: "Poppins", sans-serif;
    padding: 60px 20px;
}

/* ==========================================
1️⃣ OUR DUTY SHIFTS SECTION
========================================== */
.shift-section {
    text-align: center;
    margin-bottom: 80px;
}

.shift-section h2 {
    font-size: 2.5rem;
    color: #00ffc3;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.shift-section p {
    max-width: 850px;
    margin: 0 auto 50px;
    line-height: 1.7;
    color: #dcdcdc;
    font-size: 1.1rem;
}

/* ===== Shift Cards ===== */
.shift-cards {
    display: flex;
    flex-direction: column;
    gap: 60px;
    align-items: center;
}

.shift-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111317;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 255, 195, 0.15);
    transition: all 0.3s ease;
    max-width: 1100px;
    width: 100%;
}

.shift-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(0, 255, 195, 0.3);
}

.shift-card.reverse {
    flex-direction: row-reverse;
}

.shift-image {
    flex: 1;
    height: 350px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.shift-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.shift-content {
    flex: 1;
    padding: 40px 30px;
    text-align: left;
    position: relative;
    z-index: 2;
}

.shift-content h3 {
    color: #ffeb3b;
    font-size: 1.8rem;
    margin-bottom: 15px;
}

.shift-content p {
    color: #e0e0e0;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

.shift-content ul {
    list-style: none;
    padding: 0;
}

.shift-content ul li {
    margin-bottom: 10px;
    color: #dcdcdc;
    padding-left: 22px;
    position: relative;
}

.shift-content ul li::before {
    content: " * ";
    position: absolute;
    left: 0;
}

/* ===== Hire Button ===== */
.hire-section {
    margin-top: 40px;
}


.hire-btn:hover {
    background: #00bfa5;
    color: #fff;
}

/* ===== Responsive (Our Duty Shifts) ===== */
@media (max-width: 992px) {

    .shift-card,
    .shift-card.reverse {
        flex-direction: column;
    }

    .shift-image {
        width: 100%;
        height: 280px;
    }

    .shift-content {
        text-align: center;
        padding: 25px 20px;
    }

    .shift-content ul li {
        text-align: left;
        padding-left: 18px;
    }
}

/* ==========================================
2️⃣ SPECIAL DUTY ASSIGNMENTS
========================================== */
.special-duty {
    text-align: center;
    margin-bottom: 80px;
}

.special-duty h2 {
    font-size: 2.3rem;
    color: #00ffc3;
    margin-bottom: 15px;
}

.special-duty p {
    color: #dcdcdc;
    max-width: 750px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* ===== Duty Grid ===== */
.duty-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
    justify-content: center;
}

.duty-card {
    background: #111317;
    border: 1px solid rgba(0, 255, 195, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 0 15px rgba(0, 255, 195, 0.1);
}

.duty-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(0, 255, 195, 0.4);
}

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

.duty-card h3 {
    font-size: 1.4rem;
    color: #ffeb3b;
    margin: 15px 0 8px;
}

.duty-card p {
    color: #dcdcdc;
    font-size: 1rem;
    padding: 0 15px 20px;
}

/* ===== Responsive (Special Duty) ===== */
@media (max-width: 768px) {
    .special-duty h2 {
        font-size: 1.9rem;
    }

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

/* ==========================================
3️⃣ SECURITY GUARD INFORMATION
========================================== */
.guard-info {
    text-align: center;
    background: #111317;
    padding: 70px 20px;
    border-radius: 12px;
    box-shadow: 0 0 25px rgba(0, 255, 195, 0.15);
}

.guard-info h2 {
    font-size: 2.3rem;
    color: #00ffc3;
    margin-bottom: 15px;
}

.guard-info p {
    color: #dcdcdc;
    max-width: 800px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* ===== Info Boxes ===== */
.info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    justify-content: center;
}

.info-box {
    background: #0b0c10;
    border: 1px solid rgba(255, 235, 59, 0.25);
    border-radius: 12px;
    padding: 25px 20px;
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 20px rgba(255, 235, 59, 0.3);
}

.info-box h3 {
    color: #ffeb3b;
    font-size: 1.3rem;
    margin-bottom: 10px;
}

.info-box p {
    color: #dcdcdc;
    font-size: 1rem;
    line-height: 1.6;
}

/* ===== Responsive (Guard Info) ===== */
@media (max-width: 768px) {
    .guard-info {
        padding: 50px 15px;
    }

    .guard-info h2 {
        font-size: 1.9rem;
    }

    .info-box h3 {
        font-size: 1.2rem;
    }

    .info-box p {
        font-size: 0.95rem;
    }
}

/* ===== Shift Image (Desktop + Mobile FIX) ===== */
.shift-image {
    flex: 1;
    height: 350px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    border-radius: 0;
}

/* 👇 Overlay ensures text readability on top of image */
.shift-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

/* ===== Responsive (Ensure image visible on mobile) ===== */
@media (max-width: 992px) {

    .shift-card,
    .shift-card.reverse {
        flex-direction: column;
        text-align: center;
    }

    .shift-image {
        width: 100%;
        height: 280px;
        /* 👈 ensures image area stays visible */
        min-height: 250px;
        background-size: cover;
        background-position: center center;
        display: block;
    }

    .shift-content {
        padding: 25px 20px;
    }
}


/* ============================================================
🛡️ SECURITY GUARD INFORMATION
============================================================ */
.guard-info {
    margin-top: 80px;
    background: #0b0c10;
    padding: 50px 25px;
    border-radius: 16px;
    box-shadow: 0 0 20px rgba(0, 255, 195, 0.1);
}

.info-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.info-box {
    background: #111317;
    border-radius: 12px;
    padding: 25px;
    box-shadow: inset 0 0 8px rgba(0, 255, 195, 0.1);
    transition: all 0.3s ease;
}

.info-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 12px rgba(0, 255, 195, 0.25);
}

.info-box h3 {
    color: #66fcf1;
    margin-bottom: 10px;
    font-size: 1.1rem;
}

.info-box p {
    color: #cfd0d1;
    line-height: 1.5;
    font-size: 0.95rem;
}

/* ===== Responsive: Guard Info ===== */
@media (max-width: 600px) {
    .info-box {
        padding: 20px;
    }

    .guard-info h2 {
        font-size: 1.6rem;
    }
}

/* ============================================================
🛰 SUPERVISOR & MONITORING SECTION
============================================================ */
.supervisor-section {
    background: #0b0c10;
    color: #fff;
    text-align: center;
    padding: 80px 6%;
    border-top: 1px solid #1f2833;
}

.supervisor-section h2 {
    color: #66fcf1;
    font-size: 2rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.supervisor-section p {
    color: #dcdcdc;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 50px;
}

.supervisor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.supervisor-card {
    background: #1f2833;
    border-radius: 12px;
    overflow: hidden;
    padding-bottom: 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.supervisor-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(102, 252, 241, 0.4);
}

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

.supervisor-card h3 {
    color: #ffeb3b;
    font-size: 1.3rem;
    margin-top: 15px;
}

.supervisor-card p {
    color: #dcdcdc;
    font-size: 0.95rem;
    margin: 10px 20px 0;
    line-height: 1.5;
}

/* ===== Responsive: Supervisor ===== */
@media (max-width: 1024px) {
    .supervisor-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

    .supervisor-section h2 {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .supervisor-grid {
        grid-template-columns: 1fr;
    }

    .supervisor-section {
        padding: 60px 5%;
    }

    .supervisor-card img {
        height: 180px;
    }

    .supervisor-section p {
        font-size: 0.9rem;
    }
}

/* ============================================================
GUARDING & PATROL SERVICES SECTION
============================================================ */
.guarding-section {
    background: #0b0c10;
    color: #fff;
    text-align: center;
    border-top: 1px solid #1f2833;
    padding: 70px 5% 50px;
    /* NAVBAR GAP + Balanced Space */
}

.guarding-section h2 {
    color: #66fcf1;
    font-size: 2rem;
    margin-bottom: 15px;
    text-transform: uppercase;
}

.guarding-section p {
    color: #dcdcdc;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 50px;
}

.guarding-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
}


/* ===== UNIFORM IMAGE BOX FOR ALL CARDS ===== */
.guarding-image {
    width: 100%;
    height: 300px;
    /* ⭐ FIXED HEIGHT (ALL SAME) */
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-bottom: 2px solid #66fcf1;
    border-radius: 12px 12px 0 0;
}

.guarding-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* ⭐ FULL IMAGE VISIBLE */
    object-position: center;
    display: block;
}


.guarding-card {
    background: #1f2833;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.guarding-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(102, 252, 241, 0.4);
}

.guarding-content {
    padding: 20px 25px 30px;
    text-align: left;
}

.guarding-content h3 {
    color: #ffeb3b;
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.guarding-content p {
    color: #dcdcdc;
    font-size: 0.95rem;
    line-height: 1.6;
}

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

/* TABLET */
@media (max-width: 1024px) {
    .guarding-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .guarding-image {
        height: 260px;
        /* Adjust for tablet */
    }

    .guarding-section h2 {
        font-size: 1.8rem;
    }
}

/* MOBILE */
@media (max-width: 768px) {
    .guarding-grid {
        grid-template-columns: 1fr;
    }

    .guarding-section {
        padding-top: 90px
            /* mobile navbar height adjust */
    }

    .guarding-image {
        height: 220px;
        /* Smaller for mobile */
    }

    .guarding-content {
        text-align: center;
    }

    .guarding-content h3 {
        font-size: 1.1rem;
    }

    .guarding-content p {
        font-size: 0.9rem;
    }
}

/* ============================================================
⚖️ TERMS & CONDITIONS SECTION
============================================================ */
.terms-grid-section {
    background: #0b0c10;
    color: #fff;
    text-align: center;
    padding: 80px 6%;
    border-top: 1px solid #1f2833;
}

.terms-grid-section h1 {
    color: #66fcf1;
    font-size: 2.2rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.terms-grid-section .intro-text {
    color: #dcdcdc;
    max-width: 850px;
    margin: 0 auto 50px;
    font-size: 1rem;
    line-height: 1.6;
}

/* ===== Grid Layout ===== */
.terms-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    justify-content: center;
}

/* ===== Card ===== */
.term-card {
    background: #1f2833;
    border-radius: 12px;
    padding: 25px 20px;
    text-align: left;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    border-top: 3px solid #66fcf1;
    transition: 0.3s ease;
}

.term-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(102, 252, 241, 0.4);
    border-top: 3px solid #ffeb3b;
}

.term-card h3 {
    color: #ffeb3b;
    font-size: 1.2rem;
    margin-bottom: 10px;
    font-weight: 600;
}

.term-card p {
    color: #dcdcdc;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ===== Responsive: Terms ===== */
@media (max-width: 1024px) {
    .terms-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .term-card {
        padding: 20px;
    }

    .terms-grid-section h1 {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .terms-grid {
        grid-template-columns: 1fr;
    }

    .terms-grid-section {
        padding: 60px 5%;
    }

    .term-card {
        text-align: center;
    }

    .term-card h3 {
        font-size: 1.1rem;
    }

    .term-card p {
        font-size: 0.9rem;
    }
}

/* ============================================================
🌿 ABOUT SECTION
============================================================ */
.about-section {
    background: #0a0a0a;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    font-family: "Segoe UI", sans-serif;
}

.about-intro {
    max-width: 900px;
    margin: 0 auto 60px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: #e0e0e0;
}

.about-intro strong {
    color: #00bfff;
}

/* ===== Stats Counter ===== */
.stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    justify-items: center;
    margin-bottom: 70px;
}

.stat-card {
    background: linear-gradient(180deg, #111, #1a1a1a);
    padding: 30px 20px;
    border-radius: 12px;
    width: 100%;
    max-width: 250px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.3);
    transition: 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 18px rgba(0, 191, 255, 0.6);
}

.stat-card h3 {
    font-size: 2.2rem;
    color: #00bfff;
    font-weight: bold;
    margin-bottom: 8px;
}

.stat-card p {
    font-size: 0.95rem;
    color: #ccc;
    letter-spacing: 0.3px;
}

.counter::after {
    content: "+";
    font-weight: 700;
    margin-left: 2px;
}

/* ===== About Grid ===== */
.about-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 35px;
    justify-items: center;
}

.about-card {
    background: #111;
    border-radius: 15px;
    padding: 25px;
    max-width: 340px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.2);
    transition: 0.3s ease;
}

.about-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 18px rgba(0, 191, 255, 0.5);
}

.about-card img {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    object-fit: cover;
    margin-bottom: 20px;
}

.about-card h3 {
    font-size: 1.3rem;
    color: #00bfff;
    margin-bottom: 12px;
    font-weight: 600;
}

.about-card p {
    font-size: 0.95rem;
    color: #d0d0d0;
    line-height: 1.6;
}

.about-card strong {
    color: #00ff99;
}

/* ===== Responsive: About ===== */
@media (max-width: 600px) {
    .about-section {
        padding: 60px 15px;
    }

    .about-intro {
        font-size: 1rem;
        margin-bottom: 40px;
    }

    .stat-card h3 {
        font-size: 1.8rem;
    }

    .stat-card p {
        font-size: 0.85rem;
    }

    .about-card img {
        height: 180px;
    }

    .about-card h3 {
        font-size: 1.15rem;
    }

    .about-card p {
        font-size: 0.9rem;
    }
}

@media (min-width: 601px) and (max-width: 992px) {
    .about-section {
        padding: 70px 25px;
    }

    .about-intro {
        font-size: 1.05rem;
        margin-bottom: 50px;
    }

    .stat-card {
        max-width: 220px;
    }

    .about-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}

@media (min-width: 993px) {
    .about-section {
        padding: 100px 40px;
    }

    .about-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ============================================================
📞 CONTACT SECTION – SAHASTRABHAU SECURITY GROUP
============================================================ */
/* MAIN CONTACT SECTION */
.contact-section {
    padding: 60px 20px;
    background: #000;
    color: #fff;
    text-align: center;
}

.contact-title {
    font-size: 2.4rem;
    color: #ffd633;
    margin-bottom: 10px;
}

.contact-subtitle {
    font-size: 1.15rem;
    color: #ccc;
    max-width: 750px;
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* TOP GRID */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: auto;
}

.contact-card {
    background: #111;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
    transition: 0.3s;
}

.contact-card:hover {
    transform: translateY(-5px);
    border-color: #ffd633;
}

.icon {
    font-size: 2rem;
    margin-bottom: 10px;
}

.contact-card h3 {
    color: #ffd633;
    margin-bottom: 8px;
}

.contact-card a {
    color: #00bfff;
    text-decoration: none;
}

.contact-card a:hover {
    color: #00ffcc;
}

/* Working Hours Section */
.contact-row {
    margin: 40px auto;
    display: flex;
    justify-content: center;
    gap: 25px;
    flex-wrap: wrap;
}

.work-box {
    background: #111;
    padding: 22px 30px;
    border-radius: 12px;
    min-width: 250px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.map-btn {
    background: #ffd633;
    padding: 18px 35px;
    border-radius: 10px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
    box-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
    transition: 0.3s;
}

.map-btn:hover {
    background: #ffea63;
}

/* BOTTOM 3 CARDS */
.highlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 40px auto 0;
}

.highlight-card {
    background: #111;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid rgba(255, 215, 0, 0.3);
}

.highlight-card h3 {
    color: #ffd633;
    margin-bottom: 12px;
}

.highlight-card ul {
    list-style: none;
    padding: 0;
    color: #ccc;
    line-height: 1.7;
}


/* ==========================================
💻 IT INFORMATION SECTION (Text + Image)
========================================== */
.it-info {
    background: #0b0c10;
    padding: 80px 20px;
    display: flex;
    justify-content: center;
}

.it-info-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 0 25px rgba(0, 255, 195, 0.2);
    padding: 40px 50px;
    max-width: 1100px;
    gap: 40px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.it-info-content:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 35px rgba(0, 255, 195, 0.4);
}

/* ===== Text Area ===== */
.it-info-text {
    flex: 1;
}

.it-info-text h2 {
    color: #00ffc3;
    font-size: 2rem;
    margin-bottom: 15px;
    font-weight: 700;
    text-transform: uppercase;
}

.it-info-text p {
    color: #dcdcdc;
    font-size: 1.05rem;
    line-height: 1.7;
}

.it-info-text strong,
.it-info-text b {
    color: #ffeb3b;
}

/* ===== Image Area ===== */
.it-info-image {
    flex: 1;
    text-align: right;
}

.it-info-image img {
    width: 100%;
    max-width: 400px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 255, 195, 0.3);
    transition: transform 0.3s ease;
}

.it-info-image img:hover {
    transform: scale(1.03);
}

/* ==========================================
📱 RESPONSIVE DESIGN
========================================== */
@media (max-width: 992px) {
    .it-info-content {
        flex-direction: column-reverse;
        text-align: center;
        padding: 30px 25px;
    }

    .it-info-image img {
        max-width: 320px;
        margin-bottom: 20px;
    }

    .it-info-text h2 {
        font-size: 1.6rem;
    }

    .it-info-text p {
        font-size: 1rem;
    }
}

.it-services {
    padding: 80px 20px;
    background: #0a0a0a;
    color: #fff;
    text-align: center;
}

.it-services h2 {
    font-size: 2.5rem;
    margin-bottom: 40px;
    color: #00bfff;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ===== Grid Layout ===== */
.service-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* ===== Service Card ===== */
.service-card {
    background: #111;
    border-radius: 15px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.4);
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-bottom: 2px solid #00bfff;
}

.service-card h3 {
    font-size: 1.3rem;
    color: #00bfff;
    margin: 15px 0 5px;
}

.service-card p {
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0 15px;
    color: #ccc;
    flex-grow: 1;
}

.service-card .see-more {
    display: inline-block;
    margin: 15px auto 20px;
    background: #00bfff;
    color: #000;
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 25px;
    text-decoration: none;
    transition: background 0.3s, transform 0.3s;
}

.service-card .see-more:hover {
    background: #0099cc;
    transform: scale(1.05);
}

/* ===== Responsive: IT Services ===== */
@media (max-width: 768px) {
    .it-services h2 {
        font-size: 2rem;
    }

    .service-card img {
        height: 180px;
    }

    .service-card h3 {
        font-size: 1.1rem;
    }

    .service-card p {
        font-size: 0.9rem;
    }
}

/* ============================================================
☁️ CLOUD SERVICES PAGE
============================================================ */

/* ===== About Section ===== */
.cloud-about {
    padding: 80px 20px;
    background: linear-gradient(180deg, #0a0a0a, #101820);
    color: #fff;
    text-align: center;
}

.cloud-about h2 {
    font-size: 2.4rem;
    color: #00bfff;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cloud-about p {
    font-size: 1.1rem;
    color: #ccc;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ===== Offerings Section ===== */
.cloud-offerings {
    background: #0d0d0d;
    color: #fff;
    padding: 80px 20px;
    text-align: center;
}

.cloud-offerings h2 {
    font-size: 2.4rem;
    color: #00bfff;
    margin-bottom: 40px;
    text-transform: uppercase;
}

/* Grid */
.offer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Cards */
.offer-card {
    background: #111;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 191, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.offer-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 25px rgba(0, 191, 255, 0.4);
}

.offer-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    object-position: center;
    border-bottom: 2px solid #00bfff;
    flex-shrink: 0;
}

.offer-card h3 {
    font-size: 1.2rem;
    color: #00bfff;
    margin: 15px 0 5px;
}

.offer-card p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.5;
    padding: 0 15px 20px;
}

/* ===== Why Choose Us Section ===== */
.cloud-why {
    background: linear-gradient(180deg, #0a0a0a, #121212);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.cloud-why h2 {
    font-size: 2.4rem;
    color: #00bfff;
    margin-bottom: 30px;
    text-transform: uppercase;
}

.cloud-why ul {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
}

.cloud-why li {
    font-size: 1.1rem;
    color: #ccc;
    margin: 10px 0;
    line-height: 1.6;
}

/* ===== CTA Section ===== */
.cloud-cta {
    background: linear-gradient(90deg, #00bfff, #007acc);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.cloud-cta h2 {
    font-size: 2.3rem;
    margin-bottom: 15px;
}

.cloud-cta p {
    font-size: 1.1rem;
    margin-bottom: 25px;
}

.cloud-cta .cta-btn {
    background: #fff;
    color: #007acc;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 30px;
    border-radius: 30px;
    transition: all 0.3s ease;
}

.cloud-cta .cta-btn:hover {
    background: #111;
    color: #00bfff;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
}

/* ===== Responsive: Cloud ===== */
@media (max-width: 992px) {

    .cloud-about h2,
    .cloud-offerings h2,
    .cloud-why h2,
    .cloud-cta h2 {
        font-size: 2rem;
    }

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

@media (max-width: 600px) {
    .cloud-about p {
        font-size: 1rem;
    }

    .offer-card img {
        height: 180px;
    }

    .offer-card h3 {
        font-size: 1.1rem;
    }

    .offer-card p {
        font-size: 0.9rem;
    }

    .cloud-why li {
        font-size: 1rem;
    }
}

/* ============================================================
🧱 INFRASTRUCTURE SERVICES PAGE — 3D CUBE HERO
============================================================ */
.cube-hero {
    position: relative;
    height: 90vh;
    perspective: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at center, #0b0c10, #000);
    overflow: hidden;
}

/* ===== Cube ===== */
.cube {
    position: relative;
    width: 32vmin;
    height: 32vmin;
    transform-style: preserve-3d;
    animation: rotateCube 25s infinite linear;
}

/* Cube Faces */
.face {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    backface-visibility: hidden;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}

/* Individual Faces */
.front {
    background-image: url("it-image/infrastructure/cube-1.jpg");
    transform: translateZ(16vmin);
}

.back {
    background-image: url("it-image/infrastructure/cube-2.jpg");
    transform: rotateY(180deg) translateZ(16vmin);
}

.right {
    background-image: url("it-image/infrastructure/cube-3.jpg");
    transform: rotateY(90deg) translateZ(16vmin);
}

.left {
    background-image: url("it-image/infrastructure/cube-4.jpg");
    transform: rotateY(-90deg) translateZ(16vmin);
}

.top {
    background-image: url("it-image/infrastructure/cube-5.jpg");
    transform: rotateX(90deg) translateZ(16vmin);
}

.bottom {
    background-image: url("it-image/infrastructure/cube-6.jpg");
    transform: rotateX(-90deg) translateZ(16vmin);
}

/* Cube Rotation */
@keyframes rotateCube {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }

    25% {
        transform: rotateX(90deg) rotateY(90deg);
    }

    50% {
        transform: rotateX(180deg) rotateY(180deg);
    }

    75% {
        transform: rotateX(270deg) rotateY(270deg);
    }

    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* Text Below Cube */
.cube-text {
    text-align: center;
    color: #fff;
    margin-top: 40px;
    max-width: 90%;
}

.cube-text h1 {
    font-size: 2rem;
    color: #00bfff;
    margin-bottom: 10px;
    text-shadow: 0 0 10px rgba(0, 191, 255, 0.6);
}

.cube-text p {
    font-size: 1.1rem;
    color: #ddd;
    line-height: 1.6;
}

/* ===== Responsive: Cube Hero ===== */
@media (max-width: 1024px) {
    .cube-hero {
        height: 75vh;
    }

    .cube {
        width: 40vmin;
        height: 40vmin;
        animation: rotateCube 28s infinite linear;
    }

    .cube-text h1 {
        font-size: 1.8rem;
    }

    .cube-text p {
        font-size: 1rem;
        max-width: 95%;
    }
}

@media (max-width: 600px) {
    .cube-hero {
        height: 65vh;
        padding-top: 20px;
    }

    .cube {
        width: 55vmin;
        height: 55vmin;
        animation: rotateCube 30s infinite linear;
    }

    .cube-text {
        margin-top: 25px;
    }

    .cube-text h1 {
        font-size: 1.4rem;
    }

    .cube-text p {
        font-size: 0.9rem;
    }
}

/* ============================================================
🏗️ INFRASTRUCTURE SERVICES PAGE
============================================================ */

/* ===== ABOUT SECTION ===== */
.infra-about {
    background: #0b0c10;
    padding: 80px 8%;
    margin-bottom: 70px;
}

.infra-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

.infra-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.25);
}

.infra-text {
    max-width: 600px;
}

.infra-text h2 {
    color: #00bfff;
    margin-bottom: 15px;
}

.infra-text p {
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.6;
}

.infra-text ul {
    list-style: none;
    padding: 0;
}

.infra-text li {
    color: #aaa;
    margin-bottom: 8px;
}

/* --- Responsive: About --- */
@media (max-width: 992px) {
    .infra-row {
        flex-direction: column;
        text-align: center;
    }

    .infra-text {
        max-width: 100%;
    }
}

/* ===== CORE SERVICES SECTION ===== */
.infra-services {
    background: #10121a;
    color: #fff;
    text-align: center;
    padding: 80px 5%;
    margin-bottom: 70px;
}

.infra-services h2 {
    color: #00bfff;
    margin-bottom: 40px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    gap: 25px;
}

.service-card {
    background: #0b0c10;
    border-radius: 10px;
    padding: 20px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.4);
}

.service-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 15px;
}

.service-card h3 {
    color: #00bfff;
    margin-bottom: 10px;
}

.service-card p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* --- Responsive: Services --- */
@media (max-width: 600px) {
    .infra-services {
        padding: 60px 5%;
    }

    .service-card img {
        height: 180px;
    }
}

/* ===== TECHNOLOGIES SECTION ===== */
.infra-tech {
    background: #0b0c10;
    padding: 80px 5%;
    text-align: center;
    margin-bottom: 70px;
}

.infra-tech h2 {
    color: #00bfff;
    font-size: 2rem;
    margin-bottom: 40px;
}

.tech-category {
    margin-bottom: 60px;
}

.tech-category h3 {
    color: #00bfff;
    margin-bottom: 20px;
    font-size: 1.4rem;
}

.tech-logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 25px;
    justify-items: center;
    align-items: center;
}

.tech-logos img {
    height: 60px;
    transition: transform 0.3s, filter 0.3s;
    filter: brightness(1.1);
}

.tech-logos img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0 0 10px #00bfff);
}

/* --- Responsive: Tech --- */
@media (max-width: 600px) {
    .infra-tech {
        padding: 60px 5%;
    }

    .tech-logos img {
        height: 45px;
    }
}

/* ===== ACHIEVEMENTS SECTION ===== */
.infra-achievements {
    background: #10121a;
    padding: 70px 20px;
    text-align: center;
    margin-bottom: 70px;
}

.infra-achievements h2 {
    color: #00bfff;
    margin-bottom: 40px;
}

.achievements-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.achievement {
    background: #0b0c10;
    border-radius: 10px;
    padding: 30px;
    width: 220px;
    transition: transform 0.3s;
}

.achievement:hover {
    transform: scale(1.05);
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}

.achievement h3 {
    font-size: 2.2rem;
    color: #00bfff;
}

.achievement p {
    color: #ccc;
}

/* --- Responsive: Achievements --- */
@media (max-width: 600px) {
    .infra-achievements {
        padding: 60px 5%;
    }

    .achievement {
        width: 100%;
        max-width: 260px;
    }
}

/* ===== CTA SECTION ===== */
.infra-cta {
    background: linear-gradient(180deg, #00bfff, #0099cc);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.infra-cta h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.infra-cta p {
    max-width: 800px;
    margin: 10px auto 20px;
    font-size: 1.05rem;
    color: #e0e0e0;
}

.cta-btn {
    display: inline-block;
    background: #0b0c10;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: #fff;
    color: #00bfff;
}

/* --- Responsive: CTA --- */
@media (max-width: 600px) {
    .infra-cta {
        padding: 60px 5%;
    }

    .infra-cta h2 {
        font-size: 1.6rem;
    }
}

/* ============================================================
🛡 CYBERSECURITY PAGE
============================================================ */

/* ===== SECTION DIVIDER ===== */
.section-divider {
    width: 80%;
    height: 2px;
    margin: 60px auto;
    background: linear-gradient(90deg, transparent, #00bfff, transparent);
    border-radius: 50%;
    opacity: 0.5;
}

/* ===== HERO SECTION ===== */
.cyber-hero {
    background: #0b0c10;
    text-align: center;
    color: #fff;
    padding: 60px 5%;
}

.hero-image {
    display: flex;
    justify-content: center;
    margin-bottom: 25px;
}

.hero-image img {
    width: 100%;
    max-width: 1000px;
    border-radius: 10px;
    object-fit: contain;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
}

.hero-text {
    max-width: 800px;
    margin: 0 auto;
}

.hero-text h1 {
    color: #00bfff;
    font-size: 2.5rem;
    margin-bottom: 15px;
}

.hero-text p {
    font-size: 1.1rem;
    color: #ddd;
    line-height: 1.6;
    margin-bottom: 25px;
}

/* --- Responsive: Hero --- */
@media (max-width: 768px) {
    .hero-text h1 {
        font-size: 1.8rem;
    }

    .hero-text p {
        font-size: 0.95rem;
    }

    .cta-btn {
        padding: 10px 24px;
        font-size: 0.9rem;
    }
}

/* ===== ABOUT SECTION ===== */
.cyber-about {
    background: #0b0c10;
    color: #fff;
    padding: 80px 8%;
}

.about-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
}

.about-text {
    flex: 1;
    min-width: 300px;
}

.about-text h2 {
    color: #00bfff;
    margin-bottom: 15px;
}

.about-text p {
    color: #ccc;
    line-height: 1.7;
    margin-bottom: 15px;
}

.about-text ul {
    list-style: none;
    padding: 0;
}

.about-text li {
    margin-bottom: 8px;
    color: #aaa;
    position: relative;
    padding-left: 22px;
}

.about-text li::before {
    content: "✔";
    color: #00bfff;
    position: absolute;
    left: 0;
}

.about-image {
    flex: 1;
    text-align: center;
}

.about-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}

/* --- Responsive: About --- */
@media (max-width: 992px) {
    .about-container {
        flex-direction: column;
        text-align: center;
    }
}

/* ===== SLIDER SECTION ===== */
.cyber-slider {
    background: #0b0c10;
    text-align: center;
    padding: 80px 8%;
}

.cyber-slider h2 {
    color: #00bfff;
    margin-bottom: 40px;
}

/* Slides */
.slider {
    position: relative;
    max-width: 950px;
    margin: auto;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
}

.slide {
    display: none;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    position: relative;
}

.slide.active {
    display: block;
    opacity: 1;
}

.slide img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 15px;
}

.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.3));
    border-radius: 15px;
}

.slide-text {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    padding: 20px 25px;
    border-radius: 12px;
    text-align: center;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.25);
}

.slide-text h3 {
    font-size: 1.5rem;
    color: #00bfff;
    margin-bottom: 10px;
    font-weight: 600;
}

.slide-text p {
    font-size: 1rem;
    color: #f2f2f2;
    line-height: 1.6;
}

/* --- Responsive: Slider --- */
@media (max-width: 768px) {
    .slide img {
        height: 300px;
    }

    .slide-text {
        bottom: 20px;
        width: 95%;
        padding: 15px;
    }

    .slide-text h3 {
        font-size: 1.2rem;
    }

    .slide-text p {
        font-size: 0.9rem;
    }
}

/* ===== WHY CYBERSECURITY MATTERS ===== */
.cyber-why {
    background: #10121a;
    color: #fff;
    text-align: center;
    padding: 80px 8%;
}

.cyber-why h2 {
    color: #00bfff;
    margin-bottom: 40px;
}

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

.why-card {
    background: #0b0c10;
    border-radius: 12px;
    overflow: hidden;
    padding-bottom: 20px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.1);
    transition: transform 0.3s ease;
}

.why-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.3);
}

.why-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    border-bottom: 2px solid #00bfff;
}

.why-card h3 {
    color: #00bfff;
    margin: 15px 0 10px;
}

.why-card p {
    color: #ccc;
    padding: 0 15px;
}

/* --- Responsive: Why --- */
@media (max-width: 768px) {
    .why-card img {
        height: 150px;
    }
}

/* ===== CYBERSECURITY SERVICES ===== */
.cyber-services {
    background: #0b0c10;
    text-align: center;
    padding: 80px 8%;
}

.cyber-services h2 {
    color: #00bfff;
    margin-bottom: 50px;
    font-size: 2rem;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 35px;
    max-width: 1200px;
    margin: 0 auto;
}

.service-card {
    background: #10121a;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px rgba(0, 191, 255, 0.15);
    transition: transform 0.3s, box-shadow 0.3s;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.4);
}

.service-card img {
    width: 100%;
    height: 200px;
    object-fit: contain;
    border-radius: 8px;
    background: #000;
    margin-bottom: 15px;
}

.service-card h3 {
    color: #00bfff;
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.service-card p {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.6;
    text-align: center;
    padding: 0 10px;
}

/* --- Responsive: Services --- */
@media (max-width: 1024px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
    }
}

@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .service-card img {
        height: 160px;
    }

    .cyber-services h2 {
        font-size: 1.6rem;
    }
}

/* ==========================================
🧠 CYBER EXPERTISE SECTION
========================================== */
.cyber-expertise {
    background: #0b0c10;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    border-top: 1px solid #1f2833;
    border-bottom: 1px solid #1f2833;
}

.cyber-expertise h2 {
    font-size: 2.5rem;
    color: #00ffc3;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.expertise-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    justify-content: center;
    align-items: center;
}

.expertise-card {
    background: #111317;
    border: 1px solid rgba(0, 255, 195, 0.2);
    border-radius: 12px;
    padding: 30px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(0, 255, 195, 0.1);
}

.expertise-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 20px rgba(0, 255, 195, 0.3);
}

.expertise-card h3 {
    font-size: 2.2rem;
    color: #ffeb3b;
    margin-bottom: 10px;
}

.expertise-card p {
    font-size: 1.1rem;
    color: #dcdcdc;
}

/* ==========================================
🔒 TYPES OF CYBERSECURITY SECTION (2x3 Grid)
========================================== */
.cyber-types {
    background: #111317;
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.cyber-types h2 {
    font-size: 2.5rem;
    color: #00ffc3;
    margin-bottom: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ✅ Always maintain 2 rows × 3 columns on desktop */
.types-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 25px;
    justify-content: center;
    align-items: stretch;
    max-width: 1100px;
    margin: 0 auto;
}

.type-card {
    background: #0b0c10;
    border: 1px solid rgba(255, 235, 59, 0.3);
    border-radius: 12px;
    padding: 30px 20px;
    transition: all 0.3s ease;
    box-shadow: 0 0 10px rgba(255, 235, 59, 0.1);
}

.type-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 0 25px rgba(255, 235, 59, 0.4);
    background: #14161a;
}

.type-card h3 {
    font-size: 1.5rem;
    color: #ffeb3b;
    margin-bottom: 10px;
}

.type-card p {
    font-size: 1rem;
    color: #dcdcdc;
    line-height: 1.6;
}

/* ==========================================
📱 RESPONSIVE DESIGN
========================================== */

/* ✅ For tablets (2 columns × 3 rows look) */
@media (max-width: 1024px) {
    .types-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }
}

/* ✅ For mobile (1 column × 6 rows) */
@media (max-width: 600px) {
    .types-grid {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .type-card {
        padding: 25px 15px;
    }

    .type-card h3 {
        font-size: 1.3rem;
    }

    .type-card p {
        font-size: 0.95rem;
    }
}

/* ===== CTA SECTION ===== */
.cyber-cta {
    background: linear-gradient(180deg, #00bfff, #0099cc);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
}

.cyber-cta h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.cyber-cta p {
    font-size: 1.05rem;
    color: #f0f0f0;
    margin-bottom: 20px;
}

.cyber-cta .cta-btn {
    background: #0b0c10;
    color: #fff;
    padding: 12px 30px;
    border-radius: 30px;
    text-decoration: none;
    transition: 0.3s;
}

.cyber-cta .cta-btn:hover {
    background: #fff;
    color: #00bfff;
}

/* --- Responsive: CTA --- */
@media (max-width: 480px) {
    .cyber-cta .cta-btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}

/* ============================================================
🌐 WEB & APP DEVELOPMENT PAGE
============================================================ */
h1,
h2 {
    color: #ffd633;
    font-weight: 600;
}

h3 {
    color: #00bfff;
    font-weight: 500;
}

/* ===== UNIVERSAL BUTTON ===== */
.cta-btn {
    background: #00bfff;
    color: #000;
    padding: 12px 30px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.cta-btn:hover {
    background: #fff;
    color: #00bfff;
}

/* ============================================================
🧩 HERO SECTION
============================================================ */
.webapp-hero {
    background: #0b0c10;
    text-align: center;
    padding: 80px 8%;
}

.webapp-hero .webapp-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}

.webapp-hero .webapp-image img {
    width: 80%;
    max-width: 600px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
}

.webapp-hero .webapp-text {
    max-width: 750px;
}

.webapp-hero .webapp-text h1 {
    font-size: 2.4rem;
    margin-bottom: 15px;
}

.webapp-hero .webapp-text p {
    font-size: 1.1rem;
    color: #ddd;
    margin-bottom: 25px;
    line-height: 1.7;
}

/* --- Responsive: Hero --- */
@media (max-width: 768px) {
    .webapp-hero {
        padding: 60px 5%;
    }

    .webapp-hero .webapp-text h1 {
        font-size: 1.8rem;
    }

    .webapp-hero .webapp-text p {
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    .webapp-hero .webapp-text h1 {
        font-size: 1.5rem;
    }

    .webapp-hero .webapp-text p {
        font-size: 0.9rem;
        line-height: 1.5;
    }
}

/* ============================================================
📱 ALTERNATE SECTIONS (About, Services, Mobile App, Tech)
============================================================ */
.webapp-section {
    background: #0b0c10;
    padding: 80px 8%;
}

.webapp-section .webapp-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Default Layout (Image Right) */
.webapp-section .webapp-text {
    flex: 1 1 45%;
    text-align: left;
}

.webapp-section .webapp-image {
    flex: 1 1 45%;
    text-align: center;
}

.webapp-section .webapp-image img {
    width: 100%;
    max-width: 500px;
    border-radius: 12px;
    object-fit: contain;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.3);
}

/* Reverse Layout (Image Left) */
.webapp-section.reverse .webapp-content {
    flex-direction: row-reverse;
}

/* Text Styles */
.webapp-section h2 {
    font-size: 2rem;
    margin-bottom: 20px;
}

.webapp-section p {
    color: #ccc;
    margin-bottom: 15px;
    line-height: 1.7;
}

.webapp-section ul {
    list-style: none;
    margin-top: 10px;
    padding: 0;
}

.webapp-section li {
    position: relative;
    padding-left: 22px;
    color: #aaa;
    margin-bottom: 8px;
}

.webapp-section li::before {
    content: "✔";
    position: absolute;
    left: 0;
    color: #00bfff;
}

/* --- Responsive: Alternate Sections --- */
@media (max-width: 1024px) {
    .webapp-section .webapp-content {
        flex-direction: column;
        text-align: center;
    }

    .webapp-section.reverse .webapp-content {
        flex-direction: column;
    }

    .webapp-section .webapp-text,
    .webapp-section .webapp-image {
        flex: 1 1 100%;
    }

    .webapp-section h2 {
        font-size: 1.8rem;
    }

    .webapp-section .webapp-image img {
        max-width: 500px;
    }
}

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

    .webapp-section h2 {
        font-size: 1.6rem;
    }

    .webapp-section .webapp-image img {
        max-width: 400px;
    }

    .webapp-section p {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .webapp-section h2 {
        font-size: 1.4rem;
    }

    .webapp-section .webapp-image img {
        max-width: 320px;
    }
}

/* ============================================================
🌀 OUR CREATIVE PORTFOLIO (3D SLIDER + BOX STYLE)============================================================*/
.threeD-slider {
    background: #000;
    /* Same as page background */
    text-align: center;
    padding: 80px 8% 100px;
    perspective: 900px;
}

/* 💠 Highlighted Box (like Our Core IT Services) */
.portfolio-box {
    border: 2px solid #00bfff;
    border-radius: 15px;
    padding: 50px 20px;
    max-width: 1100px;
    margin: 0 auto;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.4);
    background: rgba(10, 10, 10, 0.7);
}

.portfolio-box h2 {
    color: #ffd633;
    font-size: 2rem;
    margin-bottom: 10px;
    text-shadow: 0 0 10px #ffeb3b;
}

.portfolio-box p {
    color: #ccc;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

/* 🎡 3D Slider Carousel */
.slider3d {
    position: relative;
    width: 230px;
    height: 260px;
    margin: 34px auto;
    transform-style: preserve-3d;
    animation: rotate3D 20s linear infinite;
}

.slide3d {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(calc(var(--i) * 72deg)) translateZ(280px);
}

.slide3d img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    object-fit: cover;
    box-shadow: 0 0 15px rgba(0, 191, 255, 0.5);
    border: 1px solid #00bfff;
}

.slide3d h3 {
    margin-top: 10px;
    font-size: 1rem;
    color: #00bfff;
}

/* 🔄 Animation */
@keyframes rotate3D {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

/* 📱 Responsive: 3D Slider */
@media (max-width: 1024px) {
    .slider3d {
        width: 200px;
        height: 220px;
    }
}

@media (max-width: 768px) {
    .slider3d {
        width: 180px;
        height: 200px;
        transform: scale(0.95);
    }

    .slide3d {
        transform: rotateY(calc(var(--i) * 72deg)) translateZ(240px);
    }

    .portfolio-box h2 {
        font-size: 1.6rem;
    }

    .portfolio-box p {
        font-size: 0.9rem;
        padding: 0 10px;
    }
}

@media (max-width: 480px) {
    .slider3d {
        width: 150px;
        height: 170px;
    }

    .slide3d {
        transform: rotateY(calc(var(--i) * 72deg)) translateZ(200px);
    }

    .portfolio-box h2 {
        font-size: 1.4rem;
    }

    .portfolio-box p {
        font-size: 0.85rem;
        padding: 0 8px;
    }
}

/* ============================================================
🤖 AI & AUTOMATION PAGE
Dark Theme | Yellow Headings | Blue Accent | Responsive
============================================================ */

/* ===== BASE STYLES ===== */
body {
    font-family: "Poppins", sans-serif;
    background: #000;
    color: #fff;
    line-height: 1.6;
    overflow-x: hidden;
}

h1,
h2 {
    color: #ffd633;
    font-weight: 600;
}

h3 {
    color: #00bfff;
    font-weight: 500;
}

/* ===== UNIVERSAL BUTTON ===== */
.cta-btn {
    display: inline-block;
    background: #00bfff;
    color: #000;
    padding: 12px 32px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.cta-btn:hover {
    background: #fff;
    color: #00bfff;
    transform: translateY(-2px);
}

/* ============================================================
🧠 HERO SECTION
============================================================ */
.ai-hero {
    background: #0b0c10;
    padding: 100px 8%;
}

.ai-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 50px;
    max-width: 1200px;
    margin: 0 auto;
}

.ai-text {
    flex: 1 1 45%;
}

.ai-text h1 {
    font-size: 2.6rem;
    margin-bottom: 18px;
}

.ai-text p {
    color: #ddd;
    font-size: 1.1rem;
    margin-bottom: 30px;
    line-height: 1.7;
}

.ai-image {
    flex: 1 1 45%;
    text-align: center;
}

.ai-image img {
    width: 100%;
    max-width: 520px;
    border-radius: 15px;
    object-fit: cover;
    box-shadow: 0 0 25px rgba(0, 191, 255, 0.25);
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.ai-image img:hover {
    transform: scale(1.03);
    box-shadow: 0 0 40px rgba(0, 191, 255, 0.4);
}

/* --- Responsive: Hero --- */
@media (max-width: 1024px) {
    .ai-grid {
        flex-direction: column;
        text-align: center;
    }

    .ai-text,
    .ai-image {
        flex: 1 1 100%;
    }

    .ai-image img {
        max-width: 450px;
    }

    .ai-text h1 {
        font-size: 2rem;
    }

    .ai-text p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .ai-hero {
        padding: 70px 6%;
    }

    .ai-text h1 {
        font-size: 1.8rem;
    }

    .ai-text p {
        font-size: 0.95rem;
    }

    .ai-image img {
        max-width: 380px;
    }
}

@media (max-width: 480px) {
    .ai-hero {
        padding: 60px 5%;
    }

    .ai-text h1 {
        font-size: 1.6rem;
    }

    .ai-text p {
        font-size: 0.9rem;
    }

    .ai-image img {
        max-width: 300px;
    }

    .cta-btn {
        padding: 10px 25px;
        font-size: 0.9rem;
    }
}

/* ============================================================
⚙️ CONTENT SECTIONS (Automation, ML, Business, Future)
============================================================ */
.ai-section {
    background: #0b0c10;
    padding: 100px 8%;
    border-top: 1px solid rgba(0, 191, 255, 0.1);
    border-bottom: 1px solid rgba(0, 191, 255, 0.1);
}

.ai-section.reverse .ai-grid {
    flex-direction: row-reverse;
}

.ai-section h2 {
    font-size: 2rem;
    margin-bottom: 18px;
}

.ai-section p {
    color: #ccc;
    font-size: 1rem;
    margin-bottom: 15px;
    line-height: 1.7;
}

.ai-section ul {
    list-style: none;
    margin-top: 10px;
    padding: 0;
}

.ai-section li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 8px;
    color: #aaa;
}

.ai-section li::before {
    content: "✔";
    color: #00bfff;
    position: absolute;
    left: 0;
}

/* Subtle divider line */
.ai-section::after {
    content: "";
    display: block;
    width: 70%;
    height: 2px;
    margin: 60px auto 0;
    background: linear-gradient(90deg, transparent, #00bfff, transparent);
    opacity: 0.4;
}

/* --- Responsive: Sections --- */
@media (max-width: 1024px) {
    .ai-section h2 {
        font-size: 2rem;
    }

    .ai-section p {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .ai-section {
        padding: 70px 6%;
    }

    .ai-section h2 {
        font-size: 1.6rem;
    }

    .ai-section p {
        font-size: 0.95rem;
    }
}

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

    .ai-section h2 {
        font-size: 1.4rem;
    }

    .ai-section p {
        font-size: 0.9rem;
    }
}

/* ============================================================
💡 ANIMATIONS
============================================================ */
.ai-text,
.ai-image {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUp 1s ease forwards;
}

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

/* ============================================================
🌟 OUR ESTEEMED CUSTOMERS SECTION
============================================================ */
.company-profile {
    background: linear-gradient(180deg, #0a0c10 0%, #12151b 100%);
    color: #fff;
    text-align: center;
    padding: 80px 20px;
    position: relative;
    overflow: hidden;
}

.company-profile::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 180px;
    height: 4px;
    background: linear-gradient(90deg, transparent, #00ffc3, transparent);
    box-shadow: 0 0 20px #00ffc3;
}

/* ===== Main Card ===== */
.customers-section {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(0, 255, 195, 0.2);
    border-radius: 16px;
    padding: 40px 30px;
    margin: 0 auto;
    max-width: 900px;
    box-shadow: 0 0 25px rgba(0, 255, 195, 0.15);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.customers-section:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 30px rgba(0, 255, 195, 0.25);
}

/* ===== Heading ===== */
.customers-section h2 {
    font-size: 2rem;
    font-weight: 800;
    color: #00ffc3;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 25px;
    text-shadow: 0 0 12px rgba(0, 255, 195, 0.7);
    position: relative;
}

.customers-section h2::after {
    content: "";
    display: block;
    width: 100px;
    height: 3px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, transparent, #00ffc3, transparent);
    border-radius: 2px;
}

/* ===== Customer List ===== */
.customers-section ul {
    list-style: none;
    padding: 0;
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
}

.customers-section ul li {
    font-size: 1.05rem;
    color: #dcdcdc;
    line-height: 1.8;
    padding-left: 25px;
    position: relative;
    transition: color 0.3s ease;
}

.customers-section ul li::before {
    content: "▹";
    color: #00ffc3;
    position: absolute;
    left: 0;
    font-size: 1rem;
    transition: transform 0.3s ease, color 0.3s ease;
}

.customers-section ul li:hover {
    color: #ffffff;
}

.customers-section ul li:hover::before {
    transform: translateX(4px);
    color: #00ffe0;
}

/* --- Responsive: Customers --- */
@media (max-width: 1024px) {
    .company-profile {
        padding: 60px 15px;
    }

    .customers-section {
        padding: 30px 20px;
    }

    .customers-section h2 {
        font-size: 1.6rem;
    }

    .customers-section ul li {
        font-size: 0.95rem;
    }
}

@media (max-width: 600px) {
    .customers-section h2 {
        font-size: 1.4rem;
    }

    .customers-section ul li {
        font-size: 0.9rem;
        line-height: 1.6;
    }
}

/* =========================================
   📌 LIAISON PAGE STYLING
========================================= */

.liaison-container {
    max-width: 1000px;
    margin: 120px auto 80px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 15px;
    box-shadow: 0 0 20px rgba(255, 215, 0, 0.05);
    backdrop-filter: blur(3px);
}

/* ===== INDIVIDUAL BOXES ===== */
.liaison-box {
    background: rgba(255, 255, 255, 0.05);
    border-left: 4px solid #FFD700;
    padding: 25px 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    transition: 0.4s ease;
}

.liaison-box:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-5px);
}

/* ===== HEADINGS ===== */
.liaison-box h1,
.liaison-box h2 {
    color: #FFD700;
    font-weight: 700;
    margin-bottom: 15px;
}

.liaison-box h1 {
    font-size: 2rem;
}

.liaison-box h2 {
    font-size: 1.5rem;
    color: #00ffc3;
}

/* ===== TEXT ===== */
.liaison-box p {
    color: #ddd;
    font-size: 1rem;
}

/* ===== LIST ===== */
.liaison-box ul {
    list-style: none;
    padding-left: 25px;
}

.liaison-box ul li {
    color: #ccc;
    margin: 8px 0;
    position: relative;
    transition: color 0.3s ease;
}

.liaison-box ul li::before {
    content: "✔️";
    position: absolute;
    left: -25px;
    color: #00ff99;
}

.liaison-box ul li:hover {
    color: #fff;
}

/* ===== OBJECTIVE BOX ===== */
.highlight {
    background: rgba(255, 215, 0, 0.1);
    border-left: 4px solid #00ffc3;
    font-weight: 500;
    font-size: 1.05rem;
    color: #fff;
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
    .liaison-container {
        margin: 90px 20px;
        padding: 15px;
    }

    .liaison-box {
        padding: 20px;
    }

    .liaison-box h1 {
        font-size: 1.6rem;
    }

    .liaison-box h2 {
        font-size: 1.2rem;
    }

    .liaison-box ul li {
        font-size: 0.95rem;
    }
}