/* -------------------- GLOBAL -------------------- */
body {
    font-family: 'Time New Roman', sans-serif;
    color:#1f2c46;
    overflow-x:hidden;
}

a {
    text-decoration: blink;
}

h1,h2,h3,h4,h5 {
    font-family: Roboto !important;
    font-weight:700;
}

/* BUTTONS */
.btn-main {
    background:#023371;
    color:#fff;
    padding:12px 32px;
    border-radius:40px;
    font-size:16px;
    font-weight:600;
    border:none;
}

.btn-outline-main {
    border:2px solid #6f12cc;
    color:#6f12cc;
    padding:12px 32px;
    border-radius:40px;
    font-size:16px;
    font-weight:600;
}

/* SPACING */
.section {
    padding:40px 0;
}

.section-light {
    background:#f8fbff;
}

.section-grey {
    background:#f5f7fb;
}

/* NAVBAR */
.navbar .nav-link {
    color:#1b2c3d;
    font-size:15px;
    font-weight:500;
}

.navbar .btn {
    border-radius:40px;
}

/* HERO */
.hero-title {
    font-size:56px;
    line-height:1.2;
    color:#023371;
}

.hero-bar {
    width:150px;
    height:4px;
    background:#12c6d9;
    margin:25px 0;
}

/* PARTNERS */
.partner-logo {
    height:60px;
    opacity:0.75;
    transition:0.3s;
}
.partner-logo:hover {
    opacity:1;
}

/* IMAGE STACK */
.rounded-soft {
    border-radius:28px;
}

/* FOOTER */
footer h5 {
    font-size:18px;
    font-weight:700;
    margin-bottom:20px;
}

footer ul li {
    margin-bottom:10px;
    color:#2b3c4b;
}

footer .social i {
    font-size:20px;
    color:#7d8895;
    cursor:pointer;
}
footer .social i:hover {
    color:#000;
}


/* -----------------------------------------
   PUBLISHER SECTION
------------------------------------------ */

.publisher-section {
    background: #ffffff;
    padding: 80px 0;
}

.publisher-title {
    font-size: 52px;
    font-weight: 700;
    color: #1e252e;
    font-family: 'Roboto', sans-serif;
}

.publisher-desc {
    font-size: 18px;
    max-width: 650px;
    font-weight: 400;
    color: #444;
    margin-top: 20px;
}

.publisher-terms {
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: #aab8c3;
    text-decoration: underline;
}

.publisher-badge {
    width: 180px;
}

.publisher-main-img {
    max-width: 100%;
}

.second-title {
    font-size: 37px;
    font-weight: 500;
    color: #1e252e;
}

.second-desc {
    font-size: 18px;
    max-width: 610px;
    margin-top: 15px;
}

.publisher-list {
    font-size: 18px;
    padding-left: 15px;
    margin-top: 20px;
}

.publisher-list li {
    margin-bottom: 10px;
    font-weight: 400;
}

.publisher-side-img {
    max-width: 100%;
}

/* -----------------------------------------
   FEATURES SECTION (desktop + mobile)
------------------------------------------ */

.publisher-features {
    background: #fff;
}

.publisher-features-title {
    font-size: 37px;
    color: #1e252e;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

.feature-box {
    padding: 20px;
}

.feature-icon {
    width: 85px;
    margin-bottom: 15px;
}

.feature-title {
    font-size: 18px;
    color: #023371;
    font-weight: 400;
}

.feature-desc {
    font-size: 18px;
    font-weight: 400;
}

/* MOBILE ACCORDION */
.accordion-icon {
    width: 40px;
    margin-right: 10px;
}

.accordion-button {
    font-size: 17px;
    display: flex;
    align-items: center;
}

.accordion-button img {
    flex-shrink: 0;
}

.accordion-button:not(.collapsed) {
    background: #e6f9f1;
    color: #023371;
}

/* -----------------------------------------
   PUBLISHER TESTIMONIAL SECTION
------------------------------------------ */

.publisher-testimonial-section {
    background: #f8f9fb;
}

.publisher-testimonial-title {
    font-size: 37px;
    color: #1e252e;
    font-weight: 500;
    font-family: 'Roboto', sans-serif;
}

.publisher-side-img {
    max-width: 100%;
}

/* Testimonial Box */
.testimonial-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.quote-icon {
    width: 65px;
}

.quote-left {
    position: absolute;
    top: -10px;
    left: -10px;
}

.quote-right {
    position: absolute;
    bottom: -10px;
    right: -10px;
}

.testimonial-text {
    font-size: 18px;
    color: #333;
    max-width: 760px;
    margin-top: 20px;
    font-weight: 400;
}

.testimonial-author {
    color: #616fef;
    font-size: 18px;
    margin-top: 25px;
    font-weight: 500;
}
/* -----------------------------------------
   MODERN DISCOVER SECTION
------------------------------------------ */

.discover-modern-section {
    background: #f4f6f9;
    padding-top: 80px;
    padding-bottom: 120px;
    position: relative;
}

/* Left green background block */
.green-bg-block {
    position: absolute;
    top: 60px;
    left: 0;
    width: 55%;
    height: 75%;
    background: linear-gradient(140deg, #00c784, #009f73);
    border-radius: 12px;
    z-index: 1;
}

/* Main overlapping card */
.discover-card {
    position: relative;
    background: #fff;
    border-radius: 20px;
    z-index: 2;
    overflow: hidden;
    box-shadow: 0px 20px 45px rgba(0,0,0,0.12);
}

/* Left text area */
.discover-text-box {
    flex: 1;
}

.discover-heading {
    font-size: 32px;
    font-weight: 600;
    color: #1e252e;
}

.discover-text {
    font-size: 17px;
    line-height: 1.6;
    color: #445064;
    max-width: 420px;
}

/* Right image block */
.discover-image-box {
    flex: 1;
    position: relative;
}

.discover-image {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
    box-shadow: 0px 25px 60px rgba(0,0,0,0.15);
}

/* Floating decorative circles */
.discover-circles {
    position: absolute;
    top: 20px;
    right: -30px;
    width: 120px;
    opacity: 0.9;
}

/* RESPONSIVE FIXES */
@media (max-width: 768px) {
    .green-bg-block {
        width: 80%;
        height: 50%;
        top: 90px;
    }

    .discover-card {
        flex-direction: column;
        text-align: center;
    }

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

    .discover-circles {
        right: -10px;
        width: 90px;
    }
}


/* ------------------------------------------
   ACCESS AUDIENCE SECTION
------------------------------------------- */

.access-audience-section {
    background: #ffffff;
}

.access-title {
    font-size: 48px;
    font-weight: 700;
    color: #1e252f;
    line-height: 1.2;
}

.access-text {
    font-size: 18px;
    line-height: 1.6;
    color: #444;
    max-width: 500px;
    margin-top: 20px;
}

/* FORM CARD */
.access-form-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e7eaef;
}

.form-title {
    font-size: 22px;
    font-weight: 600;
    color: #1e252f;
}

/* Inputs */
.access-form .form-control {
    height: 50px;
    border-radius: 8px;
    border: 1px solid #d2d8df;
    padding-left: 15px;
    font-size: 16px;
}

/* Submit Button */
.access-submit-btn {
    background: #023371;
    border: none;
    color: white;
    font-size: 17px;
    padding: 14px 0;
    border-radius: 8px;
    font-weight: 600;
    transition: 0.3s ease;
}

.access-submit-btn:hover {
    background: #12b879;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .access-title {
        font-size: 36px;
    }
}


/* ------------------------------------------
   ADVERTISERS SECTION
------------------------------------------- */

.advertisers-platform-section {
    background: #ffffff;
}

.adv-title {
    font-size: 37px;
    font-weight: 600;
    color: #1e252f;
    line-height: 1.3;
}

.adv-text {
    font-size: 18px;
    color: #444;
    max-width: 575px;
    margin-bottom: 20px;
    line-height: 1.6;
}

/* List Styling */
.adv-list {
    font-size: 18px;
    padding-left: 20px;
    color: #1e252f;
}

.adv-list li {
    margin-bottom: 10px;
    font-weight: 400;
}

/* Image wrapper */
.advertisers-img-wrapper img {
    border-radius: 12px;
    width: 100%;
    height: auto;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .adv-title {
        font-size: 30px;
    }
}

/* ------------------------------
   LIFECYCLE SECTION
------------------------------- */

.lifecycle-title {
    font-size: 37px;
    font-weight: 600;
    color: #1e252f;
    line-height: 1.3;
}

.lifecycle-card {
    background: #fff;
    border-radius: 12px;
    padding: 25px;
    border: 1px solid #e5e8ef;
    text-align: left;
    transition: all 0.3s ease;
    height: 100%;
}

.lifecycle-card img {
    width: 70px;
    margin-bottom: 15px;
}

.lifecycle-card h5 {
    font-size: 22px;
    color: #023371;
    font-weight: 500;
    margin-bottom: 12px;
}

.lifecycle-card p {
    font-size: 18px;
    color: #444;
    max-width: 320px;
}

/* Hover effect */
.lifecycle-card:hover {
    box-shadow: 0px 10px 30px rgba(0,0,0,0.08);
    transform: translateY(-5px);
}

/* Accordion Styling (Mobile) */
#lifecycleAccordion .card {
    border: none;
    border-bottom: 1px solid #e0e0e0;
}

#lifecycleAccordion .card-header button {
    width: 100%;
    text-align: left;
    font-size: 19px;
    padding: 12px 0;
    color: #1e252f;
}

#lifecycleAccordion img {
    width: 40px;
    margin-right: 10px;
}

/* SECTION SPACING */
.partner-section {
    background: #ffffff;
}

/* SECTION TITLE */
.partner-title {
    font-size: 37px;
    color: #1e252f;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    line-height: 1.3;
}

/* LEFT IMAGE */
.partner-image {
    max-width: 100%;
    height: auto;
}

/* QUOTE BOX */
.quote-box {
    background: #f8f9fa;
    border-radius: 8px;
    position: relative;
}

/* QUOTE TEXT */
.quote-text {
    font-size: 18px;
    color: #1e252f;
    line-height: 1.6;
    max-width: 760px;
}

/* AUTHOR */
.quote-author {
    color: #616fef;
    font-size: 18px;
    margin-top: 20px;
    font-weight: 500;
}

/* QUOTE ICONS */
.quote-icon-left,
.quote-icon-right {
    width: 65px;
    height: auto;
}

.quote-icon-left {
    display: block;
}

.quote-icon-right {
    float: right;
    margin-top: 10px;
}

/* RESPONSIVE FIXES */
@media (max-width: 767px) {
    .partner-title {
        font-size: 28px;
    }

    .quote-text {
        font-size: 16px;
    }

    .quote-box {
        text-align: center;
    }

    .quote-icon-right {
        float: none;
        margin: 20px auto 0;
        display: block;
    }
}

/* SECTION BASE */
.why-madrivo-section {
    background: #ffffff;
}

/* TITLE */
.why-title {
    font-size: 37px;
    color: #1e252f;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    margin-bottom: 25px;
}

/* DESCRIPTION PARAGRAPHS */
.why-desc {
    font-size: 18px;
    color: #1e252f;
    line-height: 1.6;
}

/* BENEFIT LIST */
.why-list {
    font-size: 18px;
    font-weight: 400;
    padding-left: 18px;
    margin-bottom: 30px;
}

.why-list li {
    margin-bottom: 10px;
}

/* APPLY BUTTON */
.apply-btn {
    background: #023371;
    border: none;
    padding: 12px 25px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
}

.apply-btn:hover {
    background: #616fef;
    color: #fff;
}

/* RIGHT SIDE FLOATING IMAGES */
.floating-circle {
    position: absolute;
    top: -40px;
    left: 10%;
    width: 130px;
    height: auto;
}

.floating-main {
    position: relative;
    z-index: 2;
    width: 340px;
    max-width: 90%;
    margin-top: 60px;
}

/* RESPONSIVE FIXES */
@media (max-width: 767px) {
    .floating-circle {
        display: none;
    }

    .why-title {
        font-size: 28px;
    }

    .why-desc,
    .why-list {
        font-size: 16px;
    }

    .floating-main {
        margin-top: 10px;
    }
}


/* SECTION BASE */
.awards-section {
    background: #ffffff;
}

/* TITLES */
.awards-title {
    font-size: 37px;
    color: #1e252f;
    font-family: Roboto, sans-serif;
    font-weight: 500;
    margin-bottom: 20px;
}

.awards-subtitle {
    font-size: 20px;
    color: #039ACB;
    font-family: Roboto, sans-serif;
    font-weight: 400;
    margin-bottom: 40px;
}

/* LOGOS */
.award-logo {
    max-height: 90px;
    object-fit: contain;
    margin-bottom: 10px;
}

.award-text {
    font-size: 17px;
    color: #6c7c90;
    line-height: 1.4;
}

/* QUOTE SECTION */
.forbes-quote {
    max-width: 1100px;
    margin: 0 auto;
}

.quote-text {
    font-size: 18px;
    color: #6c7c90;
    line-height: 1.6;
}

.quote-author {
    font-size: 18px;
    color: #1e252f;
    font-weight: 500;
    margin-top: 20px;
}

/* DIVIDER IMAGE */
.bottom-divider {
    max-width: 140px;
    opacity: 0.9;
}

/* RESPONSIVE ADJUSTMENTS */
@media (max-width: 767px) {

    .awards-title {
        font-size: 28px;
    }

    .awards-subtitle {
        font-size: 16px;
        line-height: 1.5;
    }

    .award-text {
        font-size: 15px;
    }

    .quote-text,
    .quote-author {
        font-size: 16px;
    }
}

.navbar .nav-link {
    font-size: 16px;
    font-weight: 500;
    color: #1e252f;
}

.navbar .nav-link:hover,
.navbar .dropdown-item:hover {
    color: #007EBC;
}

.dropdown-menu {
    border-radius: 8px;
    padding: 10px 0;
}

.dropdown-item {
    padding: 10px 20px;
    font-size: 15px;
}

/* ===============================
   PERFORMANCE MARKETING SECTION
   =============================== */

#performance-marketing {
    background: #fff;
}

.pm-title {
    font-size: 52px;
    font-weight: 700;
    font-family: "Roboto", sans-serif;
    color: #1e252e;
    line-height: 1.2;
}

.pm-desc {
    font-size: 18px;
    font-weight: 400;
    color: #1e252e;
    margin-bottom: 15px;
}

.pm-subtitle {
    font-size: 26px;
    font-weight: 600;
    color: #1e252e;
    margin-top: 25px;
}

.pm-btn {
    background: #616fef;
    color: #fff;
    border-radius: 30px;
    padding: 10px 28px;
    font-size: 16px;
    font-weight: 500;
    display: inline-block;
}

.pm-btn:hover {
    background: #15ba7a;
    color: #fff;
}

.pm-side-img {
    max-width: 450px;
}



/* ==========================
   SERVICES SIDEBAR
========================== */


/* MOBILE TOGGLE */
.services-toggle {
    display: none;
    width: 100%;
    background: #616fef;
    color: #fff;
    border: none;
    padding: 12px;
    font-size: 16px;
    border-radius: 6px;
}

.services-toggle .arrow {
    float: right;
    font-size: 14px;
}

@media(max-width: 767px) {
    .services-toggle {
        display: block;
    }
    .services-nav {
        display: none;
    }
}

/* ==========================
   SERVICE CONTENT
========================== */

.service-header {
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 700;
    font-size: 28px;
    color: #1e252f;
    margin-bottom: 15px;
}

.service-header svg {
    width: 50px;
    height: 50px;
}

/* Tab content spacing */
.tab-pane {
    padding-bottom: 30px;
}

/* Smooth hover */
.services-nav .nav-link:hover {
    background: #d1efe3;
}


.services-nav .nav-link {
    background: #f8f9fa;
    color: #000 !important;   /* Always BLACK when inactive */
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 10px 15px;
    font-weight: 500;
}

/* ACTIVE state */
.services-nav .nav-link.active {
    background: #616fef !important;
    color: #fff !important;   /* WHITE when active */
}

/* Hover effect (optional) */
.services-nav .nav-link:hover {
    background: #e8e8e8;
    color: #000;
}

/* ================================
   CPA SECTION STYLING
================================= */

.cpa-section {
    background: #ffffff;
}

.cpa-title {
    font-size: 42px;
    color: #1e252e;
    font-weight: 500;
    line-height: 50px;
    margin-bottom: 20px;
    font-family: Roboto, sans-serif;
}

.cpa-desc {
    font-size: 18px;
    color: #333;
    margin-bottom: 20px;
    max-width: 95%;
}

.cpa-list {
    padding-left: 20px;
    font-size: 17px;
    line-height: 28px;
    color: #111;
}

.cpa-list li {
    margin-bottom: 8px;
}

.cpa-image {
    max-width: 480px;
}

/* ==============================
   CTA BAR (LIKE MADRIVO)
============================== */

/* ============================
   CTA SECTION STYLES
   ============================ */

/* Full-width wrapper for spacing */
.cta-bar {
    padding: 70px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    background: transparent;
}

/* Center CTA box (same as Madrivo style) */
.cta-wrapper {
    background: linear-gradient(90deg, #00D2A8, #00C389);
    width: 85%;
    max-width: 1250px;
    margin: 0 auto;
    padding: 60px 80px;
    border-radius: 14px;
    position: relative;
    overflow: visible;
}

/* Floating left image wrapper */
.cta-image-wrapper {
    position: absolute;
    left: -80px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Profile image circle */
.cta-person {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* CTA main heading */
.cta-bar-title {
    font-size: 36px;
    line-height: 1.3;
    color: #fff;
    font-weight: 400;
    margin: 0;
}

/* Button */
.cta-green-btn {
    display: inline-block;
    background: #009C72;
    color: #fff !important;
    padding: 14px 35px;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.cta-green-btn:hover {
    background: #007f5c;
    color: #fff;
}

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

@media (max-width: 992px) {
    .cta-wrapper {
        padding: 50px 40px;
        text-align: center;
    }

    .cta-image-wrapper {
        display: none; /* hide floating image for mobile */
    }

    .cta-bar-title {
        font-size: 30px;
    }
}

@media (max-width: 576px) {
    .cta-wrapper {
        width: 92%;
        padding: 40px 30px;
    }

    .cta-bar-title {
        font-size: 26px;
    }

    .cta-green-btn {
        padding: 12px 28px;
        font-size: 16px;
    }
}


/* ============================
   DRIVE BANNER SECTION
   ============================ */

.drive-banner {
    padding: 100px 0;
    background: #F8FBFD; /* Light background like original */
}

.drive-title {
    font-size: 52px;
    line-height: 1.2;
    color: #1e252e;
    font-weight: 700;
    margin-bottom: 25px;
}

.drive-title .highlight {
    color: #00d38c;
}

.drive-subtext {
    font-size: 18px;
    line-height: 1.6;
    color: #344054;
    margin-bottom: 35px;
}

.drive-btn {
    display: inline-block;
    background-color: #00d38c;
    color: #ffffff !important;
    padding: 14px 38px;
    font-size: 18px;
    border-radius: 40px;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}

.drive-btn:hover {
    background-color: #00b978;
    color: #ffffff !important;
}

.drive-banner-img {
    max-width: 100%;
    height: auto;
}

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

@media (max-width: 992px) {
    .drive-title {
        font-size: 42px;
    }

    .drive-banner {
        padding: 70px 0;
        text-align: center;
    }

    .drive-btn {
        padding: 12px 32px;
        font-size: 17px;
    }

    .drive-banner-img {
        margin-top: 40px;
    }
}

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

    .drive-subtext {
        font-size: 16px;
    }

    .drive-btn {
        padding: 10px 28px;
        font-size: 16px;
    }
}

/* ===============================
   COMPREHENSIVE DIGITAL SOLUTIONS
   =============================== */

.digital-solutions-section {
    position: relative;
    padding: 100px 0;
    background: #ffffff;
    overflow: hidden;
}

/* Heading */
.ds-title {
    font-size: 36px;
    font-weight: 600;
    color: #1e252e;
    margin-bottom: 10px;
}

.ds-subtitle {
    font-size: 18px;
    color: #6d7c91;
    line-height: 30px;
    max-width: 650px;
    margin: 0 auto 40px auto;
}

/* Decorative Half-Circle Image */
.half-circle-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.half-circle-img {
    width: 214px;
    height: auto;
}

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

@media (max-width: 768px) {
    .digital-solutions-section {
        padding: 70px 0;
    }

    .ds-title {
        font-size: 30px;
    }

    .ds-subtitle {
        font-size: 16px;
        line-height: 26px;
    }

    .half-circle-img {
        width: 160px;
    }
}

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

    .half-circle-img {
        width: 130px;
    }
}

/* =======================================================
   COMPREHENSIVE DIGITAL SOLUTIONS SECTION
   ======================================================= */

.comprehensive-section {
    padding: 80px 0;
    background: #ffffff;
}

.comp-box {
    background: #ffffff;
    border-radius: 8px;
    padding: 10px 5px;
}

.comp-icon {
    width: 70px;
    height: 70px;
    margin-bottom: 15px;
}

.comp-title {
    font-size: 21px;
    color: #00d38c;
    font-weight: 600;
    margin-bottom: 12px;
    line-height: 30px;
}

.comp-list {
    padding-left: 18px;
    margin-bottom: 0;
}

.comp-list li {
    font-size: 16px;
    color: #1e252e;
    line-height: 26px;
}

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

@media (max-width: 768px) {
    .comp-title {
        font-size: 19px;
    }

    .comp-icon {
        width: 60px;
        height: 60px;
    }
}

@media (max-width: 576px) {
    .comprehensive-section {
        padding: 60px 0;
    }
}

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

.solutions-section {
    width: 100%;
    background: #f7f9fc;
}

/* --- LEFT IMAGE SIDE --- */
.solutions-image-wrapper {
    height: 100%;
    padding: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.solutions-image {
    max-width: 90%;
    height: auto;
}

/* --- RIGHT CONTENT BOX --- */
.solutions-content {
    background: #eef1f5;
    padding: 60px 70px;
}

.solutions-title {
    font-size: 36px;
    color: #1e252e;
    font-weight: 700;
    line-height: 43px;
    margin-bottom: 20px;
}

.solutions-text {
    font-size: 18px;
    color: #6d7c91;
    line-height: 30px;
    margin-bottom: 30px;
}

/* --- ICON BOX --- */
.solution-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    margin-bottom: 25px;
}

.solution-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.solution-item p {
    font-size: 17px;
    color: #1e252e;
    line-height: 26px;
}

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

@media (max-width: 991px) {
    .solutions-content {
        padding: 45px;
    }
}

@media (max-width: 768px) {
    .solutions-title {
        font-size: 30px;
        line-height: 38px;
    }

    .solutions-content {
        padding: 35px;
    }

    .solutions-image-wrapper {
        padding: 30px;
    }
}

@media (max-width: 576px) {
    .solution-item {
        gap: 12px;
    }

    .solution-icon {
        width: 35px;
        height: 35px;
    }
}

/* ==========================================================
   CASE STUDY SECTION
   ========================================================== */

.case-study-section {
    padding: 80px 0;
}

/* Heading */
.cs-title {
    font-size: 36px;
    color: #1e252e;
    font-weight: 700;
    line-height: 43px;
}

.cs-subtitle {
    font-size: 18px;
    color: #6d7c91;
    line-height: 30px;
}

/* Images */
.case-main-img img {
    width: 100%;
    border-radius: 10px;
}

.case-square-img {
    position: absolute;
    right: 10px;
    bottom: -20px;
}

.case-square-img img {
    width: 95px;
    height: 95px;
}

/* Right content box */
.case-info-box {
    background: #1e252e;
    padding: 40px 50px;
    border-radius: 12px;
    color: #ffffff;
}

.case-heading {
    font-size: 28px;
    color: #ffffff;
    line-height: 34px;
    margin-bottom: 15px;
}

.case-desc {
    font-size: 16px;
    color: #e3e7ed;
    margin-bottom: 25px;
}

/* Button */
.case-btn {
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: #ffffff;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    transition: 0.3s;
}

.case-btn:hover {
    background: #00d38c;
    color: #000;
}

/* Responsive */
@media (max-width: 991px) {
    .case-info-box {
        margin-top: 30px;
        padding: 35px;
    }
}

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

    .case-square-img {
        width: 70px;
        bottom: -10px;
    }
}


/* ================================================
   CONTACT CTA SECTION
   ================================================ */

.contact-cta-section {
    padding: 80px 0;
}

.contact-cta-title {
    font-size: 36px;
    color: #1e252e;
    line-height: 43px;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-cta-subtitle {
    font-size: 21px;
    color: #6d7c91;
    line-height: 32px;
    margin: 0 auto 30px auto;
}

/* Button */
.contact-cta-btn {
    background-color: #00d38c;
    color: #ffffff;
    padding: 14px 40px;
    border-radius: 40px;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    text-decoration: none;
    transition: 0.3s ease-in-out;
}

.contact-cta-btn:hover {
    background-color: #00b879;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 576px) {
    .contact-cta-title {
        font-size: 30px;
        line-height: 38px;
    }

    .contact-cta-subtitle {
        font-size: 18px;
        line-height: 28px;
    }

    .contact-cta-btn {
        padding: 12px 35px;
        font-size: 16px;
    }
}

/* =====================================================
   BIG DATA BANNER SECTION
   ===================================================== */

.bigdata-banner-section {
    background-image: url("https://madrivo.com/wp-content/uploads/2019/09/Technology-Header@2x.png?id=442");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    padding: 120px 0;
    color: #ffffff;
    position: relative;
}

/* Optional: dark overlay like original */
.bigdata-banner-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.45);
    z-index: 1;
}

.bigdata-banner-section .container,
.bigdata-banner-section .row,
.bigdata-banner-section .col-lg-12 {
    position: relative;
    z-index: 2;
}

/* HEADINGS */
.bigdata-title {
    font-size: 53px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
    color: #ffffff;
}

.bigdata-subtitle {
    font-size: 29px;
    font-weight: 500;
    margin-bottom: 25px;
    color: #ffffff;
}

/* PARAGRAPH */
.bigdata-text {
    font-size: 18px;
    max-width: 606px;
    color: #ffffff;
    line-height: 28px;
}

/* RESPONSIVE */
@media (max-width: 991px) {
    .bigdata-title { font-size: 42px; }
    .bigdata-subtitle { font-size: 24px; }
}

@media (max-width: 576px) {
    .bigdata-title { font-size: 32px; }
    .bigdata-subtitle { font-size: 20px; }
    .bigdata-text { max-width: 100%; }
}

/* =====================================================
   FIND YOUR CUSTOMERS FASTER SECTION
   ===================================================== */

.customers-faster-section {
    padding: 80px 0;
}

.customer-image-wrapper img {
    width: 100%;
    height: auto;
}

/* Titles */
.customer-title {
    font-size: 37px;
    font-weight: 500;
    color: #1e252f;
    margin-bottom: 10px;
}

.customer-subtitle {
    font-size: 28px;
    font-weight: 500;
    color: #8697a6;
    margin-bottom: 20px;
}

/* Description */
.customer-desc {
    font-size: 18px;
    color: #6c7c90;
    padding: 15px 0;
    font-weight: 400;
}

/* Bullet Points */
.customer-points {
    list-style: disc;
    padding-left: 20px;
}

.customer-points li {
    font-size: 18px;
    color: #6c7c90;
    font-weight: 400;
    margin-bottom: 10px;
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .customer-title { font-size: 30px; }
    .customer-subtitle { font-size: 22px; }
    .customer-desc, 
    .customer-points li { font-size: 16px; }
}

/* =====================================================
   BENEFITS OF ANALYTICS SECTION
   ===================================================== */

.benefits-analytics-section {
    padding: 80px 0;
}

.benefits-title {
    font-size: 37px;
    font-weight: 500;
    color: #1e252f;
    margin-bottom: 10px;
}

.benefits-subtitle {
    font-size: 28px;
    font-weight: 500;
    color: #8697a6;
    margin-bottom: 20px;
}

.benefits-desc {
    font-size: 18px;
    font-weight: 400;
    color: #6c7c90;
    max-width: 577px;
    padding: 10px 0;
}

.benefits-list {
    font-size: 18px;
    padding-left: 15px;
    max-width: 610px;
    color: #6c7c90;
}

.benefits-list li {
    margin-bottom: 12px;
    font-weight: 400;
}

/* RIGHT SIDE IMAGES */
.benefits-small-square {
    margin-bottom: 20px;
}

.small-square-img {
    width: 155px;
    height: auto;
}

.benefits-main-image img {
    width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 576px) {
    .benefits-title { font-size: 30px; }
    .benefits-subtitle { font-size: 22px; }
    .benefits-desc,
    .benefits-list li { font-size: 16px; }
}

/* =====================================================
   FIRST ROW SECTION
   ===================================================== */

.first-row-section {
    padding: 80px 0;
}

.first-row-section .green-sm-heading {
    font-size: 15px;
    color: #18d38c;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
}

.first-row-section .main-heading {
    font-size: 51px;
    color: #1e252f;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-top: 20px;
}

.first-row-section .first-row-text {
    font-size: 18px;
    color: #6d7c91;
    padding-top: 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* Left and Right Image Styles (with shadow effect) */
.shadow-img {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.shadow-img-img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .first-row-section .main-heading {
        font-size: 30px;
    }

    .first-row-section .first-row-text {
        font-size: 16px;
    }
}

/* =====================================================
   Customer Logos Section - Slick Slider
   ===================================================== */

.customer-logos-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.customer-logos .slick-slide img {
    width: 100%;
    height: auto;
    max-height: 100px;
}

.customer-logos .slick-track {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.customer-logos .slick-current img {
    opacity: 1;
}

.customer-logos .slick-slide {
    transition: opacity 0.3s ease-in-out;
}

/* Responsive Design for Slick Slider */
@media (max-width: 768px) {
    .customer-logos .slick-slide {
        width: 33% !important; /* Show 3 logos on tablet */
    }
}

@media (max-width: 520px) {
    .customer-logos .slick-slide {
        width: 50% !important; /* Show 2 logos on mobile */
    }
}

/* =====================================================
   Madrivo Performance Marketing Section
   ===================================================== */

.madrivo-performance-marketing {
    padding: 60px 0;
    background-color: #f8f9fa; /* Add a light background for contrast */
}

.madrivo-performance-marketing .overflow-img {
    max-width: 100%;
    overflow: hidden;
}

.madrivo-performance-marketing img {
    width: 100%; /* Ensure image responsiveness */
    height: auto;
}

.madrivo-performance-marketing .green-sm-heading {
    font-size: 15px;
    color: #18d38c;
    text-align: left;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.madrivo-performance-marketing .section-title {
    font-size: 37px;
    color: #1e252f;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin-bottom: 20px;
}

.madrivo-performance-marketing .section-description {
    font-size: 18px;
    color: #6d7c91;
    line-height: 30px;
    text-align: left;
    max-width: 531px;
    margin-bottom: 20px;
}

@media (max-width: 768px) {
    .madrivo-performance-marketing .section-title {
        font-size: 30px; /* Adjust for smaller screens */
    }

    .madrivo-performance-marketing .section-description {
        font-size: 16px; /* Adjust for smaller screens */
    }
}

/* =====================================================
   Benefits Section
   ===================================================== */

.benefits-section {
    padding: 60px 0;
    background-color: #f8f9fa;
    text-align: center;
}

.green-sm-heading {
    font-size: 15px;
    color: #18d38c;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-title {
    font-size: 37px;
    color: #1e252f;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin-bottom: 40px;
}

.benefits-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.benefits-list {
    font-size: 18px;
    color: #6d7c91;
    line-height: 30px;
    text-align: left;
    margin-bottom: 30px;
}

.benefits-list strong {
    font-size: 21px;
    color: #1e252f;
    font-weight: 500;
    margin-bottom: 10px;
}

.benefits-list ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
}

.benefits-list ul li {
    font-weight: 400;
    margin-bottom: 10px;
}

.learn-more-btn {
    display: inline-block;
    background-color: #00d38c;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 25px;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.learn-more-btn:hover {
    background-color: #00b274;
}

@media (max-width: 768px) {
    .benefits-row {
        flex-direction: column;
    }

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

    .benefits-list {
        font-size: 16px;
    }
}

/* =====================================================
   Grid Carousel Section Styles
   ===================================================== */

.grid-carousel {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.section-title {
    font-size: 51px;
    color: #1e252f;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.section-subtitle {
    font-size: 21px;
    color: #6d7c91;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 400;
    margin-bottom: 40px;
}

.vc_grid-container-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.vc_grid-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.vc_grid-item {
    width: calc(33.33% - 30px);
    text-align: center;
}

.vc_grid-item .grid-item-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.vc_grid-item img {
    width: 100%;
    height: auto;
    border-radius: 5px;
}

@media (max-width: 768px) {
    .vc_grid-item {
        width: calc(50% - 15px);
    }
}

@media (max-width: 576px) {
    .vc_grid-item {
        width: 100%;
    }
}

/* =====================================================
   Contact Us Section Styles
   ===================================================== */

.contact-us-section {
    padding: 60px 0;
    background-color: #f8f9fa;
}

.green-heading {
    font-size: 14px;
    color: #18d38c;
    text-align: center;
    font-family: 'Titillium Web', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.main-heading {
    font-size: 51px;
    color: #1e252f;
    text-align: center;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    margin-bottom: 30px;
}

.description {
    font-size: 18px;
    color: #6d7c91;
    text-align: center;
    margin-bottom: 40px;
}

.sub-heading {
    font-size: 28px;
    color: #0d111c;
    text-align: left;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    margin-bottom: 20px;
}

.location {
    font-size: 18px;
    display: flex;
    align-items: center;
}

.location-icon {
    width: 15px;
    height: 21px;
    margin-right: 10px;
}

.contact-info {
    font-size: 18px;
}

.email-link {
    color: #5688ef;
    text-decoration: none;
}

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

.contact-form .form-control {
    font-size: 18px;
    padding: 15px;
}

.contact-form button {
    background-color: #00d38c;
    color: #ffffff;
    padding: 15px 30px;
    font-size: 18px;
    border: none;
    border-radius: 5px;
}

.customer-logos {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

.customer-logos img {
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-us-section .row {
        flex-direction: column;
        align-items: center;
    }

    .customer-logos {
        flex-wrap: wrap;
    }
}