/* ================== DESKTOP LINKS ================== */
.navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 600;
    margin-left: 25px;
    transition: 0.3s;
    position: relative;
}

.navbar-nav .nav-link:hover {
    color: #ff0000 !important;
}

.navbar-brand img {
    width: 280px;
    height: 70px;

}


/* ================== HAMBURGER / X ================== */
.custom-toggler {
    border: none !important;
    padding: 0;
    background: transparent !important;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-toggler:focus {
    box-shadow: none;
}



/* ================= MOBILE ALIGNMENT FIX ================= */

@media (max-width: 991px) {
    .navbar-custom {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
    }

    .navbar-brand img {
        height: 60px !important;
        width: auto !important;
        margin-top: 0;
    }

    @media (max-width: 380px) {
        .navbar-brand img {
            height: 40px !important;
        }
    }

    .navbar-custom .container {
        margin-top: 0 !important;
        padding-top: 0 !important;
        display: flex;
        align-items: center;
    }

    .custom-toggler {
        margin-top: 0 !important;
        height: 40px;
    }

    .navbar-collapse {
        margin-top: 10px !important;
    }
}

/* new navbar */
/* ================= ROOT ================= */
:root {
    --red: #e60000;
    --black: #000;
    --white: #fff;
    --primary: #ff7506;
    /* Updated to your requested color */
    --dark: #0a0a0a;
    --light: #f5f5f7;
    --gray: #1b1b1c;

}

/* ================= NAVBAR BASE ================= */
.navbar-custom {
    background: transparent !important;
    transition: all 0.35s ease;
    z-index: 999;
}

/* ================= NAV LINKS ================= */
.navbar-custom .nav-link {
    color: var(--white) !important;
    font-weight: 600;
    transition: 0.3s;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active {
    color: var(--red) !important;
}

/* ================= DROPDOWN BASE ================= */
.dropdown-menu {
    background: var(--white) !important;
    border: none;
    padding: 10px 0;
}

.dropdown-item {
    color: var(--black) !important;
    padding: 10px 18px;
    font-weight: 500;
    transition: 0.25s;
}

/* ================= DESKTOP HOVER ONLY ================= */
@media (min-width: 992px) {
    .dropdown-item:hover {
        background: var(--red) !important;
        color: var(--white) !important;
    }
}

/* ================= MOBILE HOVER (TEXT ONLY) ================= */
@media (max-width: 991px) {

    .dropdown-item:hover,
    .dropdown-item:active,
    .dropdown-item:focus {
        background: transparent !important;
        color: var(--red) !important;
    }
}

/* ================= HAMBURGER ================= */
.navbar-toggler {
    border: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='white' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* ================= X ICON ================= */
.hamburger-x {
    font-size: 32px;
    color: var(--white);
}

/* ================= SCROLL ================= */
.navbar-custom.scrolled {
    background: var(--white) !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.navbar-custom.scrolled .nav-link,
.navbar-custom.scrolled .nav-link:not(.active) {
    color: var(--black) !important;
}

.navbar-custom.scrolled .nav-link.active,
.navbar-custom.scrolled .nav-link:hover {
    color: var(--red) !important;
}


.navbar-custom.scrolled .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-width='3' stroke-linecap='round' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

.navbar-custom.scrolled .hamburger-x {
    color: var(--black);
}

/* ================= MOBILE MENU ================= */
@media (max-width: 991px) {

    /* MOBILE MENU BG */
    .navbar-collapse {
        background: #ffffff !important;
        padding: 15px;
        border-radius: 8px;
    }

    /* ALL MENU LINKS → BLACK DEFAULT */
    .navbar-custom .nav-link {
        color: #000000 !important;
        background: transparent !important;
    }

    /* NORMAL MENU HOVER → RED TEXT ONLY */
    .navbar-custom .nav-link:hover,
    .navbar-custom .nav-link:active,
    .navbar-custom .nav-link:focus {
        color: red !important;
        background: transparent !important;
    }

    /* DROPDOWN MENU BG */
    .dropdown-menu {
        background: #ffffff !important;
    }

    /* DROPDOWN ITEM DEFAULT → BLACK */
    .dropdown-item {
        color: #000000 !important;
        background: transparent !important;
    }

    /* DROPDOWN ITEM HOVER → RED BG + WHITE TEXT */
    .dropdown-item:hover,
    .dropdown-item:active,
    .dropdown-item:focus {
        background: red !important;
        color: #ffffff !important;
    }
}


/* ---------------- HERO SECTION ---------------- */
.banner-section {
    position: relative;
    height: 100vh;
    background: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}

/* ---------------- RIGHT left TOP round ---------------- */
.glow-right-top {
    position: absolute;
    top: -140px;
    right: -140px;
    width: 360px;
    height: 360px;
    pointer-events: none;
    z-index: 1;
}

.glow-right-top::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 30%;
    background: rgba(255, 0, 0, 0.646);
    filter: blur(55px);
    animation: pulseGlow 5s ease-in-out infinite;
}

.glow-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 150px;
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 2;

    animation: rotateIcon 10s linear infinite;
}

@keyframes pulseGlow {
    0% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.35);
        opacity: 1;
    }

    100% {
        transform: scale(1);
        opacity: 0.6;
    }
}

/* right side circle animation */
@keyframes rotateIcon {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* --------------left side dot-------------- */
.glow-left-center {
    position: absolute;
    top: 20px;
    left: 0;
    width: 560px;
    height: 560px;
    pointer-events: none;
    z-index: 1;

}

.glow-left-center::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.55);
    filter: blur(85px);
    animation: pulseGlow-left 5s ease-in-out infinite;
}


.left-glow-img {
    position: absolute;
    top: 55%;
    left: 50%;
    width: 30px;
    /* more visible */
    height: auto;
    transform: translate(-50%, -50%);
    z-index: 2;
    animation: triangleMove 10s linear infinite;
}

/* dot animation left side */
@keyframes pulseGlow-left {
    0% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.35);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0.4;
    }
}

@keyframes triangleMove {
    0% {
        transform: translate(-50%, -60%);
    }

    33% {
        transform: translate(-20%, -10%);
    }

    66% {
        transform: translate(-80%, -10%);
    }

    100% {
        transform: translate(-50%, -60%);
    }
}

/* -----------bottom round ---------------- */

.glow-bottom-center {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 2;
}

.bottom-glow-img {
    width: 150px;
    height: auto;
    display: block;

    animation: centerround 8s linear infinite;
}

@keyframes centerround {
    from {
        transform: rotate(0deg);
    }

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

/* responsive animation */
@media (max-width: 950px) {

    /* Ensure banner allows glow */
    .banner-section {
        position: relative;
        overflow: hidden;
    }

    /* Strong TOP CENTER red glow (mobile like desktop) */
    .banner-section::before {
        content: "";
        position: absolute;
        top: -180px;
        left: 100%;
        transform: translateX(-50%);
        width: 420px;
        height: 420px;
        background: rgba(255, 0, 0, 0.75);
        filter: blur(120px);
        z-index: 0;
    }

    .carousel-inner {
        position: relative;
        overflow: hidden;
    }

    .carousel-inner::before {
        content: "";
        position: absolute;
        top: 40%;
        left: 0;
        transform: translateX(-50%);
        width: 220px;
        height: 220px;
        background: rgba(255, 0, 0, 0.75);
        filter: blur(160px);
        border-radius: 50%;
        z-index: 0;
    }


}

@media (max-width: 425px) {

    /* Strong TOP CENTER red glow (mobile like desktop) */
    .banner-section::before {
        content: "";
        position: absolute;
        top: -180px;
        left: 100%;
        transform: translateX(-50%);
        width: 220px;
        height: 420px;
        background: rgba(255, 0, 0, 0.75);
        filter: blur(120px);
        z-index: 0;
    }

}


/* hero content above animation */
.hero-container {
    position: relative;
    z-index: 3;
}

/* LEFT TEXT */
.hero-small {
    font-size: 14px;
    opacity: 0.8;
}

.hero-title {
    font-size: 56px;
    font-weight: 800;
    line-height: 1.2;
    margin: 20px 0 35px;
}

/* BUTTONS */
.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn-red {
    background: #FF0000;
    color: #fff;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 600;
}

.btn-red:hover {
    background: #be0000;
    color: #fff;
    padding: 14px 30px;
    border-radius: 30px;
    font-weight: 600;
}

/* RIGHT IMAGE */
.hero-img-wrap {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
}

.hero-img-wrap img {
    width: 100%;
}

/* PLAY BUTTON */
.play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ff0000;
    color: #fff;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    animation: pulse 1.8s infinite;
}

/* pulse */
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255, 107, 44, .6);
    }

    70% {
        box-shadow: 0 0 0 25px rgba(255, 107, 44, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(255, 107, 44, 0);
    }
}

/* bottom center rotating image only */
.bottom-glow-img-only {
    position: absolute;
    left: 50%;
    bottom: 8%;
    width: 40px;
    transform: translateX(-50%);
    animation: rotateOnly 10s linear infinite;
    z-index: 2;
}

@keyframes rotateOnly {
    from {
        transform: translateX(-50%) rotate(0deg);
    }

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

/* SLIDER DOTS */
.hero-dots {
    position: absolute;
    bottom: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 5;
}

.hero-dots .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #777;
    cursor: pointer;
    transition: all 0.3s ease;
}

.hero-dots .dot.active {
    background: #ff6b2c;
    width: 18px;
    border-radius: 10px;
}

/* Styling the Bootstrap Carousel Dots */
.hero-dots {
    bottom: 40px;
    z-index: 10;
}

.hero-dots .dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background-color: #777 !important;
    border: none !important;
    margin: 0 6px !important;
    opacity: 1;
    transition: all 0.3s ease;
}

.hero-dots .dot.active {
    background-color: #FF0000 !important;
    width: 25px !important;
    border-radius: 10px !important;
}

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

@media (max-width: 575px) {

    .hero-dots {
        bottom: 20px;
        width: 100%;
        margin: auto;
    }

    .hero-dots .dot {
        width: 8px !important;
        height: 8px !important;
    }

    .hero-dots .dot.active {
        width: 20px !important;
    }
}

/* RESPONSIVE FIXES */
@media (max-width: 991px) {
    .banner-section {
        height: auto;
        /* Allow section to grow on mobile */
        padding: 120px 0 80px;
    }

    .hero-title {
        font-size: 36px;
        /* Smaller text for tablets/phones */
        text-align: center;
    }

    .hero-content {
        text-align: center;
        margin-bottom: 50px;
        /* Space between text and image */
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-small {
        display: block;
        text-align: center;
    }

    /* Hide glow effects on small screens if they overlap text */
    .glow-right-top,
    .glow-left-center {
        display: none;
    }
}

@media (max-width: 576px) {
    .hero-title {
        font-size: 28px;
    }

    .btn-red {
        padding: 10px 20px;
        font-size: 14px;
    }
}

/*------------------------- banner section ----------------------------------- */
/* ================= BANNER AREA ================= */
.page-banner-area {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Overlay */
.page-banner-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.page-banner-area .container {
    position: relative;
    z-index: 2;
}

/* ================= TITLE ================= */
.page-title,
.banner-inner h1 {
    font-size: 70px;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 15px;
    text-transform: capitalize;
}

@media (max-width: 991px) {
    .banner-inner h1 {
        font-size: 60px;
    }
}

@media (max-width: 767px) {
    .banner-inner h1 {
        font-size: 50px;
    }
}

@media (max-width: 575px) {
    .banner-inner h1 {
        font-size: 42px;
    }
}

@media (max-width: 375px) {
    .banner-inner h1 {
        font-size: 34px;
        line-height: 1.25;
    }
}

/* ================= BREADCRUMB ================= */
.breadcrumb {
    background: transparent;
    margin: 0;
    padding: 0;
    font-size: 20px;
    text-transform: capitalize;
}

/* Home link */
.breadcrumb-item a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Home hover */
.breadcrumb-item a:hover {
    color: #bfbfbf;
    /* gray */
}

/* Active page */
.breadcrumb-item.active {
    color: #ffffff;
}

/* Separator >> */
.breadcrumb-item+.breadcrumb-item::before {
    content: " »";
    color: #ffffff;
    padding: 0 12px;
}

/* ================= SHAPES (OPTIONAL) ================= */
.banner-shapes .circle {
    width: 770px;
    height: 770px;
    position: absolute;
    top: -300px;
    left: -200px;
    background: white;
    border-radius: 50%;
    z-index: -2;
}

@media (max-width: 991px) {
    .banner-shapes .circle {
        width: 400px;
        height: 400px;
    }
}

.banner-shapes img {
    position: absolute;
    max-width: 10%;
    z-index: -1;
}

.banner-shapes .shape-one {
    left: 6%;
    top: 35%;
    animation: down-up-two 15s infinite;
}

.banner-shapes .shape-two {
    right: 6%;
    top: 65%;
    animation: upDownLeft 20s infinite;
}

/* ---------------------------------Core Features section------------------- */
.core-features {
    background: #f0f8fe;
    background-image: url('./image/freature-bg-line.png');
}

.core-subtitle {
    color: #FF0000;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 1px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.core-subtitle .dot {
    width: 6px;
    height: 6px;
    background: #FF0000;
    border-radius: 50%;
}

.core-title {
    font-size: 42px;
    font-weight: 700;
    color: #1f2937;
}

@media (max-width: 768px) {
    .core-title {
        font-size: 32px;
        font-weight: 500;
    }
}

.feature-item-five {
    
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    text-align: center;
    padding: 35px 20px;
    border-radius: 7px;
    margin-bottom: 30px;
    background-color: white;
}

.feature-item-five:before {
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    border-radius: 5px;
}

.feature-item-five i {
    line-height: 1;
    font-size: 60px;
    -webkit-transition: 0.5s;
    -o-transition: 0.5s;
    transition: 0.5s;
    margin-bottom: 10px;
    color: #f84747;
    display: inline-block;
}

.feature-item-five:hover {
      background-image: url('../images/background/feature-bg.png');
    background-size: cover;
    background-position: center;
    background-color: #f84747;
    background-repeat: no-repeat;
    -webkit-transform: translateY(-15px);
    transform: translateY(-59px);
    transform: scale(1.1);
    filter: brightness(1.2);
   
}
.feature-item-five:hover i,
.feature-item-five:hover h5,
.feature-item-five:hover h5 a {
    color: white;

}

.feature-icon {
    font-size: 45px;
    color: #FF0000;
    margin-bottom: 20px;
    transition: color 0.3s ease;
}

.feature-icon:hover {
    color: #ffffff;
}


.feature-item-five h5 {
    font-size: 18px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.4;
    text-transform: capitalize;

}

/*--------------------- ABOUT SECTION--------------------- */
.about-section {
    padding: 50px 0px;

}

.about-sub-heading {
    font-size: 20px;
    font-weight: bold;
    color: #1f2937;
}

/* CORE SUBTITLE */
.core-subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 24px;
    color: #ff0000;
    letter-spacing: 1px;
}

.core-subtitle .dot {
    width: 6px;
    height: 6px;
    background: #ff0000;
    border-radius: 50%;
}

/* ABOUT IMAGE */
.about-image-one {
    position: relative;
    width: 80%;
    height: 70%;
    background-size: cover;

}

.about-image-one img:first-child {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

.about-image-one .image-left {
    position: absolute;
    left: -30px;
    bottom: -25px;
    max-width: 120px;
}

.about-image-section {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ROTATED BACKGROUND SHAPE */
.bg-squire-shape {
    position: relative;
    z-index: 1;
}

.bg-squire-shape::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #ef3805;
    /* background-color: #FF0000; */
    z-index: -1;
    transform: rotate(-10deg);
    border-radius: 16px;
    animation: semi_rotated_two 20s infinite ease-in-out;
}

/* ABOUT CONTENT */

.about-content-one p {
    font-size: 16px;
    line-height: 1.7;
    color: #7a7a7a;
    line-height: 1.80;
}

/* BUTTON – TRANSPARENT WITH FILL ANIMATION */
.about-btn {
    position: relative;
    padding: 12px 34px;
    background: transparent;
    color: #ff0000;
    border: 2px solid #ff0000;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
    overflow: hidden;
    transition: color 0.4s ease;
}

/* REMOVE UNWANTED EXTRA SPACE */
.about-content-one {
    padding: 0;
}

/* FILL EFFECT */
.about-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    color: white;
    background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 97%);
    box-shadow: rgba(248, 5, 5, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    z-index: -1;
    transition: width 0.4s ease;
}

/* HOVER EFFECT – LEFT TO RIGHT */
.about-btn:hover {
    color: #fff;
}

.about-btn:hover::before {
    width: 100%;
}


/* SIMPLE FADE-IN (WOW REPLACEMENT) */
.wow {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.wow.show {
    opacity: 1;
    transform: translateY(0);
}

/* RESPONSIVE */
@media (max-width: 768px) {
    .about-content-one {
        padding-top: 25px;
    }

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

    .about-image-one .image-left {
        display: none;
    }

    .about-btn {
        background: #ff0000;
        color: white;
    }

    .about-btn:hover {
        background: #c50101e4;
        border: 2px solid #c50101e4;
        color: white;
    }
}



/* ROTATION ANIMATION */
@keyframes semi_rotated_two {

    0%,
    100% {
        transform: rotate(-10deg);
    }

    50% {
        transform: rotate(-5deg);
    }
}

/* --------------------------footer section style start------------------- */

.main-footer {
    background: #0b0b0b;
    background-image: url("../images/shapes/freature-bg-line.png");
    color: #cfcfcf;
    position: relative;
    padding-top: 30px;

}

.main-footer p {
    color: #bdbdbd;
    line-height: 1.7;
    font-size: 15px;
}

.footer-title {
    color: #ffffff;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 22px;
    position: relative;

}

.footer-title::after {
    content: "";
    width: 40px;
    height: 3px;
    background: #ff0000;
    display: block;
    margin-top: 8px;
}


.footer-logo img {
    max-width: 170px;
}

.social-style-two {
    padding: 5px;
}

.social-style-two a {
    width: 40px;
    height: 40px;
    background: #1c1c1c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    border-radius: 50%;
    margin-right: 8px;
    transition: all 0.3s ease;
    list-style: none;
    text-decoration: none;
    margin: 2px;
}

.social-style-two a:hover {
    background: #ff0000;


}


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

.widget_nav_menu ul li {
    margin-bottom: 10px;
}

.widget_nav_menu ul li a {
    color: #bdbdbd;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 15px;
}

.widget_nav_menu ul li a::before {
    content: "›";
    position: absolute;
    left: 0;
    color: #ff0000;
    transition: 0.3s;
}

.widget_nav_menu ul li a:hover {
    color: #ff0000;
    padding-left: 20px;
}


.widget_newsletter input {
    width: 80%;
    padding: 14px 18px;
    border-radius: 6px;
    border: none;
    outline: none;
    margin-bottom: 12px;
    background: #1c1c1c;
    color: #ffffff;
}

.widget_newsletter input::placeholder {
    color: #9a9a9a;
}

.widget_newsletter .theme-btn {
    width: 80%;
    padding: 14px;
    border-radius: 6px;
    background: #ff0000;
    color: #ffffff;
    font-weight: 600;
    border: none;
    transition: 0.3s;
}

.widget_newsletter .theme-btn:hover {
    background: #cc0000;
}

/* ================= FOOTER BOTTOM ================= */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 15px 0;
}

.footer-bottom p {
    margin: 0;
    color: #9a9a9a;
    font-size: 14px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 767px) {
    .footer-title {
        font-size: 20px;
        margin-bottom: 22px;
        margin-top: 20px;
    }


}

/* footer contact item */
/* container */
.footer-contact-info {
    color: #ffffff;
}

/* row */
.footer-contact-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 18px;
}

/* icon – SMALL */
.footer-contact-icon {
    width: 38px;
    height: 38px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.footer-contact-icon i {
    color: #ff0000;
    font-size: 15px;

}

.footer-contact-icon:hover {
    transform: translateY(-3px);


}

/* text – SAME AS SERVICES */
.footer-contact-text {
    font-size: 15px;
    line-height: 1.6;
}

.footer-contact-text a {
    color: #bdbdbd;
    text-decoration: none;
    transition: color 0.25s ease;

}

/* hover ONLY on that link */
.footer-contact-text a:hover {
    color: #ff0000;
}

/* phone row inline */
.footer-phone {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.footer-slash {
    margin: 0 6px;
    color: #bdbdbd;
}



/* ---------------------Company Statistics-------------------- */
.statistics-area {
    background-color: rgba(251, 240, 240, 0.724);
    background-image: url("../images/shapes/counter-bg.png");
    overflow-x: hidden;
    padding: 50px 0px;
}

.stat-count-area {
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    padding: 60px 0;
}

.Statistics-subtitle1 {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #ff0000;
    font-size: 24px;
    font-weight: 600;
}

.Statistics-subtitle1 .dot {
    width: 6px;
    height: 6px;
    background: #ff0000;
    border-radius: 50%;
}

.stat-box-adaptive {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 10px;
}

.stat-box-adaptive i {
    color: #ff0000;
    font-size: clamp(24px, 5vw, 40px);
}

.stat-content h3 {
    margin: 0;
    font-weight: 800;
    font-size: clamp(18px, 4vw, 32px);
    color: #222;
}

.stat-label {
    margin: 0;
    font-size: clamp(10px, 2.5vw, 15px);
    font-weight: 600;
    color: #666;
    line-height: 1.2;
}

@media (min-width: 992px) {
    .stat-box-adaptive {
        flex-direction: row;
        text-align: left;
        justify-content: center;
        gap: 20px;
    }
}

.flex-nowrap {
    display: flex;
    flex-wrap: nowrap !important;
}

/* ------------------project section start -------------------------*/

/* Project Card Base */
.project-card {
    position: relative;
    height: 300px;
    /* adjust as needed */
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    text-align: center;
}

/* Background Image */
.project-card .card-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: brightness(50%);
    transition: filter 0.4s ease, transform 0.4s ease;
    z-index: 1;
    display: block;
}

/* Brighten on hover */
.project-card:hover .card-image {
    filter: brightness(100%);
    transform: scale(1.05);
}

/* Text Container (full width) */
.project-card .card-text {
    position: absolute;
    top: 50%;
    /* initially center vertically */
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    color: #fff;
    z-index: 2;
    padding: 15px;
    background: transparent;
    text-align: center;
    transition: all 0.4s ease;
}

.project-card:hover .card-text {
    top: auto;
    bottom: 0;
    transform: translateY(0);
    background: rgba(0, 0, 0, 0.5);
    padding: 15px 0;
}

/* Title and Subtitle */
.project-card h5 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #fff;
    /* readable on dimmed image */
}

.project-card p {
    margin: 5px 0 0;
    font-size: 14px;
    color: #fff;
}

/* Hover color effect */
.project-card:hover h5,
.project-card:hover p {
    color: white;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .project-card {
        height: 250px;
    }

    .project-card .card-text {
        padding: 10px;
    }

    .project-card:hover .card-text {
        bottom: 0;
    }
}


/* -------------cta area section style start -------------*/
.call-to-action-area {
    position: relative;
    z-index: 2;
    padding: 35px 0;
}

.cta-inner {
    position: relative;
    background-size: cover;
    background-position: center;
    border-radius: 6px;
    overflow: hidden;
    padding: 30px;
}

/* Overlay */
.cta-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: #1e1e22;
    opacity: 0.9;
    z-index: 0;
}

/* CTA content */
.cta-item {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 25px;
    padding: 40px;
}

/* ICON */
.cta-item .icon {
    width: 90px;
    height: 90px;
    background: #FF0000;
    color: #fff;
    font-size: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* TEXT */
.cta-item h4 {
    color: #fff;
    font-size: 24px;
    line-height: 1.4;
    margin: 0;
    max-width: 100%;
    flex: 1;
    /* 🔥 FULL WIDTH FIX */
}

/* BUTTON */
.cta-btn-index {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
    flex-shrink: 0;
}

.cta-btn-index:hover {
    background: #fff;
    color: #FF0000;
}

/* ================= MOBILE ================= */
@media (max-width: 767px) {

    .cta-inner {
        padding: 0px;
    }

    .cta-item {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }

    .cta-item h4 {
        font-size: 20px;
        width: 100%;
    }

    .cta-btn-index {
        margin-top: 10px;
    }
}

/* -----------------------contact section style start------------------ */

.contact-section {
    padding: 50px 0;
    background-image: url("../images/shapes/pricing-bg-dots.png");
    /* background: radial-gradient(circle at top right, #2c1a1a, #121212);
    background-color: #1a1a1a; */
}

.contact-info-title {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 40px;
}

.highlight-text {
    color: #ff0000;
}

.info-box {
    border: 1px solid #333;
    padding: 40px;
    border-radius: 10px;
}

.info-item {
    display: flex;
    align-items: flex-start;
    /* Better alignment for long addresses */
    margin-bottom: 25px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.icon-circle {
    min-width: 50px;
    /* Prevents shrinking on long text */
    height: 50px;
    color: white;
    background-color: #ff0000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 20px;
    font-size: 20px;
}

.info-text p {
    margin: 0 0 4px 0;
    color: #888;
    /* Slightly darker for better readability */
    font-size: 0.9rem;
    font-weight: 500;
}

.info-text a {
    display: block;
    /* Places multiple phone numbers on new lines */
    text-decoration: none;
    color: #000;
    font-weight: 600;
    font-size: 1rem;
    transition: color 0.3s ease;
    line-height: 1.4;
}

/* Hover effect on the link specifically */
.info-text a:hover {
    color: #ff0000;
    text-decoration: none;
}

/* Form Styling */
.contact-card {
    background: white;
    padding: 50px;
    border-radius: 15px;
    color: #333;
}

.contact-card h3 {
    text-align: center;
    font-weight: 700;
    margin-bottom: 30px;
    color: #1a1a1a;
}

.form-control {
    border: 1px solid #e0e0e0;
    padding: 12px 15px;
    margin-bottom: 15px;
    border-radius: 5px;
}

.btn-send {
    background-color: #ff0000;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    width: 100%;
    font-weight: 600;
    transition: 0.3s;
}

.btn-send:hover {
    background-color: #be0000;
    color: white;
    transform: translateY(-2px);
}

@media (max-width: 767px) {

    /* Title font reduce */
    .contact-info-title {
        font-size: 2rem;
        margin-bottom: 25px;
    }

    /* Info box padding reduce */
    .info-box {
        padding: 25px;
    }

    /* Icon size small */
    .icon-circle {
        min-width: 40px;
        height: 40px;
        font-size: 16px;
        margin-right: 15px;
    }

    /* Text size adjust */
    .info-text p {
        font-size: 0.85rem;
    }

    .info-text a {
        font-size: 0.9rem;
    }

    /* FORM padding reduce */
    .contact-card {
        padding: 25px;
    }

    .contact-card h3 {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }

    .form-control {
        padding: 10px 12px;
    }

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


/*------------------ contact map section  style start------------------ */
/* Map Section */
.map-section {
    padding: 60px 0;
    display: flex;
    justify-content: center;
}

/* Map Wrapper */
.map-wrapper {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    padding: 0px;
}

/* Iframe */
.map-wrapper iframe {
    width: 100%;
    height: 450px;
    border: 0;
}

/* ======= LARGE SCREENS ======= */
@media (min-width: 992px) {
    .map-wrapper {
        max-width: 75%;
    }
}

/* ======= EXTRA LARGE SCREENS ======= */
@media (min-width: 1400px) {
    .map-wrapper {
        max-width: 50%;
    }
}

/* --------------technology features style section start-------------- */
.technology-features {
    background-color: #f8f9fa;
    padding: 50px 0px;
}

.section-title {
    font-weight: 700;
    color: #333;
}

/* Flexbox Card Design */
.tech-card {
    display: flex;
    flex-direction: column;
    /* Image top, Text bottom */
    align-items: center;
    justify-content: center;
    background: #ffffff;
    /* White card looks cleaner on gray background */
    padding: 20px;
    border-radius: 12px;
    transition: all 0.3s ease;
    border: 1px solid #eee;
    height: 100%;
    /* Ensures all cards are same height */
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

/* Hover Effect */
.tech-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    color: white;
    background: radial-gradient(circle, rgba(255, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 97%);
    box-shadow: rgba(248, 5, 5, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

/* Image Styling */
.tech-card img {
    width: auto;
    height: 60px;
    /* Consistent height for logos */
    object-fit: contain;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

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

/*--------------------service section style ----------------*/

.page-banner {
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;

}

.page-banner img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    filter: brightness(50%);
}

.banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

.banner-overlay h1 {
    font-size: 3rem;
    font-weight: 700;
    color: rgb(250, 247, 247);
}


.service-area {
    /* background-color: #031b58; */
    background-color: rgba(227, 227, 227, 0.174);
    overflow-x: hidden;
}

.slanted-title {
    text-transform: uppercase;
    transform: skewX(-10deg);
    display: inline-block;
    color: #fbfafa;
    margin-bottom: 40px;
    font-size: calc(1.5rem + 1.5vw);
    /* Responsive font size */
}

.swiper {
    padding: 60px 20px 100px !important;
}

.swiper-slide:nth-child(odd) .service-card {
    animation: floating 4s ease-in-out infinite;
}

.swiper-slide:nth-child(even) .service-card {
    animation: floating-reverse 4s ease-in-out infinite;
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-15px);
    }
}

@keyframes floating-reverse {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(15px);
    }
}

/* Bullet style */
.swiper-pagination-bullet {
    transition: all 0.3s ease;
    background-color: rgb(26, 26, 26);

}

.swiper-pagination-bullet-active {
    opacity: 1;
    width: 30px;
    height: 8px;
    border-radius: 10px;
    background: #f90707;

}

.service-card {
    border-radius: 15px;
    padding: 30px 20px;
    text-align: center;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 370px;
    width: 100%;
    max-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #0e0e0e;
    margin: 0 auto;
}

.service-card:hover {
    transform: translateY(-10deg);
    /* box-shadow: 0 15px 30px rgba(87, 87, 87, 0.3) !important; */
}

.service-icon {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 30px;
    color: #ffffff;
    flex-shrink: 0;
    /* box-shadow: 5px 10px 20px rgb(55, 54, 54) */
}

.service-text h3 {
    /* font-family: " Georgia",'Times New Roman'; */
    font-size: 1.2rem;
    margin-bottom: 15px;
    color: #2c2c2c;
    text-transform: uppercase;
    font-weight: 600;

}

.service-text p {
    color: #505050;
    text-transform: capitalize;
    width: 100%;
}

@media (min-width: 1200px) {
    .five-cols .col-xl-custom {
        width: 20%;
        flex: 0 0 auto;
    }
}

/* Zigzag and Floating logic for Desktop/Tablet only */
@media (min-width: 992px) {
    .zigzag-card:nth-child(odd) {
        transform: translateY(-20px);
    }

    .zigzag-card:nth-child(even) {
        transform: translateY(20px);
    }

    .service-card {
        animation: floating 4s ease-in-out infinite;
    }

    .zigzag-card:nth-child(even) .service-card {
        animation: floating-reverse 4s ease-in-out infinite;
    }
}

/* Mobile Fixes - REMOVE zigzag and floating for better UX on small screens */
@media (max-width: 991px) {
    .zigzag-card {
        transform: none !important;
        margin-bottom: 20px;
    }

    .service-card {
        animation: none !important;
        height: auto;
        min-height: 300px;
    }
}

/* Card Color Variations */
/* blue */
.card-blue {
    background-color: #eef5ff;
}

.card-blue:hover {
    box-shadow: 0 0 18px 4px rgba(83, 149, 255, 0.279) !important;
}

.icon-blue {
    background-color: #4d5ce7;
    box-shadow: 0 0 18px 4px rgba(83, 149, 255, 0.279) !important;
}

.btn-blue {
    box-shadow: 0 0 18px 4px rgba(83, 149, 255, 0.279);
}

.btn-blue:hover {
    background-color: #4d5ce7;
    color: white;
}

/* skyblue */
.card-sky {
    background-color: #ddf4fd;
}

.card-sky:hover {
    box-shadow: 0 0 18px 4px rgba(63, 163, 202, 0.466) !important;
}

.icon-sky {
    background-color: #16b4f2;
    box-shadow: 0 0 18px 4px rgba(81, 206, 255, 0.726);
}

.btn-sky {
    box-shadow: 0 0 18px 4px rgba(81, 206, 255, 0.292);
}

.btn-sky:hover {
    background-color: #16b4f2;
    color: white;
}

/* yellow */
.card-yellow {
    background-color: #fdfaef;
}

.card-yellow:hover {
    box-shadow: 0 0 18px 4px rgba(250, 202, 72, 0.274) !important;
}

.icon-yellow {
    background-color: #f2ba22;
    box-shadow: 0 0 18px 4px rgba(250, 203, 72, 0.724);
}

.btn-yellow {
    box-shadow: 0 0 18px 4px rgba(250, 202, 72, 0.274);
}

.btn-yellow:hover {
    background-color: #f2ba22;
    color: white;
}

/* purple */
.card-purple {
    background-color: #f9f2ff;
}

.card-purple:hover {
    box-shadow: 0 0 18px 4px rgba(186, 113, 255, 0.247) !important;
}

.icon-purple {
    background-color: #8400ff;
    box-shadow: 0 0 18px 4px rgba(187, 113, 255, 0.8);
}

.btn-purple {
    box-shadow: 0 0 18px 4px rgba(186, 113, 255, 0.247);
}

.btn-purple:hover {
    background-color: #8400ff;
    color: white;
}

/* orange */
.card-orange {
    background-color: #fff3e8;
}

.card-orange:hover {
    box-shadow: 0 0 18px 4px rgba(244, 148, 70, 0.279) !important;
}

.icon-orange {
    background-color: #ff7506;
    box-shadow: 0 0 18px 4px rgba(244, 148, 70, 0.733);
}

.btn-orange {
    box-shadow: 0 0 18px 4px rgba(244, 148, 70, 0.279);
}

.btn-orange:hover {
    background-color: #ff7506;
    color: white;
}

/* green */
.card-green {
    background-color: #dffbf0;
}

.card-green:hover {
    box-shadow: 0 0 18px 4px rgba(41, 239, 166, 0.292) !important;
}

.icon-green {
    background-color: #41d8a8;
    box-shadow: 0 0 18px 4px rgba(41, 239, 166, 0.708);
}

.btn-green {
    box-shadow: 0 0 18px 4px rgba(41, 239, 166, 0.292);
}

.btn-green:hover {
    background-color: #41d8a8;
    color: white;
}

/* pink */
.card-pink {
    background-color: #ffedf9;
}

.card-pink:hover {
    box-shadow: 0 0 18px 4px rgba(253, 88, 190, 0.265) !important;
}

.icon-pink {
    background-color: #ae2469;
    box-shadow: 0 0 18px 4px rgba(253, 88, 190, 0.669);
}

.btn-pink {
    box-shadow: 0 0 18px 4px rgba(253, 88, 190, 0.265);
}

.btn-pink:hover {
    background-color: #9e0551;
    color: white;
}

.read-more-btn {
    text-decoration: none;
    color: black;
    align-items: center;
    transition: 0.3s;
    border-radius: 20px;
    background-color: transparent;
    padding: 10px 20px;
}

.read-more-btn:hover i {
    transform: translateX(5px);
}

@keyframes floating {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

@keyframes floating-reverse {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(10px);
    }
}

/* ---------------------scroll to top ------------------------ */

.prgoress_indicator {
    position: fixed;
    right: 30px;
    bottom: 50px;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    border-radius: 50px;
    box-shadow: inset 0 0 0 2px rgba(22, 93, 245, 0.2);
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    /* transform: translateY(15px); */
    transform: translateY(15px) !important;
    transition: all 200ms linear !important;
}

.prgoress_indicator.active-progress {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) !important;
}

.prgoress_indicator::after {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    color: #ff0000;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    font-weight: 900;
    z-index: 1;
    transition: all 200ms linear !important;
}

.prgoress_indicator::before {
    position: absolute;
    content: "\f106";
    font-family: "Font Awesome 5 Free";
    text-align: center;
    line-height: 46px;
    font-size: 18px;
    font-weight: 900;
    opacity: 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    left: 0;
    top: 0;
    height: 46px;
    width: 46px;
    cursor: pointer;
    display: block;
    z-index: 2;
    transition: all 200ms linear !important;
}

.prgoress_indicator:hover ::after {
    color: #ff0000;
}

.prgoress_indicator:hover ::before {
    opacity: 1;
}

.prgoress_indicator svg path {
    fill: none;
}

.prgoress_indicator svg.progress-circle path {
    stroke: #ff0000;
    stroke-width: 4;
    box-sizing: border-box;
    transition: all 200ms linear !important;
}

/* ------------------------ vision mission value section start ---------------------------- */

.mvv-section {

    margin: 60px auto;
    display: flex;
    flex-direction: column;
    gap: 30px;

}

.mvv-item {
    position: relative;
    display: flex;
    align-items: center;
    background: #f5eeee;
    min-height: auto;
    /* remove fixed height */
    padding: 6px 15px;
    /* reduce padding */
    gap: 15px;
    border-radius: 70px 0 0 70px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);


}

/* RIGHT COLOR STRIP */
.mvv-item::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    width: 10px;
    height: 100%;
    border-radius: 0 6px 6px 0;
}

/* ICON CIRCLE */
.mvv-icon {

    width: 90px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mvv-icon i {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    color: #fff;
}


/* CONTENT */
.mvv-content h3 {
    font-size: 22px;
    margin-bottom: 6px;

}

.mvv-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    max-width: 700px;
    padding-bottom: 0;
    margin: 0;

}

/* COLOR THEMES */
.green .mvv-icon,
.green::after {
    background: radial-gradient(circle at center, #fe0b0b 10%, #ec1717 35%, #171717 100%);
}

.teal .mvv-icon,
.teal::after {
    background: radial-gradient(circle at center, #fe0b0b 10%, #ec1717 35%, #171717 100%);
}

.blue .mvv-icon,
.blue::after {
    background: radial-gradient(circle at center, #fe0b0b 10%, #ec1717 35%, #171717 100%);
}

.mvv-main-wrapper {
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1400px;
    margin: auto;
    padding: 20px;

}

.mvv-left {
    flex: 1.2;
}

.mvv-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* IMAGE RESPONSIVENESS */
.mvv-right img {
    width: 100%;
    height: auto;
    max-width: 500px;
    object-fit: contain;
    border-radius: 12px;
}

/* TABLET VIEW */
@media (max-width: 992px) {
    .mvv-right img {
        max-width: 420px;
    }

    .mvv-item {
        display: flex;
        flex-direction: row;

    }

}

/* MOBILE VIEW */
@media (max-width: 768px) {
    .mvv-main-wrapper {
        flex-direction: column;
        text-align: center;
        margin-top: 30px;
    }

    .mvv-right img {
        max-width: 100%;
    }

    .mvv-item {
        display: flex;
        flex-direction: row;
    }

    .mvv-icon {
        height: 55px;
        width: 60px;
    }

    .mvv-content h3 {
        margin-top: 0;
    }

    .mvv-section {
        margin: 20px auto;
    }

}

/* SMALL MOBILE */
@media (max-width: 480px) {
    .mvv-right img {
        width: 90%;
    }

    .mvv-item {
        display: flex;
        flex-direction: column;
        margin-top: 0;

    }
}

/*---------------------- career section style start------------------ */
.career-info-card {
    background: #ffffff;
    padding: 30px 20px;
    border-radius: 14px;
    color: #111;
    height: 100%;
    text-align: center;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
}

/* Icon */
.career-info-card i {
    font-size: 40px;
    color: #ff2c2c;
    margin-bottom: 12px;
    transition: color 0.4s ease;
}

/* Title */
.career-info-card h5 {
    font-weight: 600;
    margin-bottom: 8px;
    color: #111;
    transition: color 0.4s ease;
}

/* Text */
.career-info-card p {
    font-size: 14px;
    color: #555;
    transition: color 0.4s ease;
}


.career-info-card:hover {
    transform: translateY(-10px);
    background: radial-gradient(circle,
            rgba(255, 0, 0, 1) 0%,
            rgba(0, 0, 0, 1) 97%);
    box-shadow: rgba(248, 5, 5, 0.25) 0px 13px 27px -5px,
        rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
}

.career-info-card:hover i,
.career-info-card:hover h5,
.career-info-card:hover p {
    color: #ffffff;
}

/* ===============================
   JOB CARD DESIGN
================================ */

.job-card {
    background: #fff;
    padding: 22px;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.job-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.job-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Location & Experience */
.job-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    gap: 18px;
    font-size: 13px;
    color: #666;
}

.job-meta i {
    color: #ff2c2c;
    margin-right: 5px;
}

/* Roles */
.job-desc strong {
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}

.job-desc ul {
    padding-left: 18px;
    font-size: 13px;
    color: #555;
}

.job-desc li {
    margin-bottom: 5px;
}

/* Apply Button */
.apply-btn {
    margin-top: auto;
    background: #ff2c2c;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.3s ease, transform 0.2s ease;
}

.apply-btn:hover {
    background: #d90000;
    transform: translateY(-2px);
}

/* ===============================
   APPLICATION FORM (SMALL UPDATE)
================================ */

.career-form-section {
    padding: 60px 0;
}

.career-form {
    max-width: 500px;
    margin: auto;
    padding: 25px;
    /* NEW */
    border: 1px solid #eee;
    /* NEW */
    border-radius: 14px;
    /* NEW */
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    /* NEW */
    background: #fff;
}

.career-form input,
.career-form textarea {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 14px;
    border-radius: 8px;
    border: 1px solid #ccc;
    font-size: 14px;
}

.career-form input:focus,
.career-form textarea:focus {
    outline: none;
    border-color: #ff0000;
}

.career-form button {
    width: 100%;
    background: #ff0000;
    color: #fff;
    border: none;
    padding: 11px;
    border-radius: 8px;
    font-weight: 500;
}

.career-form button:hover {
    background: #be0000;
}

/* Responsive */
@media (max-width: 768px) {
    .job-meta {
        flex-direction: column;
        gap: 6px;
    }
}

.open-position-section {
    background-color: rgba(255, 206, 206, 0.233);
    width: 100%;

}

/* ---------------------WEB DEVELOPMENT SERVICE STYLE-------------------------- */



/* WORK PROCESS AREA */


.work-process-area {
    position: relative;
    padding-bottom: 50px;
}

.section-title {
    text-align: center;
}

.work-process-wrap {
    position: relative;
    z-index: 1;
}

.work-process-item {
    text-align: center;
    padding: 0 15px;
    margin-bottom: 30px;
    position: relative;
    z-index: 2;
}

/* zig-zag spacing (desktop only) */
.work-process-item.mt-30 {
    margin-top: 30px;
}

.work-process-item.mt-45 {
    margin-top: 45px;
}

.work-process-item.mt-55 {
    margin-top: 55px;
}

@media (max-width: 575px) {
    .work-process-item {
        margin-top: 0 !important;
    }
}

.work-process-item .icon {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
    padding: 15px;
}

.work-process-item .icon .number {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -60%) rotate(-50deg);
    font-size: 85px;
    font-weight: 700;
    opacity: 0.15;
    color: transparent;
    -webkit-text-stroke: 1px #293043;
    z-index: -1;
}

@media (max-width: 575px) {
    .work-process-item .icon .number {
        font-size: 65px;
    }
}

.work-process-item .icon i {
    width: 120px;
    height: 120px;
    line-height: 120px;
    font-size: 65px;
    background: #ff3b3b;
    color: #ffffff;
    border-radius: 50%;
    display: inline-block;
    transition: 0.4s ease;
    text-align: center;
}

@media (max-width: 575px) {
    .work-process-item .icon i {
        width: 80px;
        height: 80px;
        font-size: 35px;
        line-height: 80px;
    }
}

.work-process-item .icon::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px dashed #ff6b6b;
    transform: scale(0);
    transition: 0.5s;
    z-index: -1;
}

.work-process-item:hover .icon i {
    background: #ff6b6b;
}

.work-process-item:hover .icon::before {
    transform: scale(1);
    animation: rotateCircle 5s linear infinite;
}

@keyframes rotateCircle {
    from {
        transform: rotate(0deg) scale(1);
    }

    to {
        transform: rotate(360deg) scale(1);
    }
}

.work-process-item h4 {
    margin-bottom: 10px;
}

.work-process-item p {
    font-size: 18px;
    margin: 0;
}

.work-process-shape {
    position: absolute;
    top: -2%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    z-index: 0;
    pointer-events: none;
}

.work-process-shape img {
    width: 100%;
    height: auto;

    opacity: 0.99;
    filter: contrast(240%) saturate(120%) brightness(95%);

    transform: scale(1.10);
}


@media (max-width: 1200px) {
    .work-process-shape {
        display: none;
    }
}

/*  MOBILE & TABLET CARD VIEW  */


@media (max-width: 1200px) {

    /* Remove zig-zag spacing */
    .work-process-item.mt-30,
    .work-process-item.mt-45,
    .work-process-item.mt-55 {
        margin-top: 0 !important;
    }

    /* Card style */
    .work-process-item {
        background: #ffffff;
        padding: 30px 20px;
        border-radius: 18px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
        margin-bottom: 25px;
        transition: 0.3s ease;
    }

    .work-process-item:hover {
        transform: translateY(-6px);
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }

    /* Center icon nicely */
    .work-process-item .icon {
        margin-bottom: 15px;
    }

    /* Reduce text size for mobile */
    .work-process-item h4 {
        font-size: 20px;
        margin-bottom: 8px;
    }

    .work-process-item p {
        font-size: 15px;
        line-height: 1.6;
    }

    /* Remove big rotated number clutter */
    .work-process-item .icon .number {
        display: none;
    }

    /* Softer icon size for mobile */
    .work-process-item .icon i {
        width: 90px;
        height: 90px;
        line-height: 90px;
        font-size: 40px;
    }
}

/* web dev call action section style */
/* ================= WEB DEV CTA ================= */
.web-dev-cta {
    background: #be0000;
    color: #ffffff;
}

/* FLEX WRAP */
.web-dev-cta-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

/* LEFT CONTENT */
.web-dev-cta-content {
    max-width: 700px;
}

.web-dev-cta-content h4 {
    font-size: 1.1rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.web-dev-cta-content h1 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.web-dev-cta-content p {
    font-size: 1rem;
    line-height: 1.6;
    margin: 0;
}

/* RIGHT BUTTON */
.web-dev-cta-btn {
    flex-shrink: 0;
}

.cta-btn {
    display: inline-block;
    background: #000;
    color: #fff;
    padding: 14px 34px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
}

.cta-btn:hover {
    background: #2b2b2b;
}

/* ================= TABLET ================= */
@media (max-width: 991px) {
    .web-dev-cta-content h1 {
        font-size: 2rem;
    }

    .web-dev-cta-content p {
        font-size: 0.95rem;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 767px) {
    .web-dev-cta-wrap {
        flex-direction: column;
        text-align: center;
    }

    .web-dev-cta-content {
        max-width: 100%;
    }

    .web-dev-cta-btn {
        margin-top: 25px;
    }
}


/* -------------------inner service  web-infrastructure banner section style start----------------- */
.web-infra {
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/web-infrastructure.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.web-infra h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.web-infra p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}

/* 📱 Mobile optimization */
@media (max-width: 450px) {
    .web-infra h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .web-infra p {
        max-width: 100%;
        font-size: 1rem;
    }
}


/* continous rotation */
.rotate-wrap {
    position: absolute;
    left: 0px;
    bottom: 200px;
    width: 220px;
    height: 220px;
    pointer-events: none;
}

.rotate-wrap img {
    width: 70%;
    height: 100%;
    object-fit: contain;
    animation: spin 30s linear infinite;
    transform-origin: left;
}

/* Rotation animation */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }

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

/* MOBILE */
@media (max-width: 575px) {
    .rotate-wrap {
        width: 150px;
        height: 150px;
        left: 0px;
        bottom: 60px;
    }

    .rotate-wrap img {
        width: 70%;
        height: 100%;
        object-fit: contain;
        animation: spin 50s linear infinite;
        transform-origin: center;
    }
}


/* Services Grid */
.webdev-container {
    max-width: 1200px;
    margin: -50px auto 60px;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* ================= WEB DEVELOPMENT CARD ================= */


/* banner */
.web-dev-banner {
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/web-design.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.web-dev-banner h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.web-dev-banner p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}

/* 📱 Mobile optimization */
@media (max-width: 450px) {
    .web-dev-banner h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .web-dev-banner p {
        max-width: 100%;
        font-size: 1rem;
    }
}



.web-dev-card {
    padding: 35px 40px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: rgba(225, 2, 2, 0.15) 0px 10px 25px;
    transition: all 0.3s ease;
    border-top: 4px solid transparent;
}

.web-dev-card:hover {
    box-shadow: rgba(225, 2, 2, 0.15) 0px 10px 25px;
    transform: translateY(-5px);
    border-top: 4px solid red;
}

/* HEADER */
.web-dev-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

.web-dev-header i {
    font-size: 2.4rem;
    color: #ff0000;
    flex-shrink: 0;
}

.web-dev-header h3 {
    font-size: 1.45rem;
    margin: 0;
    color: #111;
}

/* TEXT */
.web-dev-card p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #444;
    margin: 0;
}

/* TABLET */
@media (max-width: 991px) {
    .web-dev-card {
        padding: 30px;
    }

    .web-dev-header h3 {
        font-size: 1.3rem;
    }

    .web-dev-header i {
        font-size: 2.1rem;
    }

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

/* MOBILE */
@media (max-width: 575px) {
    .web-dev-card {
        padding: 24px;
    }

    .web-dev-header i {
        font-size: 1.9rem;
    }

    .web-dev-header h3 {
        font-size: 1.15rem;
    }

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

@media (max-width: 768px) {
    .webdev-container {
        margin-top: 20px;
        /* Remove the negative overlap on mobile for better spacing */
        grid-template-columns: 1fr;
        /* Force 1 card per row */
        padding: 0 15px;
    }
}


/* ================= STATS SECTION ================= */
.stats-section {
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    /* keep in one line */
    padding: 40px 20px;
    background: #fafafa;
    text-align: center;
    overflow-x: auto;
    /* allow horizontal scroll on mobile */
    gap: 20px;
}

/* hide scrollbar for clean look */
.stats-section::-webkit-scrollbar {
    display: none;
}

.stats-section {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

/* ================= STAT ITEM ================= */
.stat-item {
    flex: 0 0 auto;
    /* prevent shrinking */
    min-width: 120px;
    /* adjust default width */
}

.stat-item h2 {
    font-size: 2.2rem;
    /* desktop size */
    color: #FF0000;
    /* red theme */
    margin-bottom: 5px;
}

.stat-item p {
    color: rgb(128, 128, 128);
    text-transform: uppercase;
    font-size: 0.75rem;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 991px) {
    .stat-item {
        min-width: 100px;
    }

    .stat-item h2 {
        font-size: 1.8rem;
    }

    .stat-item p {
        font-size: 0.7rem;
    }
}

@media (max-width: 575px) {
    .stat-item {
        min-width: 80px;
    }

    .stat-item h2 {
        font-size: 1.5rem;
    }

    .stat-item p {
        font-size: 0.65rem;
    }
}


.details-section {
    padding: 100px 20px;
    background: var(--dark);
    color: white;
}

.content-wrapper {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: center;
}

.text-block h2 {
    font-size: 2.5rem;
    margin-bottom: 25px;
}

.feature-list {
    list-style: none;
    margin-top: 30px;
}

.feature-list li {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.feature-list i {
    color: var(--primary);
}

.cta-box {
    background: linear-gradient(135deg, #1a1a1a 0%, #000 100%);
    padding: 50px;
    border-radius: 30px;
    border: 1px solid var(--primary);
    text-align: center;
}

.cta-box h3 {
    margin-bottom: 20px;
    font-size: 1.8rem;
}

.cta-box p {
    margin-bottom: 30px;
    color: #a0a0a0;
}

/* Inline CTA button fix */
.cta-box .btns {
    background: var(--primary);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .content-wrapper {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .feature-list li {
        justify-content: center;
    }

    .stat-item {
        flex: 1 1 50%;
        margin-bottom: 30px;
    }
}

@media (max-width: 768px) {
    .hero {
        height: auto;
        padding: 100px 20px;
    }

    .container {
        margin-top: 20px;
    }
}

/* ---------------------WEB Infrastructure SERVICE STYLE-------------------------- */
:root {
    /* Primary brand color updated to #ff7506 */
    --tech-blue: #0fc8bc;
    --secure-green: hsl(193, 87%, 48%);
    --bg-dark: #343232;
    --card-bg: #181818;
    --text-main: #e0e0e0;
    --text-dim: #a0a0a0;
}

/* ================= INFRA INTRO ================= */
.infra-intro {
    background: #fff;
    /* clean white background */
    color: #111;
    padding: 30px 20px;
}

.infra-intro-content h2 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #be0000;
    /* red accent for heading */
    margin-bottom: 20px;
}

.infra-intro-content p {
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
    color: #555;
    /* softer text for readability */
}

/* TABLET */
@media (max-width: 991px) {
    .infra-intro-content h2 {
        font-size: 1.9rem;
    }

    .infra-intro-content p {
        font-size: 1rem;
    }
}

/* MOBILE */
@media (max-width: 575px) {
    .infra-intro-content h2 {
        font-size: 1.5rem;
    }

    .infra-intro-content p {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}

/* infrastrucure bullet point */
/* Section Styles */
.infra-why-section {
    padding: 60px 20px;
    background: #f9f9f9;
}

.section-title {
    font-size: 2rem;
    color: #FF0000;
    font-weight: bold;
}

/* Flexbox Layout */
.infra-flex-container {
    display: flex;
    align-items: center;
    /* Vertically center image with list */
    justify-content: center;
    gap: 50px;
    max-width: 1000px;
    margin: 0 auto;
}

.infra-image img {
    max-width: 400px;
    /* Increased for better desktop balance */
    width: 100%;
    height: auto;
    border-radius: 8px;
    /* Optional: adds a modern touch */
}

/* List Styles */
.infra-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #555;
}

.infra-bullet-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.infra-bullet-list li i {
    color: #be0000;
    font-size: 1.4rem;
    width: 30px;
    /* Fixed width keeps icons aligned */
    text-align: center;
    flex-shrink: 0;
}

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .infra-flex-container {
        flex-direction: column;
        text-align: left;
        /* Kept left-aligned for better readability of lists */
        gap: 30px;
    }

    .infra-image {
        order: -1;
        /* Ensures image stays on top */
    }

    .infra-image img {
        max-width: 280px;
        margin: 0 auto;
        display: block;
    }

    .section-title {
        font-size: 1.6rem;
    }
}




/* Core Features Grid */
/* GRID stays same */
.main-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 25px;
}

/* CARD */
.infra-card {
    color: white;
    background: var(--card-bg);
    padding: 60px 40px;
    border-radius: 15px;
    border: 1px solid #222;
    transition: 0.4s ease;
}

/* HOVER */
.infra-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(255, 0, 0, 0.12);
}

/* 🔥 ICON + TITLE SAME ROW */
.infra-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

/* ICON */
.infra-header i {
    font-size: 2.4rem;
    color: #ff0000;
    flex-shrink: 0;
}

/* TITLE */
.infra-header h3 {
    font-size: 1.4rem;
    margin: 0;
}

/* PARAGRAPH BOTTOM */
.infra-card p {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* RESPONSIVE */
@media (max-width: 575px) {
    .infra-card {
        padding: 28px;
    }

    .infra-header h3 {
        font-size: 1.2rem;
    }

    .infra-header i {
        font-size: 2rem;
    }

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

/* BOTTOM SECTION: Enhanced Content */
:root {
    --secure-green: #00ff88;
    /* Standard secure green, ithai ungal theme-kku etrapadi maatrikkollalam */
    --tech-blue: #00d4ff;
    /* Cyber blue color */
}

.extended-content {
    max-width: 1200px;
    margin: 30px auto;
    padding: 0 20px;

}

.content-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    background: #0a0a0a;
    /* Dark premium background */
    background-image: url("../images/services/service-bg-two.png");
    background-repeat: no-repeat;
    padding: 60px;
    border-radius: 30px;
    border: 1px solid #1a1a1a;
    align-items: start;
}

/* Left: Checklist Styling */
.checklist-box h2 {
    font-size: 2rem;
    margin-bottom: 25px;
    color: #FF0000;
    font-weight: 700;
}

.check-item {
    display: flex;
    align-items: flex-start;
    /* Better for long text */
    gap: 15px;
    margin-bottom: 20px;
    padding: 20px;
    background: rgba(122, 4, 63, 0.475);
    color: #e0e0e0;
    border-radius: 12px;
    border: 1px solid rgba(122, 4, 63, 0.3);
    transition: 0.3s;
}

.check-item:hover {
    background: rgba(122, 4, 63, 0.3);
    transform: translateX(10px);
}

.check-item i {
    color: var(--secure-green);
    font-size: 1.2rem;
    margin-top: 3px;
}

/* Right: Process Box Styling */
.process-box {
    color: white;
}

.process-box h2 {
    font-size: 2rem;
    margin-bottom: 35px;
    color: #ffffff;
}

.step {
    position: relative;
    padding-left: 45px;
    margin-bottom: 40px;
}

.step::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 2px;
    height: calc(100% + 40px);
    /* Creates the connecting line effect */
    background: var(--tech-blue);
    opacity: 0.3;
}

.step:last-child::before {
    display: none;
    /* Last step has no line going down */
}

.step-num {
    position: absolute;
    left: -14px;
    top: 0;
    background: #be0000;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 0 15px #c01212;
    /* Glow effect */
}

.step h4 {
    font-size: 1.25rem;
    color: #FF0000;
    margin-bottom: 8px;
}

.step p {
    color: #d8d8d8;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Mobile Responsive */
@media (max-width: 991px) {
    .extended-content {
        margin: 5px auto 30px !important;
        padding: 0 !important;
    }

    .content-split {
        grid-template-columns: 1fr;
        padding: 30px 15px;
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    .check-item {

        margin-left: 0;
        margin-right: 0;
        padding: 15px;
        transform: none !important;
    }

    .check-item:hover {
        transform: none !important;
    }

    .checklist-box h2,
    .process-box h2 {
        font-size: 1.6rem;
        text-align: center;
    }

    .step {
        padding-left: 35px;
    }

    .step::before {
        left: 0px;
    }
}


/* Footer CTA */
.footer-cta {
    color: white;
    text-align: center;
    padding: 100px 20px;
    background: linear-gradient(to bottom, #050505, #291400);
}

.btn-secure {
    display: inline-block;
    padding: 18px 40px;
    background-color: rgb(150, 9, 79);
    color: #000;
    text-decoration: none;
    font-weight: bold;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.btn-secure:hover {
    color: white;
    background-color: rgb(236, 31, 134);
}

@media (max-width: 900px) {
    .content-split {
        grid-template-columns: 1fr;
        padding: 30px;
    }
}


/* ---------------------branding identity SERVICE STYLE-------------------------- */
:root {
    --accent: #00f2fe;
    /* Elegant Gold */
    --bg-white: #c4cdd1;
    --bg-off: #158596;
    --text-dark: #1a1a1a;
    --text-muted: #b0a4a4;
}
/* banner section */



.brand-banner {
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/brand-identity.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.brand-banner h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.brand-banner p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}


/* 📱 Mobile – adjust only if needed */
@media (max-width: 768px) {
    .brand-banner {
        height: 50vh;                 /* Reduce height */
        background-position: top center; /* Adjust for mobile */
    }

    .brand-banner h1 {
        font-size: 32px;
        margin-top: 30px;
    }

    .brand-banner p {
        font-size: 1rem;
    }
}

/* 📱 Small Mobile */
@media (max-width: 450px) {
    .brand-banner {
        height: 45vh;
    }

    .brand-banner h1 {
        font-size: 28px;
    }
}


/* Container Grid */
.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 50px 20px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* Desktop: 4 cards in a row */
    gap: 40px;
}

/* Service Card */
.service-item {
    background: rgb(1, 1, 80);
    border-radius: 20px;
    padding: 20px 25px;
    box-shadow: 0 15px 25px rgba(2, 7, 160, 0.283);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 35px rgba(0, 0, 0, 0.15);
}

/* Header: icon + title in a row */
.service-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

/* Icon Box */
.icon-box {
    width: 50px;
    height: 50px;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

/* Title */
.service-header h3 {
    font-size: 1.4rem;
    margin: 0;
    color: white;
    /* red theme */
}

/* Description */
.service-item p {
    font-size: 0.95rem;
    color: #d7d6d6;
    margin-top: 10px;
    line-height: 1.5;
}

/* TABLET: 2 cards per row */
@media (max-width: 991px) {
    .services-container {
        grid-template-columns: repeat(2, 1fr);
    }

    .icon-box {
        width: 45px;
        height: 45px;
        font-size: 1.4rem;
    }

    .service-header h3 {
        font-size: 1.3rem;
    }

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

/* MOBILE: 1 card per row */
@media (max-width: 575px) {
    .services-container {
        grid-template-columns: 1fr;
    }

    .icon-box {
        width: 40px;
        height: 40px;
        font-size: 1.3rem;
    }

    .service-header h3 {
        font-size: 1.2rem;
    }

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


/* BOTTOM SECTION: The Creative Process */
.brand-philosophy {
    background: linear-gradient(180deg, #f7f7f7, #ffffff);
    padding: 60px 0;
    overflow: hidden;
}

.philosophy-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 50px;
    align-items: center;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
    border: 1px solid #eee;
    box-sizing: border-box;
}

.philosophy-text h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    line-height: 1.2;
    color: #111;
}

.philosophy-text h2 span {
    color: #ff0000;
}

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

.philosophy-list li {
    display: flex;
    gap: 20px;
    padding: 25px;
    margin-bottom: 20px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
    box-sizing: border-box;
}

.phi-circle {
    min-width: 40px;
    height: 40px;
    background: #ff0000;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .philosophy-grid {
        grid-template-columns: 1fr;
        padding: 30px 20px;
        margin: 0 15px;
        /* Creates the gap on left/right so lines are visible */
        width: auto;
        /* Allows margin to work correctly */
    }

    .philosophy-text {
        text-align: center;
    }

    .philosophy-text h2 {
        font-size: 2rem;
    }
}

@media (max-width: 575px) {
    .philosophy-grid {
        padding: 20px 15px;
        margin: 0 0px;
        border-radius: 12px;
        /* Smaller radius looks better on small screens */
    }

    .philosophy-list li {
        padding: 15px;
        gap: 15px;
    }

    .phi-content h4 {
        font-size: 1.1rem;
    }

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

.brand-why-section {
    padding: 60px 20px;
    background: #f9f9f9;
}

.brand-why-section .container {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Image */
.brand-why-image img {
    max-width: 300px;
    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px;
}

/* Content */
.brand-why-content h2 {
    font-size: 2rem;
    color: #be0000;
    /* red theme */
    margin-bottom: 20px;
}

/* Bullet list */
.brand-bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.brand-bullet-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 1rem;
    color: #555;
}

/* Icons */
.brand-bullet-list li i {
    color: #be0000;
    font-size: 1.3rem;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 991px) {
    .brand-why-section .container {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .brand-why-image img {
        max-width: 220px;
        margin-bottom: 25px;
    }
}

.brand-title p {
    color: rgb(106, 106, 106);

}

.brand-card-section {
    background-color: rgba(250, 234, 234, 0.61);
}

/* ---------------------branding printing media SERVICE STYLE-------------------------- */
:root {
    --print-red: #e63946;
    /* High-impact promotional red */
    --ink-black: #106ceb;
    --paper-white: #f1faee;
    --text-main: #457b9d;
}

/* banner */
.print-banner {
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/brand-print.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.print-banner h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.print-banner p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}

/* 📱 Mobile optimization */
@media (max-width: 450px) {
    .print-banner h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .print-banner p {
        max-width: 100%;
        font-size: 1rem;
    }
}


/* Portfolio Grid */
/* Grid */
.print-grid {
    max-width: 1200px;
    margin: -60px auto 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
    padding: 0 20px;
}

/* Card */
.print-card {
    background: #fff;
    padding: 60px 30px;
    border-radius: 6px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
    border-top: 4px solid #111;
    transition: 0.3s ease;
}

.print-card:hover {
    transform: translateY(-8px);
    border-top-color: #ff0000;
}

/* Header (icon + title same row) */
.print-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.print-header i {
    font-size: 1.8rem;
    color: #ff0000;
    flex-shrink: 0;
}

.print-header h3 {
    font-size: 1.25rem;
    color: #111;
    margin: 0;
}

/* Paragraph */
.print-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
}

/* Tablet */
@media (max-width: 991px) {
    .print-card {
        padding: 25px;
    }
}

/* Mobile */
@media (max-width: 576px) {
    .print-header {
        gap: 12px;
    }

    .print-header i {
        font-size: 1.6rem;
    }

    .print-header h3 {
        font-size: 1.1rem;
    }

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

    .specs-list h2 {
        font-size: 1.75rem;

    }
}


/* BOTTOM SECTION: Technical Specs */
.print-left-content {
    height: 200px;
    ackground: #eee;
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #a6a6a6;
    border: 1px dashed #ccc;
}

.print-specs {
    background-color: rgba(254, 237, 237, 0.322);
    padding: 80px 20px;
}

.specs-container {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.specs-image {
    background: white;
    padding: 20px;
    border: 1px solid #ddd;
    box-shadow: 10px 10px 0px var(--print-red);
}

.specs-list h2 {
    font-size: 1.75rem;
    color: #000;
    margin-bottom: 18px;
}

.spec-item {
    margin-bottom: 25px;
}

.spec-item h5 {
    color: #be0000;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.1rem;
    margin-bottom: 5px;
}

.spec-item h5 i {
    color: #be0000;
}

.spec-item p {
    font-size: 0.9rem;
    color: #666;
    padding-left: 28px;
}

/* Call to Action */
.print-footer {
    text-align: center;
    padding: 80px 20px;
    background: var(--ink-black);
    color: white;
}

.btn-print {
    display: inline-block;
    margin-top: 30px;
    padding: 15px 40px;
    background: var(--print-red);
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 50px;
    transition: 0.3s;
}

.btn-print:hover {
    background: #c1121f;
}

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

    .print-grid {
        grid-template-columns: 1fr;
    }

    .print-specs {
        background-color: rgba(254, 237, 237, 0.322);
        padding: 20px 20px;
    }
}

.print-why-section {
    padding: 80px 20px;
    background: #f9f9f9;
}

/* GRID LAYOUT */
.print-why-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

/* IMAGE */
.print-why-image img {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
}

/* CONTENT */
.print-why-content h2 {
    font-size: 2.4rem;
    color: #111;
    margin-bottom: 30px;
}

.print-why-content h2::after {
    content: "";
    width: 60px;
    height: 4px;
    background: #ff0000;
    display: block;
    margin-top: 12px;
}

/* BULLET LIST */
.print-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.print-why-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    font-size: 1.05rem;
    color: #555;
}

.print-why-list li i {
    color: #ff0000;
    font-size: 1.3rem;
    min-width: 24px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .print-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .print-why-section h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    .print-why-section {
        padding: 30px 20px;
    }

    .print-why-list li {
        text-align: left;
    }

    .print-why-content h2 {
        font-size: 1.4rem;
        margin-bottom: 30px;
    }
}

/*  print-process-section style start */
.print-process-section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 20px;
}

.print-process-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    background: #0a0a0a;
    background-image: url("../images/services/service-bg-two.png");
    background-repeat: no-repeat;
    padding: 60px;
    border-radius: 30px;
    border: 1px solid #1a1a1a;
    align-items: center;
}

.print-process-image {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    height: 100%;
}

.print-process-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: 0.5s ease;
}

.print-process-image:hover img {
    transform: scale(1.1);
}

.print-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.25));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
}

.print-image-overlay h3 {
    color: #ff0000;
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.print-image-overlay p {
    color: #d0d0d0;
    font-size: 0.95rem;
}

.print-process-content {
    color: #ffffff;
}

.print-process-title {
    font-size: 2.2rem;
    margin-bottom: 35px;
}

.print-step-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 38px;
}

.print-step-item::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 10px;
    width: 2px;
    height: calc(100% + 30px);
    background: rgba(255, 0, 0, 0.3);
}

.print-step-item:last-child::before {
    display: none;
}

.print-step-number {
    position: absolute;
    left: -10px;
    top: 0;
    background: #b80000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    box-shadow: 0 0 14px rgba(255, 0, 0, 0.6);
}

.print-step-item h4 {
    font-size: 1.3rem;
    color: #ff0000;
    margin-bottom: 8px;
}

.print-step-item p {
    color: #d4d4d4;
    font-size: 0.95rem;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .print-process-section {
        margin: 0 auto !important;
        padding: 0 !important;
        max-width: 100%;
    }

    .print-process-wrapper {
        grid-template-columns: 1fr;
        padding: 30px 15px 50px 15px;
        border-radius: 0;
        border-left: none;
        border-right: none;
        margin: 0;
        background-position: center;
    }

    .print-process-image {
        height: 280px;
        border-radius: 12px;
        margin-bottom: 20px;
    }

    .print-process-title {
        font-size: 1.8rem;
        text-align: center;
        margin-bottom: 30px;
    }

    .print-step-item {
        padding-left: 45px;
    }

    .print-step-number {
        left: -5px;
    }
}

/* Industries We Support Section sttyle start  */
.industry-support-section {
    padding: 80px 20px;
    background: #f8f8f8;
}

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

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

.industry-header h2 {
    font-size: 2.4rem;
    color: #000;
    margin-bottom: 12px;
}

.industry-header p {
    color: #666;
    max-width: 720px;
    margin: 0 auto;
    font-size: 1rem;
}

/* Grid */
.industry-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 25px;
}

/* Card */
.industry-card {
    background: #ffffff;
    padding: 35px 20px;
    text-align: center;
    border-radius: 14px;
    border: 1px solid #eee;
    transition: 0.35s ease;
    cursor: default;
}

.industry-card i {
    font-size: 2rem;
    color: #ff0000;
    margin-bottom: 15px;
}

.industry-card h4 {
    font-size: 1.05rem;
    color: #111;
    font-weight: 600;
}

/* Hover */
.industry-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 18px 35px rgba(193, 3, 3, 0.12);
}

/* Responsive */
@media (max-width: 1200px) {
    .industry-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .industry-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .industry-header h2 {
        font-size: 1.75rem;

    }

    .industry-support-section {
        padding: 40px 20px;
        background: #f8f8f8;
    }
}

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

    .industry-header h2 {
        font-size: 1.75rem;

    }
}



/* --------------------ecommerce service section style---------------------- */
:root {
    /* Palette: White, Black, Blue, Grey, Red */
    --eco-brand: #f60217;
    /* Red */
    --bg-main: #ffffff;
    /* Pure White */
    --bg-alt: #f1f5f9;
    /* Light Grey */
    --accent-blue: #0044cc;
    /* Blue */
    --text-dark: #0f172a;
    /* Black for text */
    --text-muted: #303133;
    /* Grey for text */
    --border-color: #e2e8f0;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.card-header i {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.card-header h3 {
    margin-bottom: 0;
    font-size: 1.3rem;
    margin-top: 0;
}

.eco-hero {
    position: relative;
    /* Essential for containing the absolute video */
    height: 65vh;
    /* Set banner height */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    /* Clips the video to the banner boundaries */
    padding: 20px;
}
/* 
.banner-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -2;
    transform: translate(-50%, -50%);
    object-fit: cover;

}

.banner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
} */

/* banner */
.eco-banner{
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/E-commerce.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.eco-banner h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.eco-banner p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}

/* 📱 Mobile optimization */
@media (max-width: 450px) {
    .eco-banner h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .eco-banner p {
        max-width: 100%;
        font-size: 1rem;
    }
}


.eco-hero h1 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 600;
    max-width: 900px;
    line-height: 1.2;
    text-transform: uppercase;
    z-index: 1;
}

.eco-hero h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    z-index: 1;

}

.eco-hero p {
    max-width: 800px;
    margin: 0 auto;
    color: var(--text-muted);
    font-size: 1.2rem;
}


/* Multimedia & E-com Grid */
.eco-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
}

.eco-card {

    border: 1px solid rgb(15, 15, 16);
    padding: 40px;
    border-radius: 24px;
    transition: 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.eco-card:hover {
    transform: translateY(-10px);
    border-color: var(--accent-blue);
    box-shadow: 0 20px 40px rgba(83, 83, 83, 0.1);
}

.eco-card i {
    font-size: 2.5rem;
    color: var(--eco-brand);
    margin-bottom: 25px;
    display: block;
}

.eco-card h3 {
    font-size: 22px;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.eco-card p {
    color: rgb(66, 65, 65);
    font-size: 18px;
    word-spacing: 2px;
}

/* Ecommerce responsive */


/* ================= TABLET ================= */
@media (max-width: 991px) {
    .eco-hero {
        min-height: 60vh;
        padding: 30px 20px;
    }

    .eco-hero h1 {
        font-size: 32px;
    }

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

/* ================= MOBILE ================= */
@media (max-width: 575px) {
    .eco-hero {
        min-height: 50vh;
        padding: 40px 15px;
    }

    .eco-hero h1 {
        font-size: 24px;
        line-height: 1.3;
    }

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

/* BOTTOM SECTION: Conversion Strategy */
.strategy-section {
    padding: 100px 20px;
    background-color: var(--bg-alt);
}

.strategy-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.strategy-header {
    text-align: center;
}

.strategy-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    color: var(--text-dark);
}

.funnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}


.funnel-step {
    padding: 30px;
    border: 1px solid var(--accent-blue);
    background: var(--bg-main);
    border-radius: 15px;
    box-shadow: rgba(1, 1, 92, 0.25) 0px 30px 60px -12px inset, rgba(244, 159, 159, 0.3) 0px 18px 36px -18px inset;
}

.funnel-step h4 {
    color: var(--eco-brand);
    margin-bottom: 10px;
    text-transform: uppercase;
    font-weight: 700;


}

/* Footer CTA */
.eco-footer {
    padding: 100px 20px;
    text-align: center;
    background: var(--bg-main);
}

.btn-eco {
    padding: 20px 50px;
    background: var(--text-dark);
    /* Black button for contrast */
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 12px;
    transition: 0.3s;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* E-COMMERCE GROWTH SECTION */
.eco-growth-section {
    padding: 10px 20px;
    background: linear-gradient(135deg, #010d46, #060260);
}

.eco-growth-container {
    max-width: 1200px;
    margin: 0 auto;
}

.eco-growth-header {
    text-align: center;
    max-width: 850px;
    margin: 0 auto 70px;
}

.eco-growth-header h2 {
    font-size: 38px;
    color: rgb(255, 255, 255);
    margin-bottom: 20px;
}

.eco-growth-header p {
    font-size: 1.1rem;
    color: rgb(167, 255, 4);
    line-height: 1.8;
}

/* GRID */
.eco-growth-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
    margin-bottom: 80px;
}

.eco-growth-card {
    padding: 35px;
    border-radius: 18px;
    background: var(--bg-main);
    border-left: 6px solid var(--eco-brand);
    box-shadow: rgba(0, 0, 0, 0.08) 0px 10px 30px;
    transition: 0.3s ease;
}

.eco-growth-card:hover {
    transform: translateY(-8px);
    box-shadow: rgba(0, 0, 0, 0.15) 0px 20px 40px;
}

.eco-growth-card h4 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--text-dark);
}

.eco-growth-card p {
    font-size: 1rem;
    color: var(--text-muted);
    line-height: 1.7;
}


.btn-eco:hover {
    background: var(--eco-brand);
    /* Red on hover */
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(230, 57, 70, 0.3);
}

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


/* ---------------------------digital marketing------------------------ */

/* ---------------------------digital marketing------------------------ */
:root {
    --growth-accent: #ff0000;
    /* Red */
    --navy-dark: #000000;
    /* Black */
    --navy-light: #001f3f;
    /* Deep Blue */
    --text-silver: #ffffff;
    /* White */
    --text-dim: #b0b0b0;
    /* Grey */
    --bg-grey: #f4f4f4;
    /* Light Grey */
}

.marketing-hero {
    position: relative;
    width: 100%;
    height: 65vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
    padding: 20px;
}


/* banner */
.mkt-banner {
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/digital-marketing.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.mkt-banner h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.mkt-banner p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}

/* 📱 Mobile optimization */
@media (max-width: 450px) {
    .mkt-banner h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .mkt-banner p {
        max-width: 100%;
        font-size: 1rem;
    }
}




/* Content */
.marketing-hero h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 10px;
    z-index: 1;

}

.marketing-hero h1 {
    color: #ffffff;
    font-size: 42px;
    font-weight: 600;
    max-width: 900px;
    line-height: 1.2;
    text-transform: uppercase;
    z-index: 1;
}

/* Tablet */
@media (max-width: 991px) {
    .marketing-hero {
        min-height: 60vh;
        padding: 30px 20px;
    }

    .marketing-hero h1 {
        font-size: 32px;
    }

    .marketing-hero h4 {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .marketing-hero {
        min-height: 50vh;
        padding: 40px 15px;
    }

    .marketing-hero h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    .marketing-hero h4 {
        font-size: 14px;
    }
}

.marketing-hero p {
    max-width: 750px;
    margin: 0 auto;
    font-size: 1.2rem;
    color: var(--text-silver);
}

.marketing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1200px;
    margin: auto;
    padding: 60px 20px;
}

/* Card */
.mkt-card {
    background: #ffffff;
    padding: 25px;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 190px;
}

.mkt-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
}

/* Header */
.mkt-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
}

.mkt-header i {
    font-size: 28px;
    color: #e60000;
}

.mkt-header h3 {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

/* Text */
.mkt-card p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
    margin: 0;
}

/* Tablet */
@media (max-width: 991px) {
    .marketing-grid {
        grid-template-columns: repeat(2, 1fr);
        padding: 50px 20px;
    }
}

/* Mobile */
@media (max-width: 575px) {
    .marketing-grid {
        grid-template-columns: 1fr;
        padding: 40px 15px;
    }

    .mkt-header h3 {
        font-size: 18px;
    }

    .mkt-card p {
        font-size: 14px;
    }
}



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

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

    .inbound-split-container {
        grid-template-columns: 1fr;
    }

    .inbound-content h2 {
        font-size: 30px;
    }

    .mkt-footer-content {
        flex-direction: column;
        text-align: center;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575px) {
    .marketing-grid {
        grid-template-columns: 1fr;
        padding: 40px 15px;
    }

    .roi-grid {
        grid-template-columns: 1fr;
    }

    .roi-header h2,
    .inbound-content h2 {
        font-size: 24px;
    }

    .mkt-card p,
    .roi-item p,
    .point-item p {
        font-size: 14px;
    }

    .mkt-footer {
        padding: 50px 15px;
    }
}


.mkt-card:hover {
    transform: translateY(-10px);
    background: rgba(0, 43, 86, 0.9);
}

.mkt-card:hover h3,
.mkt-card:hover p {
    color: white;
}

.mkt-card i {
    font-size: 2.5rem;
    color: var(--growth-accent);
}

.mkt-card h3 {
    font-size: 1.6rem;
    margin-bottom: 15px;
    color: black;
}

.mkt-card p {
    color: rgb(97, 95, 95);
    word-spacing: 2px;
}

/* ROI Section */
.roi-section {
    padding: 10px 20px;
    background: var(--text-silver);
    color: var(--navy-dark);
    position: relative;
    z-index: 1;
}

.roi-container {
    max-width: 1100px;
    margin: 0 auto;

}

.roi-header h2 {
    margin-bottom: 20px;
}

.roi-header {
    text-align: center;
    margin-bottom: 60px;
    color: #033b3b;
}

.roi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}

.roi-item {
    display: flex;
    gap: 20px;
    border: 2px solid rgb(249, 250, 252);
    padding: 20px;
    box-shadow: rgba(229, 90, 90, 0.25) 0px 13px 27px -5px, rgba(234, 104, 104, 0.3) 0px 8px 16px -8px;
}

.roi-item:hover {

    background-color: #b0b0b0;
}

.roi-item i {
    font-size: 1.5rem;
    color: var(--navy-light);
    margin-top: 5px;
}

.roi-item h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
    color: var(--growth-accent);
}

/* Roi responisve section  */

/* ================= TABLET ================= */
@media (max-width: 991px) {
    .roi-section {
        padding: 60px 20px;
    }

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

    .roi-header h2 {
        font-size: 30px;
    }
}

/* ================= MOBILE ================= */
@media (max-width: 575px) {
    .roi-section {
        padding: 50px 15px;
    }

    .roi-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .roi-header h2 {
        font-size: 24px;
    }

    .roi-item {
        padding: 20px;
    }

    .roi-item i {
        font-size: 24px;
    }
}


.mkt-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.mkt-header i {
    margin-bottom: 0;
    font-size: 1.5rem;
}

.mkt-header h3 {
    margin-bottom: 0;
    font-size: 1.3rem;
    margin-top: 0;
}

.mkt-footer {
    background: #0f172a;
    padding: 70px 20px;
    margin-top: 60px;
}

.mkt-footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.mkt-footer-text h2 {
    color: #ffffff;
    font-size: 2rem;
    margin-bottom: 12px;
}

.mkt-footer-text p {
    color: #cbd5e1;
    font-size: 1.05rem;
    max-width: 520px;
}

.btn-grow {
    padding: 18px 45px;
    background: #f60217;
    color: #ffffff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 12px;
    transition: 0.3s ease;
    white-space: nowrap;
}

.btn-grow:hover {
    background: #ffffff;
    color: #0f172a;
}

/* SPLIT SECTION */
.inbound-split {
    padding: 110px 20px;
    background: #ffffff;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 2px, rgba(0, 0, 0, 0.07) 0px 2px 4px, rgba(0, 0, 0, 0.07) 0px 4px 8px, rgba(0, 0, 0, 0.07) 0px 8px 16px, rgba(0, 0, 0, 0.07) 0px 16px 32px, rgba(0, 0, 0, 0.07) 0px 32px 64px;

}

.inbound-split-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 60px;
    align-items: center;
}

/* IMAGE */
.inbound-image img {
    width: 100%;
    height: 480px;
    border-radius: 28px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 25px 50px;
}

/* CONTENT */
.inbound-content .section-tag {
    display: inline-block;
    margin-bottom: 15px;
    padding: 6px 16px;
    background: #f60217;
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    border-radius: 30px;

}

.inbound-content h2 {
    font-size: 2.5rem;
    color: #0f172a;
    margin-bottom: 15px;
}

.inbound-content .intro-text {
    font-size: 1.1rem;
    color: #475569;
    margin-bottom: 35px;
    line-height: 1.8;
}

/* ICON POINTS */
.icon-points {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.point-item {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.point-item i {
    font-size: 1.5rem;
    color: #f60217;
    min-width: 30px;
    margin-top: 6px;
}

.point-item h4 {
    font-size: 1.15rem;
    margin-bottom: 6px;
    color: #0f172a;
}

.point-item p {
    font-size: 1rem;
    color: #475569;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .inbound-split-container {
        grid-template-columns: 1fr;
    }

    .inbound-content h2 {
        font-size: 2.1rem;
    }
}


/* Mobile Responsive */
@media (max-width: 768px) {
    .mkt-footer-content {
        flex-direction: column;
        text-align: center;
    }
}


@media (max-width: 768px) {
    .marketing-grid {
        margin-top: 20px;
    }
}


/*--------------------- outreact service style-------------------------- */

:root {
    /* Updated brand color to #9e0551 */
    --brand-accent: #9e0551;
    --deep-charcoal: #121212;
    --soft-white: #f8f9fa;
    --text-gray: #6c757d;
}

/* banner */
.outreach-banner {
    height: 70vh;
    /* min-height: 450px; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    /* background-image: url("../images/banner-images/drop-down-service-banner.jpg"); */
    background-image: url(../images/banner-images/outreach.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;

}

.outreach-banner h1 {
    margin-top: 50px;
    margin-bottom: 20px;
    color: white;
    text-transform: capitalize;
    font-size: 50px;
    font-weight: 500;
}

.outreach-banner p {
    font-size: 1.2rem;
    color: white;
    max-width: 600px;
    margin-bottom: 25px;
}

/* 📱 Mobile optimization */
@media (max-width: 450px) {
    .outreach-banner h1 {
        margin-top: 40px;
        margin-bottom: 10px;
        font-size: 30px;
    }

    .outreach-banner p {
        max-width: 100%;
        font-size: 1rem;
    }
}



/* Grid */
.engagement-grid {
    max-width: 1200px;
    margin: -50px auto 80px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    padding: 0 20px;
}

@media (max-width: 768px) {
    .engagement-grid {
        margin-top: 20px;
        /* Remove the negative overlap on mobile for better spacing */
        grid-template-columns: 1fr;
        /* Force 1 card per row */
        padding: 0 15px;
    }
}

/* Card */
.outreach-card {
    background: #ffffff;
    padding: 50px 30px;
    border-radius: 16px;
    border-left: 4px solid #FF0000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
    transition: 0.3s ease;
}

.outreach-card:hover {
    transform: translateY(-8px);
}

/* Header row (icon + title) */
.outreach-header {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.outreach-header i {
    font-size: 1.8rem;
    color: #FF0000;
    flex-shrink: 0;
}

.outreach-header h3 {
    font-size: 1.3rem;
    margin: 0;
    color: #111;
}

/* Paragraph */
.outreach-card p {
    font-size: 0.95rem;
    color: #555;
    line-height: 1.6;
    margin: 0;
}

/* Mobile fine-tuning */
@media (max-width: 576px) {
    .outreach-card {
        padding: 25px 20px;
    }

    .outreach-header h3 {
        font-size: 1.15rem;
    }

}

/* BOTTOM SECTION: Touchpoint Strategy */
.strategy-container {
    max-width: 1200px;
    margin: auto;
    padding: 0 20px;
}

.strategy-banner {
    /* Updated gradient to use #9e0551 */
    background: linear-gradient(135deg, #000, #6a0320);
    border-radius: 30px;
    padding: 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    color: white;
}

.strategy-text h2 {
    font-size: 2.5rem;
    color: white;
    margin-bottom: 20px;
}

.strategy-list {
    list-style: none;
}

.strategy-item {
    background: rgba(255, 255, 255, 0.15);
    padding: 20px;
    border-radius: 15px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 600;
    color: white;
    backdrop-filter: blur(5px);
}

/* CTA Footer */
.outreach-footer {
    text-align: center;
    padding: 80px 20px;
    background: #f1f1f1;
}

.btn-connect {
    padding: 18px 45px;
    background: var(--brand-accent);
    color: white;
    text-decoration: none;
    font-weight: bold;
    border-radius: 5px;
    transition: 0.3s;
    display: inline-block;
}

.btn-connect:hover {
    background: var(--deep-charcoal);
    letter-spacing: 1px;
}

@media (max-width: 850px) {
    .strategy-banner {
        grid-template-columns: 1fr;
        padding: 10px;
        border-radius: 0px;
        gap: 30px;
    }

    .strategy-container {
        padding: 0px;
    }
}

/* trust section style start */
.outreach-why-section {
    padding: 80px 20px;
    background: #f9f9f9;
}

/* GRID LAYOUT */
.outreach-why-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* content slightly bigger */
    gap: 30px;
}

/* IMAGE */
.outreach-why-image img {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
}

/* CONTENT */
.outreach-why-content h2 {
    font-size: 2.4rem;
    color: #111;
    margin-bottom: 30px;
}

.outreach-why-content h2::after {
    content: "";
    width: 60px;
    height: 4px;
    background: #ff0000;
    display: block;
    margin-top: 12px;
}

/* BULLET LIST */
.outreach-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-left: 50px;
}

.outreach-why-list li {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    font-size: 1.05rem;
    color: #555;
}

.outreach-why-list li i {
    color: #ff0000;
    font-size: 1.3rem;
    min-width: 24px;
}

/* MOBILE RESPONSIVE */
@media (max-width: 991px) {
    .outreach-why-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }

    .outreach-why-content h2::after {
        margin-left: auto;
        margin-right: auto;
    }

    .outreach-why-content h2 {
        font-size: 1.4rem;
    }

    .outreach-why-list li {
        text-align: start;
    }

    .outreach-why-list {
        padding-left: 0px;
    }

    .outreach-why-section {
        padding: 30px 20px;
        background: #f9f9f9;
    }
}

/* outreact process section style end */