/* Color Palette */

:root {

    --bg-dark: #0f081c;

    --card-bg: #1a0b2e;

    --orange: #ff5e14;

    --text-main: #ffffff;

    --text-muted: #b9b2c3;

    --card-border: rgba(255, 94, 20, 0.4);

    --strategy-border: rgba(255, 255, 255, 0.1);

}



body {

    background-color: var(--bg-dark);

    color: var(--text-main);

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

}



/* Background Variations */

.bg-darker {

    background-color: #0F081C;

}



/* Hero Styling */

.hero-section {

    padding: 140px 0;

    text-align: center;

    position: relative;

    /* background: #0f081c; */

    background: url('../images/CTABackgroud.webp') no-repeat center center/cover;



    overflow: hidden;

}



.hero-overlay {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: radial-gradient(circle at 50% 50%, rgba(255, 94, 20, 0.15) 0%, transparent 70%);

}



.hero-title {

    font-size: 3.5rem;

    font-weight: 800;

    color: white;

    position: relative;

    display: inline-block;

}



.hero-title::after {

    content: "";

    display: block;

    width: 150px;

    height: 3px;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    margin: 15px auto 0;

    border-radius: 2px;

}



.hero-breadcrumb {

    color: white;

    font-weight: 500;

}



.hero-breadcrumb a {

    text-decoration: none;

    color: white;

}



.hero-breadcrumb span {

    color: #ff5e14;

}



/* Typography (Specific Sizes for Desktop) */

/* Keeps "Modern Brands" from splitting into two lines */

.main-heading {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    text-align: left;



    display: block;

    /* FIX */

    width: 100%;

    /* FIX */

    white-space: normal;

    /* FIX */

}



.main-heading::after {

    content: "";

    display: block;

    width: 100px;

    height: 3px;

    margin: 10px 0px 0px 0px;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border-radius: 2px;

}



/* Force "Modern Brands" to stay on one line so it doesn't break internally */

.text-orange {

    white-space: normal;

}





/* Responsive adjustment: Allow natural wrapping on mobile devices */

@media (max-width: 991px) {

    .main-heading {

        font-size: 2rem;

        max-width: 100%;

    }

}



/* button css */

.btn-digi {

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border: none;

    color: white;

    padding: 14px 35px;

    border-radius: 8px;

    font-weight: 700;

    transition: 0.3s;

    box-shadow: 0 4px 15px rgba(255, 94, 20, 0.3);

}



.btn-outline-orange {

    color: #ffffff;

    text-decoration: none;

}



.btn-digi:hover {

    transform: scale(1.05);

    /* box-shadow: 0 6px 20px rgba(255, 94, 20, 0.5); */

    background: #ffffff;

    color: #000000;

}



.text-orange {

    color: #ff5e14;

}



.section-title {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    text-align: center;



    display: block;

    /* FIX */

    width: 100%;

    /* FIX */

    white-space: normal;

    /* FIX */

}



/* underline always centered */

.section-title::after {

    content: "";

    display: block;

    width: 100px;

    height: 3px;

    margin: 12px auto 0;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border-radius: 2px;

}



.section-title-right::after {

    content: "";

    display: block;

    width: 100px;

    height: 3px;

    margin: 12px auto 0;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border-radius: 2px;

}



.section-title-sm {

    font-size: 2.2rem;

    font-weight: 700;

    line-height: 1.2;

}



.sub-text {

    font-size: 0.95rem;

    color: var(--text-muted);

    line-height: 1.8;

    margin-bottom: 1rem;

}



/* Service Cards (3 Boxes) */

.service-card {

    background: linear-gradient(180deg, #1a0b2e 0%, #120621 100%);

    border-radius: 20px;

    overflow: hidden;

    position: relative;

    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);

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

    text-align: center;

    height: 85%;

    /* width: 200px; */

}



/* Inner card styles for .service-card (used in ourservices.php) */

.service-card .card-image {

    height: 180px;

    overflow: hidden;

}



.service-card .card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: transform 0.4s ease;

}



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

    transform: scale(1.06);

}



.service-card .card-content {

    padding: 10px 5px;

}



.service-card .card-content h3 {

    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 500;

    margin: 0;

}



.service-card .card-content p {

    color: #ff5e14;

    font-size: 0.70rem;

    font-weight: 600;

    text-transform: uppercase;

    margin-top: 5px;

}



/* Glow Animation Line (bottom of .service-card) */

.glow-line {

    position: absolute;

    bottom: 0;

    left: 50%;

    transform: translateX(-50%);

    width: 50%;

    height: 3px;

    background: linear-gradient(90deg, transparent, #ff5e14, #ffbc3b, transparent);

    box-shadow: 0px -5px 15px rgba(255, 94, 20, 0.8);

    opacity: 0.6;

    transition: 0.4s;

}



.service-card:hover {

    transform: translateY(-10px);

    border-color: rgba(255, 94, 20, 0.5);

}



.service-card:hover .glow-line {

    width: 100%;

    opacity: 1;

}



.row.g-3 {

    display: flex;

    flex-wrap: wrap;

}



.row.g-3>div {

    flex: 1 1 30%;

}



@media (max-width: 768px) {

    .row.g-3>div {

        flex: 1 1 100%;

    }

}



.service-card-1 .card-image {

    height: 180px;

    overflow: hidden;

}



.service-card-1 .card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.service-card-1 .card-content {

    padding: 10px 5px;

}



.service-card-1 .card-content h3 {

    color: #ffffff;

    font-size: 0.78rem;

    font-weight: 500;

    margin: 0;

}



.service-card-1 .card-content p {

    color: #ff5e14;

    font-size: 0.70rem;

    font-weight: 600;

    text-transform: uppercase;

    margin-top: 5px;

}



/* Section 3: Service Cards */

.dm-service-card {

    background: var(--card-bg);

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

    padding: 40px 25px;

    border-radius: 12px;

    height: 100%;

    transition: 0.3s ease-in-out;

}



.dm-service-card:hover {

    transform: translateY(-5px);

}



.dm-service-card h3 {

    font-size: 1.2rem;

    font-weight: 600;

    margin-bottom: 20px;

}



.dm-service-card p {

    font-size: 0.85rem;

    margin-bottom: 30px;

    line-height: 1.7;

}



/* Section 4: Strategic Approach */

.strategy-outline {

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

    padding: 30px 20px;

    border-radius: 8px;

    font-size: 0.9rem;

    height: 100%;

    display: flex;

    align-items: center;

    justify-content: center;

    background: rgba(255, 255, 255, 0.02);

    transition: 0.3s;

}



.strategy-outline:hover {

    border-color: var(--orange);

    background: rgba(255, 94, 20, 0.05);

}



/* Section 5: Capabilities Nav */

/* Update your existing .capability-nav and .cap-link with these */



.capability-nav {

    display: flex;

    flex-direction: column;

    gap: 12px;

}



/* Ensure the button looks like a button and removes default border */

.cap-link {

    background: transparent;

    color: var(--text-main);

    border: 1px solid rgba(255, 255, 255, 0.08);

    text-align: left;

    padding: 16px 22px;

    border-radius: 6px;

    font-size: 0.9rem;

    font-weight: 500;

    transition: 0.3s;

    width: 100%;

    /* Full width on desktop */

}



/* State for the active clicked button */

.cap-link.active {

    background: var(--orange) !important;

    border-color: var(--orange) !important;

    color: #fff !important;

}



/* Mobile Responsive Fixes */

@media (max-width: 991px) {

    .capability-nav {

        flex-direction: row;

        /* Horizontal buttons on mobile */

        overflow-x: auto;

        /* Scroll if too many buttons */

        white-space: nowrap;

        padding-bottom: 10px;

        margin-bottom: 20px;

    }



    .cap-link {

        width: auto;

        /* Buttons only as wide as the text */

        padding: 10px 20px;

        font-size: 0.8rem;

    }



    /* Hide scrollbar but keep functionality */

    .capability-nav::-webkit-scrollbar {

        display: none;

    }

}



.capability-box {

    background: var(--card-bg);

    padding: 35px;

    border-radius: 15px;

    border: 1px solid rgba(255, 255, 255, 0.05);

}



.capability-box h4 {

    color: #fff;

    font-weight: 600;

}



.seo-list {

    list-style: none;

    padding: 0;

}



.seo-list li {

    border: 1px solid rgba(255, 255, 255, 0.1);

    padding: 12px 15px;

    margin-bottom: 10px;

    border-radius: 6px;

}



/* Numbered Lists */

.service-list-item {

    border: 1px solid #49242a;

    border-radius: 10px;

    display: flex;

    align-items: flex-start;

    align-items: center;

    margin-bottom: 18px;

    padding: 7px;

    color: #b9b2c3;

}



.service-number {

    background: #49242a;

    color: white;

    width: 26px;

    height: 26px;

    min-width: 26px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 15px;

    font-size: 13px;

    font-weight: 800;

    margin-top: 3px;

}



.seo-box {

    background: rgba(255, 255, 255, 0.03);

    padding: 14px 18px;

    margin-bottom: 10px;

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-left: 4px solid var(--orange);

}



.seo-box:hover {

    transform: scale(1.03);

}



/* Glow Effect for Images */

.glow-img {

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

    box-shadow: 0 0 30px rgba(255, 94, 20, 0.1);

}



.cta-banner {

    background: linear-gradient(135deg, rgba(30, 15, 50, 1), rgba(15, 8, 28, 1));

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

    border-radius: 15px;

    padding: 3rem;

    position: relative;

    overflow: hidden;

}



.cta-banner-text {

    position: relative;

    z-index: 2;

    max-width: 600px;

}



/* Section 6: Why Choose (Numbers) */

.why-choose-card {

    background: var(--card-bg);

    padding: 25px;

    border-radius: 10px;

    height: 100%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transition: 0.3s;

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

}



.why-choose-card:hover {

    transform: scale(1.03);

}



.num-badge {

    background: var(--orange);

    color: white;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    font-weight: 700;

    font-size: 1.1rem;

    margin-bottom: 20px;

}



.why-choose-card p {

    font-weight: 500;

    font-size: 0.95rem;

    line-height: 1.6;

    max-width: 200px;

}



/* Section 7: Final CTA Banner */

.cta-banner-wrapper {

    background: url('../images/CTABackgroud.webp') no-repeat center center/cover;

    height: 520px;

    /* Specific height for desktop */

    border-radius: 15px;

    overflow: hidden;

    position: relative;

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

}



.cta-title {

    font-size: 2.8rem;

    font-weight: 700;

    line-height: 1.3;

}



.cta-title span {

    display: block;

    margin-top: 5px;

}



.cta-banner-wrapper .sub-text {

    color: white;

}





/* ===== Meta Services Section ===== */

.meta-services-section {

    background: #0b0615;

}



/* Title */

.meta-title {

    font-size: 2.2rem;

    font-weight: 700;

    color: #fff;

}



.meta-title span {

    color: var(--orange);

}



/* Centered CTA Banner (Digital Marketing Page) */

.home-cta-section {

    background:

        linear-gradient(rgba(10, 5, 21, 0.75), rgba(10, 5, 21, 0.75)),

        /* repeating-linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.2) 0px,

            rgba(0, 0, 0, 0.2) 45px,

            transparent 45px,

            transparent 90px

        ), */



        url('../images/CTABackgroud.webp') no-repeat center center/cover !important;

    padding: 120px 0 !important;

    /* height: 600px; */

    position: relative;

    border-radius: 0;

    /* margin: 25px 0; */

}



/* Centered CTA Banner (Digital Marketing Page) */

.home-cta-section-google-ads {

    background:

        linear-gradient(rgba(10, 5, 21, 0.75), rgba(10, 5, 21, 0.75)),

        /* repeating-linear-gradient(

            90deg,

            rgba(0, 0, 0, 0.2) 0px,

            rgba(0, 0, 0, 0.2) 45px,

            transparent 45px,

            transparent 90px

        ), */



        url('../images/CTABackgroud.webp') no-repeat center center/cover !important;

    padding: 120px 0 !important;

    height: 400px;

    position: relative;

    border-radius: 0;

}



.section-title-seo-solutions {

    font-size: 2.2rem;

    font-weight: 700;

    color: #fff;

}



.section-title-seo-solutions::after {

    content: "";

    display: block;

    width: 140px;

    height: 3px;

    margin: 10px 0px 0px 0px;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border-radius: 2px;

}



.cta-glass-box-centered {

    /* background: rgba(15, 8, 28, 0.6); */

    /* backdrop-filter: blur(15px);

    -webkit-backdrop-filter: blur(15px); */

    /* border: 1px solid rgba(255, 255, 255, 0.12); */

    border-radius: 20px;

    padding: 0px;

    position: relative;

    z-index: 2;

}



.cta-underline {

    width: 100px;

    height: 3px;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border-radius: 2px;

}



.meta-underline {

    width: 120px;

    height: 3px;

    margin: 12px auto 0;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

}



/* Card */

.meta-card {

    background: transparent;

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

    border-radius: 12px;

    padding: 30px 25px;

    height: 100%;

    transition: 0.3s ease;

    position: relative;

}



.meta-card:hover {

    transform: translateY(-6px);

    box-shadow: 0 0 20px rgba(255, 94, 20, 0.2);

}



/* Icon */

.meta-icon {

    width: 40px;

    height: 40px;

    background: var(--orange);

    color: #000;

    font-weight: bold;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 20px;

}



/* Heading */

.meta-card h4 {

    font-size: 1.2rem;

    font-weight: 600;

    color: #ff5e14;

    margin-bottom: 15px;

}



/* Text */

.meta-card p {

    font-size: 0.9rem;

    color: var(--text-muted);

    line-height: 1.7;

}



/* Responsive */

@media (max-width: 991px) {

    .meta-title {

        font-size: 1.8rem;

    }

}



@media (max-width: 576px) {

    .meta-card {

        padding: 25px 20px;

    }

}



@media (max-width: 991px) {

    .home-cta-section {

        padding: 80px 0 !important;

    }



    .cta-glass-box-centered {

        padding: 2.5rem 1.5rem;

    }



    .custom-cta-text {

        font-size: 1.5rem !important;

    }

}



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

   RESPONSIVE MEDIA QUERIES

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



/* Tablet and below (991px and under) */

@media (max-width: 991px) {

    .main-heading {

        font-size: 2.2rem;

    }



    .section-title-center {

        font-size: 2rem;

    }



    .section-title-sm {

        font-size: 1.8rem;

    }



    .cta-banner-wrapper {

        height: auto;

        width: 100%;

        padding: 40px 0;

    }



    .dm-hero {

        padding: 130px 0 80px;

    }



    .hero-title {

        font-size: 2rem;

    }



    /* Service cards responsive (tablet) */

    .service-card {

        width: 100%;

        height: auto;

    }



    .service-card .card-content h3 {

        font-size: 1rem;

    }



    .service-card .card-content p {

        font-size: 0.8rem;

    }



    /* Images spacing */

    .glow-img {

        margin-top: 30px;

    }



    /* Our services text alignment on tablet */

    .sub-text {

        text-align: center;

    }

}



/* Mobile landscape and down (767px and under) */

@media (max-width: 767px) {

    .section-padding {

        padding: 60px 0;

    }



    .main-heading,

    .section-title-center {

        text-align: center;

        margin: 0 auto 25px auto;

    }



    .main-heading::after {

        margin: 12px auto 0;

    }



    .capability-nav {

        flex-direction: row;

        flex-wrap: wrap;

        justify-content: center;

    }



    .cap-link {

        text-align: center;

        font-size: 0.85rem;

        padding: 12px 18px;

    }



    .capability-box {

        padding: 25px;

    }



    .capability-box .row {

        flex-direction: column;

        text-align: center;

    }



    /* Mobile: service list items */

    .service-list-item {

        flex-direction: row;

        font-size: 0.9rem;

        padding: 10px;

    }



    .service-number {

        width: 24px;

        height: 24px;

        font-size: 12px;

    }



    /* Mobile: btn-digi full width */

    .btn-digi {

        width: 100%;

        padding: 12px;

    }



    /* Mobile: card row spacing */

    .row.g-3>div {

        margin-bottom: 15px;

    }

}



/* Very small mobile (575px and under) */

@media (max-width: 575px) {

    .main-heading {

        font-size: 1.8rem;

    }



    .section-title-sm {

        font-size: 1.6rem;

        text-align: center;

    }



    /* Reduce card image height on small phones */

    .service-card .card-image {

        height: 140px;

    }



    /* Reduce CTA banner padding */

    .cta-banner div {

        padding: 1.5rem !important;

    }

}



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

   GOOGLE ADS SPECIFIC STYLES

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



.google-ads-hero {

    position: relative;

}



.hero-mascot {

    max-height: 400px;

    animation: float 6s ease-in-out infinite;

    filter: drop-shadow(0 10px 20px rgba(255, 94, 20, 0.3));

}



@keyframes float {

    0% {

        transform: translateY(0px);

    }



    50% {

        transform: translateY(-15px);

    }



    100% {

        transform: translateY(0px);

    }

}



.border-orange {

    border: 1px solid var(--orange) !important;

}



.check-list {

    list-style: none;

    padding-left: 0;

}



.check-list li {

    display: flex;

    align-items: flex-start;

    /* Safest alignment if text wraps */

    gap: 12px;

    margin-bottom: 16px;

    color: var(--text-muted);

    font-size: 0.95rem;

    line-height: 1.6;

    text-align: left !important;

}



/* Using an orange arrow checkmark instead of a filled circle, mimicking Figma */

.check-list li::before {

    content: "➤";

    color: var(--orange);

    font-size: 1.5rem;

    line-height: 1;

    /* Fixes height bounding box */

    margin-top: -4px;

    /* Slightly lowers icon to align perfectly with text cap height */

    padding-top: 5px;

}



.service-box-list {

    display: flex;

    flex-direction: column;



}



.service-box-item {

    background: rgba(255, 255, 255, 0.03);

    padding: 14px 18px;

    margin-bottom: 10px;

    border-radius: 6px;

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-left: 4px solid var(--orange);



}



.service-box-item:hover {

    background: rgba(255, 94, 20, 0.1) !important;

    border-color: var(--orange) !important;

    transform: scale(1.03);

}



.process-timeline {

    position: relative;

}



/* Vertical line behind steps */

.process-timeline::before {

    content: "";

    position: absolute;

    left: 21px;

    /* Centers under the 45px icon */

    top: 20px;

    bottom: 20px;

    width: 2px;

    background: rgba(255, 255, 255, 0.1);

    z-index: 0;

}



.process-step {

    position: relative;

    z-index: 1;

}



.step-icon-wrapper {

    width: 45px;

    position: relative;

    z-index: 2;

}



.step-icon {

    width: 45px;

    height: 45px;

    border-radius: 50%;

    background: var(--card-bg);

    border: 2px dashed var(--orange);

    color: var(--orange);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.2rem;

    font-weight: 700;

    box-shadow: 0 0 15px rgba(255, 94, 20, 0.2);

}



.step-content {

    transition: 0.3s ease;

    text-align: left !important;

    border-bottom: 3px solid var(--orange);

    background: rgba(255, 255, 255, 0.02);

    /* border: 1px solid rgba(255, 94, 20, 0.2); */

}



.step-content:hover {

    background: rgba(255, 94, 20, 0.05) !important;

    border-color: rgba(255, 94, 20, 0.3) !important;

    transform: scale(1.03);

}



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

   RESPONSIVE GOOGLE ADS

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

@media (max-width: 767px) {

    .step-content {

        padding: 15px !important;

        margin-left: 18px !important;

    }



    .step-icon {

        width: 38px;

        height: 38px;

        font-size: 1rem;

    }



    .process-timeline::before {

        left: 17px;

        /* Centered under 38px icon */

    }



    .cta-title {

        font-size: 1.8rem !important;

    }

}



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

   GRAPHIC DESIGN SPECIFIC STYLES

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



/* Graphic Design Services Cards */

.gd-service-card {

    background: transparent;

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

    border-radius: 12px;

    padding: 40px;

    text-align: center;

    transition: 0.3s ease;

}



.gd-service-card:hover {

    border-color: var(--orange);

    box-shadow: 0 0 20px rgba(255, 94, 20, 0.2);

    transform: translateY(-5px);

}



.gd-card-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--orange);

    margin-bottom: 20px;

}



.gd-card-text {

    font-size: 0.95rem;

    color: var(--text-muted);

    line-height: 1.8;

    margin-bottom: 30px;

    align-items: center;

}



/* Graphic Design Connect Boxes */

.gd-connect-box {

    position: relative;

    border-radius: 12px;

    overflow: hidden;

    height: 100%;

    min-height: 250px;

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

    background: var(--card-bg);

}



.gd-connect-box:hover {

    border-color: var(--orange);

    box-shadow: 0 0 15px rgba(255, 94, 20, 0.3);

}



.gd-connect-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: 0.5s ease;

    opacity: 50px;

}



.gd-connect-box:hover img {

    transform: scale(1.1);

    opacity: 1;

}



.gd-connect-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.2));

    display: flex;

    align-items: flex-end;

    justify-content: center;

    padding: 20px;

    text-align: center;

    pointer-events: none;

}



.gd-connect-title {

    color: #fff;

    font-weight: 600;

    font-size: 1.05rem;

    line-height: 1.4;

}



/* Transparent Boxes for Affordable GD Section */

.gd-transparent-box {

    background: transparent;

    padding: 16px 20px;

    border-radius: 8px;

    border: 1px solid rgba(255, 255, 255, 0.1);

    color: var(--text-muted);

    font-size: 0.95rem;

    margin-bottom: 12px;

    transition: 0.3s;

    font-weight: 500;

}



.gd-transparent-box:hover {

    border-color: var(--orange);

    color: #fff;

    background: rgba(255, 94, 20, 0.05);

}



/* Check list with round orange tick/arrow */

.gd-check-list {

    list-style: none;

    padding-left: 0;

}



.gd-check-list li {

    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;

    color: var(--text-muted);

    font-size: 0.95rem;

}



.gd-check-list li::before {

    content: "➤";

    display: flex;

    align-items: center;

    justify-content: center;

    width: 24px;

    height: 24px;

    background: var(--orange);

    color: white;

    font-size: 0.8rem;

    border-radius: 50%;

    flex-shrink: 0;

}



/* Numbered Service List Items */

.gd-service-list-item {

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 8px;

    display: flex;

    align-items: center;

    margin-bottom: 15px;

    padding: 12px 18px;

    color: var(--text-muted);

    font-size: 0.95rem;

    transition: 0.3s;

    background: rgba(255, 255, 255, 0.02);

}



.gd-service-list-item:hover {

    border-color: var(--orange);

    background: rgba(255, 94, 20, 0.05);

}



.gd-service-number {

    background: #49242a;

    color: white;

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

    width: 28px;

    height: 28px;

    min-width: 28px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 15px;

    font-size: 13px;

    font-weight: 700;

}



.blur-bg-about {

    background: rgba(45, 20, 35, 0.45);

    backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 16px;

    padding: 2.5rem;

    max-width: 580px;

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

}



/* Home CTA Section */

.home-cta-section {

    background: url('../images/CTABackgroud.webp') no-repeat center right/cover;

    padding: 100px 0;

    position: relative;

    overflow: hidden;

    border-radius: 0;

    margin: 25px 0;

}



.text-align-right {

    text-align: left;

}



.after-heading::after {

    content: "";

    display: block;

    width: 200px;

    height: 3px;

    margin: 10px 0px 0px 0px;

    background: linear-gradient(90deg, #ff5e14, #ff8c00);

    border-radius: 2px;

}



.section-title-services-OurApproach {

    font-size: 2rem;

    font-weight: 700;

    margin-bottom: 1.5rem;

    text-align: left;

    display: block;

    width: 100%;

    white-space: normal;

}



.cta-glass-box {

    background: rgba(45, 20, 35, 0.45);

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    border: 1px solid rgba(255, 255, 255, 0.12);

    border-radius: 24px;

    padding: 3.5rem;

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);

    position: relative;

    z-index: 2;

}



.custom-cta-text {

    font-size: 1.85rem !important;

    font-weight: 600;

    line-height: 1.4;

    margin-bottom: 1.5rem;

}



/* .background-gradient {

    background: linear-gradient(90deg, transparent, #ff5e14, transparent);

} */



.heading-padding {

    padding-top: 20px;

}



/* final media query */



/* mobile css */



@media (min-width : 0px) and (max-width : 767px) {





    .after-heading::after {

        margin: 12px auto 0;

        width: 150px;

    }







    .section-title-seo-solutions {

        text-align: center;

    }



    .home-cta-section-google-ads {

        height: 650px;

    }



    .section-title-seo-solutions::after {

        margin: 12px auto 0;

    }



    .industry-card .industry-title {

        text-align: center;

        font-size: 16px;

    }



    .hero-subtitle-home {

        margin: 0;

    }



    .hero-title-home::after {

        margin: 0 auto 0 0;

    }



    .gd-check-list li {

        display: flex;

        align-items: start;

        gap: 12px;

        margin-bottom: 18px;

        color: var(--text-muted);

        font-size: 0.95rem;

        text-align: left !important;

    }



    .section-title {

        font-size: clamp(1.6rem, 5vw, 2.5rem);

        font-weight: 700;

        margin-bottom: 1.5rem;

        text-align: center;

        line-height: 1.3;



        word-break: normal;

        /* FIX */

        overflow-wrap: anywhere;

        /* better than break-word */

    }



    .text-orange {

        white-space: normal;

        font-size: clamp(1.6rem, 5vw, 2.5rem);

        font-weight: 700;

        margin-bottom: 1.5rem;

        text-align: center;

        line-height: 1.3;



        word-break: normal;

        /* FIX */

        overflow-wrap: anywhere;

        /* better than break-word */

    }



    .section-padding {

        padding: 30px 0;

    }



    .main-heading::after {

        margin: 12px auto 0;

    }



    .blur-bg-about {

        padding: 1.5rem;

        max-width: 200px;

        overflow: visible;

        /* avoid clipping */



    }



    .cta-glass-box {

        padding: 20px;

    }



    .hero-section {

        padding: 120px 0 30px 0;

        /* background: #0f081c; */

        background: url(../images/CTABackgroud.webp) no-repeat top center / cover;

    }



}



/* tab css */



@media (min-width : 768px) and (max-width : 991px) {

    .hero-title-home::after {

        margin: 0 auto 0 0;

    }



    .text-align-right {

        text-align: center;

    }



    .section-title-seo-solutions {

        text-align: center;

    }



    .section-title-seo-solutions::after {

        margin: 12px auto 0;

    }



    .after-heading::after {

        content: "";

        display: block;

        width: 100px;

        height: 3px;

        margin: 12px auto 0;

        background: linear-gradient(90deg, #ff5e14, #ff8c00);

        border-radius: 2px;

    }



    .heading-padding {

        padding-top: 20px;

    }



    .section-title-services-OurApproach {

        text-align: center;

    }



    .industry-card .industry-title {

        text-align: center;

        font-size: 16px;

    }



    .list-heading {

        padding-top: 15px;

        text-align: left;

        /* FIX */

        width: 100%;

    }



    .text-orange {

        white-space: normal;

        font-size: clamp(1.6rem, 5vw, 2rem);

        font-weight: 700;

        margin-bottom: 1.5rem;

        text-align: center;

        line-height: 1.3;



        word-break: normal;

        /* FIX */

        overflow-wrap: anywhere;

        /* better than break-word */

    }



    .main-heading {

        font-size: 1.8rem;

        text-align: center;

    }



    .main-heading::after {

        margin: 12px auto 0;

    }



    .section-padding {

        padding: 30px 0;

    }



    .text-align-center {

        text-align: center;

    }

}



/* mini desktop css */



@media (min-width : 992px) and (max-width : 1199px) {

    .industry-card .industry-title {

        text-align: center;

        font-size: 18px;

    }



    .main-heading {

        font-size: 1.8rem;

        font-weight: 700;

        margin-bottom: 1.5rem;

        text-align: left;

        display: block;

        width: 100%;

        white-space: normal;

    }



    .section-padding {

        padding: 30px 0;

    }



    .section-title::after {

        width: 160px;

        /* margin: 5px 0px; */

    }



    .section-title-right::after {

        width: 160px;

        margin: 5px 0px;

    }



    .text-align-center {

        text-align: center;

    }

}



/* laptop css */



@media (min-width : 1200px) and (max-width : 1399px) {

    .main-heading::after {

        width: 180px;

    }



    .text-align-center {

        text-align: center;

    }



    .section-title::after {

        width: 160px;

        /* margin: 0px; */

    }



    .section-padding {

        padding: 50px 0;

    }



    .section-title-right::after {

        width: 160px;

        /* margin: 0px; */

    }



}



/* large screen css */



@media (min-width : 1400px) and (max-width : 1919px) {

    .text-align-center {

        text-align: center;

    }



    .section-padding {

        padding: 50px 0;

    }



    .section-title::after {

        width: 160px;

    }



    .section-title-right::after {

        width: 160px;

    }

}



/* hd screen css */



@media (min-width : 1920px) and (max-width : 2559px) {

    .text-align-center {

        text-align: center;

    }



    .section-title::after {

        width: 160px;

    }



    .section-padding {

        padding: 30px 0;

    }



    .section-title-right::after {

        width: 160px;

    }

}