@import url('https://fonts.googleapis.com/css2?family=Afacad:ital,wght@0,400..700;1,400..700&display=swap');

/* ONE content width for the whole site: navbar, sections, Solutions list + laptop.
   Change this single value to widen / narrow everything together. */
:root {
    --site-width: 88%;
}

/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Afacad", sans-serif;
    font-weight: normal;
    color: #fff;
    font-size: 18px;
}


a {
    text-decoration: none;
    color: #ffffff;
    transition: 0.3s;
}

ul {
    list-style: none;
}



/* =========================================================
   HEADER CONTAINER — GLASSMORPHIC / FROSTED NAVBAR
   ========================================================= */
.madds-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 500;
    margin-bottom: -120px;

    /* glass panel */
    background: linear-gradient(180deg,
            rgba(38, 13, 78, 0.38) 0%,
            rgba(38, 13, 78, 0.22) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 40px rgba(20, 6, 45, 0.28);
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

/* subtle glass highlight along the top edge */
.madds-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.55) 50%,
            transparent 100%);
    pointer-events: none;
}

/* stronger frost + compact navbar once the page is scrolled */
.madds-header.scrolled {
    background: linear-gradient(180deg,
            rgba(28, 10, 58, 0.62) 0%,
            rgba(28, 10, 58, 0.46) 100%);
    border-bottom-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 18px 50px rgba(12, 4, 32, 0.45);
}

/* ---- compact navbar (smaller logo + shorter bar) while scrolled ---- */
.madds-header.scrolled .logo img,
.main-header.scrolled .logo img {
    height: 62px;
    padding-top: 0;
}

/* ALL nav items must shrink together — Home / Our Work / Resources are
   .dropdown, the rest are .mega-dropdown. Shrinking only one of the two
   groups pushes them out of alignment and keeps the bar at full height. */
.madds-header.scrolled .dropdown,
.madds-header.scrolled .mega-dropdown,
.main-header.scrolled .dropdown,
.main-header.scrolled .mega-dropdown {
    padding-top: 12px;
    padding-bottom: 12px;
}

.container {
    max-width: var(--site-width);
    margin: auto;
    padding: 0px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;

}


.about-us .container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    position: relative;
}


/* Logo */
.logo img {
    height: 100px;
    object-fit: contain;
    padding: 3px 0 0;
    transition: height 0.35s ease, padding 0.35s ease;
}


/* SIDE MENU BASE */
.side-menu {
    position: fixed;
    top: 0;
    right: -350px;
    width: 300px;
    height: 100%;
    background: rgba(38, 13, 78, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    padding: 20px;
    transition: 0.4s ease;
    overflow-y: auto;
    z-index: 9999;
}

.close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
}

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    z-index: 9990;
}

/* MOBILE MENU ITEMS */
.mobile-item {
    margin-bottom: 2px;
}

.mobile-link {
    font-family: "Afacad", sans-serif;
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    padding: 12px 0;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

.mobile-link .arrow {
    transition: 0.3s;
}

/* SUBMENU COLLAPSE/EXPAND */
.mobile-submenu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding-left: 10px;
}

/* OPENED SUBMENU */
.mobile-submenu.open {
    max-height: 100vh;
    opacity: 1;
    overflow-y: clip;
}

.mobile-submenu.open .mobile-link:hover {
    color: #dc89fa;
}

.mobile-submenu.open>a:hover {
    color: #eebeff;
}

.mobile-submenu a {
    display: block;
    padding: 8px 0;
    color: #ddd;
    text-decoration: none;
}



/* NAVIGATION */
.nav ul {
    display: flex;
    list-style: none;
    gap: 40px;
}


.nav ul li>a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    padding: 8px 5px;
    position: relative;
    white-space: nowrap;
}

/* Top & Bottom gradient borders */

.nav ul li>a::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 10px;
    background: #fff;
    transform: scaleX(0);
    transition: transform 0.4s ease;
}



.nav ul li>a::after {
    bottom: 0;
    transform-origin: left;

}

/* Hover animation */
.nav ul li>a:hover::after {
    transform: scaleX(1);

}

/* Active animation */
.nav ul li>a.active::after {
    transform: scaleX(1);
}



.mega-dropdown .mega-left h1 {
    line-height: 18px;
}

.mega-dropdown .mega-left h1 {
    color: #000;
    font-size: 1.5rem;
}

.mega-dropdown .mega-left h1 a {
    color: #000;
    font-size: 1.5rem;
    text-decoration: none;
    transition: all 0.25s ease;
}



.mega-dropdown .mega-left h1 a:hover {
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: 1.5rem;
}


.mega-dropdown .mega-left h1 a.no-gradient-hover:hover {
    color: #B51BB5;
    /* choose a fallback color */
}

.mega-columns .col a {
    color: #000;
    transition: all 0.3s ease;
    transform: translateX(5px);
}



.mega-columns .col a:hover {
    text-decoration: none;
    transform: translateX(15px);

}

.mega-columns .col a:hover .ab-icon img {
    animation: bounceIcon 0.6s ease forwards;

}

@keyframes bounceIcon {
    0% {
        transform: translateX(0);
    }

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

    100% {
        transform: translateX(0px);
    }
}

.mega-columns .col a:hover h2 {
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-decoration: none;
}



/* DROPDOWN */
.dropdown {
    position: relative;
    padding: 40px 10px;
    transition: padding 0.35s ease;
}

.dropdown-menu {
    position: absolute;
    top: 89px;
    left: 0;
    background: #ccc;
    min-width: 180px;
    padding: 12px 0;
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
    transition-delay: 0s;
    /* closes immediately */
    border-radius: 0px;
}

/* SHOW WITH DELAY */
.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0px);
    transition-delay: 0.25s;
    z-index: 1;
    /* <<< OPEN DELAY HERE */
}

.dropdown-menu a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: #000;
    font-size: 15px;
}


/* RIGHT SIDE ACTIONS */
.quote-btn {
    padding: 10px 25px;
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-backdrop-filter: blur(10px) saturate(160%);
    backdrop-filter: blur(10px) saturate(160%);
    /* border: 1px solid rgba(255, 255, 255, 0.28); */
    box-shadow: 0 10px 26px rgba(120, 20, 220, 0.32);
    font-size: 15px;
    display: flex;
    gap: 8px;
    align-items: center;
    white-space: nowrap;
    transition: 0.4s;

}

.quote-btn:hover {
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    background-size: 400% 400%;
    animation: waveGradient 12s ease infinite;
}


.icon-btn {
    margin-left: 15px;
    width: 42px;
    height: 42px;
    background: rgba(255, 255, 255, 0.8);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    backdrop-filter: blur(12px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 50%;
    cursor: pointer;
    font-size: 20px;
    color: #2b0b4f;
    box-shadow: 0 6px 18px rgba(20, 6, 45, 0.18);
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.icon-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(20, 6, 45, 0.28);
}

/* hamburger: hidden on desktop (full nav is visible), shown when the nav collapses */
.menu-btn {
    display: none;
}

@media (max-width: 1025px) {
    .menu-btn {
        display: inline-block;
    }
}


/* SIDE MENU */
.side-menu {
    position: fixed;
    right: -350px;
    top: 0;
    width: 335px;
    height: 100%;
    background: rgba(38, 13, 78, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    padding: 30px 25px;
    transition: 0.4s;
    z-index: 999;
}

.side-menu ul {
    margin-top: 40px;
    list-style: none;
}

.side-menu ul li {
    padding: 18px 0;
}

.side-menu ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
}

.close-btn {
    width: 35px;
    height: 35px;
    font-size: 25px;
    border: none;
    background: #333;
    color: #fff;
    border-radius: 50%;
    cursor: pointer;
}

/* DARK OVERLAY */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: none;
    z-index: 900;
}


/* ---- MEGA DROPDOWN ---- */
.mega-dropdown {
    padding: 40px 10px;
    transition: padding 0.35s ease;
}



/* MEGA MENU CONTAINER */
.mega-menu {
    position: absolute;
    left: 0;
    top: 100%;
    /* always flush with the bottom of the navbar, whatever its height */
    margin-top: -1px;

    /* solid panel — not transparent */
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-top: none;
    border-radius: 0 0 24px 24px;
    box-shadow: 0 30px 60px rgba(20, 6, 45, 0.25);

    padding: 40px 40px;
    display: flex;
    gap: 5px;
    opacity: 0;
    min-width: 100%;
    width: 100%;
    z-index: 1;
    visibility: hidden;
    transform: translateX(20px);
    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease,
        top 0.35s ease;

}

/* SHOW MEGA MENU */
.mega-dropdown:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-10px);
}

/* LEFT SECTION */
.mega-left {
    width: 190px;
}


.mega-left h3 {
    font-size: 22px;
    font-weight: 600;
    color: #000;
    margin-bottom: 25px;
}

.mega-left h4 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 18px;
    color: #000;
}

/* COLUMNS */
.mega-columns {
    display: flex;
    gap: 40px;
    flex: 1;
    justify-content: space-around;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.col a {
    font-size: 15px;
    color: #000;
    text-decoration: none;
}

/* Hover effect */
.col a:hover {
    text-decoration: underline;
}

.col>h2 {
    color: #6d16a6;
    font-size: 22px;
    white-space: nowrap;
}

.col a h2 {
    font-size: 20px;
    white-space: nowrap;
    color: #000000;
    font-weight: normal;
}

.header-actions {
    display: flex;
    align-items: center;
}

.boldmenu a h2 {
    font-weight: bold;
}


.hero-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    top: 0;   /* was 6px: pushed the hero down and left a white strip behind the transparent navbar */
    z-index: 0;
}

.hero-video {
    display: block;   /* inline video leaves a baseline gap under it = white strip above About */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-text-slider {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    width: 80%;
    max-width: 1400px;
}

.slide {
    display: none;
    animation: fade 1s ease-in-out;
    text-align: left;
}

.slide h1 {
    font-size: 4rem;
    font-weight: 500;
}

.slide p {
    font-size: 4rem;
}

.slide.active {
    display: block;
}

.btn-now {
    background: transparent;
    padding: 15px 40px;
    border: 1px solid #fff;
    margin: 20px 0;
    color: #fff;
    cursor: pointer;
    transition: 0.4s;
}

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


.maincontent {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.small-hd ul {
    list-style: none;
    font-size: 2rem;
}


.about-section {
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    background-size: 400% 400%;
    animation: waveGradient 12s ease infinite;
    padding: 4rem 0;
    position: relative;
    z-index: 1;
}

.about-wrapper {
    position: relative;
    padding: 3rem;
}

/* Flex Box */
.about-wrapper {
    display: flex;
    gap: 2rem;
    align-items: stretch;
}

.about-img,
.about-content {
    flex: 1;
}

.about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
}

/* Headings */
.about-content h1 {
    font-size: 3rem;
    font-weight: normal;
    padding: 1rem 0;
}

.about-content h2 {
    font-size: 2rem;
    font-weight: normal;
    padding: 1rem 0;
}

/* FIXED Responsive Border */
.about-section::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 60%;
    transform: translate(-50%, -50%);
    width: 65%;
    max-width: 100%;
    height: 68%;
    border: 5px solid transparent;
    border-image: linear-gradient(90deg, #ffffff 0%, #F0A400 35.58%, #AC20BC 65.87%, #ffffff 100%) 1;
    animation: waveGradient 12s ease infinite;
    z-index: -1;
    pointer-events: none;
    box-sizing: border-box;
}



.idea-content {
    color: #000;
    font-weight: normal;
}


.idea-content h1 {
    padding: 1rem 0;
}


.btn {
    display: inline-block;
    margin: 20px 0;
    padding: 12px 30px;
    background: linear-gradient(90deg, #B217BA, #2A7BFF);
    color: #fff;
    font-weight: 600;
    border-radius: 5px;
    text-decoration: none;

    /* smooth animation */
    transition:
        background-position 0.6s ease,
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease;
    background-size: 200% 100%;
    background-position: left center;
    will-change: transform;
}

.btn:hover {
    background-position: right center;
    transform: translateY(-4px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.25);
}



.section {
    padding: 2rem 0;
}






.background-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.background-wrapper .background img {
    float: inline-end;
    margin-top: 0rem;
    margin-left: 0rem;
    margin-right: 10rem;
    background: #ffffff;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.25);
    transform: translateY(80px) scale(0.95);
    position: absolute;
    width: 70%;
    height: 70%;

}

.parallax-content {
    position: absolute;
    padding: 0% 0 0 10%;
    max-width: 900px;
    color: #000000;
    opacity: 0;

}


/* SAFARI/WebKit FIX — `background-attachment: fixed` (the old rule) repaints the
   whole background on every scroll frame in WebKit and janks the entire page.
   A viewport-fixed ::before layer clipped to this section's box renders the exact
   same pixels (glued to the viewport, clipped to the section) but stays composited. */
.main-parallax {
    background: none;
    position: relative;
    min-height: 90vh;
    overflow: hidden;
    color: #000;
    display: flex;
    justify-content: center;
    clip-path: inset(0);
}

.main-parallax::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: url(../images/parallax-bg.png) center / cover no-repeat;
}



.section-parallax {
    position: relative;
    inset: 0;
    min-height: 300vh;
    background: #8596bd;

}

.idea-content {
    width: 50%;
    max-width: 600px;
    z-index: 10;
}

.idea-img {
    width: 50%;
    max-width: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
}


.idea-img img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
}


.section-8 .background-wrapper {
    position: relative !important;
}


.spe {
    color: #fff;
    font-weight: normal;
    background: linear-gradient(180deg, #511396 0%, #080A2B 100%);
    font-size: 1.2rem;
    padding: 5rem 0;
}

.spe-content {
    margin-right: 5rem;
}


.spe-img {
    display: flex;
    justify-content: center;
}

.spe-content h1 {
    font-size: 4rem;
    font-weight: normal;
}

.spe-content p {
    padding: 1rem 0;
}

/* Card Wrapper */
.hover-card {
    position: relative;
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    overflow: hidden;
    font-weight: normal;
    margin: 0 10px;

}

/* -----------------------------
   FIRST LAYER (DEFAULT VISIBLE)
   Moves UP on hover
------------------------------- */
.hover-card-first {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
    padding: 25px;
    color: #fff;
    transition: transform 0.45s ease-in-out;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    animation: fade 1s ease-in-out;
}


.hover-card-overlay {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 500px;
    background: linear-gradient(to top, rgba(183, 0, 255, 0.9), rgba(1, 103, 255, 0.9));

    padding: 25px;
    color: #fff;
    transition: transform 0.45s ease-in-out;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
    animation: fade 1s ease-in-out;
}



.hover-card h2 {
    font-size: 3rem;
}

.hover-card:hover .hover-card-first,
.hover-card:hover .hover-card-overlay {
    transform: translateY(-100%);
    animation: fade 0.45s ease-in-out;
}


.hover-expand-btn {
    margin-top: 20px;
    padding: 15px 40px;
    border: 1.5px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 15px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.hover-expand-btn:hover {
    background: linear-gradient(90deg, #ffffff, #d4d4d4);
    transform: translateY(-5px);
    color: #000;
}



.mt-5 {
    margin-top: 3rem;
}


@keyframes fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Dots */
.hero-dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.hero-dots .dot {
    width: 10px;
    height: 10px;
    background: white;
    opacity: 0.4;
    border-radius: 50%;
    cursor: pointer;
}

.hero-dots .dot.active {
    opacity: 1;
}


/* Glass variant used on inner pages */
.main-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 500;

    background: linear-gradient(180deg,
            rgba(80, 19, 149, 0.46) 0%,
            rgba(80, 19, 149, 0.28) 100%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 40px rgba(35, 8, 75, 0.3);
    transition: background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
}

.main-header::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.5) 50%,
            transparent 100%);
    pointer-events: none;
}

.main-header.scrolled {
    background: linear-gradient(180deg,
            rgba(58, 12, 112, 0.66) 0%,
            rgba(58, 12, 112, 0.5) 100%);
    box-shadow: 0 18px 50px rgba(22, 5, 48, 0.45);
}

/* Fallback for browsers without backdrop-filter support */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

    .madds-header,
    .madds-header.scrolled {
        background: rgba(38, 13, 78, 0.8);
    }

    .main-header,
    .main-header.scrolled {
        background: rgba(80, 19, 149, 0.88);
    }

    .mega-menu {
        background: #ffffff;
    }
}



.other-slider {
    position: relative;
    width: 100%;
    height: 380px;
    overflow: hidden;

}

/* Background Image */
.other-slider img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Dark Overlay */
.other-slider::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: -1;
}

/* Content Wrapper */
.about-hd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: left;
    color: #fff;
    z-index: 2;
    width: var(--site-width);
    padding: 0 10px;
    z-index: 0;
}

/* Title */
.about-hd h1 {
    font-size: 3rem;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Breadcrumb */
.text-hd ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.text-hd ul li {
    font-size: 1.1rem;
    opacity: 0.9;
}


.wrapper {
    display: flex; 
    width: var(--site-width);
}

.content {
    flex: 1;
    padding: 60px;
    position: relative;
    overflow: hidden;
    background: #ffffffbf;
}

.main-cont {
    display: flex;
}

.text-cont,
.content-img {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.text {
    position: absolute;
    opacity: 0;
    transform: translateX(-50px);
    transition: 0.5s ease;
}

.text.active {
    opacity: 1;
    transform: translateX(0);
}

.text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.text .line {
    opacity: 0;
    transform: translateY(15px);
    margin-bottom: 10px;
}

.text.active .line {
    animation: reveal 0.6s forwards;
}

.text.active .line:nth-child(2) {
    animation-delay: 0.2s;
}

.text.active .line:nth-child(3) {
    animation-delay: 0.4s;
}

.text.active .line:nth-child(4) {
    animation-delay: 0.6s;
}


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

.main-parallax .tabs { 
    display: flex;
    justify-content: space-between;
}

.main-parallax .tab {
    flex: 1;
    writing-mode: vertical-rl;
    text-align: center;
    color: #fff;
    /* font-weight: bold; */
    cursor: pointer;
    transition: 0.3s;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 28px;
    letter-spacing: 5px;
        background: linear-gradient(to top, rgba(183, 0, 255, 0.9), rgba(1, 103, 255, 0.9));
}


.main-parallax .tab:nth-child(1),.main-parallax .tab:nth-child(2),.main-parallax .tab:nth-child(3),
.main-parallax .tab:nth-child(4),.main-parallax .tab:nth-child(5),.main-parallax .tab:nth-child(6),.main-parallax .tab:nth-child(7) {
    background: linear-gradient(to top, rgba(183, 0, 255, 0.9), rgba(1, 103, 255, 0.9));
}

 

.main-parallax .tab.active {
    filter: brightness(1.2);
    background:linear-gradient(to top, rgb(32 115 255), rgb(0 58 175));
}

/* Mobile */
@media (max-width: 768px) {
    .hero-slider {
        height: 60vh;
    }

    .slide h1 {
        font-size: 1.8rem;
    }

    .slide p {
        font-size: 1rem;
    }

    .maincontent {
        align-items: flex-start;
        flex-direction: column;
    }



     /* Layout */
    .wrapper {
        flex-direction: column;
        width: 100%;
    }

    .content { 
        position: relative;
        min-height: auto;
    }

    .main-cont {
        flex-direction: column;
    }

    .text-cont,
    .content-img {
        width:76%;
    }

    .content-img {
        margin-top: 20px;
    }

    /* Text animation positioning */
    .text { 
        transform: translateY(20px);
    }

    .text.active {
        transform: translateY(0);
    }

    .text h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .text .line {
        font-size: 14px;
    }

    /* Tabs */
    .main-parallax .tabs {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .main-parallax .tabs::-webkit-scrollbar {
        display: none;
    }

    .main-parallax .tab {
        writing-mode: horizontal-tb;
        font-size: 14px;
        letter-spacing:0px;
        padding: 15px 10px; 
        height: auto;
        white-space: nowrap;
    }
}



/* start Swiper */

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

.swiper-slide {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}

.swiper-slide img {
    display: block;
    width: 100%;
}



.spe .swiper-scrollbar-drag {
    background: #fff !important;

}

.spe .swiper-scrollbar {
    background: #ffffff5d;
}

.swiper-slide.swiper-slide-next:nth-child(2) {
    transform: translateX(20%);
}

.swiper-slide.swiper-slide-active:first-child {
    transform: translateX(30%);
    z-index: 1;
}

.swiper-slide {
    z-index: 1;
}

.spe .swiper-button-next,
.spe .swiper-button-prev {
    color: #fff !important;
}


.managed .swiper-button-next,
.managed .swiper-button-prev,
.managed .swiper-scrollbar {
    display: none;
}



/* End Swiper */



.customized {
    background: #F9F9F9;
    padding: 5rem 0;
    color: #000;
    font-weight: normal;
}

.container-div {
    max-width: var(--site-width);
    margin: auto;
    padding: 0px;
    position: relative;
}

.costomized-head {
    text-align: center;

}

.costomized-head span {
    font-size: 3rem;
    position: relative;
    padding-left: 30px;
    /* space for icon */
    display: inline-block;
    color: #4A128C;
}

.costomized-head span::before {
    content: url("../images/circul-icon.png");
    position: absolute;
    left: 0;
    top: 26%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
}

.costomized-head h2 {
    font-size: 3rem;
    font-weight: normal;
}


.custom-tabs {
    padding: 60px 0;
    background: #f9f9f9;
}

.tabs-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

/* LEFT TABS */
.tab-list {
    list-style: none;
    padding: 0rem 5rem;
    width: 45%;
}

.tab-list .tab {
    padding: 18px 0;
    font-size: 2rem;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer;
    color: #bcbcbc;
    transition: color 0.3s ease;
    display: block;
    position: relative;
}

/* Default arrow */
.tab-list .tab::after {
    font-family: "Font Awesome 6 Free";
    content: "\f061";
    font-weight: 900;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%) translateX(-50px);
    font-size: 20px;
    transition: color 0.3s ease, transform 0.3s ease;
}

/* ACTIVE TAB */
.tab-list .tab.active {
    font-weight: 600;
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ACTIVE ARROW */
.tab-list .tab.active::after {
    background: #000;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    transform: translateY(-50%) translateX(-25px);
}


/* RIGHT CONTENT */
.tab-content-wrapper {
    flex: 1;
    position: relative;
    min-height: 450px;
}

.tab-content {
    position: absolute;
    transition: opacity 0.5s ease;
    width: 100%;
    top: 0;
    text-align: center;
    visibility: hidden;
    opacity: 0;
}

.tab-content.active {
    position: relative;
    visibility: visible;
    opacity: 1;
}

/* IMAGE */
.tab-image {
    max-width: 800px;
    width: 100%;
    display: block;
    margin: 0 auto 20px;
}

/* DESCRIPTION */
.tab-desc {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 0 20px;
}

/* BUTTON */
.expand-btn {
    display: inline-block;
    margin: 25px 0;
    background: #3F01FA;
    color: #fff;
    padding: 12px 38px;
    text-decoration: none;
    font-size: 1rem;
}


.expand-btn:hover {
    background: #9f01fa;
}





/* Overlay */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(3px);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

/* Modal Box */
.modal-box {
    background: #ffffff;
    color: #000;
    width: 28%;
    max-width: 90%;
    padding: 35px 40px;
    border-radius: 10px;
    position: relative;
    animation: fadeIn 0.3s ease;


}

.modal-box h2 {
    padding: 20px 0;
    font-size: 2rem;
}

/* Close Button */
.close-modal {
    position: absolute;
    top: -5px;
    right: -5px;
    cursor: pointer;
    font-size: 26px;
    font-weight: bold;
    background: linear-gradient(120deg, #b900ff, #0058ff);
    color: #ffffff;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 2;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
}

/* Form Styles */
.form-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 16px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
}

.submit-btn {
    padding: 18px 20px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    margin: 22px auto;
    text-transform: uppercase;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.submit-btn:hover {
    background: linear-gradient(120deg, #b900ff, #0058ff);
}

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

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



/* RESPONSIVE */
@media(max-width: 900px) {
    .tabs-container {
        display: block;
        align-items: center;
    }

    .tab-list {
        width: 100%;
        display: flex;
        justify-content: flex-start;

        overflow-x: auto;
        white-space: nowrap;
        padding: 0;
    }

    .tab {
        border-bottom: none;
        padding: 10px;
    }


    
}


.managed {
    padding: 5rem 0;
    color: #fff;
    font-weight: normal;
    height: 78vh;
}


.swiper-horizontal {
    position: absolute;
    margin: 5rem 0 0;
    z-index: 9;
    height: 34rem;
}



.managed .swiper-scrollbar-drag {
    background: #1329AF !important;

}

.managed .swiper-scrollbar {
    background: #cecece;
}


.technologies {
    padding-top: 18rem;
    height: 46rem;
    color: #000;
}

.swiper-slide img {
    display: block;
    width: 180px;
    height: 180px;
    object-fit: cover;
}



.technologies .swiper-horizontal {
    height: auto;
}



.technologies .swiper-slide.swiper-slide-active:first-child,
.technologies .swiper-slide.swiper-slide-next:nth-child(2) {
    transform: translateX(0%);
}



/* CTA Section */
.cta {
    background-image: url("../images/cta-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 8rem 0;
    position: relative;
    color: #fff;
    animation: bgMove 3s ease-in-out infinite alternate;
}

@keyframes bgMove {
    0% {
        background-position: center;
    }

    100% {
        background-position: center top;
    }
}


/* Heading */
.cta h2 {
    font-size: 4rem;
    margin-bottom: 20px;
    font-weight: 700;
    line-height: 1.2;
}

/* Paragraph */
.cta p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}


.cta-width {
    width: 50rem;
}

/* CTA Button */
.cta-btn {
    display: inline-block;
    border: 1px solid #fff;
    color: #fff;
    padding: 14px 52px;

    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.cta-btn:hover {
    background: #102CBA;
    color: #fff;
}


/* CTA Section */
.cta-about {
    background-image: url("../images/cta-about.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 5rem 0;
    position: relative;
    color: #fff;
    animation: bgMove 3s ease-in-out infinite alternate;
}

/* Heading */
.cta-about h2 {
    font-size: 4rem;
    margin-bottom: 20px;
    font-weight: normal;
    line-height: 1.2;

}

/* Paragraph */
.cta-about p {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
}

.cta-about {
    text-align: center;
}


.expreanss {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
    padding: 4rem 0 0;
    text-align: center;
}

.expreanss div {
    transition: transform 0.3s ease;
}

.expreanss div:hover {
    transform: translateY(-8px);
}

.expreanss h1 {
    font-size: 4rem;
    font-weight: 700;
    color: #fff;
}

.expreanss p {
    font-size: 16px;
    color: #ffffff;
}

.ab-img img {
    width: 100%;
}


.costomized-head {
    flex: 1;
    min-width: 320px;
}




.costomized-head p.expand {
    max-height: 500px;
}



/* Right Icons List */

.whychooes {
    color: #000;
    padding: 60px 0;
}

.left-align {
    text-align: left;
}

.chooes-div {
    flex: 1;
    min-width: 330px;
    display: grid;
    gap: 25px;
}

.realtime {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 20px;
    border-radius: 10px;
    background: #f7f9ff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.realtime:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.real-content h3 {
    margin-bottom: 6px;
    font-size: 20px;
    color: #122ab2;
}


.ab-div {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    color: #000000;
    padding: 0 0 20px;
}

.ab-icon {
    width: 60px;
    margin-right: 10px;
}

.ab-icon img {
    width: 100%;
    display: block;
    transition: 0.4s ease;
}

.ab-topcont {
    width: 98%;
}

.ab-topcont h2 {
    font-size: 22px;
}

.specialisation .col .ab-icon {
    width: 45px;
    margin-right: 10px;
}

.specialisation .ab-div {
    align-items: center;
    padding: 0;
}

.border-left-1 {
    position: relative;
    padding-left: 25px;
}

.border-left-1::before {
    content: "";
    position: absolute;
    top: -40px;
    left: 0;
    width: 2px;
    height: 118%;
    background: #f3f3f3;
}




.contact-form {
    width: 60%;
    padding: 0 10px;
}

.contact-text {
    width: 100%;
    padding: 20px;
    background: linear-gradient(100deg, #a200ff, #0058ff);
    border-radius: 10px;
    margin: 0rem 0rem 1.5rem;
    color: #fff;
    font-size: 20px;
    box-shadow: 0px 5px 12px #747474;
}

.contact-text .add-div .icon-add svg {
    width: 22px;
    height: 22px;
}


.contact-text .add-div {
    padding: 0.5rem 0;
}

.contact-text .add-div .icon-add {
    width: 50px;
    height: 50px;
    padding: 5px;
    background: linear-gradient(90deg, #000000, #000d25);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border-radius: 100%;
}

.cont-div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px 30px;
}

.contact-col {
    margin: 0 0 0 1rem;
}

.contact-col img {
    width: 100%;
    border-radius: 10px;
    box-shadow: 0px 5px 12px #747474;
}

.butterfly {
    position: absolute;
    top: -63px;
    left: -194px;
    z-index: 999;
    height: 56rem;
}


.flipflop {
    width: 100%;
    height: 600px;
    perspective: 2000px;
}

.flip-inner {
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.8s ease;
    transform-style: preserve-3d;
}

.flipflop:hover .flip-inner {
    transform: rotateY(180deg);
}

/* Common front/back styles */
.flip-front,
.flip-back {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* FRONT */
.flip-front {
    background: #f9f9f9;

}

/* BACK */
.flip-back {
    background: #f9f9f9;
    color: #131313;
    transform: rotateY(180deg);
    text-align: center;
}



/* Responsive */
@media (max-width: 992px) {
    .expreanss {
        grid-template-columns: repeat(2, 1fr);
    }
    
     /* Layout */
    .wrapper {
        flex-direction: column;
        width: 100%;
    }

    .content {
      
        position: relative;
        min-height: auto;
    }

    .main-cont {
        flex-direction: column;
    }
  
    .content-img {
        margin-top: 20px;
    }

    /* Text animation positioning */
    .text { 
        transform: translateY(20px);
    }

    .text.active {
        transform: translateY(0);
    }

    .text h2 {
        font-size: 24px;
        margin-bottom: 15px;
    }

    .text .line {
        font-size: 14px;
    }

    /* Tabs */
    .main-parallax .tabs {
        flex-direction: row;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .main-parallax .tabs::-webkit-scrollbar {
        display: none;
    }

    .main-parallax .tab {
        writing-mode: horizontal-tb;
        font-size: 14px;
        letter-spacing:0px;
        padding: 15px 10px; 
        height: auto;
        white-space: nowrap;
    }

    .about-section::after{display: none;}
}

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


/* Responsive */
@media (max-width: 768px) {
    .cta {
        padding: 60px 20px;
    }

    .cta h2 {
        font-size: 28px;
    }

    .cta p {
        font-size: 16px;
    }
}


.testimonial {
    color: #000;
    text-align: center;
    padding: 3rem 0;
}

.testimonial h2 {
    font-size: 3rem;
    font-weight: normal;
}

.testimonial-bg {
    background: #0A0B2E;
    padding: 2rem;
    color: #fff;
    display: flex;
    gap: 1rem;
    flex-direction: column;
}

.star-icon ul {
    list-style: none;
}

.star-icon ul li {
    display: inline;
    padding: 2px;
}

.star-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.test-content {
    text-align: left;
}

.signature {
    text-align: left;
}

.signature p {
    color: #FFD900;
}

.testimonial .swiper-slide.swiper-slide-active:first-child,
.testimonial .swiper-slide.swiper-slide-next:nth-child(2) {
    transform: translateX(0%);
}


.testimonial .swiper-horizontal {
    height: 25rem;
    margin-top: 0rem;
}


.main-blog {
    background: #F6F6F6;
    padding: 4rem 0;
    color: #000;
}

.blog-container {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.bl-div {
    background: #FFF;
    display: flex;
    width: 100%;
    padding-bottom: 6rem;
    flex-direction: column;
    align-items: center;
}

.blog-img {
    width: 100%;
}

.blog-img img {
    width: 100%;
}


.blog-content {
    width: 90%;
    height: 260px;
    background: #FFF;
    margin: -5rem;
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-between;
}

.date-div {
    display: inline-flex;
    padding: 6px 18px 7px 17px;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #fff;
}


.footer-ribbon {
    display: none;   /* mobile-only image, see home-mobile.css */
}

footer {
    background: url(../images/ribon.png) no-repeat -20rem 20rem #0A0B2E;
    /* padding: 2rem 0 0; */
}


.contact-div {
    background: linear-gradient(90deg, #B51BB5 0%, #F0A400 35.58%, #AC20BC 65.87%, #43D2E0 100%);
    background-size: 400% 400%;
    animation: waveGradient 12s ease infinite;
    /* full-bleed bar: the colour spans the whole screen, the side padding keeps the content
       on the same left/right edges as the rest of the site (--site-width) */
    width: 100%;
    padding: 1rem calc((100% - var(--site-width)) / 2);
    display: flex;
    gap: 5px;
    justify-content: space-between;   /* first item on the left edge, last on the right edge of the 88% */
}

@keyframes waveGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


.add-div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Footer Wrapper */
.footer-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30px;
    padding: 60px 0;
    color: #fff;
}

/* Columns */
.footer-link .colume-4 {
    width: 23%;
    min-width: 250px;
}

/* Desktop: the logo / about column keeps a fixed share, the three link columns size to their
   content and are spread evenly, so the last column ends exactly on the right edge of the
   site width (in line with the contact bar and the social icons). */
@media (min-width: 993px) {
    .footer-link .colume-4 {
        width: auto;
        min-width: 0;
    }

    .footer-link .colume-4:first-child {
        width: 28%;
        min-width: 260px;
    }

    /* Align the three navigation columns with the start of the description
       beneath the MADDS footer logo (100px logo + 28px logo/text gap). */
    .footer-link .colume-4:not(:first-child) {
        padding-top: 128px;
    }
}



/* Headings */
.footer-link .top-head h2 {
    font-size: 30px;
    margin-bottom: 15px;
    color: #fff;
}

/* Footer logo: space between the logo and the description text under it */
.footer-link .top-head .logo {
    margin-bottom: 28px;      /* change this one value to adjust the gap */
}

.footer-link .top-head .logo img {
    display: block;           /* removes the small inline-image gap under the logo */
}

/* Paragraph */
.footer-link .link-list p {
    line-height: 1.6;
    color: #ccc;
}

/* Lists */
.footer-link .link-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-link .link-list ul li {
    margin-bottom: 10px;
    color: #ccc;
    cursor: pointer;
    transition: 0.3s;
}


.footer-link .link-list ul li a {
    color: #ccc;
    text-decoration: none;
    transition: 0.3s;
}

.footer-link .link-list ul li a:hover {
    color: #fff;
    padding-left: 5px;
}


.copy-right {
    border-top: 1px solid #434343;
    padding: 1rem 0;
    /* frosted-glass blur over the footer background */
    background: rgba(10, 11, 46, 0.35);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.social-media {
    display: flex;
    gap: 10px;
}

.icon-social {
    display: flex;
    width: 50px;
    height: 50px;
    padding: 12px;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    border: 4px solid rgba(0, 38, 255, 0.12);
    background: #FFF;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Smooth hover effect */
.icon-social:hover {
    border-color: #b900ff;
    background: #b900ff;
    transform: translateY(-4px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.icon-social:hover svg path {
    fill: #ffffff;
}

.about-us {
    padding: 5rem 0;
    color: #000;
    background-color: #F5F5FF;
}

.container-col {
    max-width: var(--site-width);
    margin: auto;
    padding: 0px;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    position: relative;
}

.about-us .costomized-head {
    text-align: left;
}

.ab-content {
    padding-left: 1rem;
}

.about-list {
    padding: 2rem 0;
}

.about-list ul li {
    position: relative;
    padding-left: 30px;
    /* space for icon */
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #333;
}

.about-list ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 21px;
    height: 21px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21' fill='none'%3E%3Cpath d='M10.5 0L17.9246 3.07538L21 10.5L17.9246 17.9246L10.5 21L3.07538 17.9246L0 10.5L3.07538 3.07538L10.5 0Z' fill='%237311BD'/%3E%3Cpath d='M6.2 11.2L9 13.5L14 7' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    background-size: contain;
    background-repeat: no-repeat;
}

.about-us .costomized-head p {
    padding: 1rem 0;
}

.col-left-right {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
}


.about-contact {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.abt-icon {
    background: #fff;
    padding: 1rem;
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    margin: 10px 0;
}

.about-company {
    color: #000;
    padding: 2rem 0;
    background: url("../images/explore-bg.png") center center no-repeat;
}

.center {
    text-align: center;
}

.cta-video img {
    width: 100%;
}

/* ---------------------------------------------------------
   RESPONSIVE NAVIGATION + HEADER LAYOUT
---------------------------------------------------------- */

/* TABLET & MOBILE */


@media(max-width: 1200px) {
    .nav ul {
        gap: 25px;
    }

    .about-section .container,
    .section .container {
        display: block;
    }




    .cta-width {
        width: 100%;
    }


    .contact-div {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .technologies {
        height: auto;
        padding: 3rem 0;
    }

    .testimonial .swiper-horizontal {
        height: 28rem;
    }




    .blog-content h2 {
        font-size: 1rem;
    }

    .expand-btn {
        padding: 12px 20px;
    }

    .madds-header {
        background: linear-gradient(180deg, rgba(64, 19, 128, 0.62), rgba(64, 19, 128, 0.42));
        margin-bottom: -5px;
    }


}

@media(max-width: 1025px) {

    .nav {
        display: none;
    }

    .tab-list .tab {
        padding: 18px;
        font-size: 18px;
    }

    .tab-list {
        padding: 0;
    }
}

@media(max-width: 992px) {


    .nav {
        display: none;
    }

    .quote-btn {
        display: none;
    }


    .madds-header .container {
        padding: 12px 0px;
    }

    /* compact navbar while scrolled */
    .madds-header.scrolled .container,
    .main-header.scrolled .container {
        padding: 6px 0px;
    }



    .icon-btn {
        width: 38px;
        height: 38px;
        font-size: 18px;
        margin-left: 10px;
    }




    .mega-dropdown {
        padding: 15px 0;
    }

    .mega-columns {
        flex-direction: column;
        gap: 18px;
    }

    .mega-left {
        width: 100%;
        margin-bottom: 15px;
    }

    .about-section .container,
    .section .container {
        display: block;
    }

    .cta-width {
        width: 100%;
    }


    .contact-div {
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .technologies {
        height: auto;
        padding: 3rem 0;
    }

    .testimonial .swiper-horizontal {
        height: 28rem;
    }




    .blog-content h2 {
        font-size: 1rem;
    }

    .expand-btn {
        padding: 12px 20px;
    }

    .madds-header {
        background: linear-gradient(180deg, rgba(64, 19, 128, 0.62), rgba(64, 19, 128, 0.42));
        margin-bottom: -5px;
    }

    .idea-img img {
        width: 100%;
    }

    .hover-card {
        width: 100%;
    }

    .blog-container {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .managed {
        height: 100%;
    }

    .copy-right .container {
        display: block;
    }

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

    .social-media {
        margin-top: 1rem;
        justify-content: center;
    }

    .bl-div {

        margin-bottom: 1rem;
        width: 430px;
    }

    .swiper-slide.swiper-slide-active:first-child,
    .swiper-slide.swiper-slide-next:nth-child(2) {
        transform: translateX(0%);
    }

    .tab-image-icon {
        max-width: 340px;
        display: block;
        margin: 0 auto 20px;
    }

    .spe-content h1 {
        font-size: 3rem;
    }

    .spe-content {
        margin-right: 0;
    }

    .container-col {
        display: block;
    }

    .ab-content {
        padding: 4rem 0;
    }

    .tab-list .tab::after {
        display: none;
    }

    .hover-card h2 {
        font-size: 20px;
    }

    .hover-card p {
        font-size: 10px;
    }

    .cta h2 {
        font-size: 2rem;
    }
}

/* ---------- MOBILE < 768px ---------- */
@media(max-width: 768px) {

    .footer-link {
        flex-direction: column;
        padding: 40px 20px;
    }

    .footer-link .colume-4 {
        width: 100%;
    }

    .madds-header .container {
        padding: 10px 15px;
        justify-content: space-between;
    }

    .logo img {
        height: 42px;
    }

    /* compact navbar while scrolled */
    .madds-header.scrolled .container,
    .main-header.scrolled .container {
        padding: 5px 15px;
    }

    .madds-header.scrolled .logo img,
    .main-header.scrolled .logo img {
        height: 32px;
    }

    .icon-btn {
        width: 34px;
        height: 34px;
        font-size: 16px;
    }

    /* Side menu optimization */
    .side-menu {
        width: 270px;
        right: -300px;
        padding: 25px 20px;
    }

    .side-menu ul li {
        padding: 15px 0;
    }

    .side-menu ul li a {
        font-size: 16px;
    }

    /* Mega menu headings */
    .mega-left h3 {
        font-size: 20px;
    }

    .mega-left h4 {
        font-size: 16px;
    }

    .col a {
        font-size: 14px;
    }


}



@media only screen and (min-width: 769px) {
    .swiper-slide:first-child {
        transition: transform 100ms;
    }

    .swiper-slide:first-child img {
        transition: box-shadow 500ms;
    }

    .swiper-slide:nth-child(2) {
        transition: transform 100ms;
    }



    .swiper[dir="rtl"] .swiper-slide.swiper-slide-active:first-child {
        transform: translateX(-50%);
    }

    .swiper[dir="rtl"] .swiper-slide.swiper-slide-next:nth-child(2) {
        transform: translateX(-55%);
    }

}

/* ---------- SMALL MOBILE < 520px ---------- */
@media(max-width: 520px) {

    .madds-header .container {
        padding: 8px 0px 0px;
    }

    .logo img {
        height: 60px;
    }

    /* compact navbar while scrolled */
    .madds-header.scrolled .container,
    .main-header.scrolled .container {
        padding: 4px 0px 0px;
    }

    .madds-header.scrolled .logo img,
    .main-header.scrolled .logo img {
        height: 44px;
    }

    .icon-btn {
        width: 32px;
        height: 32px;
        font-size: 15px;
    }

    .side-menu {
        width: 240px;
    }

    .side-menu ul li a {
        font-size: 15px;
    }

    .testimonial .swiper-horizontal {
        height: 30rem;
    }

    .tab-image-icon {
        max-width: 300px;
        display: block;
        margin: 0 auto 20px;
    }

    .madds-header {
        background: linear-gradient(180deg, rgba(64, 19, 128, 0.62), rgba(64, 19, 128, 0.42));
        margin-bottom: -7px;
    }

    .bl-div {
        width: 100%;
    }

    .madds-header .container,
    .main-header .container {
        max-width: 98%;
    }

    .tab-list .tab {
        font-size: 1.2rem;
        padding: 1rem 0.5rem;
    }

    .container-div,
    .container-col {
        max-width: 90%;
    }

    .contact-div {
        padding-left: 5%;
        padding-right: 5%;
    }

    .col-left-right {
        display: block;
    }

    .about-company .costomized-head h2 {
        font-size: 2rem;
    }

    .costomized-head span {
        padding-left: 22px;
    }

    .costomized-head span::before {
        width: auto;
    }

    .about-section::after {
        display: none;
    }

    .blog-content {
        height: 200px;
    }


    .background-wrapper .background img {
        float: none;
        width: 100%;
    }

    .section-8 .parallax-content {
        transform: translate3d(0px, 0px, 0px) !important;

    }


}

/* =========================================================
   MADDS TRUSTED INDUSTRIES — isolated styles
   Uses the existing MADDS visual language only.
   ========================================================= */
.madds-trusted {
    position: relative;
    overflow: hidden;
    padding: clamp(3rem, 8vw, 4rem) 0 clamp(4rem, 7vw, 4rem);
    background:
        radial-gradient(circle at 12% 50%, rgba(181, 27, 181, 0.07), transparent 32%),
        radial-gradient(circle at 88% 45%, rgba(67, 210, 224, 0.08), transparent 30%),
        #fff;
    color: #2b0b4f;
}

.madds-trusted__head {
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    text-align: center;
}

.madds-trusted__eyebrow {
    display: inline-block;
    margin-bottom: .75rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .22em;
    color: #7b2aa8;
}

.madds-trusted__head h2 {
    margin: 0;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1.05;
    font-weight: 500;
    letter-spacing: -.035em;
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.madds-trusted__head p {
    max-width: 680px;
    margin: 1rem auto 0;
    color: #6d6380;
    font-size: clamp(.95rem, 1.4vw, 1.08rem);
    line-height: 1.7;
}

.madds-trusted__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* room for the hover lift (-7px) and the card shadow so overflow:hidden
       doesn't clip the top/bottom of the cards; negative margin keeps the layout unchanged */
    padding: 1.5rem 0 2.75rem;
    margin: -1.5rem 0 -2.75rem;
}

.madds-trusted__viewport::before,
.madds-trusted__viewport::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(35px, 9vw, 150px);
    z-index: 2;
    pointer-events: none;
}

.madds-trusted__viewport::before {
    left: 0;
    background: linear-gradient(90deg, #fff 5%, rgba(255,255,255,0) 100%);
}

.madds-trusted__viewport::after {
    right: 0;
    background: linear-gradient(270deg, #fff 5%, rgba(255,255,255,0) 100%);
}

.madds-trusted__track {
    display: flex;
    width: max-content;
    animation: maddsTrustedScroll 34s linear infinite;
}

.madds-trusted__set {
    display: flex;
    gap: 1.25rem;
    padding-right: 1.25rem;
}

.madds-trusted__track:hover {
    animation-play-state: paused;
}

.madds-trusted__card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: clamp(230px, 24vw, 330px);
    min-height: 175px;
    padding: 1.45rem 1.55rem;
    border: 1px solid rgba(181, 27, 181, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 45px rgba(43, 11, 79, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.madds-trusted__card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, rgba(181,27,181,.28), rgba(240,164,0,.12), rgba(67,210,224,.28));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}

.madds-trusted__card:hover {
    transform: translateY(-7px);
    border-color: rgba(123, 42, 168, .28);
    box-shadow: 0 22px 55px rgba(43, 11, 79, .13);
}

.madds-trusted__card span {
    margin-bottom: .8rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .15em;
    color: #B51BB5;
}

.madds-trusted__card .madds-trusted__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 46px;
    height: 46px;
    margin-bottom: .9rem;
    border-radius: 14px;
    color: #B51BB5;
    background: linear-gradient(135deg, rgba(181, 27, 181, .12), rgba(67, 210, 224, .16));
    transition: transform .35s ease, color .35s ease;
}

.madds-trusted__card .madds-trusted__icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.madds-trusted__card:hover .madds-trusted__icon {
    transform: scale(1.08);
    color: #7b2aa8;
}

.madds-trusted__card strong {
    font-size: clamp(1.15rem, 1.7vw, 1.45rem);
    font-weight: 600;
    color: #2b0b4f;
}

.madds-trusted__card small {
    margin-top: .35rem;
    color: #81778e;
    font-size: .78rem;
    line-height: 1.4;
}

.madds-trusted__capabilities {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .65rem;
    width: min(1180px, calc(100% - 2rem));
    margin: 2.5rem auto 0;
}

.madds-trusted__capabilities span {
    padding: .55rem .9rem;
    border: 1px solid rgba(181, 27, 181, .13);
    border-radius: 999px;
    background: rgba(255,255,255,.72);
    color: #6d16a6;
    font-size: .76rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(20, 6, 45, .06);
}

/* --- highlight cards, live pill, labels, trust badges, footer line --- */
.madds-trusted__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
}

.madds-trusted__stat {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.6rem 1.2rem 1.4rem;
    border: 1px solid rgba(181, 27, 181, .13);
    border-radius: 20px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 45px rgba(43, 11, 79, .08);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.madds-trusted__stat:hover {
    transform: translateY(-7px);
    border-color: rgba(123, 42, 168, .28);
    box-shadow: 0 22px 55px rgba(43, 11, 79, .13);
}

.madds-trusted__stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 1rem;
    border-radius: 16px;
    color: #B51BB5;
    background: linear-gradient(135deg, rgba(181, 27, 181, .12), rgba(67, 210, 224, .16));
    transition: transform .35s ease, color .35s ease;
}

.madds-trusted__stat-icon svg { width: 28px; height: 28px; display: block; }
.madds-trusted__stat:hover .madds-trusted__stat-icon { transform: scale(1.08); color: #7b2aa8; }

.madds-trusted__stat strong {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    font-weight: 600;
    color: #2b0b4f;
}

.madds-trusted__stat small {
    margin-top: .3rem;
    color: #81778e;
    font-size: .8rem;
    line-height: 1.4;
}

.madds-trusted__stat em {
    margin-top: .55rem;
    font-style: normal;
    font-size: .8rem;
    font-weight: 600;
    color: #7b2aa8;
}

.madds-trusted__live {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: fit-content;
    max-width: calc(100% - 2rem);
    margin: 1.75rem auto 0;
    padding: .6rem 1.1rem;
    border: 1px solid rgba(181, 27, 181, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .8);
    box-shadow: 0 6px 18px rgba(20, 6, 45, .06);
    color: #2b0b4f;
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}

.madds-trusted__live span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.madds-trusted__live small { color: #7b2aa8; font-size: .76rem; white-space: nowrap; }

.madds-trusted__live-dot {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #12b76a;
    box-shadow: 0 0 0 0 rgba(18, 183, 106, .5);
    animation: maddsTrustedPulse 2s ease-out infinite;
}

.madds-trusted__label {
    margin: clamp(2rem, 4vw, 2.75rem) 0 1.4rem;
    text-align: center;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #81778e;
}

.madds-trusted__capabilities { margin-top: 0; }
.madds-trusted__capabilities + .madds-trusted__badges { margin-top: 2.25rem; }

.madds-trusted__badges {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    width: min(1180px, calc(100% - 2rem));
    margin: 2.25rem auto 0;
}

.madds-trusted__badge {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1rem 1.15rem;
    border: 1px solid rgba(181, 27, 181, .13);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 6px 18px rgba(20, 6, 45, .06);
}

.madds-trusted__badge-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: #B51BB5;
    background: linear-gradient(135deg, rgba(181, 27, 181, .12), rgba(67, 210, 224, .16));
}

.madds-trusted__badge-icon svg { width: 22px; height: 22px; display: block; }
.madds-trusted__badge strong { display: block; font-size: .95rem; font-weight: 600; color: #2b0b4f; }
.madds-trusted__badge small { display: block; margin-top: .15rem; color: #81778e; font-size: .78rem; line-height: 1.35; }

.madds-trusted__foot {
    width: min(1180px, calc(100% - 2rem));
    margin: 1.75rem auto 0;
    text-align: center;
    color: #9a90a6;
    font-size: .92rem;
    line-height: 1.6;
}

/* --- compliance standards cards (replaces the old pill chips) -------------- */
.madds-trusted__standards {
    /* flex (not grid) so an incomplete last row is centred, whatever the number of cards */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
    width: min(1180px, calc(100% - 2rem));
    margin: 0 auto;
}

.madds-trusted__standard {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    flex: 0 0 calc((100% - 3 * 1.25rem) / 4);   /* four per row */
    min-height: 96px;
    box-sizing: border-box;
    padding: 1.25rem 1.15rem;
    text-align: center;
    border: 1px solid rgba(181, 27, 181, .13);
    border-radius: 16px;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 6px 18px rgba(20, 6, 45, .06);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.madds-trusted__standard:hover {
    transform: translateY(-4px);
    border-color: rgba(181, 27, 181, .35);
    box-shadow: 0 16px 34px rgba(20, 6, 45, .1);
}

.madds-trusted__standard strong {
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -.01em;
    color: #2b0b4f;
}

.madds-trusted__standard small {
    color: #81778e;
    font-size: .78rem;
    line-height: 1.45;
}

/* supporting line under the cards */
.madds-trusted__note {
    width: min(760px, calc(100% - 2rem));
    margin: 2.25rem auto 0;
    text-align: center;
    color: #6f6978;
    font-size: .98rem;
    line-height: 1.75;
}

@media (max-width: 900px) {
    .madds-trusted__standards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .madds-trusted__standard { flex: none; }
    /* odd card count: the last card sits centred on its own row */
    .madds-trusted__standard:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - .625rem);
    }
}

@media (max-width: 520px) {
    .madds-trusted__standards { grid-template-columns: 1fr; gap: 1rem; }
    .madds-trusted__standard:last-child:nth-child(odd) { width: auto; justify-self: stretch; }
}

@keyframes maddsTrustedPulse {
    0% { box-shadow: 0 0 0 0 rgba(18, 183, 106, .5); }
    70% { box-shadow: 0 0 0 9px rgba(18, 183, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(18, 183, 106, 0); }
}

@media (max-width: 960px) {
    .madds-trusted__stats,
    .madds-trusted__badges { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .madds-trusted__stats,
    .madds-trusted__badges { grid-template-columns: 1fr; }
}

@keyframes maddsTrustedScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .madds-trusted {
        padding-top: 4rem;
    }

    .madds-trusted__card {
        width: 235px;
        min-height: 165px;
    }

    .madds-trusted__capabilities {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .madds-trusted__track,
    .madds-trusted__live-dot {
        animation: none;
    }
}

/* =========================================================
   MADDS — Interactive Specialisation / capability canvas
   ========================================================= */
.madds-specialisation {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    height: 100vh;
    padding: 0;
    box-sizing: border-box;
    color: #17131f;
    background:
        radial-gradient(circle at 82% 22%, rgba(123, 47, 247, .09), transparent 28%),
        radial-gradient(circle at 12% 82%, rgba(67, 210, 224, .07), transparent 25%),
        #fff;
}
.madds-specialisation::before {
    content: "";
    position: absolute;
    width: 32rem;
    height: 32rem;
    right: -16rem;
    top: 20%;
    border-radius: 50%;
    background: rgba(181, 27, 181, .08);
    filter: blur(90px);
    pointer-events: none;
}
.madds-specialisation__inner {
    width: 88%;
    max-width: none;
    height: 100%;
    min-height: 100%;
    margin: 0 auto;
    display: grid;
    /* intro | image | list  (side tracks equal → the image stays exactly screen-centred) */
    grid-template-columns: minmax(270px, 1fr) minmax(360px, 1.15fr) minmax(270px, 1fr);
    gap: clamp(2rem, 4vw, 5rem);
    align-items: center;
    position: relative;
    z-index: 1;
}
.madds-specialisation__intro { position: sticky; top: 110px; order: 1; }
.madds-specialisation__eyebrow {
    display: inline-flex;
    margin-bottom: 1.25rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .18em;
    color: #7b2ff7;
}
.madds-specialisation__intro h2 {
    margin: 0;
    font-size: clamp(2.8rem, 4.3vw, 5.1rem);
    line-height: .96;
    letter-spacing: -.055em;
    font-weight: 600;
}
.madds-specialisation__intro p {
    max-width: 430px;
    margin: 1.8rem 0 0;
    color: #6f6978;
    font-size: 1rem;
    line-height: 1.8;
}
.madds-specialisation__hint {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 2.4rem;
    color: #77717f;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}
.madds-specialisation__hint-dot, .madds-specialisation__live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: linear-gradient(135deg, #b51bb5, #2677ff);
    box-shadow: 0 0 0 5px rgba(123,47,247,.08);
}
.madds-specialisation__hint-arrow { margin-left: auto; font-size: 1rem; }
.madds-specialisation__directory { border-top: 1px solid rgba(23,19,31,.12); order: 3; }
.madds-specialisation__item {
    position: relative;
    width: 100%;
    height: 72px;
    min-height: 72px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem .1rem;
    border: 0;
    border-bottom: 1px solid rgba(23,19,31,.12);
    background: transparent;
    color: #77717f;
    text-align: right;
    font: inherit;
    font-size: clamp(1.05rem, 1.35vw, 1.42rem);
    letter-spacing: -.02em;
    cursor: pointer;
    transition: color .3s ease, padding-right .35s cubic-bezier(.2,.7,.2,1);
}
.madds-specialisation__item::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #b51bb5, #7b2ff7, #2677ff, #43d2e0);
    transition: width .45s cubic-bezier(.2,.7,.2,1);
}
.madds-specialisation__item:hover,
.madds-specialisation__item:focus-visible,
.madds-specialisation__item.is-active {
    color: #17131f;
    padding-right: .75rem;
    outline: none;
}
.madds-specialisation__item:hover::before,
.madds-specialisation__item:focus-visible::before,
.madds-specialisation__item.is-active::before { width: 58%; }
.madds-specialisation__arrow {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 1.9rem;
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    border: 0;
    border-radius: 0;
    color: #7b2ff7;
    order: -1; /* arrow sits at the left end of the row, nearest the image */
    opacity: 0;
    transform: translate(8px, 4px) scale(-.85, .85); /* mirrored: ↗ becomes ↖, pointing toward the image */
    transition: opacity .3s ease, transform .3s ease, background .3s ease;
}
.madds-specialisation__item:hover .madds-specialisation__arrow,
.madds-specialisation__item:focus-visible .madds-specialisation__arrow,
.madds-specialisation__item.is-active .madds-specialisation__arrow {
    opacity: 1;
    transform: translate(0,0) scale(-1, 1);
}
.madds-specialisation__preview { position: sticky; top: 110px; min-width: 0; order: 2; }
.madds-specialisation__preview-media {
    --mx: 50%; --my: 50%;
    position: relative;
    height: min(64vh, 560px);
    min-height: 460px;
    overflow: hidden;
    border-radius: 30px;
    background: #eeeaf5;
    box-shadow: 0 28px 80px rgba(51,32,85,.14);
    isolation: isolate;
}
.madds-specialisation__preview-media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: radial-gradient(circle 150px at var(--mx) var(--my), rgba(255,255,255,.18), transparent 70%);
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity .3s ease;
}
.madds-specialisation__preview-media:hover::after { opacity: 1; }
.madds-specialisation__preview-media img {
    width: 100%; height: 100%; display: block; object-fit: cover;
    transition: opacity .18s ease, transform .6s cubic-bezier(.2,.7,.2,1), filter .18s ease;
}
.madds-specialisation__preview-media img.is-changing { opacity: .2; filter: blur(5px); }
.madds-specialisation__preview-shine {
    position: absolute; inset: -30%; z-index: 1; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.16) 48%, transparent 61%);
    transform: translateX(-35%) rotate(3deg);
    animation: maddsSpecShine 8s ease-in-out infinite;
}
@keyframes maddsSpecShine { 0%,55%,100% { transform: translateX(-55%) rotate(3deg); } 75% { transform: translateX(55%) rotate(3deg); } }
.madds-specialisation__preview-overlay {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    background: linear-gradient(180deg, rgba(17,10,31,.02) 30%, rgba(17,10,31,.78) 100%);
}
.madds-specialisation__preview-content {
    position: absolute; inset: auto 1.5rem 1.45rem; z-index: 4;
    color: #fff; display: flex; flex-direction: column; justify-content: space-between;
    min-height: 34%;
}
.madds-specialisation__preview-top { display: flex; align-items: center; gap: .55rem; align-self: flex-start; font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; opacity: .82; }
.madds-specialisation__preview-content h3 { margin: 0 0 .8rem; font-size: clamp(1.6rem, 2.5vw, 2.6rem); line-height: 1; letter-spacing: -.04em; }
.madds-specialisation__tags { display: flex; flex-wrap: wrap; gap: .45rem; }
.madds-specialisation__tags span { padding: .42rem .7rem; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.09); backdrop-filter: blur(10px); font-size: .66rem; letter-spacing: .03em; }
.madds-specialisation__preview-bottom { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: center; }
.madds-specialisation__preview > .madds-specialisation__preview-bottom p { margin: 1.15rem 0 0; color: #746e7d; font-size: .92rem; line-height: 1.7; max-width: 560px; }
.madds-specialisation__discover { margin-top: 1.15rem; white-space: nowrap; color: #17131f; font-size: .75rem; font-weight: 700; }
.madds-specialisation__discover b { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-left: .35rem; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#b51bb5,#2677ff); }
@media (max-width: 1100px) {
    .madds-specialisation__inner { grid-template-columns: minmax(250px,.75fr) minmax(320px,1fr); }
    .madds-specialisation__preview { grid-column: 2; }
    .madds-specialisation__directory { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 768px) {
    .madds-specialisation {
        min-height: 100vh;
        height: auto;
        padding: 4rem 0;
    }
    .madds-specialisation__inner { width: min(100% - 2rem, 620px); display: flex; flex-direction: column; gap: 2rem; }
    .madds-specialisation__intro, .madds-specialisation__preview { position: relative; top: auto; }
    .madds-specialisation__intro h2 { font-size: clamp(2.7rem,12vw,4.2rem); }
    .madds-specialisation__intro p { margin-top: 1.25rem; }
    .madds-specialisation__item { min-height: 62px; padding: 1rem 0; font-size: 1.02rem; }
    .madds-specialisation__preview-media { height: min(68vw,360px); min-height: 0; border-radius: 22px; }
    .madds-specialisation__preview-content { inset: auto 1.1rem 1.1rem; }
    .madds-specialisation__preview-bottom { grid-template-columns: 1fr; gap: .4rem; }
    .madds-specialisation__discover { margin-top: .3rem; }
}
@media (prefers-reduced-motion: reduce) {
    .madds-specialisation__item, .madds-specialisation__arrow, .madds-specialisation__preview-media img { transition: none; }
    .madds-specialisation__preview-shine { animation: none; }
}


/* MADDS specialisation typing effect — fixed layout, no hover reflow */
.madds-specialisation__intro h2 .madds-typing-line {
    display: block;
    min-height: 1.15em;
    white-space: nowrap;
    color: #000;
}

/* Text wrapper: extra bottom/right padding so descenders (g, y) and the
   full stop are never clipped, esp. by the gradient's background-clip box */
.madds-specialisation__intro h2 .madds-typing-text {
    display: inline-block;
    padding: 0 .06em .18em 0;
    margin-bottom: -.18em;
    line-height: 1.05;
    color: #000;
    background: none;
}

/* Only "Technology." gets the gradient */
.madds-specialisation__intro h2 .madds-typing-gradient .madds-typing-text {
    background: linear-gradient(90deg, rgba(185, 0, 255, 0.85), rgba(0, 88, 255, 0.85));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* Typing cursor – sits inline right after the text being typed */
.madds-specialisation__intro h2 .madds-typing-cursor {
    display: inline-block;
    width: .06em;
    height: .85em;
    margin-left: .06em;
    vertical-align: -.02em;
    background: #7b2ff7;
    -webkit-text-fill-color: initial;
    animation: maddsTypingCursorBlink .7s steps(1, end) infinite;
}

@keyframes maddsTypingCursorBlink {
    0%, 45% { opacity: 1; }
    46%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .madds-specialisation__intro h2 .madds-typing-cursor { animation: none; opacity: 1; }
}


/* ===== Technologies That Drive Us — compact, script-style heading ===== */
.technologies {
    padding: 4rem 0 3rem;
    height: auto;
}

.technologies .costomized-head h2 {
    font-size: 2.2rem;
    font-weight: normal;
    line-height: 1.25;
    margin: 0 0 .35rem;
}

.technologies .costomized-head p {
    font-size: .95rem;
    line-height: 1.5;
    margin: 0 auto 1.25rem;
    max-width: 640px;
    color: #555;
}

.technologies .swiper-slide img {
    width: 90px;
    height: 90px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .technologies { padding: 2.5rem 0 2rem; }
    .technologies .costomized-head h2 { font-size: 1.8rem; }
    .technologies .swiper-slide img { width: 72px; height: 72px; }
}


/* ===== Fix: industry cards overflowing into the Technologies section =====
   The global .swiper-horizontal rule is position:absolute, so the 500px cards
   took no space inside .managed (a fixed 78vh box) and spilled over what came
   next. Put them back in normal flow so .managed grows to contain them. */
.managed {
    height: auto;
    padding-bottom: 5rem;
}

.managed .swiper-horizontal {
    position: relative;
    height: auto;
}

/* Same problem for the logo slider: keep it in flow so the section sizes to it */
.technologies .swiper-horizontal {
    position: relative;
    margin: 0;
    z-index: auto;
    height: auto;
}


/* ===== Technologies logo strip: full viewport width ===== */
.technologies {
    overflow-x: hidden;
}

.technologies .swiper.mySwiperTech {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
}

/* ===== Technologies logo strip: 10 logos per row — smaller logos, wider gaps ===== */
.technologies .swiper.mySwiperTech .swiper-slide img {
    width: 48px;
    height: 48px;
}

@media (min-width: 769px) {
    .technologies .swiper.mySwiperTech .swiper-slide img {
        width: 64px;
        height: 64px;
    }
}

/* ===== Technologies logo strip: constant-speed auto-scroll =================
   The wrapper's default ease timing made every auto step speed up and slow
   down, so the strip looked jerky. Linear keeps it moving at one steady,
   regular pace (matches the autoplay config in layout/base.html). */
.technologies .swiper.mySwiperTech .swiper-wrapper {
    --swiper-wrapper-transition-timing-function: linear;
    transition-timing-function: linear !important;
}


/* ===== Managed IT services: side arrows ===== */
.managed .swiper-button-next,
.managed .swiper-button-prev {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    border-radius: 50%;
    color: #fff;
    background: rgba(16, 20, 60, .45);
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    cursor: pointer;
    z-index: 20;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.managed .swiper-button-prev { left: 20px; }
.managed .swiper-button-next { right: 20px; }

.managed .swiper-button-next::after,
.managed .swiper-button-prev::after {
    font-size: 18px;
    font-weight: 700;
}

.managed .swiper-button-next:hover,
.managed .swiper-button-prev:hover {
    background: #fff;
    color: #102CBA;
    transform: scale(1.08);
}

@media (max-width: 768px) {
    .managed .swiper-button-next,
    .managed .swiper-button-prev { width: 40px; height: 40px; margin-top: -20px; }
    .managed .swiper-button-prev { left: 10px; }
    .managed .swiper-button-next { right: 10px; }
    .managed .swiper-button-next::after,
    .managed .swiper-button-prev::after { font-size: 14px; }
}


/* ===== Managed IT services: stop leftover slider offsets from squashing cards =====
   Global rules shift the active first-child slide by 30% and the 2nd slide by
   20% (meant for another slider). In this looping strip the first/second DOM
   slides become active after clicking the arrows, so those cards were pushed
   over their neighbours and the gaps disappeared. */
.managed .swiper-slide.swiper-slide-active:first-child,
.managed .swiper-slide.swiper-slide-next:nth-child(2) {
    transform: none;
}


/* ===================================================================
   News & Newsletter section (replaces the old blog section)
   =================================================================== */
.madds-news {
    background: #F6F6F6;
    padding: 4.5rem 0;
    color: #0A0B2E;
    font-family: "Afacad", sans-serif;
}
.madds-news [hidden] { display: none !important; }
.madds-news a { text-decoration: none; color: inherit; }
.madds-news__inner {
    width: var(--site-width);
    /* max-width: 1200px; */
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

/* header */
.madds-news__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
}
.madds-news__eyebrow {
    display: block;
    font-size: 1.1rem;
    letter-spacing: .14em;
    font-weight: 600;
    color: #4A128C;
}
.madds-news__head h2 {
    margin: .5rem 0 0;
    font-size: 3rem;
    font-weight: normal;
    line-height: 1.1;
}
.madds-news__head p {
    margin: .75rem 0 0;
    max-width: 520px;
    font-size: 1.1rem;
    line-height: 1.5;
    color: #55566F;
}
.madds-news__head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
    color: #55566F;
}
.madds-news__ghost {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    min-height: 48px;
    padding: 0 1.5rem;
    box-sizing: border-box;
    border: 1.5px solid #0A0B2E;
    border-radius: 999px;
    font-size: 1.05rem;
    font-weight: 600;
    color: #0A0B2E;
    transition: background .2s, color .2s;
}
.madds-news__ghost i { font-style: normal; }
.madds-news .madds-news__ghost:hover { background: #0A0B2E; color: #fff; }

/* grid: big latest story + up to two compact stories */
.madds-news__grid {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    align-items: stretch;
}
.madds-news__feature,
.madds-news__small {
    transition: transform .3s ease, box-shadow .3s ease;
}
.madds-news__feature:hover,
.madds-news__small:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 48px rgba(16, 44, 186, .22);
}
.madds-news__arrow { display: inline-block; font-style: normal; transition: transform .3s ease; }
.madds-news__feature:hover .madds-news__arrow,
.madds-news__small:hover .madds-news__arrow { transform: translateX(6px); }

.madds-news__feature {
    position: relative;
    overflow: hidden;
    flex: 1.3 1 480px;
    min-width: 0;
    min-height: 420px;
    box-sizing: border-box;
    border-radius: 28px;
    padding: 36px;
    color: #fff;
    background: linear-gradient(135deg, #2D0F62 0%, #102CBA 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}
.madds-news .madds-news__feature { color: #fff; }
.madds-news__ghostnum {
    position: absolute;
    right: -10px;
    bottom: -60px;
    font-size: 320px;
    line-height: 1;
    font-weight: 600;
    color: rgba(255, 255, 255, .1);
    transition: transform .5s ease;
    pointer-events: none;
}
.madds-news__feature:hover .madds-news__ghostnum { transform: translateY(-6px) scale(1.04); }
.madds-news__feature-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.madds-news__feature:hover .madds-news__feature-img { transform: scale(1.04); }
.madds-news__feature-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 11, 46, .35) 0%, rgba(10, 11, 46, .15) 35%, rgba(10, 11, 46, .85) 100%);
    pointer-events: none;
}
.madds-news__meta {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 1rem;
}
.madds-news__pill {
    background: #fff;
    color: #2D0F62;
    border-radius: 999px;
    padding: 4px 14px;
    font-weight: 600;
}
.madds-news__feature-body {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 560px;
}
.madds-news__feature-title {
    font-size: 2.6rem;
    line-height: 1.1;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.madds-news__btn {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 1.5rem;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    color: #0A0B2E;
    font-size: 1.05rem;
    font-weight: 600;
}

/* compact cards */
.madds-news__side {
    flex: 1 1 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.madds-news__small {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: stretch;
    box-sizing: border-box;
    background: #fff;
    border-radius: 24px;
    padding: 16px;
}
.madds-news__tile {
    flex: 0 0 132px;
    min-height: 132px;
    border-radius: 16px;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.madds-news__tile b { font-size: 3.2rem; font-weight: 600; }
.madds-news__tile i { font-style: normal; font-size: 1.1rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 6px; }
.madds-news__tile--a { background: linear-gradient(135deg, #4A128C, #B51BB5); }
.madds-news__tile--b { background: linear-gradient(135deg, #102CBA, #0E7FA8); }
.madds-news__tile--img { position: relative; overflow: hidden; background: #ECEBF5; }
.madds-news__tile--img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.madds-news__small-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 0;
}
.madds-news__small-meta { font-size: .95rem; color: #55566F; }
.madds-news__small-title {
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 500;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.madds-news__more { font-size: 1rem; font-weight: 600; color: #4A128C; }

/* subscribe band */
.madds-news__subscribe {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    box-sizing: border-box;
    background: #fff;
    border-radius: 28px;
    padding: clamp(24px, 4vw, 44px);
    box-shadow: 0 1px 0 rgba(10, 11, 46, .06);
}
.madds-news__subscribe-copy { flex: 1 1 320px; min-width: 0; }
.madds-news__subscribe-copy h3 { margin: 0; font-size: 2rem; font-weight: 500; line-height: 1.15; }
.madds-news__subscribe-copy p { margin: .5rem 0 0; font-size: 1.1rem; line-height: 1.5; color: #55566F; }
.madds-news__subscribe-box { flex: 1 1 420px; max-width: 560px; min-width: 0; }
.madds-news__form label { display: block; margin-bottom: 8px; font-size: 1rem; color: #55566F; }
.madds-news__form-row { display: flex; flex-wrap: wrap; gap: 12px; }
.madds-news__form-row input {
    flex: 1 1 240px;
    min-width: 0;
    height: 54px;
    box-sizing: border-box;
    padding: 0 18px;
    border-radius: 14px;
    border: 1.5px solid #C9CAE0;
    background: #fff;
    color: #0A0B2E;
    font: inherit;
    font-size: 1.1rem;
}
.madds-news__form-row input::placeholder { color: #7C7E9C; }
.madds-news__form-row button {
    height: 54px;
    padding: 0 28px;
    border: 0;
    border-radius: 14px;
    background: #4A128C;
    color: #fff;
    font: inherit;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.madds-news__form-row button:hover { background: #3A0E70; }
.madds-news__form-row button:disabled { opacity: .7; cursor: wait; }
.madds-news__form input:focus-visible,
.madds-news__form button:focus-visible,
.madds-news a:focus-visible,
.madds-news__success button:focus-visible { outline: 3px solid #43D2E0; outline-offset: 3px; }
.madds-news__error { margin-top: 10px; font-size: 1rem; color: #B3123F; }
.madds-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.madds-news__success { display: flex; align-items: center; gap: 16px; }
.madds-news__check {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #4A128C;
    display: flex;
    align-items: center;
    justify-content: center;
}
.madds-news__success strong { display: block; font-size: 1.4rem; font-weight: 500; }
.madds-news__success span { font-size: 1rem; color: #55566F; overflow-wrap: anywhere; }
.madds-news__success button {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    color: #4A128C;
    text-decoration: underline;
    cursor: pointer;
}

/* news page + article */
.madds-news__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; }
.madds-news--page { padding: 4rem 0; }
.madds-news__empty { text-align: center; font-size: 1.2rem; color: #55566F; }
.madds-news__pager { display: flex; align-items: center; justify-content: center; gap: 1.5rem; font-size: 1.05rem; }
.madds-news__pager a { font-weight: 600; color: #4A128C; }
.madds-news__article {
    box-sizing: border-box;
    max-width: 820px;
    width: 100%;
    margin: 0 auto;
    background: #fff;
    border-radius: 28px;
    padding: clamp(24px, 5vw, 56px);
}
.madds-news__article h2 { margin: .5rem 0 1rem; font-size: 2.6rem; font-weight: 500; line-height: 1.15; }
.madds-news__article p { font-size: 1.15rem; line-height: 1.7; color: #33344E; }
.madds-news__article .madds-news__lead { font-size: 1.3rem; color: #0A0B2E; }
.madds-news__back { display: inline-block; margin-top: 1.5rem; font-weight: 600; color: #4A128C; }

@media (max-width: 768px) {
    .madds-news { padding: 3rem 0; }
    .madds-news__head h2 { font-size: 2.2rem; }
    .madds-news__feature { min-height: 340px; padding: 24px; flex-basis: 100%; }
    .madds-news__feature-title { font-size: 2rem; }
    .madds-news__ghostnum { font-size: 220px; bottom: -40px; }
    .madds-news__side { flex-basis: 100%; }
    .madds-news__tile { flex-basis: 96px; min-height: 96px; }
    .madds-news__tile b { font-size: 2.4rem; }
    .madds-news__list { grid-template-columns: 1fr; }
    .madds-news__subscribe-copy h3 { font-size: 1.6rem; }
    .madds-news__article h2 { font-size: 2rem; }
}
@media (prefers-reduced-motion: reduce) {
    .madds-news__feature, .madds-news__small, .madds-news__arrow, .madds-news__ghostnum, .madds-news__feature-img { transition: none; }
}


/* =============================================================================================
   ============================================================================
   RESPONSIVE PATCH — whole website (homepage + inner pages)
   ============================================================================
   Appended to style.css so the site only ever needs this one stylesheet.
   It is the LAST block of the file, so at equal specificity it wins over every
   earlier rule in style.css. The site also loads hero-lens.css / laptop3d.css /
   header-glass.css / about-glass.css / solutions-glass.css AFTER this file, so
   the rules below that touch those components use a `body`-prefixed selector
   (same selector as the original + 1 element) to stay on top of the cascade.

   Breakpoints: 1200 / 1100 / 1024 / 900 / 768 / 560 / 400 px.
   Desktop rules are untouched except where a fixed height/width made the page
   break (those are marked in place).
   ========================================================================================== */

:root {
    --gutter: clamp(1rem, 3.5vw, 2.25rem);
}

/* ---------- 0. GLOBAL SAFETY ------------------------------------------------ */

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

/* IMPORTANT: use `clip`, never `hidden`, here. Any non-visible overflow value on
   <body> turns it into a scroll container, and every `position: sticky` inside it
   then sticks to <body> instead of the viewport — the pinned Solutions panel
   ("stick while the laptop turns") and the sticky Specialisation columns stop
   sticking and simply scroll away. `overflow-x: clip` clips the stray decorative
   bleed without creating a scroll container. */
body {
    overflow-x: clip;
    max-width: 100%;
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

/* long words / links can never stretch a column past the screen */
h1, h2, h3, h4, p, li, a, span, strong, small, em, div {
    overflow-wrap: break-word;
}

@media (max-width: 900px) {

    /* every content container keeps a real gutter instead of a bare % */
    .container,
    .container-div,
    .container-col,
    .wrapper,
    .madds-news__inner,
    .madds-trusted__head,
    .madds-trusted__stats,
    .madds-trusted__badges,
    .madds-trusted__capabilities,
    .madds-trusted__foot {
        max-width: calc(100% - 2 * var(--gutter));
        box-sizing: border-box;
    }
}

/* ---------- 1. HEADER (shared by every page) -------------------------------- */

@media (max-width: 1400px) {

    /* the full nav + quote button overflowed the container between ~1025 and 1400px
       (header-actions ran 25px past the right edge) */
    .nav ul {
        gap: clamp(10px, 1.3vw, 22px);
    }

    .nav ul li > a {
        padding: 0 6px;
        font-size: 15px;
    }

    body header .quote-btn {
        padding: 11px 22px;
        font-size: 15px;
    }

    .header-actions {
        flex-shrink: 0;
        gap: 8px;
    }
}

@media (max-width: 1200px) {

    .madds-header .container {
        gap: 12px;
    }

    body header .logo img {
        height: 78px;
    }
}

@media (max-width: 768px) {

    .madds-header .container,
    .main-header .container {
        padding: 10px 0;
    }

    body header .logo img {
        height: 58px;
        padding-top: 0;
    }

    body header.is-scrolled .logo img,
    body .madds-header.scrolled .logo img,
    body .main-header.scrolled .logo img {
        height: 50px;
    }

    body header .quote-btn,
    body header .icon-btn {
        margin-left: 6px;
    }

    /* off-canvas mobile menu: never wider than the screen */
    body .side-menu {
        width: min(320px, 88vw);
        padding: 18px 16px;
    }

    body .mobile-link {
        font-size: 17px;
        padding: 11px 0;
    }
}

@media (max-width: 400px) {

    body header .quote-btn {
        display: none;
    }

    body header .icon-btn {
        width: 36px;
        height: 36px;
        font-size: 17px;
    }
}

/* ---------- 2. HERO (hero-lens) --------------------------------------------- */

@media (max-width: 820px) {

    body .hl-layer {
        padding-left: max(16px, var(--gutter));
        padding-right: max(16px, var(--gutter));
    }

    body .hl-body {
        gap: 14px;
    }

    body .hl-h1 {
        font-size: clamp(1.75rem, 7.4vw, 2.65rem);
        margin-bottom: 12px;
    }

    body .hl-body p {
        font-size: clamp(15px, 4vw, 17px);
        margin-bottom: 18px;
        max-width: 100%;
    }

    body .hl-btns {
        width: 100%;
        gap: 10px;
    }

    body .hl-btn {
        flex: 1 1 160px;
        text-align: center;
        padding: 12px 18px;
        font-size: 16px;
    }

    body .hl-mock {
        width: 100%;
        max-width: 340px;
        justify-self: start;
    }
}

@media (max-width: 560px) {

    body .hl-h1 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
    }

    body .hl-btn {
        flex: 1 1 100%;
    }
}

@media (max-width: 400px) {

    body .hl-mock {
        height: clamp(120px, 22vh, 170px);
    }
}

/* ---------- 3. TRUSTED INDUSTRIES (home) ------------------------------------ */

@media (max-width: 960px) {

    .madds-trusted__stats,
    .madds-trusted__badges {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {

    .madds-trusted {
        padding: 3.5rem 0 3.75rem;
    }

    .madds-trusted__head {
        margin-bottom: 2rem;
    }

    .madds-trusted__head h2 {
        font-size: clamp(1.85rem, 6.4vw, 2.5rem);
    }

    .madds-trusted__head p {
        font-size: 1rem;
    }

    .madds-trusted__stat {
        padding: 1.35rem 1rem 1.2rem;
    }

    .madds-trusted__stat-icon {
        width: 50px;
        height: 50px;
        margin-bottom: .85rem;
    }

    .madds-trusted__card {
        width: 230px;
        min-height: 160px;
        padding: 1.25rem 1.3rem;
    }

    .madds-trusted__capabilities {
        justify-content: center;
        gap: .55rem;
    }

    .madds-trusted__capabilities span {
        font-size: .73rem;
        padding: .5rem .85rem;
    }

    .madds-trusted__badge {
        padding: .95rem 1rem;
        gap: .75rem;
    }

    .madds-trusted__badge-icon {
        width: 38px;
        height: 38px;
    }

    .madds-trusted__foot {
        font-size: .88rem;
    }
}

@media (max-width: 560px) {

    .madds-trusted__stats,
    .madds-trusted__badges {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
    }

    .madds-trusted__live {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        padding: .6rem 1rem;
        max-width: calc(100% - 2 * var(--gutter));
    }

    .madds-trusted__live span {
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        flex: 1 1 100%;
        text-align: center;
    }

    .madds-trusted__card {
        width: 215px;
    }
}

/* ---------- 4. ABOUT GLASS PANEL (home, about-glass.css) -------------------- */

@media (max-width: 1100px) {

    /* the panel is full-bleed with padding-left: 0 (the flower bleeds off the left
       edge on wide screens). Below 1100 the copy stacks full-width, so give both
       sides the same gutter or the text/cards sit flush against the screen edge. */
    body .ag-panel__inner {
        gap: 1.75rem;
        padding-left: var(--gutter);
        padding-right: var(--gutter);
    }

    body .ag-cards {
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    }

    body .ag-visual {
        min-width: 0;
        max-width: 100%;
    }

    body .ag-stage {
        width: min(100%, 520px);
        margin-inline: auto;
    }
}

@media (max-width: 768px) {

    .about-section {
        padding: 3rem 0;
    }

    body .ag-panel__inner {
        padding: 1.5rem 1.15rem;
        gap: 1.5rem;
    }

    body .ag-stage {
        width: min(92%, 430px);
    }

    body .ag-copy h1 {
        font-size: clamp(1.9rem, 6.2vw, 2.6rem);
    }

    body .ag-copy h2 {
        font-size: clamp(1.12rem, 3.9vw, 1.65rem);
    }

    body .ag-cards {
        gap: 1rem;
    }

    body .ag-stats {
        gap: 1rem 1.4rem;
    }
}

@media (max-width: 560px) {

    /* smaller orbit radius + smaller chips: labels never touch the screen edge */
    body .ag-stage {
        --r: clamp(78px, 26vw, 118px);
        --flower-w: 68%;
        width: min(88%, 380px);
    }

    body .ag-badge__in {
        padding: 0.3rem 0.55rem;
        font-size: 0.64rem;
        letter-spacing: 0;
    }

    body .ag-badge__in i {
        display: none;
    }

    body .ag-butterfly {
        width: 26%;
    }
}

@media (max-width: 400px) {

    body .ag-panel__inner {
        padding: 1.15rem 0.95rem;
    }

    body .ag-badge__in {
        padding: 0.24rem 0.42rem;
        font-size: 0.58rem;
    }
}

/* ---------- 5. INNER-PAGE BANNERS + GENERIC PAGE CONTENT -------------------- */

/* .other-slider is the banner on every inner page (about, services, news …) */
.other-slider {
    height: clamp(220px, 32vw, 380px);
}

.about-hd {
    width: calc(100% - 2 * var(--gutter));
    padding: 0 6px;
    box-sizing: border-box;
}

.about-hd h1 {
    font-size: clamp(1.75rem, 5.2vw, 3rem);
    line-height: 1.15;
}

.text-hd ul li {
    font-size: clamp(.95rem, 2.6vw, 1.1rem);
}

/* stacked columns, headings and cards */
.col-left-right,
.container-col,
.realtime,
.maincontent,
.blog-container {
    flex-wrap: wrap;
}

.chooes-div {
    min-width: 0;
    width: 100%;
}

@media (max-width: 900px) {

    .col-left-right,
    .container-col {
        flex-direction: column;
        gap: 1.5rem;
    }

    .ab-content {
        padding-left: 0;
    }

    .about-company,
    .about-list,
    .whychooes {
        padding: 1.75rem 0;
    }

    .realtime {
        padding: 16px;
        gap: 14px;
    }

    .idea-content {
        width: 100%;
        max-width: none;
    }

    .spe {
        padding: 3.25rem 0;
    }

    .spe-content {
        margin-right: 0;
    }
}

@media (max-width: 768px) {

    .about-content h1 {
        font-size: clamp(1.85rem, 6vw, 2.6rem);
    }

    .about-content h2 {
        font-size: clamp(1.35rem, 4.6vw, 1.9rem);
    }

    .idea-content h1 {
        font-size: clamp(1.85rem, 6vw, 2.6rem);
    }

    .small-hd ul {
        font-size: 1.35rem;
    }

    .expreanss {
        gap: 22px;
        padding: 2.5rem 0 0;
    }

    .expreanss h1 {
        font-size: 1.45rem;
    }

    .about-wrapper {
        padding: 1.5rem;
    }

    .maincontent {
        align-items: flex-start;
    }

    .blog-container {
        margin-top: 2rem;
    }

    .blog-content {
        width: 92%;
        height: auto;
        margin: -3.5rem auto 0;
    }
}

/* ---------- 6. MAIN-PARALLAX TABS ------------------------------------------ */

@media (max-width: 900px) {

    .main-parallax .content {
        padding: 30px 18px;
    }

    .main-parallax .text-cont,
    .main-parallax .content-img {
        width: 100%;
    }

    .main-parallax .text h2 {
        font-size: clamp(1.35rem, 5.6vw, 1.75rem);
    }

    .main-parallax .text .line {
        font-size: 15px;
    }

    .main-parallax .tabs {
        gap: 8px;
    }

    .main-parallax .tab {
        flex: 0 0 auto;
        font-size: 14px;
        padding: 12px 14px;
        letter-spacing: 0;
    }
}

/* ---------- 7. SPECIALISATION (home) --------------------------------------- */

/* was locked to 100vh, which clipped its content on short/narrow screens.
   `overflow: hidden` is replaced by `overflow-x: clip` for the same reason as
   <body> above: `hidden` makes the section a scroll container and breaks the
   `position: sticky` intro / preview columns inside it (they scrolled away and
   ended up cut off at the top of the screen). */
.madds-specialisation {
    height: auto;
    min-height: 100vh;
    padding: clamp(3.5rem, 8vh, 6.5rem) 0;
    overflow-x: clip;
    overflow-y: visible;
}

/* --- "WHAT WE SPECIALISE IN" must NOT move with the scroll -----------------
   The intro and preview columns were `position: sticky`, so the heading followed the
   scroll and (when the sticky track ran out) slid up under the section above. They are
   normal flow now: they stay exactly where they are placed and the page scrolls past. */
.madds-specialisation__intro,
.madds-specialisation__preview {
    position: static;
    top: auto;
    align-self: start;
}

.madds-specialisation__inner {
    height: auto;
    min-height: 0;
    padding: 1.25rem 0;
    box-sizing: border-box;
    max-width: 100%;
    align-items: start;
}

/* columns may always shrink to zero: the 270/360/270px minimums overflowed the
   88%-wide track just above 1100px and pushed the preview past the right edge */
@media (min-width: 1101px) {
    .madds-specialisation__inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 3.25rem);
    }
}

/* --- laptop (and below): smaller images, laid out so nothing overlaps ------ */
@media (max-width: 1560px) {

    /* the capability preview image is the big one — width stays exactly its column,
       height is capped to a share of the screen instead of a fixed 460-560px block
       (a fixed min-height + aspect-ratio made it wider than its column and it hung
       over the neighbouring list) */
    .madds-specialisation__preview-media {
        width: 100%;
        max-width: 100%;
        height: clamp(230px, 36vh, 400px);
        min-height: 0;
        border-radius: 24px;
    }

    .madds-specialisation__preview {
        min-width: 0;
        max-width: 100%;
    }

    /* stack the caption under the text: the "Explore capability" line is nowrap and
       used to sit in a 1fr/auto grid where it pushed into and overlapped the copy */
    .madds-specialisation__preview-bottom {
        grid-template-columns: minmax(0, 1fr);
        gap: .55rem;
    }

    .madds-specialisation__discover {
        margin-top: .15rem;
        white-space: normal;
    }

    .madds-specialisation__preview-content {
        inset: auto 1.15rem 1.15rem;
    }

    .madds-specialisation__preview-content h3 {
        font-size: clamp(1.35rem, 2.2vw, 2.15rem);
    }

    /* capability rows: label and arrow keep their own space, never overlap */
    .madds-specialisation__item {
        gap: 1.15rem;
        padding-right: .25rem;
    }

    .madds-specialisation__item > span:first-child {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .madds-specialisation__arrow {
        flex: 0 0 auto;
        margin: 0 0 0 .25rem;
    }

    /* every content image on inner pages / sections is capped so it cannot dominate
       its column or push neighbours around */
    .content-img img,
    .about-img img,
    .ab-img img,
    .cta-video img,
    .tab-image {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: 40vh;
        object-fit: cover;
        border-radius: 14px;
    }
}

@media (min-width: 901px) and (max-width: 1100px) {
    .madds-specialisation__inner {
        grid-template-columns: minmax(0, .75fr) minmax(0, 1fr);
        gap: clamp(1.25rem, 2.6vw, 2.5rem);
    }
}

/* the typing lines are nowrap, so the type size must always fit its column */
.madds-specialisation__intro h2 {
    font-size: clamp(2.15rem, 3.2vw, 3.6rem);
}

@media (max-width: 1100px) {

    .madds-specialisation__inner {
        gap: clamp(1.5rem, 3vw, 2.5rem);
    }
}

@media (max-width: 900px) {

    .madds-specialisation {
        min-height: 0;
    }

    .madds-specialisation__inner {
        width: min(100% - 2 * var(--gutter), 640px);
    }

    .madds-specialisation__intro h2 {
        font-size: clamp(2rem, 8.4vw, 3.15rem);
    }

    .madds-specialisation__item {
        height: auto;
        min-height: 62px;
        padding: .95rem .15rem;
    }

    .madds-specialisation__preview-media {
        height: min(72vw, 380px);
        min-height: 0;
        border-radius: 22px;
    }
}

@media (max-width: 560px) {

    .madds-specialisation__intro h2 {
        font-size: clamp(1.85rem, 8.6vw, 2.5rem);
    }

    .madds-specialisation__intro p {
        font-size: .95rem;
    }

    .madds-specialisation__preview-content {
        inset: auto 1rem 1rem;
    }

    .madds-specialisation__preview-content h3 {
        font-size: clamp(1.35rem, 5.4vw, 1.9rem);
    }

    .madds-specialisation__tags span {
        font-size: .62rem;
        padding: .35rem .6rem;
    }

    .madds-specialisation__preview-bottom {
        grid-template-columns: 1fr;
        gap: .35rem;
    }

    .madds-specialisation__item {
        font-size: 1rem;
    }
}

/* ---------- 7.x "WHAT WE SPECIALISE IN" — laptop & smaller ------------------
   Requested layout for laptops and every screen below them:
     1. the intro block (WHAT WE SPECIALISE IN / Strategy. Design. Technology. /
        the paragraph / "Explore a capability ↗") sits at the top, centred and
        covering the full width of the section;
     2. the capability image and the capability list move down underneath it and
        sit side by side — image on the left, list on the right.
   Both rows are placed explicitly (grid-row / grid-column) so the older
   placement rules above (the max-width:1100px block) cannot interfere.
   Screens wider than 1560px keep the original "intro | image | list" columns.
   ========================================================================================== */

/* the centred, full-width intro applies to every screen ≤1560px (phones included) */
@media (max-width: 1560px) {

    .madds-specialisation__intro {
        width: 100%;
        max-width: none;
        text-align: center;
    }

    .madds-specialisation__intro p {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
    }

    .madds-specialisation__hint {
        width: fit-content;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .madds-specialisation__hint-arrow {
        margin-left: 0;
    }
}

/* image + list side by side — only where there is room for two columns.
   Below 769px the image and the list stack (image first, list under it) as before,
   because two columns of that content are unreadable on a phone. */
@media (min-width: 769px) and (max-width: 1560px) {

    .madds-specialisation__inner {
        /* the ≤900px rule above caps this container at 640px — too narrow for two
           columns, so it is widened here for the laptop / tablet range */
        width: min(100% - 2 * var(--gutter), 1180px);
        max-width: 100%;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: clamp(1.5rem, 3vw, 3.25rem);
        align-items: start;
    }

    /* row 1 — the intro spans the whole width */
    .madds-specialisation__intro {
        grid-column: 1 / -1;
        grid-row: 1;
        order: 0;
        justify-self: stretch;
    }

    /* row 2, left — the capability image */
    .madds-specialisation__preview {
        grid-column: 1;
        grid-row: 2;
        order: 0;
        align-self: start;
        min-width: 0;
    }

    /* row 2, right — the capability list */
    .madds-specialisation__directory {
        grid-column: 2;
        grid-row: 2;
        order: 0;
        align-self: start;
        min-width: 0;
    }

    /* the list is ~576px tall (8 rows × 72px) — let the image grow towards that so
       the two columns read as one row instead of a short image next to a long list */
    .madds-specialisation__preview-media {
        height: clamp(280px, 46vh, 560px);
    }
}

/* ---------- 8. SOLUTIONS / CUSTOM TABS (home) ------------------------------- */

/* the header block must never be wider than its container */
body section.custom-tabs .costomized-head {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

body section.custom-tabs .tabs-body,
body section.custom-tabs .tab-list-window,
body section.custom-tabs .laptop-stage,
.tabs-container,
.canvas-wrap {
    min-width: 0;
    max-width: 100%;
}

@media (max-width: 1024px) {

    .customized {
        padding: 4rem 0;
    }

    .costomized-head h2 {
        font-size: clamp(1.65rem, 3.6vw, 2.4rem);
    }

    .costomized-head span {
        font-size: clamp(2rem, 4.4vw, 3rem);
    }

    .tab-list {
        padding: 0 1.5rem;
    }
}

@media (max-width: 900px) {

    .customized {
        padding: 3.25rem 0;
    }

    body section.custom-tabs .costomized-head {
        padding: 0 var(--gutter) 1.2vh;
    }

    body section.custom-tabs .costomized-head span {
        font-size: clamp(1.75rem, 8vw, 2.6rem);
    }

    body section.custom-tabs .costomized-head h2 {
        font-size: clamp(1.35rem, 5.4vw, 2rem);
        margin: .25rem 0 .65rem;
    }

    /* horizontal tab strip: start-aligned so it can actually be scrolled
       (justify-content:center on a scroll container hides the first items) */
    body section.custom-tabs .tab-list {
        justify-content: flex-start;
        gap: 18px;
        padding: 0 var(--gutter);
        scroll-padding-inline: var(--gutter);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    body section.custom-tabs .tab-list::-webkit-scrollbar {
        display: none;
    }

    body section.custom-tabs .tab-list .sol-tab {
        font-size: 1.15rem;
        padding: 10px 2px;
    }

    body section.custom-tabs .tab-list-window {
        margin: 0;
        padding: 0 var(--gutter);
    }

    body section.custom-tabs .laptop-stage,
    body section.custom-tabs .canvas-wrap {
        width: 100%;
        max-width: 100%;
    }

    body section.custom-tabs .sol-detail {
        padding: 6px var(--gutter) 10px;
    }

    /* generic (non-3d) tabbed block */
    .tabs-container {
        display: block;
    }

    .tab-list {
        width: 100%;
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        padding: 0 var(--gutter);
    }

    .tab-list .tab {
        flex: 0 0 auto;
        font-size: 1.15rem;
        padding: 12px 10px;
    }
}

@media (max-width: 560px) {

    body section.custom-tabs .tab-list .sol-tab,
    .tab-list .tab {
        font-size: 1.02rem;
    }

    .expand-btn {
        padding: 11px 22px;
        font-size: .95rem;
    }
}

/* ---------- 9. MANAGED IT SERVICES (home) ----------------------------------- */

.managed .swiper-horizontal {
    position: relative;
    height: auto;
    margin: 2.5rem 0 0;
}

@media (max-width: 900px) {

    .managed {
        padding: 3.5rem 0 4.25rem;
    }

    .managed .costomized-head h2 {
        font-size: clamp(1.55rem, 5.8vw, 2.35rem);
    }

    .managed .costomized-head p {
        font-size: .98rem;
    }

    .hover-card {
        height: 420px;
        margin: 0 6px;
    }
}

@media (max-width: 560px) {

    .hover-card {
        height: 380px;
        margin: 0;
    }

    .hover-card h2 {
        font-size: 1.45rem;
    }

    .hover-card-overlay p {
        font-size: .92rem;
        line-height: 1.5;
    }
}

/* ---------- 10. TECHNOLOGIES (home) ----------------------------------------- */

@media (max-width: 900px) {

    .technologies {
        height: auto;
        padding: 3rem 0 2.25rem;
    }

    .technologies .costomized-head h2 {
        font-size: clamp(1.5rem, 5.6vw, 2.1rem);
    }

    .technologies .costomized-head p {
        font-size: .95rem;
    }
}

/* ---------- 11. CTA BANNERS (home + inner pages) ---------------------------- */

.cta,
.cta-about {
    padding: clamp(3.75rem, 8vw, 8rem) var(--gutter);
}

.cta h2,
.cta-about h2 {
    font-size: clamp(1.95rem, 5.2vw, 4rem);
}

.cta p,
.cta-about p {
    font-size: clamp(1rem, 2.1vw, 1.35rem);
}

@media (max-width: 900px) {

    .cta-width,
    .cta-about-width {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {

    .cta,
    .cta-about {
        padding: 3.5rem var(--gutter);
    }

    .cta h2,
    .cta-about h2 {
        margin-bottom: 14px;
    }

    .cta-btn {
        padding: 13px 34px;
    }
}

/* ---------- 12. TESTIMONIALS (home) ----------------------------------------- */

/* the slider was absolutely positioned with a fixed height, so the section
   didn't grow around it and the next section drifted into it */
.testimonial .swiper,
.testimonial .swiper-horizontal {
    position: relative;
    height: auto;
    margin: 1.5rem 0 0;
}

.testimonial .swiper-slide {
    height: auto;
}

.testimonial-bg {
    height: 100%;
    box-sizing: border-box;
}

.testimonial h2 {
    font-size: clamp(1.95rem, 5vw, 3rem);
}

@media (max-width: 900px) {

    .testimonial {
        padding: 2.5rem 0;
    }

    .testimonial-head p {
        font-size: 1rem;
        line-height: 1.5;
    }

    .testimonial-bg {
        padding: 1.35rem;
    }

    .test-content p {
        font-size: .98rem;
    }
}

/* ---------- 13. NEWS (home + /news/ + article pages) ------------------------ */

@media (max-width: 768px) {

    .madds-news {
        padding: 3rem 0;
    }

    .madds-news--page {
        padding: 2.5rem 0;
    }

    .madds-news__inner {
        gap: 1.75rem;
    }

    .madds-news__head {
        gap: 1rem;
    }

    .madds-news__head h2 {
        font-size: clamp(1.85rem, 6.4vw, 2.25rem);
    }

    .madds-news__head p {
        font-size: 1.02rem;
    }

    .madds-news__feature {
        min-height: 340px;
        padding: 24px 20px;
        flex-basis: 100%;
        gap: 24px;
    }

    .madds-news__feature-title {
        font-size: clamp(1.5rem, 5.6vw, 2rem);
    }

    .madds-news__ghostnum {
        font-size: clamp(120px, 40vw, 220px);
        right: -6px;
        bottom: -30px;
    }

    .madds-news__small {
        flex-direction: column;
        padding: 14px;
    }

    .madds-news__tile {
        flex: 0 0 auto;
        width: 100%;
        min-height: 120px;
    }

    .madds-news__small-body {
        padding: 6px 4px 8px;
    }

    .madds-news__subscribe {
        gap: 1.25rem;
        padding: 1.5rem;
        border-radius: 22px;
    }

    .madds-news__subscribe-copy h3 {
        font-size: 1.45rem;
    }

    .madds-news__subscribe-copy p {
        font-size: 1rem;
    }

    .madds-news__form-row {
        flex-direction: column;
    }

    .madds-news__form-row input,
    .madds-news__form-row button {
        flex: none;
        width: 100%;
    }

    .madds-news__list {
        grid-template-columns: 1fr;
    }

    .madds-news__article h2 {
        font-size: clamp(1.65rem, 5.6vw, 2rem);
    }

    .madds-news__article p {
        font-size: 1.05rem;
    }
}

@media (max-width: 420px) {

    .madds-news__head-actions {
        width: 100%;
        gap: .75rem;
    }

    .madds-news__ghost {
        padding: 0 1.15rem;
        font-size: .98rem;
    }

    .madds-news__feature-title {
        font-size: 1.45rem;
    }
}

/* ---------- 14. CONTACT PAGE ----------------------------------------------- */

.cont-div {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 900px) {

    .cont-div {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
    }

    .contact-form {
        width: 100%;
        padding: 0;
    }

    .contact-col {
        margin-left: 0;
    }

    .contact-text {
        font-size: 17px;
        padding: 16px;
        margin-bottom: 1.25rem;
    }

    .contact-text .add-div .icon-add svg {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 560px) {

    .form-group input,
    .form-group select,
    .form-group textarea {
        padding: 13px 10px;
    }

    .submit-btn {
        padding: 15px 18px;
    }

    .modal-box {
        width: min(92vw, 420px);
        padding: 26px 20px;
    }

    .modal-box h2 {
        font-size: 1.55rem;
        padding: 12px 0;
    }
}

/* ---------- 15. FOOTER (shared by every page) ------------------------------- */

@media (max-width: 992px) {

    .footer-link {
        padding: 42px 0;
        gap: 26px;
    }

    .footer-link .colume-4 {
        width: 100%;
        min-width: 0;
    }

    .footer-link .top-head h2 {
        font-size: 26px;
    }
}

@media (max-width: 900px) {

    .contact-div {
        padding: 1rem var(--gutter);
        gap: 12px 16px;
    }
}

@media (max-width: 560px) {

    .contact-div {
        flex-direction: column;
        align-items: flex-start;
    }

    .add-div {
        width: 100%;
    }

    .footer-link {
        padding: 34px 0;
    }
}

/* ---------- 16. TOUCH / REDUCED MOTION -------------------------------------- */

@media (hover: none) {

    .madds-trusted__track:hover {
        animation-play-state: running;
    }

    body .ag-tip {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .madds-trusted__track,
    .madds-trusted__live-dot,
    .cta,
    .cta-about,
    .madds-specialisation__preview-shine,
    .madds-specialisation__intro h2 .madds-typing-cursor {
        animation: none !important;
    }
}

/* ---------- 17. MAIN-PARALLAX (home) — full-screen glass layout -----------
   "Idea Behind MADDS": the section fills the whole screen (100vw x 100vh).

   The 8 vertical columns are the section's navigation:
     • clicking a column on the right slides it to the LEFT END of the section
       (it joins the columns already parked there),
     • the MIDDLE panel shows that column's content,
     • clicking a column parked on the left sends it back to its ORIGINAL
       position in the row on the right.

   The middle panel can never sit over the columns: the left group and the right
   row each reserve exactly one column slot per column (widths below, driven by
   the `--madds-parked` counter that js/script.js updates), so the middle panel
   keeps its width and simply SLIDES sideways by one slot for every column that
   slides to the left. Both group widths share the same transition, so the slide
   is smooth and the panel always stays exactly between the two groups.

   Every column is a transparent, blurred glass strip.
   Structural rules are limited to (min-width: 769px) so the stacked phone layout
   keeps working; the glass look itself applies at every size.
   ========================================================================================== */

.main-parallax {
    /* one column … */
    --madds-col-w: clamp(40px, 4.2vw, 84px);
    --madds-col-gap: .75rem;
    /* … plus the gap that follows it = one slot */
    --madds-col-slot: calc(var(--madds-col-w) + var(--madds-col-gap));
    /* number of columns parked at the left end (set by script.js) */
    --madds-parked: 0;

    /* the navbar is fixed over the page and would hide the top of this section,
       so its measured height (header-glass.js sets --hdr-compact on <html>) is
       reserved at the top: the content runs from just below the navbar to the
       bottom of the screen — the section height is "screen minus navbar" */
    padding-top: var(--hdr-compact, 64px);
}

/* transparent + blurred (glass) columns — all of them, at every size.
   (`.main-parallax .tabs .tab` is one specificity step above the older
   `.main-parallax .tab:nth-child(n)` gradient, so this really replaces it.) */
.main-parallax .tabs .tab,
.main-parallax .parallax-rail .tab {
    color: #5f5f5f93;
    background: linear-gradient(165deg, rgba(243, 241, 241, 0.39), rgba(50, 34, 156, 0.322));
    /* border: 1px solid rgba(255, 255, 255, .34); */
    border-radius: 20px;
    box-shadow: 0 18px 45px rgba(12, 18, 60, .18);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.main-parallax .tabs .tab.active,
.main-parallax .parallax-rail .tab.active {
    filter: none;
    background: linear-gradient(165deg, rgba(146, 76, 255, .38), rgba(20, 110, 255, .26));
    border-color: rgba(255, 255, 255, .58);
    box-shadow: 0 22px 55px rgba(60, 40, 190, .28);
}

/* the middle panel is glass too, so the parallax background shows through */
.main-parallax .content {
    background: rgba(241, 240, 240, 0.26);
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 26px;
    box-shadow: 0 26px 70px rgba(12, 18, 60, .18);
    backdrop-filter: blur(22px) saturate(150%);
    -webkit-backdrop-filter: blur(22px) saturate(150%);
}

@media (min-width: 769px) {

    /* 1. full height of the screen view + full width. `box-sizing: border-box`
          keeps the total at exactly 100vh while the top padding (the navbar
          clearance set above) is taken out of it — so the columns, the middle
          panel and the row all sit BELOW the navbar instead of under it. */
    .main-parallax {
        width: 100%;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        box-sizing: border-box;
        overflow: hidden;
    }

    .main-parallax .wrapper {
        width: 100%;
        max-width: none;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: stretch;
        gap: var(--madds-col-gap);
        padding: clamp(1rem, 2.2vh, 2rem) clamp(1rem, 2vw, 2.25rem);
    }

    /* 2. LEFT END — one slot per parked column. The width is what pushes the
          middle panel along, so it transitions in step with the slide. */
    .main-parallax .parallax-rail {
        flex: 0 0 auto;
        width: calc(var(--madds-parked) * var(--madds-col-slot));
        min-width: 0;
        display: flex;
        justify-content: flex-start;
        gap: var(--madds-col-gap);
        transition: width .65s cubic-bezier(.22, .61, .36, 1);
    }

    /* 3. RIGHT — one slot per column still in the row (8 - parked). The row is
          packed against the right edge, so the remaining columns keep their
          place while the row closes up. */
    .main-parallax .tabs {
        flex: 0 0 auto;
        width: calc((8 - var(--madds-parked)) * var(--madds-col-slot));
        min-width: 0;
        display: flex;
        justify-content: flex-end;
        gap: var(--madds-col-gap);
        transition: width .65s cubic-bezier(.22, .61, .36, 1);
    }

    /* every column keeps the same size in both groups — only its place changes */
    .main-parallax .parallax-rail .tab,
    .main-parallax .tabs .tab {
        flex: 0 0 var(--madds-col-w);
        min-width: 0;
        height: 100%;
        padding: 20px 8px;
        font-size: clamp(13px, 2.55vh, 25px);
        font-weight: bold;
        letter-spacing: clamp(1px, .35vh, 5px);
        line-height: 1.15;
        white-space: nowrap;
        overflow: hidden;
    }

    /* 4. MIDDLE — the content of the selected column. `flex: 1` fills exactly
          what is left between the two column groups: its width stays constant
          and it slides sideways as columns move to the left end (or back). */
    .main-parallax .content {
        flex: 1 1 auto;
        min-width: 0;
        padding: 0;
        overflow: hidden;
    }

    .main-parallax .text {
        inset: clamp(1.15rem, 2.6vw, 3.25rem);
        align-items: center;
        gap: clamp(1.25rem, 2.6vw, 3.25rem);
    }

    .main-parallax .text-cont,
    .main-parallax .content-img {
        width: auto;
        flex: 1 1 0;
        min-width: 0;
    }

    .main-parallax .text h2 {
        font-size: clamp(1.45rem, 2.5vw, 2.35rem);
    }

    .main-parallax .text .line {
        font-size: clamp(.92rem, 1.05vw, 1.06rem);
    }

    /* the image must never push the slide out of the 100vh panel */
    .main-parallax .content-img img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: min(52vh, 480px);
        object-fit: contain;
    }
}

/* short screens: the columns must not outgrow the viewport with their vertical
   text, so the type is capped against the screen height as well */
@media (min-width: 769px) and (max-height: 620px) {

    .main-parallax .parallax-rail .tab,
    .main-parallax .tabs .tab {
        padding: 14px 6px;
        letter-spacing: 1px;
    }
}
/* Laptop: keep specialisation intro, preview and compact list on one row. */
@media (min-width: 901px) and (max-width: 1560px) {
    .madds-specialisation__inner {
        width: min(94%, 1440px);
        grid-template-columns: minmax(0, .95fr) minmax(0, 1.1fr) minmax(0, .95fr);
        gap: clamp(1rem, 2vw, 2.25rem);
        align-items: center;
    }
    .madds-specialisation__intro {
        grid-column: 1;
        grid-row: 1;
        order: 1;
        text-align: left;
        align-self: center;
    }
    .madds-specialisation__intro h2 {
        font-size: clamp(1.7rem, 2.65vw, 3.15rem);
    }
    .madds-specialisation__intro p {
        margin-left: 0;
        margin-right: 0;
        font-size: clamp(.82rem, 1vw, .98rem);
    }
    .madds-specialisation__preview {
        grid-column: 2;
        grid-row: 1;
        order: 2;
        align-self: center;
    }
    .madds-specialisation__directory {
        grid-column: 3;
        grid-row: 1;
        order: 3;
        align-self: center;
    }
    .madds-specialisation__item {
        height: clamp(45px, 4.2vw, 58px);
        min-height: 0;
        padding: .55rem .1rem;
        gap: .35rem;
        font-size: clamp(.78rem, 1.05vw, 1rem);
    }
    .madds-specialisation__preview-media {
        height: clamp(260px, 36vh, 430px);
    }
}

/* ---------- Specialisation (home) — laptop: image as tall as the list, intro at the top -----------
   Laptops (901–1560px) show three columns: intro | capability image | capability list.
     • the image now stretches to exactly the height of the list (top edge to bottom edge) instead of
       being a fixed 260–430px block floating in the middle;
     • the "Strategy. Design. Technology." intro is pinned to the top of the row, so it lines up with
       the top of the image and of the list.
   How: .madds-specialisation__preview becomes display: contents, so its two children (the image and
   the caption) are grid items of the section grid. Row 1 holds intro | image | list and is as tall as
   the list; row 2 holds only the caption under the image. The extra class in the selectors beats the
   !important height rules in sections-snap.css (short-screen block). */
@media (min-width: 901px) and (max-width: 1560px) {
    .madds-specialisation .madds-specialisation__inner {
        grid-template-rows: auto auto;
        row-gap: 0;
        align-items: start;
    }

    .madds-specialisation .madds-specialisation__intro {
        grid-column: 1;
        grid-row: 1;
        align-self: start;
    }

    .madds-specialisation .madds-specialisation__directory {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }

    .madds-specialisation .madds-specialisation__preview {
        display: contents;
    }

    .madds-specialisation .madds-specialisation__preview-media {
        grid-column: 2;
        grid-row: 1;
        align-self: stretch;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
    }

    /* the picture fills the stretched box instead of deciding its height */
    .madds-specialisation .madds-specialisation__preview-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .madds-specialisation .madds-specialisation__preview-bottom {
        grid-column: 2;
        grid-row: 2;
        align-self: start;
    }
}

/* ===== Home technologies → CTA transition ================================
   The logo carousel now visually hands off into the full-width Growth CTA. */
.technologies {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #faf8fd 0%, #f2edf9 62%, #ece5f7 100%);
}

.technologies .swiper.mySwiperTech {
    position: relative;
    padding: 1.15rem 0 1.25rem;
    background:
        radial-gradient(520px 150px at 18% 50%, rgba(180, 62, 222, .18), transparent 68%),
        radial-gradient(520px 150px at 82% 50%, rgba(72, 111, 255, .17), transparent 68%),
        linear-gradient(100deg, #2a1654 0%, #321d62 52%, #252362 100%);
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.technologies .swiper.mySwiperTech::before,
.technologies .swiper.mySwiperTech::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(44px, 7vw, 120px);
    z-index: 2;
    pointer-events: none;
}

.technologies .swiper.mySwiperTech::before {
    left: 0;
    background: linear-gradient(90deg, #2a1654, transparent);
}

.technologies .swiper.mySwiperTech::after {
    right: 0;
    background: linear-gradient(270deg, #252362, transparent);
}

.technologies .swiper.mySwiperTech .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
}

.technologies .swiper.mySwiperTech .swiper-slide img {
    border-radius: 16px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 8px 20px rgba(8, 7, 31, .18);
}