/* Local Font-Face declarations from project's Fonts folder */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('Fonts/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('Fonts/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('Fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('Fonts/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('Fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    /* ExtraBold */
    font-style: normal;
}

@font-face {
    font-family: 'loos-normal-regular';
    src: url('Fonts/loos-normal-regular.otf') format('opentype');
    font-weight: 700;
    /* ExtraBold */
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('Fonts/Montserrat-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

section[id],
footer[id] {
    scroll-margin-top: 90px;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow-x: hidden;
}

/* ========== REVEAL SCROLL ANIMATIONS ========== */
.reveal {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.reveal.fade-in {
    transform: scale(0.97);
}

.reveal.slide-up {
    transform: translateY(40px);
}

.reveal.slide-left {
    transform: translateX(-40px);
}

.reveal.slide-right {
    transform: translateX(40px);
}

.reveal.active {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* ========== INTERACTIVE HOVERS & SMOOTH TRANSITIONS ========== */
.nav-links a,
.btn-show-me,
.tab,
.profileImg,
.logos img,
.footer-nav a,
.menu-toggle .bar {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Navbar Links Hover */
.nav-links a:hover {
    color: #274E9E;
}

/* Hero Button Hover */
.btn-show-me:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(225, 200, 34, 0.45);
    filter: brightness(1.06);
}

.btn-show-me img {
    transition: transform 0.3s ease;
}

.btn-show-me:hover img {
    transform: translateX(6px);
}

/* Quote wrapper lift effect */
.next-level-image-wrapper {
    transition: transform 0.4s ease;
}

.next-level-image-wrapper:hover {
    transform: translateY(-5px);
}

/* Tab selector hover */
.tab:not(.active-tab):hover {
    color: #1D3A75;
    background-color: rgba(39, 78, 158, 0.08);
    border-radius: 8px;
}

/* About Card & Profile Zoom */
.aboutCard:hover .profileImg {
    transform: scale(1.02);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
}

/* Client logos hover effect */


.logos img:hover {
    transform: scale(1.06);
    filter: grayscale(0) opacity(1);
}

/* Footer link hover */
.footer-nav a:hover {
    color: #274E9E;
    font-weight: 700;
}

/* ========== MOBILE MENU HAMBURGER ========== */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 1001;
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: #001726;
    border-radius: 10px;
}

.menu-toggle.active .bar:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
    transform: translateY(-9px) rotate(-45deg);
}


/* Navbar */
.navbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 15.25px 150.5px 14.75px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background-color: #FFFFFF;
}

.nav-links {
    display: flex;
    gap: 78px;
}

.nav-links a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 24px;
    letter-spacing: -0.36px;
    text-align: center;
    vertical-align: middle;
    color: #001726;
    text-decoration: none;
}

.hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-left: 20px;
    padding-right: 20px;
}

/* Hero Section */
.hero {
    background: linear-gradient(180deg, rgba(29, 58, 117, 0) 0%, #1D3A75 100%), url('Images/herobg.webp') no-repeat center center;
    background-size: cover;
    padding-top: 227px;
    padding-bottom: 137px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 28px;
    line-height: 120%;
    letter-spacing: 0.28em;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #FFFFFF;
    margin-bottom: 55px;
}

.hero-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 88px;
    line-height: 102px;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    color: #FFFFFF;
    margin-bottom: 75px;
}

.hero-title span {
    color: #E1C822;
}

.btn-show-me {
    background: linear-gradient(148.76deg, #EEDD69 19.5%, #E1C822 99.29%);
    height: 68px;
    padding: 0 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 8px;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 25.09px;
    line-height: 35.42px;
    vertical-align: middle;
    color: #1E1E1E;
    text-decoration: none;
    border: none;
}

.arrow {
    width: 25px;
    height: 25px;
}

/* Next Level Learning Section */
.next-level {
    position: relative;
}

.next-level-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url("Images/Ellipse.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom left;
    width: 600px;
    height: 600px;
    z-index: 0;
}

.next-level-container {
    padding: 52px 142px 50px 110px;
    display: flex;
    align-items: center;
    gap: 60px;
    position: relative;
    z-index: 1;
}

.next-level-image-wrapper {
    position: relative;
    flex: 1;
    background-image: url("Images/nextlevel.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: clamp(420px, 28.6vw, 550px);
    border-radius: 12px;
    box-shadow: 0px 8px 25px rgba(0, 0, 0, 0.12);
}

.quote-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(90%, 100%);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 clamp(8px, 1.5vw, 16px);
}

.quote-text {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-style: italic;
    font-size: 34px;
    line-height: 48px;
    text-align: center;
    vertical-align: middle;
    text-transform: lowercase;
    text-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.75);
    color: #FFFFFF;
    margin-bottom: clamp(24px, 3.1vw, 60px);
    padding: clamp(12px, 2vw, 32px);
    width: 100%;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.quote-author {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    letter-spacing: 0.1em;
    text-align: center;
    vertical-align: middle;
    text-transform: capitalize;
    color: #EEDD69;
    text-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.65);
    position: absolute;
    bottom: clamp(16px, 1.56vw, 30px);
    max-width: 100%;
    padding: 0 clamp(12px, 2vw, 24px);
}

.next-level-text {
    flex: 1;
    min-width: 0;
}

.next-level-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 25px;
    line-height: 120%;
    letter-spacing: 0.28em;
    vertical-align: middle;
    text-transform: uppercase;
    color: #3761B7;
    margin-bottom: 22px;
}

.next-level-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 120%;
    vertical-align: middle;
    color: #000000;
    margin-bottom: 38px;
}

.next-level-desc {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 300;
    font-size: 20px;
    line-height: 158%;
    vertical-align: middle;
    color: #545454;
    margin-bottom: 38px;
}

.logos-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: clamp(24px, 3.1vw, 60px);
}

.logos-row img {
    height: auto;
    width: auto;
    max-height: clamp(55px, 5.2vw, 100px);
    max-width: min(100%, clamp(140px, 23vw, 442px));
    object-fit: contain;
    flex-shrink: 1;
}

/* What We Do Section */
.what-we-do {
    padding: 69px 183px 85px;
    background-color: #274E9E17;
}

.services-subtitle {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 25px;
    line-height: 120%;
    letter-spacing: 0.28em;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    color: #3761B7;
    margin-bottom: 22px;
}

.services-title {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 120%;
    text-align: center;
    vertical-align: middle;
    color: #000000;
    margin-bottom: 54px;
}

.tabs-container {
    height: 78px;
    background: #FFFFFF;
    border: 1px solid rgba(26, 112, 255, 0.18);
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 40px auto;
    width: fit-content;
    border-radius: 8px;
}

.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 20px;
    width: 280px;
    height: 100%;
    cursor: pointer;
}

.active-tab {
    background: linear-gradient(148.76deg, #3761B7 19.5%, #1D3A75 99.29%);
    height: 65px;
    width: 280px;
    border-radius: 8px;
    border: 1px solid rgba(35, 35, 35, 0.32);
    color: #FFFFFF;
}

.unactive-tab {
    color: #545454;
    background: transparent;
}

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

    padding: 17px 17.5px 16px 43.5px;
    background: #FFFFFF;
    border: 1.06px solid #EBEBEB;
    box-shadow: 0px 4.25px 15.95px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    gap: 30px;
}

/* LEFT CONTENT */
.active-content {
    max-width: 60%;
}

/* TITLE */
.active-content .title {
    font-family: 'loos-normal-regular', sans-serif;
    font-weight: 700;
    font-size: 52px;
    line-height: 1.2;
    letter-spacing: -0.77px;
    margin-bottom: 32px;
    padding: 5px 0;
    /* Add slight padding to prevent clipping with background-clip text */

    background: linear-gradient(148.76deg, #3761B7 19.5%, #1D3A75 99.29%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* LIST */
.active-content ul {
    padding: 0;
    margin: 0;
    padding-left: 32px;
    list-style: disc;
    list-style-position: outside;
}

.active-content ul li {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 400;
    font-size: 26px;
    line-height: 50px;
    color: #1E1E1E;
    padding-left: 6px;
}

.active-content ul li::marker {
    color: #1E1E1E;
    font-size: 0.7em;
}

/* IMAGE */
.activecontactdiv img {
    width: 620px;
    height: 385px;
    object-fit: cover;
    border-radius: 10px;
}






.aboutSection {
    padding: 63px 95px 71px;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* ABOUT TAG */
.aboutTag {
    font-weight: 800;
    font-size: 25px;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-align: center;
    color: #3761B7;
    margin-bottom: 22px;
}

/* HEADING */
.aboutHeading {
    font-weight: 700;
    font-size: 52px;
    line-height: 120%;
    text-align: center;
    color: #000;
    margin-bottom: 67px;
}

/* CARDS WRAPPER */
.aboutCards {
    display: flex;
    justify-content: space-between;
    gap: 60px;
    margin-top: 130px;
}

/* SINGLE CARD */
.aboutCard {
    position: relative;
    width: 100%;
}

/* BLUE GRADIENT BAR */
.gradientBar {
    height: 158px;
    width: 100%;
    background: linear-gradient(148.76deg, #3761B7 19.5%, #1D3A75 99.29%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 393px;
}

/* IMAGE */
.profileImg {
    position: absolute;
    left: 0;
    bottom: -35px;
    width: 363px;
    height: 403px;
    object-fit: cover;
    z-index: 2;
    margin-left: 10px;
}

/* TEXT AREA */
.textBox {
    padding-left: 393px;
    padding-top: 20px;
}

/* NAME */
.name {
    font-size: 40px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

/* ROLE */
.role {
    font-size: 24px;
    font-weight: 700;
    color: #E1C822;
    line-height: 1.2;
    letter-spacing: 2px;
}

/* DESCRIPTION */
.desc {
    font-size: 18px;
    font-weight: 300;
    line-height: 158%;
    color: #545454;
}




.clientsSection {
    min-height: 204px;
    height: auto;
    padding: 36.99px 0px 33.01px 82px;
    background: linear-gradient(148.76deg, #3761B7 19.5%, #1D3A75 99.29%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    flex-wrap: nowrap;
}

/* HEADING */
.clientsHeading {
    font-size: 72px;
    font-weight: 600;
    color: #fff;
    line-height: 1.1;
    flex-shrink: 0;
}

.clientsHeading span {
    color: #EEDD69;
}

/* LOGOS */
.logos {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 56px;
    flex: 1;
    min-width: 0;
}

.logos img {
    height: 134px;
    width: auto;
    object-fit: contain;
    flex-shrink: 1;
}


/* ========== FOOTER ========== */
.footer {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* FOOTER TOP - Logo + Nav */
.footer-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 27px 84px 34px;
}

.footer-logo-link {
    display: inline-block;
}

.footer-logo {
    display: block;
}

.footer-nav {
    display: flex;
    gap: 98px;
}

.footer-nav a {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 500;
    font-size: 25.26px;
    line-height: 30.31px;
    letter-spacing: -0.45px;
    text-align: center;
    vertical-align: middle;
    color: #001726;
    text-decoration: none;
}

/* FOOTER CONTACT - Location + Email */
.footer-contact {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;
    padding-bottom: 42px;
}

.footer-contact-item {
    display: flex;
    align-items: center;
    gap: 25px;
}

.footer-contact-link {
    text-decoration: none;
    color: inherit;
    display: block;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}

.footer-contact-link:hover {
    transform: translateY(-2px);
    filter: drop-shadow(0 6px 16px rgba(55, 97, 183, 0.12));
}

.footer-contact-link:hover .footer-value {
    color: #274E9E;
}



.footer-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 24px;
    line-height: 100%;
    color: #828282;
    margin-bottom: 7px;
}

.footer-value {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 600;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0.03em;
    color: #000000;
}

.footer-divider {
    width: 84px;
    height: 1px;
    border-top: 2px solid #0000001F;
    transform: rotate(90deg);
}

/* FOOTER BOTTOM - Copyright */
.footer-bottom {
    height: 62px;
    background: linear-gradient(0deg, #3761B7, #3761B7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer-bottom p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 100%;
    color: #FFFFFF;
}


/* ==================== RESPONSIVE MEDIA QUERIES ==================== */

/* 1850px — 15.9% of way from 1920→1480 */
@media (max-width: 1850px) {
    .navbar {
        padding: 14.5px 144px 12.5px;
    }

    .nav-links {
        gap: 75px;
    }

    .nav-links a {
        font-size: 19px;
    }

    .hero {
        padding: 218px 20px 131px;
    }

    .hero-subtitle {
        font-size: 27px;
        margin-bottom: 53px;
    }

    .hero-title {
        font-size: 84px;
        line-height: 98px;
        margin-bottom: 72px;
    }

    .next-level-container {
        padding: 50px 136px 50px 105px;
        gap: 57px;
    }

    .quote-text {
        font-size: 33px;
        line-height: 46px;
    }

    .quote-author {
        font-size: 29px;
        line-height: 40px;
    }

    .next-level-subtitle {
        font-size: 24px;
        margin-bottom: 21px;
    }

    .next-level-title {
        font-size: 50px;
        margin-bottom: 36px;
    }

    .next-level-desc {
        font-size: 19px;
        margin-bottom: 36px;
    }

    .what-we-do {
        padding: 66px 175px 81px;
    }

    .services-subtitle {
        font-size: 24px;
        margin-bottom: 21px;
    }

    .services-title {
        font-size: 50px;
        margin-bottom: 52px;
    }

    .tabs-container {
        height: 75px;
        margin-bottom: 39px;
    }

    .tab {
        width: 277px;
        font-size: 19.5px;
    }

    .active-tab {
        width: 277px;
        height: 62px;
    }

    .active-content .title {
        font-size: 48px;
        margin-bottom: 31px;
    }

    .active-content ul li {
        font-size: 25.5px;
        line-height: 48px;
    }

    .activecontactdiv img {
        width: 595px;
        height: 370px;
    }

    .aboutSection {
        padding: 60px 91px 68px;
    }

    .aboutTag {
        font-size: 24px;
        margin-bottom: 21px;
    }

    .aboutHeading {
        font-size: 50px;
        margin-bottom: 63px;
    }

    .aboutCards {
        gap: 55px;
        margin-top: 122px;
    }

    .gradientBar {
        height: 152px;
        padding-left: 375px;
    }

    .profileImg {
        width: 349px;
        height: 387px;
    }

    .textBox {
        padding-left: 375px;
        padding-top: 19px;
    }

    .name {
        font-size: 38px;
    }

    .role {
        font-size: 24px;
    }

    .desc {
        font-size: 17px;
    }

    .clientsSection {
        padding: 35px 0px 32px 79px;
    }

    .clientsHeading {
        font-size: 69px;
    }

    .logos {
        gap: 50px;
    }

    .logos img {
        height: 129px;
    }

    .footer-top {
        padding: 27px 78px 34px;
    }

    .footer-nav {
        gap: 94px;
    }

    .footer-nav a {
        font-size: 24px;
    }

    .footer-contact {
        gap: 55px;
        padding-bottom: 40px;
    }

    .footer-contact-item {
        gap: 24px;
    }

    .footer-label {
        font-size: 23px;
    }

    .footer-value {
        font-size: 29px;
    }

    .footer-bottom {
        height: 60px;
    }

    .footer-bottom p {
        font-size: 21px;
    }

    .logonavbar {
        height: 56px;
    }

    .arrow {
        width: 24px;
        height: 24px;
    }

    .footer-logo {
        width: 290px;
    }

    .footer-icon {
        width: 66px;
        height: 66px;
    }
}

/* 1750px — 38.6% of way from 1920→1480 */
@media (max-width: 1750px) {
    .navbar {
        padding: 13.5px 136px 13px;
    }

    .nav-links {
        gap: 70px;
    }

    .nav-links a {
        font-size: 18px;
    }

    .hero {
        padding: 205px 20px 124px;
    }

    .hero-subtitle {
        font-size: 25px;
        margin-bottom: 49px;
    }

    .hero-title {
        font-size: 80px;
        line-height: 92px;
        margin-bottom: 68px;
    }

    .btn-show-me {
        font-size: 24px;
        height: 65px;
        padding: 0 43px;
        border-radius: 9px;
        width: auto;
    }

    .next-level-container {
        padding: 49px 128px 49px 99px;
        gap: 52px;
    }

    .next-level-bg {
        width: 550px;
        height: 550px;
    }

    .quote-text {
        font-size: 31px;
        line-height: 43px;
    }

    .quote-author {
        font-size: 27px;
        line-height: 40px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 23px;
        margin-bottom: 20px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading {
        font-size: 47px;
    }

    .next-level-title {
        margin-bottom: 33px;
    }

    .services-title {
        margin-bottom: 49px;
    }

    .aboutHeading {
        margin-bottom: 57px;
    }

    .next-level-desc {
        font-size: 18px;
        margin-bottom: 33px;
    }

    .what-we-do {
        padding: 62px 165px 76px;
    }

    .tabs-container {
        height: 72px;
        margin-bottom: 38px;
    }

    .tab {
        width: 272px;
        font-size: 19px;
    }

    .active-tab {
        width: 272px;
        height: 58px;
    }

    .active-content .title {
        font-size: 42px;
        margin-bottom: 28px;
    }

    .active-content ul li {
        font-size: 25px;
        line-height: 46px;
    }

    .activecontactdiv img {
        width: 560px;
        height: 348px;
    }

    .aboutSection {
        padding: 56px 85px 64px;
    }

    .aboutCards {
        gap: 48px;
        margin-top: 110px;
    }

    .gradientBar {
        height: 143px;
        padding-left: 355px;
    }

    .profileImg {
        width: 328px;
        height: 364px;
        bottom: -33px;
    }

    .textBox {
        padding-left: 355px;
        padding-top: 18px;
    }

    .name {
        font-size: 36px;
    }

    .role {
        font-size: 23px;
    }

    .desc {
        font-size: 16px;
    }

    .clientsSection {
        padding: 32px 0px 30px 74px;
        gap: 36px;
    }

    .clientsHeading {
        font-size: 65px;
    }

    .logos {
        gap: 44px;
    }

    .logos img {
        height: 121px;
    }

    .footer-top {
        padding: 27px 72px 34px;
    }

    .footer-nav {
        gap: 88px;
    }

    .footer-nav a {
        font-size: 23px;
    }

    .footer-contact {
        gap: 48px;
        padding-bottom: 38px;
    }

    .footer-contact-item {
        gap: 23px;
    }

    .footer-label {
        font-size: 22px;
    }

    .footer-value {
        font-size: 27px;
    }

    .footer-bottom {
        height: 56px;
    }

    .footer-bottom p {
        font-size: 20px;
    }

    .logonavbar {
        height: 52px;
    }

    .arrow {
        width: 23px;
        height: 23px;
    }

    .btn-show-me {
        font-size: 22px;
        height: 61px;
        padding: 0 39px;
        border-radius: 10px;
        width: auto;
    }

    .footer-logo {
        width: 270px;
    }

    .footer-icon {
        width: 62px;
        height: 62px;
    }
}

/* 1650px — 61.4% of way from 1920→1480 */
@media (max-width: 1650px) {
    .navbar {
        padding: 12.5px 127px 12px;
    }

    .nav-links {
        gap: 66px;
    }

    .nav-links a {
        font-size: 17px;
    }

    .hero {
        padding: 192px 20px 115px;
    }

    .hero-subtitle {
        font-size: 24px;
        margin-bottom: 46px;
    }

    .hero-title {
        font-size: 74px;
        line-height: 86px;
        margin-bottom: 63px;
    }

    .next-level-container {
        padding: 47px 120px 48px 93px;
        gap: 48px;
    }

    .next-level-bg {
        width: 500px;
        height: 500px;
    }

    .quote-text {
        font-size: 28px;
        line-height: 41px;
    }

    .quote-author {
        font-size: 25px;
        line-height: 38px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 21px;
        margin-bottom: 18px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading {
        font-size: 44px;
    }

    .next-level-title {
        margin-bottom: 31px;
    }

    .services-title {
        margin-bottom: 45px;
    }

    .aboutHeading {
        margin-bottom: 53px;
    }

    .next-level-desc {
        font-size: 17px;
        margin-bottom: 31px;
    }

    .what-we-do {
        padding: 57px 154px 72px;
    }

    .tabs-container {
        height: 69px;
        margin-bottom: 37px;
    }

    .tab {
        width: 268px;
        font-size: 18px;
    }

    .active-tab {
        width: 268px;
        height: 55px;
    }

    .active-content .title {
        font-size: 35px;
        margin-bottom: 26px;
    }

    .active-content ul li {
        font-size: 24px;
        line-height: 44px;
    }

    .activecontactdiv img {
        width: 525px;
        height: 326px;
    }

    .aboutSection {
        padding: 53px 80px 60px;
    }

    .aboutCards {
        gap: 42px;
        margin-top: 98px;
    }

    .gradientBar {
        height: 134px;
        padding-left: 335px;
    }

    .profileImg {
        width: 307px;
        height: 341px;
        bottom: -30px;
    }

    .textBox {
        padding-left: 335px;
        padding-top: 17px;
    }

    .name {
        font-size: 34px;
    }

    .role {
        font-size: 23px;
    }

    .desc {
        font-size: 15px;
    }

    .clientsSection {
        padding: 28px 0px 29px 69px;
        gap: 32px;
    }

    .clientsHeading {
        font-size: 61px;
    }

    .logos {
        gap: 38px;
    }

    .logos img {
        height: 113px;
    }

    .footer-top {
        padding: 27px 66px 34px;
    }

    .footer-nav {
        gap: 83px;
    }

    .footer-nav a {
        font-size: 21px;
    }

    .footer-contact {
        gap: 42px;
        padding-bottom: 36px;
    }

    .footer-contact-item {
        gap: 21px;
    }

    .footer-label {
        font-size: 20px;
    }

    .footer-value {
        font-size: 25px;
    }

    .footer-bottom {
        height: 53px;
    }

    .footer-bottom p {
        font-size: 19px;
    }

    .logonavbar {
        height: 49px;
    }

    .arrow {
        width: 22px;
        height: 22px;
    }

    .btn-show-me {
        font-size: 21px;
        height: 58px;
        padding: 0 35px;
        border-radius: 11px;
        width: auto;
    }

    .footer-logo {
        width: 255px;
    }

    .footer-icon {
        width: 59px;
        height: 59px;
    }
}

@media (max-width: 1480px) {

    /* Navbar */
    .navbar {
        padding: 11px 112px 11px;
    }

    .logonavbar {
        height: 47.27px;
    }

    .nav-links {
        gap: 58px;
    }

    .nav-links a {
        font-size: 15px;
    }

    /* Hero Section */
    .hero {
        padding: 170px 20px 102px;
    }

    .hero-subtitle {
        font-size: 21px;
        margin-bottom: 40px;
    }

    .hero-title {
        font-size: 66px;
        line-height: 76px;
        margin-bottom: 56px;
    }

    /* Button */
    .btn-show-me {
        width: 204px;
        height: 51px;
        border-radius: 12.55px;
        font-size: 18px;
    }




    .next-level-container {
        padding: 39px 106px 47px 82px;
        gap: 44px;
    }

    .next-level-image-wrapper {
        width: 333.13px;
    }

    .quote-text {
        font-size: 25px;
        line-height: 36px;
    }

    .quote-author {
        font-size: 22px;
        line-height: 40px;
    }

    .next-level-subtitle {
        font-size: 18.76px;
        margin-bottom: 16.5px;
    }

    .next-level-title {
        font-size: 39.02px;
        margin-bottom: 28px;
    }

    .next-level-desc {
        font-size: 15px;
        margin-bottom: 28px;
    }

    .what-we-do {
        padding: 50px 136px 63px;
    }

    .services-subtitle,
    .aboutTag {
        font-size: 18.76px;
        margin-bottom: 16.5px;
    }

    .services-title,
    .aboutHeading {
        font-size: 39px;
        margin-bottom: 40px;
    }

    .tabs-container {
        height: 64px;
        padding: 4.5px 3.5px;
        margin-bottom: 36px;
    }

    .tab {
        width: 260px;
        font-size: 17px;
    }

    .active-tab {
        width: 260px;
        height: 52px;
    }

    .active-content .title {
        font-size: 25px;
        margin-bottom: 23px;
    }

    .active-content ul li {
        font-size: 23px;
        line-height: 40px;
    }

    .activecontactdiv img {
        width: 465.1px;
        height: 288.86px;
    }

    .aboutSection {
        padding: 47px 70px 53px;
    }

    .aboutCards {
        gap: 52px;
        margin-top: 90px;
    }

    .gradientBar {
        height: 118.55px;
        padding-left: 295px;
    }

    .profileImg {
        width: 272.05px;
        height: 302.37px;
        bottom: -28px;
        margin-left: 8px;
    }

    .textBox {
        padding-left: 295px;
        padding-top: 17px;
    }

    .name {
        font-size: 30px;
    }

    .role {
        font-size: 22.51px;
    }

    .desc {
        font-size: 13.51px;
    }

    .clientsSection {
        min-height: 153.06px;
        padding: 23px 0px 26px 61px;
        gap: 36px;
    }

    .clientsHeading {
        font-size: 54.02px;
    }

    .logos {
        gap: 34px;
    }

    .logos img {
        height: 100px;
    }

    .footer-top {
        padding: 27px 72px 34px;
    }

    .footer-logo {
        width: 242px;
    }

    .footer-nav {
        gap: 73px;
    }

    .footer-nav a {
        font-size: 18.95px;
        line-height: 22.7px;
    }

    .footer-contact {
        gap: 30px;
        padding-bottom: 34px;
    }

    .footer-contact-item {
        gap: 18.76px;
    }

    .footer-icon {
        width: 56px;
        height: 56px;
    }

    .footer-label,
    .footer-bottom p {
        font-size: 18.01px;
    }

    .footer-value {
        font-size: 22.51px;
    }

    .footer-bottom {
        height: 46.52px;
    }
}

/* 1320px — ~11% smaller than 1480 */
@media (max-width: 1320px) {

    /* Navbar */
    .navbar {
        padding: 11px 96px 11px;
    }

    .logonavbar {
        height: 44px;
    }

    .nav-links {
        gap: 52px;
    }

    .nav-links a {
        font-size: 14.5px;
    }

    /* Hero */
    .hero {
        padding: 162px 20px 96px;
    }

    .hero-subtitle {
        font-size: 20px;
        margin-bottom: 38px;
    }

    .hero-title {
        font-size: 62px;
        line-height: 72px;
        margin-bottom: 54px;
    }

    .btn-show-me {
        height: 49px;
        font-size: 17.5px;
        padding: 0 28px;
        border-radius: 13px;
        width: auto;
    }



    /* Next-Level */
    .next-level-container {
        padding: 37px 96px 44px 76px;
        gap: 40px;
    }

    .next-level-bg {
        width: 460px;
        height: 460px;
    }

    .next-level-image-wrapper {
        width: auto;
        min-height: 400px;
    }

    .quote-text {
        font-size: 23px;
        line-height: 34px;
    }

    .quote-author {
        font-size: 20px;
        line-height: 38px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 18px;
        margin-bottom: 15px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading {
        font-size: 37px;
    }

    .next-level-title {
        margin-bottom: 26px;
    }

    .services-title {
        margin-bottom: 38px;
    }

    .aboutHeading {
        margin-bottom: 38px;
    }

    .next-level-desc {
        font-size: 14.5px;
        margin-bottom: 26px;
    }

    /* Services */
    .what-we-do {
        padding: 48px 118px 60px;
    }

    .tabs-container {
        height: 62px;
        margin-bottom: 34px;
    }

    .tab {
        width: 252px;
        font-size: 16.5px;
    }

    .active-tab {
        width: 252px;
        height: 50px;
    }

    .active-content .title {
        font-size: 24px;
        margin-bottom: 21px;
    }

    .active-content ul li {
        font-size: 22px;
        line-height: 38px;
    }

    .activecontactdiv img {
        width: 440px;
        height: 272px;
    }

    /* About Cards — switch to stacked card layout but keep side-by-side via max-width clamp */
    .aboutSection {
        padding: 45px 62px 50px;
    }

    .aboutCards {
        flex-direction: column;
        gap: 75px;
        margin-top: 75px;
    }

    .aboutCard {
        max-width: 760px;
        margin: 0 auto;
    }

    .profileImg {
        width: 295px;
        height: 330px;
        bottom: -26px;
        margin-left: 9px;
    }

    .gradientBar {
        height: 126px;
        padding-left: 320px;
    }

    .textBox {
        padding-left: 320px;
        padding-top: 18px;
    }

    .name {
        font-size: 31px;
    }

    .role {
        font-size: 22px;
    }

    .desc {
        font-size: 14px;
    }

    /* Clients */
    .clientsSection {
        min-height: auto;
        padding: 28px 0px 28px 56px;
        gap: 32px;
    }

    .clientsHeading {
        font-size: 50px;
    }

    .logos {
        gap: 30px;
    }

    .logos img {
        height: 92px;
    }

    /* Footer */
    .footer-top {
        padding: 27px 62px 34px;
    }

    .footer-logo {
        width: 230px;
    }

    .footer-nav {
        gap: 66px;
    }

    .footer-nav a {
        font-size: 18px;
        line-height: 22px;
    }

    .footer-contact {
        gap: 28px;
        padding-bottom: 32px;
    }

    .footer-contact-item {
        gap: 17px;
    }

    .footer-icon {
        width: 53px;
        height: 53px;
    }

    .footer-label,
    .footer-bottom p {
        font-size: 17px;
    }

    .footer-value {
        font-size: 21px;
    }

    .footer-bottom {
        height: 45px;
    }
}

/* 1250px — ~16% smaller than 1480 */
@media (max-width: 1250px) {

    /* Navbar */
    .navbar {
        padding: 11px 86px 11px;
    }

    .logonavbar {
        height: 42px;
    }

    .nav-links {
        gap: 48px;
    }

    .nav-links a {
        font-size: 14px;
    }

    /* Hero */
    .hero {
        padding: 156px 20px 92px;
    }

    .hero-subtitle {
        font-size: 19px;
        margin-bottom: 36px;
        letter-spacing: 0.24em;
    }

    .hero-title {
        font-size: 58px;
        line-height: 68px;
        margin-bottom: 52px;
    }
    .btn-show-me {
        height: 47px;
        padding: 0 26px;
        width: auto;
        font-size: 16.5px;
        border-radius: 13px;
    }

 

    /* Next-Level */
    .next-level-container {
        padding: 35px 86px 42px 70px;
        gap: 36px;
    }

    .next-level-bg {
        width: 420px;
        height: 420px;
    }

    .next-level-image-wrapper {
        min-height: 380px;
    }

    .quote-text {
        font-size: 22px;
        line-height: 32px;
    }

    .quote-author {
        font-size: 19px;
        line-height: 36px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 17px;
        margin-bottom: 14px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 35px;
        line-height: 1.15;
    }

    .next-level-title {
        margin-bottom: 24px;
    }

    .services-title {
        margin-bottom: 36px;
    }

    .aboutHeading {
        margin-bottom: 36px;
    }

    .next-level-desc {
        font-size: 14px;
        line-height: 155%;
        margin-bottom: 24px;
    }

    /* Services */
    .what-we-do {
        padding: 46px 102px 58px;
    }

    .tabs-container {
        height: 60px;
        margin-bottom: 32px;
    }

    .tab {
        width: 244px;
        font-size: 16px;
    }

    .active-tab {
        width: 244px;
        height: 48px;
    }

    .active-content .title {
        margin-bottom: 20px;
    }

    .active-content ul li {
        font-size: 21px;
        line-height: 36px;
    }

    .activecontactdiv img {
        width: 420px;
        height: 260px;
    }

    /* About Cards */
    .aboutSection {
        padding: 43px 54px 48px;
    }

    .aboutCards {
        gap: 70px;
        margin-top: 70px;
    }

    .aboutCard {
        max-width: 700px;
    }

    .profileImg {
        width: 275px;
        height: 308px;
        bottom: -24px;
    }

    .gradientBar {
        height: 120px;
        padding-left: 300px;
    }

    .textBox {
        padding-left: 300px;
        padding-top: 17px;
    }

    .name {
        font-size: 29px;
    }

    .role {
        font-size: 21px;
    }

    .desc {
        font-size: 13.5px;
    }

    /* Clients */
    .clientsSection {
        padding: 26px 0px 26px 50px;
        gap: 28px;
    }

    .clientsHeading {
        font-size: 47px;
    }

    .logos {
        gap: 26px;
    }

    .logos img {
        height: 86px;
    }

    /* Footer */
    .footer-top {
        padding: 27px 54px 34px;
    }

    .footer-logo {
        width: 220px;
    }

    .footer-nav {
        gap: 60px;
    }

    .footer-nav a {
        font-size: 17px;
        line-height: 21px;
    }

    .footer-contact {
        gap: 26px;
        padding-bottom: 30px;
    }

    .footer-contact-item {
        gap: 16px;
    }

    .footer-icon {
        width: 50px;
        height: 50px;
    }

    .footer-label,
    .footer-bottom p {
        font-size: 16px;
    }

    .footer-value {
        font-size: 20px;
    }

    .footer-bottom {
        height: 43px;
    }
}

/* 1000px — Mobile Navbar + Column Layout Transition */
@media (max-width: 1000px) {

    /* === MOBILE MENU ENABLE === */
    .menu-toggle {
        display: flex;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #FFFFFF;
        flex-direction: column;
        gap: 0;
        width: 100%;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.05);
        border-top: 1px solid #EBEBEB;
        z-index: 999;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links a {
        padding: 20px 0;
        width: 100%;
        border-bottom: 1px solid #F5F5F5;
        font-size: 18px;
    }

    /* === NAVBAR === */
    .navbar {
        padding: 12px 30px;
    }

    .logonavbar {
        height: 40px;
    }

    /* === HERO === */
    .hero {
        padding: 150px 20px 88px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 34px;
        letter-spacing: 0.22em;
    }

    .hero-title {
        font-size: 54px;
        line-height: 64px;
        margin-bottom: 50px;
    }

    .btn-show-me {
        height: 46px;
        padding: 0 24px;
        font-size: 16px;
        border-radius: 12px;
        width: auto;
    }


    /* === NEXT-LEVEL — COLUMN SWITCH === */
    .next-level-container {
        flex-direction: column;
        text-align: center;
        padding: 36px 28px 40px;
        gap: 32px;
    }

    .next-level-bg {
        width: 380px;
        height: 380px;
    }

    .next-level-image-wrapper {
        width: 100%;
        min-height: 420px;
    }

    .quote-box {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        margin-top: 20px;
        border-radius: 10px;
    }

    .next-level-image-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .quote-text {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 0px;
        text-shadow: none;
        padding: 24px;
    }

    .quote-author {
        position: relative;
        bottom: auto;
        font-size: 18px;
        line-height: 32px;
        text-shadow: none;
        padding: 0 20px 20px;
    }

    .next-level-text {
        width: 100%;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 16px;
        margin-bottom: 12px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 32px;
        line-height: 1.2;
    }

    .next-level-title {
        margin-bottom: 20px;
    }

    .services-title {
        margin-bottom: 32px;
    }

    .aboutHeading {
        margin-bottom: 32px;
    }

    .next-level-desc {
        font-size: 15px;
        line-height: 160%;
        margin-bottom: 22px;
    }

    .logos-row {
        justify-content: center;
        gap: 24px;
    }

    .logos-row img {
        max-height: 60px;
        max-width: 180px;
    }

    /* === SERVICES / WHAT WE DO === */
    .what-we-do {
        padding: 40px 28px 50px;
    }

    .tabs-container {
        height: auto;
        width: 100%;
        max-width: 600px;
        margin: 0 auto 28px auto;
        flex-wrap: wrap;
        padding: 5px;
        gap: 4px;
    }

    .tab {
        width: calc(33.333% - 4px);
        min-width: 0;
        font-size: 15px;
        height: 46px;
    }

    .active-tab {
        width: calc(33.333% - 4px);
        height: 46px;
    }

    .activecontactdiv {
        flex-direction: column-reverse;
        padding: 24px;
        gap: 22px;
    }

    .active-content {
        max-width: 100%;
        text-align: center;
    }

    .active-content .title {
        margin-bottom: 18px;
    }

    .active-content ul li {
        font-size: 18px;
        line-height: 34px;
    }

    .activecontactdiv img {
        width: 100%;
        height: auto;
        max-width: 560px;
        margin: 0 auto;
    }

    /* === ABOUT CARDS — STACKED MOBILE LAYOUT === */
    .aboutSection {
        padding: 40px 28px 48px;
    }

    .aboutCards {
        flex-direction: column;
        gap: 56px;
        margin-top: 48px;
    }

    .aboutCard {
        max-width: 560px;
        margin: 0 auto;
        width: 100%;
    }

    .profileImg {
        position: relative;
        width: 100%;
        height: 380px;
        bottom: 0;
        margin-left: 0;
        margin-bottom: 0;
        border-radius: 10px 10px 0 0;
        display: block;
    }

    .gradientBar {
        padding: 22px 20px;
        height: auto;
        text-align: center;
        border-radius: 0;
    }

    .textBox {
        padding: 18px 20px 20px;
        text-align: center;
    }

    .name {
        font-size: 28px;
    }

    .role {
        font-size: 19px;
    }

    .desc {
        font-size: 14px;
    }

    /* === CLIENTS — COLUMN + CENTER === */
    .clientsSection {
        flex-direction: column;
        flex-wrap: wrap;
        min-height: auto;
        padding: 36px 24px;
        gap: 26px;
        text-align: center;
        justify-content: center;
    }

    .clientsHeading {
        font-size: 42px;
        white-space: normal;
    }

    .logos {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        gap: 24px 28px;
    }

    .logos img {
        height: 80px;
    }

    /* === FOOTER — COLUMN LAYOUT === */
    .footer-top {
        flex-direction: column;
        gap: 22px;
        padding: 28px 24px 30px;
    }

    .footer-logo {
        width: 210px;
    }

    .footer-nav {
        flex-direction: column;
        gap: 14px;
        align-items: center;
    }

    .footer-nav a {
        font-size: 16px;
        line-height: 20px;
    }

    .footer-contact {
        flex-direction: column;
        gap: 18px;
        padding: 18px 24px 26px;
        padding-bottom: 26px;
    }

    .footer-contact-item {
        gap: 14px;
    }

    .footer-icon {
        width: 46px;
        height: 46px;
    }

    .footer-divider {
        width: 100%;
        height: 1px;
        border-top: 1px solid #0000001F;
        transform: none;
        margin: 4px 0;
    }

    .footer-label,
    .footer-bottom p {
        font-size: 15px;
    }

    .footer-value {
        font-size: 18px;
    }

    .footer-bottom {
        height: 42px;
        padding: 0 16px;
    }
}

/* 900px — ~8% smaller than 1000 baseline */
@media (max-width: 900px) {

    /* Navbar */
    .navbar {
        padding: 12px 24px;
    }.arrow {
    width: 18px;
    height: 18px;
}

    .logonavbar {
        height: 38px;
    }

    /* Hero */
    .hero {
        padding: 142px 18px 82px;
    }

    .hero-subtitle {
        font-size: 17px;
        margin-bottom: 30px;
    }

    .hero-title {
        font-size: 48px;
        line-height: 58px;
        margin-bottom: 46px;
    }

    .btn-show-me {
        height: 45px;
        padding: 0 22px;
        font-size: 15px;
        border-radius: 12px;
        width: auto;
    }


    /* Next-level */
    .next-level-container {
        padding: 34px 24px 38px;
        gap: 28px;
    }

    .next-level-bg {
        width: 340px;
        height: 340px;
    }

    .next-level-image-wrapper {
        min-height: 380px;
    }

    .quote-text {
        font-size: 19px;
        line-height: 28px;
        padding: 22px;
    }

    .quote-author {
        font-size: 17px;
        line-height: 30px;
        padding-bottom: 18px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 15px;
        margin-bottom: 11px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 30px;
        line-height: 1.2;
    }

    .next-level-title {
        margin-bottom: 18px;
    }

    .services-title {
        margin-bottom: 30px;
    }

    .aboutHeading {
        margin-bottom: 30px;
    }

    .next-level-desc {
        font-size: 14.5px;
        margin-bottom: 20px;
    }

    .logos-row img {
        max-height: 54px;
        max-width: 160px;
    }

    /* Services */
    .what-we-do {
        padding: 38px 24px 48px;
    }

    .tabs-container {
        margin-bottom: 26px;
        max-width: 540px;
    }

    .tab {
        font-size: 14.5px;
        height: 44px;
    }

    .active-tab {
        height: 44px;
    }

    .activecontactdiv {
        padding: 22px;
        gap: 20px;
    }

    .active-content ul li {
        font-size: 17px;
        line-height: 32px;
    }

    /* About */
    .aboutSection {
        padding: 38px 24px 46px;
    }

    .aboutCards {
        gap: 50px;
        margin-top: 44px;
    }

    .profileImg {
        height: 340px;
    }

    .name {
        font-size: 26px;
    }

    .role {
        font-size: 18px;
    }

    .desc {
        font-size: 13.5px;
    }

    /* Clients */
    .clientsSection {
        padding: 34px 22px;
        gap: 24px;
    }

    .clientsHeading {
        font-size: 38px;
    }

    .logos {
        gap: 22px 26px;
    }

    .logos img {
        height: 74px;
    }

    /* Footer */
    .footer-top {
        gap: 20px;
        padding: 26px 22px 28px;
    }

    .footer-logo {
        width: 200px;
    }

    .footer-nav a {
        font-size: 15.5px;
    }

    .footer-contact {
        gap: 16px;
        padding: 16px 22px 24px;
    }

    .footer-icon {
        width: 44px;
        height: 44px;
    }

    .footer-label,
    .footer-bottom p {
        font-size: 14.5px;
    }

    .footer-value {
        font-size: 17px;
    }

    .footer-bottom {
        height: 40px;
    }
}

/* 768px — Tablet/Mobile boundary */
@media (max-width: 768px) {

    /* Navbar */
    .navbar {
        padding: 12px 20px;
    }

    .logonavbar {
        height: 36px;
    }

    .nav-links a {
        font-size: 17px;
        padding: 18px 0;
    }

    /* Hero */
    .hero {
        padding: 136px 16px 76px;
    }

    .hero-subtitle {
        font-size: 16px;
        margin-bottom: 28px;
        letter-spacing: 0.2em;
    }

    .hero-title {
        font-size: 42px;
        line-height: 52px;
        margin-bottom: 42px;
    }

    .btn-show-me {
        height: 44px;
        padding: 0 20px;
        font-size: 14.5px;
        border-radius: 11px;
        width: auto;
        gap: 5px;
    }

 
    /* Next-level */
    .next-level-container {
        padding: 32px 20px 36px;
        gap: 26px;
    }

    .next-level-bg {
        width: 300px;
        height: 300px;
    }

    .next-level-image-wrapper {
        min-height: 340px;
    }

    .quote-text {
        font-size: 18px;
        line-height: 27px;
        padding: 20px;
    }

    .quote-author {
        font-size: 16px;
        line-height: 28px;
        padding: 0 18px 18px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 14px;
        margin-bottom: 10px;
        letter-spacing: 0.24em;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 28px;
        line-height: 1.2;
    }

    .next-level-title {
        margin-bottom: 16px;
    }

    .services-title {
        margin-bottom: 28px;
    }

    .aboutHeading {
        margin-bottom: 28px;
    }

    .next-level-desc {
        font-size: 14px;
        line-height: 160%;
        margin-bottom: 18px;
    }

    .logos-row {
        gap: 20px;
    }

    .logos-row img {
        max-height: 48px;
        max-width: 140px;
    }

    /* Services */
    .what-we-do {
        padding: 36px 20px 44px;
    }

    .tabs-container {
        margin-bottom: 24px;
        max-width: 100%;
        padding: 6px;
        gap: 5px;
    }

    .tab {
        font-size: 14px;
        height: 42px;
    }

    .active-tab {
        height: 42px;
    }

    .activecontactdiv {
        padding: 20px;
        gap: 18px;
    }

    .active-content ul li {
        font-size: 16px;
        line-height: 30px;
    }

    /* About */
    .aboutSection {
        padding: 36px 20px 44px;
    }

    .aboutCards {
        gap: 44px;
        margin-top: 40px;
    }

    .profileImg {
        height: 300px;
    }

    .gradientBar {
        padding: 20px 18px;
    }

    .textBox {
        padding: 16px 18px 18px;
    }

    .name {
        font-size: 24px;
    }

    .role {
        font-size: 17px;
    }

    .desc {
        font-size: 13px;
    }

    /* Clients */
    .clientsSection {
        padding: 32px 20px;
        gap: 22px;
    }

    .clientsHeading {
        font-size: 34px;
    }

    .logos {
        gap: 20px 24px;
    }

    .logos img {
        height: 68px;
    }

    /* Footer */
    .footer-top {
        gap: 18px;
        padding: 24px 20px 26px;
    }

    .footer-logo {
        width: 190px;
    }

    .footer-nav {
        gap: 12px;
    }

    .footer-nav a {
        font-size: 15px;
    }

    .footer-contact {
        gap: 14px;
        padding: 14px 20px 22px;
    }

    .footer-contact-item {
        gap: 12px;
    }

    .footer-icon {
        width: 42px;
        height: 42px;
    }

    .footer-label {
        font-size: 14px;
    }

    .footer-value {
        font-size: 16px;
    }

    .footer-bottom {
        height: 38px;
    }

    .footer-bottom p {
        font-size: 13px;
    }
}

/* 600px — Small Mobile */
@media (max-width: 600px) {

    /* Navbar */
    .navbar {
        padding: 11px 18px;
    }

    .logonavbar {
        height: 34px;
    }

    .menu-toggle {
        width: 24px;
        height: 18px;
    }

    /* Hero */
    .hero {
        padding: 128px 14px 70px;
    }

    .hero-subtitle {
        font-size: 14px;
        margin-bottom: 24px;
        letter-spacing: 0.18em;
    }

    .hero-title {
        font-size: 36px;
        line-height: 44px;
        margin-bottom: 36px;
    }

    .btn-show-me {
        height: 44px;
        padding: 0 18px;
        font-size: 14px;
        border-radius: 11px;
        width: auto;
    }

    /* Next-level */
    .next-level-container {
        padding: 30px 16px 32px;
        gap: 24px;
    }

    .next-level-bg {
        display: none;
    }

    .next-level-image-wrapper {
        min-height: 300px;
    }

    .quote-text {
        font-size: 17px;
        line-height: 25px;
        padding: 18px 16px;
    }

    .quote-author {
        font-size: 15px;
        line-height: 26px;
        padding: 0 16px 16px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 13px;
        margin-bottom: 9px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 25px;
        line-height: 1.22;
    }

    .next-level-title {
        margin-bottom: 14px;
    }

    .services-title {
        margin-bottom: 24px;
    }

    .aboutHeading {
        margin-bottom: 24px;
    }

    .next-level-desc {
        font-size: 13.5px;
        line-height: 162%;
        margin-bottom: 16px;
    }

    .logos-row {
        gap: 18px;
    }

    .logos-row img {
        max-height: 42px;
        max-width: 120px;
    }

    /* Services — tabs switch to full-width */
    .what-we-do {
        padding: 34px 16px 40px;
    }

    .tabs-container {
        height: auto;
        flex-direction: column;
        width: 100%;
        padding: 8px;
        gap: 6px;
        margin-bottom: 22px;
    }

    .tab {
        width: 100%;
        height: 46px;
        padding: 0 15px;
        font-size: 15px;
    }

    .active-tab {
        width: 100%;
        height: 46px;
    }

    .activecontactdiv {
        padding: 18px 16px;
        gap: 16px;
        border-radius: 8px;
    }

    .active-content .title {
        margin-bottom: 15px;
    }

    .active-content ul li {
        font-size: 15px;
        line-height: 28px;
    }

    /* About */
    .aboutSection {
        padding: 34px 16px 40px;
    }

    .aboutCards {
        gap: 40px;
        margin-top: 36px;
    }

    .profileImg {
        height: 260px;
    }

    .gradientBar {
        padding: 18px 16px;
    }

    .textBox {
        padding: 14px 16px 16px;
    }

    .name {
        font-size: 22px;
    }

    .role {
        font-size: 16px;
    }

    .desc {
        font-size: 13px;
    }

    /* Clients */
    .clientsSection {
        padding: 28px 16px;
        gap: 20px;
    }

    .clientsHeading {
        font-size: 30px;
    }

    .logos {
        gap: 18px 20px;
    }

    .logos img {
        height: 60px;
    }

    /* Footer */
    .footer-top {
        gap: 16px;
        padding: 22px 18px 24px;
    }

    .footer-logo {
        width: 180px;
    }

    .footer-nav {
        gap: 11px;
    }

    .footer-nav a {
        font-size: 14.5px;
    }

    .footer-contact {
        gap: 13px;
        padding: 13px 18px 20px;
    }

    .footer-contact-item {
        gap: 11px;
    }

    .footer-icon {
        width: 40px;
        height: 40px;
    }

    .footer-label {
        font-size: 13px;
    }

    .footer-value {
        font-size: 15px;
    }

    .footer-bottom {
        height: 36px;
    }

    .footer-bottom p {
        font-size: 12.5px;
    }
}

/* 500px — Tiny Mobile */
@media (max-width: 500px) {

    /* Navbar */
    .navbar {
        padding: 11px 16px;
    }

    .logonavbar {
        height: 32px;
    }

    /* Hero */
    .hero {
        padding: 120px 14px 64px;
    }

    .hero-subtitle {
        font-size: 13px;
        margin-bottom: 22px;
        letter-spacing: 0.16em;
    }

    .hero-title {
        font-size: 30px;
        line-height: 38px;
        margin-bottom: 32px;
    }

    .btn-show-me {
        height: 43px;
        padding: 0 16px;
        font-size: 13.5px;
        border-radius: 10px;
        width: auto;
    }


    /* Next-level */
    .next-level-container {
        padding: 28px 16px 30px;
        gap: 22px;
    }

    .next-level-image-wrapper {
        min-height: 280px;
        border-radius: 10px;
    }

    .quote-text {
        font-size: 16px;
        line-height: 24px;
        padding: 16px 14px;
    }

    .quote-author {
        font-size: 14px;
        line-height: 24px;
        padding: 0 14px 14px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 12px;
        margin-bottom: 8px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 23px;
        line-height: 1.25;
    }

    .next-level-title {
        margin-bottom: 13px;
    }

    .services-title {
        margin-bottom: 22px;
    }

    .aboutHeading {
        margin-bottom: 22px;
    }

    .next-level-desc {
        font-size: 13px;
        margin-bottom: 14px;
    }

    .logos-row {
        gap: 16px;
    }

    .logos-row img {
        max-height: 38px;
        max-width: 110px;
    }

    /* Services */
    .what-we-do {
        padding: 32px 16px 38px;
    }

    .tabs-container {
        margin-bottom: 20px;
    }

    .tab {
        height: 44px;
        font-size: 14.5px;
    }

    .active-tab {
        height: 44px;
    }

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

    .active-content .title {
        margin-bottom: 13px;
    }

    .active-content ul li {
        font-size: 14.5px;
        line-height: 26px;
    }

    /* About */
    .aboutSection {
        padding: 32px 16px 38px;
    }

    .aboutCards {
        gap: 36px;
        margin-top: 32px;
    }

    .profileImg {
        height: 220px;
    }

    .gradientBar {
        padding: 16px 14px;
    }

    .textBox {
        padding: 12px 14px 14px;
    }

    .name {
        font-size: 20px;
    }

    .role {
        font-size: 15px;
    }

    .desc {
        font-size: 12.5px;
    }

    /* Clients */
    .clientsSection {
        padding: 26px 14px;
        gap: 18px;
    }

    .clientsHeading {
        font-size: 27px;
    }

    .logos {
        gap: 16px 18px;
    }

    .logos img {
        height: 54px;
    }

    /* Footer */
    .footer-top {
        gap: 14px;
        padding: 20px 16px 22px;
    }

    .footer-logo {
        width: 170px;
    }

    .footer-nav {
        gap: 10px;
    }

    .footer-nav a {
        font-size: 14px;
    }

    .footer-contact {
        gap: 12px;
        padding: 12px 16px 18px;
    }

    .footer-contact-item {
        gap: 10px;
    }

    .footer-icon {
        width: 38px;
        height: 38px;
    }

    .footer-label {
        font-size: 13px;
        margin-bottom: 5px;
    }

    .footer-value {
        font-size: 14.5px;
    }

    .footer-bottom {
        height: 34px;
    }

    .footer-bottom p {
        font-size: 12px;
    }
}

/* 440px — Very Small Phones */
@media (max-width: 440px) {

    /* Navbar */
    .navbar {
        padding: 10px 14px;
    }

    .logonavbar {
        height: 30px;
    }

    /* Hero */
    .hero {
        padding: 114px 12px 60px;
    }

    .hero-subtitle {
        font-size: 12px;
        margin-bottom: 20px;
        letter-spacing: 0.14em;
    }

    .hero-title {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 30px;
    }

    .btn-show-me {
        height: 43px;
        padding: 0 14px;
        font-size: 13px;
        border-radius: 10px;
        width: auto;
    }


    /* Next-level */
    .next-level-container {
        padding: 26px 14px 28px;
        gap: 20px;
    }

    .next-level-image-wrapper {
        min-height: 260px;
    }

    .quote-text {
        font-size: 15px;
        line-height: 22px;
        padding: 14px 12px;
    }

    .quote-author {
        font-size: 13.5px;
        line-height: 22px;
        padding: 0 12px 12px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 11.5px;
        margin-bottom: 7px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 21px;
        line-height: 1.25;
    }

    .next-level-title {
        margin-bottom: 12px;
    }

    .services-title {
        margin-bottom: 20px;
    }

    .aboutHeading {
        margin-bottom: 20px;
    }

    .next-level-desc {
        font-size: 12.5px;
        line-height: 160%;
        margin-bottom: 13px;
    }

    .logos-row img {
        max-height: 34px;
        max-width: 100px;
    }

    /* Services */
    .what-we-do {
        padding: 30px 14px 36px;
    }

    .tabs-container {
        padding: 6px;
        gap: 5px;
        margin-bottom: 18px;
    }

    .tab {
        height: 42px;
        font-size: 14px;
    }

    .active-tab {
        height: 42px;
    }

    .activecontactdiv {
        padding: 14px 12px;
        gap: 13px;
    }

    .active-content ul li {
        font-size: 14px;
        line-height: 25px;
    }

    /* About */
    .aboutSection {
        padding: 30px 14px 36px;
    }

    .aboutCards {
        gap: 32px;
        margin-top: 28px;
    }

    .profileImg {
        height: 200px;
    }

    .gradientBar {
        padding: 15px 12px;
    }

    .textBox {
        padding: 11px 12px 12px;
    }

    .name {
        font-size: 19px;
    }

    .role {
        font-size: 14px;
    }

    .desc {
        font-size: 12px;
    }

    /* Clients */
    .clientsSection {
        padding: 24px 14px;
        gap: 16px;
    }

    .clientsHeading {
        font-size: 25px;
    }

    .logos {
        gap: 14px 16px;
    }

    .logos img {
        height: 50px;
    }

    /* Footer */
    .footer-top {
        gap: 13px;
        padding: 18px 14px 20px;
    }

    .footer-logo {
        width: 160px;
    }

    .footer-nav {
        gap: 9px;
    }

    .footer-nav a {
        font-size: 13.5px;
    }

    .footer-contact {
        gap: 11px;
        padding: 11px 14px 16px;
    }

    .footer-contact-item {
        gap: 9px;
    }

    .footer-icon {
        width: 36px;
        height: 36px;
    }

    .footer-label {
        font-size: 12.5px;
    }

    .footer-value {
        font-size: 14px;
    }

    .footer-bottom {
        height: 32px;
    }
.arrow {
    width: 16px;
    height: 16px;
}
    .footer-bottom p {
        font-size: 11.5px;
    }
}

/* 415px — iPhone SE-ish */
@media (max-width: 415px) {

    .navbar {
        padding: 10px 12px;
    }

    .logonavbar {
        height: 28px;
    }

    .hero {
        padding: 110px 12px 56px;
    }

    .hero-subtitle {
        font-size: 11.5px;
        margin-bottom: 18px;
        letter-spacing: 0.13em;
    }

    .hero-title {
        font-size: 26px;
        line-height: 34px;
        margin-bottom: 28px;
    }

    .btn-show-me {
        height: 42px;
        padding: 0 14px;
        font-size: 13px;
        border-radius: 10px;
        width: auto;
    }

    
    .next-level-container {
        padding: 24px 14px 26px;
        gap: 19px;
    }

    .next-level-image-wrapper {
        min-height: 240px;
    }

    .quote-text {
        font-size: 14.5px;
        line-height: 21px;
        padding: 13px 11px;
    }

    .quote-author {
        font-size: 13px;
        padding: 0 11px 11px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 11px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 20px;
    }

    .next-level-desc {
        font-size: 12px;
    }

    .logos-row img {
        max-height: 32px;
        max-width: 92px;
    }

    .what-we-do,
    .aboutSection {
        padding: 28px 14px 34px;
    }

    .tab {
        height: 41px;
        font-size: 13.5px;
    }

    .active-tab {
        height: 41px;
    }

    .aboutCards {
        gap: 30px;
        margin-top: 26px;
    }

    .profileImg {
        height: 190px;
    }

    .name {
        font-size: 18px;
    }

    .role {
        font-size: 13.5px;
    }

    .clientsSection {
        padding: 22px 12px;
        gap: 15px;
    }

    .clientsHeading {
        font-size: 23px;
    }

    .logos img {
        height: 46px;
    }

    .footer-top {
        padding: 17px 12px 19px;
    }

    .footer-logo {
        width: 150px;
    }

    .footer-nav a {
        font-size: 13px;
    }

    .footer-contact {
        padding: 10px 12px 15px;
    }

    .footer-icon {
        width: 34px;
        height: 34px;
    }

    .footer-value {
        font-size: 13.5px;
    }

    .footer-bottom {
        height: 31px;
    }

    .footer-bottom p {
        font-size: 11px;
    }
}

/* 400px */
@media (max-width: 400px) {

    .navbar {
        padding: 9px 12px;
    }

    .hero {
        padding: 106px 10px 54px;
    }

    .hero-title {
        font-size: 25px;
        line-height: 32px;
        margin-bottom: 26px;
    }

    .hero-subtitle {
        font-size: 11px;
    }

    .btn-show-me {
        height: 42px;
        padding: 0 13px;
        font-size: 12.5px;
        border-radius: 9.5px;
        width: auto;
    }



    .next-level-container {
        padding: 23px 12px 25px;
        gap: 18px;
    }

    .next-level-image-wrapper {
        min-height: 230px;
    }

    .quote-text {
        font-size: 14px;
        line-height: 20px;
        padding: 12px 10px;
    }

    .quote-author {
        font-size: 12.5px;
        line-height: 20px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 19px;
    }

    .next-level-desc {
        font-size: 11.5px;
    }

    .logos-row img {
        max-height: 30px;
        max-width: 88px;
    }

    .what-we-do,
    .aboutSection {
        padding: 27px 12px 33px;
    }

    .aboutCards {
        gap: 28px;
        margin-top: 24px;
    }

    .profileImg {
        height: 180px;
    }

    .gradientBar {
        padding: 14px 11px;
    }

    .name {
        font-size: 17.5px;
    }

    .role {
        font-size: 13px;
    }

    .desc {
        font-size: 11.5px;
    }

    .clientsSection {
        padding: 22px 12px;
        gap: 14px;
    }

    .clientsHeading {
        font-size: 22px;
    }

    .logos {
        gap: 12px 14px;
    }

    .logos img {
        height: 44px;
    }

    .footer-logo {
        width: 145px;
    }

    .footer-icon {
        width: 33px;
        height: 33px;
    }

    .footer-value {
        font-size: 13px;
    }
}

/* 390px — iPhone 12/13 Mini */
@media (max-width: 390px) {

    .navbar {
        padding: 9px 10px;
    }

    .logonavbar {
        height: 26px;
    }

    .hero {
        padding: 104px 10px 52px;
    }

    .hero-subtitle {
        font-size: 10.5px;
        letter-spacing: 0.12em;
        margin-bottom: 17px;
    }

    .hero-title {
        font-size: 24px;
        line-height: 31px;
        margin-bottom: 25px;
    }

    .btn-show-me {
        height: 42px;
        padding: 0 13px;
        font-size: 12.5px;
        border-radius: 9.5px;
        width: auto;
    }

    .next-level-container {
        padding: 22px 12px 24px;
        gap: 17px;
    }

    .next-level-image-wrapper {
        min-height: 225px;
    }

    .quote-text {
        font-size: 13.5px;
        line-height: 19px;
        padding: 11px 10px;
    }

    .quote-author {
        font-size: 12px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 10.5px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 18px;
        line-height: 1.3;
    }

    .next-level-desc {
        font-size: 11.5px;
    }

    .logos-row img {
        max-height: 28px;
        max-width: 82px;
    }

    .what-we-do,
    .aboutSection {
        padding: 26px 12px 32px;
    }

    .tab {
        height: 40px;
        font-size: 13px;
    }

    .active-tab {
        height: 40px;
    }

    .active-content ul li {
        font-size: 13.5px;
        line-height: 24px;
    }

    .aboutCards {
        gap: 27px;
        margin-top: 22px;
    }

    .profileImg {
        height: 175px;
    }

    .name {
        font-size: 17px;
    }

    .role {
        font-size: 12.5px;
    }

    .desc {
        font-size: 11px;
    }

    .clientsSection {
        padding: 21px 10px;
        gap: 14px;
    }

    .clientsHeading {
        font-size: 21px;
    }

    .logos img {
        height: 42px;
    }

    .footer-top {
        padding: 16px 10px 18px;
        gap: 12px;
    }

    .footer-logo {
        width: 140px;
    }

    .footer-nav {
        gap: 8px;
    }

    .footer-nav a {
        font-size: 12.5px;
    }

    .footer-contact {
        gap: 10px;
        padding: 9px 10px 14px;
    }

    .footer-contact-item {
        gap: 8px;
    }

    .footer-icon {
        width: 32px;
        height: 32px;
    }

    .footer-label {
        font-size: 12px;
    }

    .footer-value {
        font-size: 12.5px;
    }

    .footer-bottom {
        height: 30px;
    }

    .footer-bottom p {
        font-size: 10.5px;
    }
}

/* 350px — Very Tiny Phones */
@media (max-width: 350px) {

    .navbar {
        padding: 9px 10px;
    }

    .logonavbar {
        height: 24px;
    }

    .menu-toggle {
        width: 20px;
        height: 14px;
    }

    .hero {
        padding: 98px 10px 48px;
    }

    .hero-subtitle {
        font-size: 10px;
        letter-spacing: 0.11em;
        margin-bottom: 16px;
    }

    .hero-title {
        font-size: 22px;
        line-height: 28px;
        margin-bottom: 23px;
    }

    .btn-show-me {
        height: 42px;
        padding: 0 12px;
        font-size: 12px;
        border-radius: 9px;
        width: auto;
    }

 
    .next-level-container {
        padding: 20px 10px 22px;
        gap: 16px;
    }

    .next-level-image-wrapper {
        min-height: 210px;
    }

    .quote-text {
        font-size: 12.5px;
        line-height: 18px;
        padding: 10px 9px;
    }

    .quote-author {
        font-size: 11.5px;
        line-height: 18px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 10px;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 17px;
    }

    .next-level-desc {
        font-size: 11px;
        line-height: 155%;
    }

    .logos-row img {
        max-height: 26px;
        max-width: 74px;
    }

    .what-we-do,
    .aboutSection {
        padding: 24px 10px 30px;
    }

    .tabs-container {
        padding: 5px;
        gap: 4px;
        margin-bottom: 16px;
    }

    .tab {
        height: 38px;
        font-size: 12.5px;
    }

    .active-tab {
        height: 38px;
    }

    .activecontactdiv {
        padding: 13px 11px;
        gap: 12px;
    }

    .active-content ul li {
        font-size: 13px;
        line-height: 23px;
    }

    .aboutCards {
        gap: 24px;
        margin-top: 20px;
    }

    .profileImg {
        height: 160px;
    }

    .gradientBar {
        padding: 13px 10px;
    }

    .textBox {
        padding: 10px 10px 11px;
    }

    .name {
        font-size: 16px;
    }

    .role {
        font-size: 12px;
    }

    .desc {
        font-size: 11px;
    }

    .clientsSection {
        padding: 20px 10px;
        gap: 13px;
    }

    .clientsHeading {
        font-size: 20px;
    }

    .logos {
        gap: 10px 12px;
    }

    .logos img {
        height: 38px;
    }

    .footer-top {
        padding: 15px 10px 17px;
        gap: 11px;
    }

    .footer-logo {
        width: 130px;
    }

    .footer-nav {
        gap: 7px;
    }

    .footer-nav a {
        font-size: 12px;
    }

    .footer-contact {
        gap: 9px;
        padding: 9px 10px 13px;
    }

    .footer-contact-item {
        gap: 7px;
    }

    .footer-icon {
        width: 30px;
        height: 30px;
    }

    .footer-label {
        font-size: 11.5px;
    }

    .footer-value {
        font-size: 12px;
    }

    .footer-bottom {
        height: 29px;
    }

    .footer-bottom p {
        font-size: 10px;
    }
}

/* 320px — Minimum Support Size */
@media (max-width: 320px) {

    .navbar {
        padding: 8px 8px;
    }

    .logonavbar {
        height: 22px;
    }

    .hero {
        padding: 94px 8px 44px;
    }

    .hero-subtitle {
        font-size: 9.5px;
        letter-spacing: 0.1em;
        margin-bottom: 14px;
    }

    .hero-title {
        font-size: 20px;
        line-height: 26px;
        margin-bottom: 22px;
    }

    .btn-show-me {
        height: 42px;
        padding: 0 12px;
        font-size: 12px;
        border-radius: 9px;
        width: auto;
    }

   

    .next-level-container {
        padding: 18px 10px 20px;
        gap: 15px;
    }

    .next-level-image-wrapper {
        min-height: 195px;
        border-radius: 8px;
    }

    .quote-text {
        font-size: 12px;
        line-height: 17px;
        padding: 9px 8px;
    }

    .quote-author {
        font-size: 11px;
        line-height: 17px;
        padding: 0 8px 10px;
    }

    .next-level-subtitle,
    .services-subtitle,
    .aboutTag {
        font-size: 9.5px;
        letter-spacing: 0.22em;
    }

    .next-level-title,
    .services-title,
    .aboutHeading,
    .active-content .title {
        font-size: 16px;
        line-height: 1.3;
    }

    .next-level-desc {
        font-size: 10.5px;
    }

    .logos-row img {
        max-height: 24px;
        max-width: 68px;
    }

    .what-we-do,
    .aboutSection {
        padding: 22px 10px 28px;
    }

    .tabs-container {
        padding: 4px;
        gap: 3px;
        margin-bottom: 15px;
    }

    .tab {
        height: 37px;
        font-size: 12px;
    }

    .active-tab {
        height: 37px;
    }

    .activecontactdiv {
        padding: 12px 10px;
        gap: 11px;
        border-radius: 7px;
    }

    .active-content ul li {
        font-size: 12.5px;
        line-height: 22px;
    }

    .aboutCards {
        gap: 22px;
        margin-top: 18px;
    }

    .profileImg {
        height: 150px;
    }

    .gradientBar {
        padding: 12px 9px;
    }

    .textBox {
        padding: 9px 9px 10px;
    }

    .name {
        font-size: 15px;
    }

    .role {
        font-size: 11.5px;
    }

    .desc {
        font-size: 10.5px;
    }

    .clientsSection {
        padding: 18px 8px;
        gap: 12px;
    }

    .clientsHeading {
        font-size: 18px;
    }

    .logos {
        gap: 8px 10px;
    }

    .logos img {
        height: 34px;
    }

    .footer-top {
        padding: 14px 8px 16px;
        gap: 10px;
    }

    .footer-logo {
        width: 120px;
    }

    .footer-nav {
        gap: 6px;
    }

    .footer-nav a {
        font-size: 11.5px;
    }

    .footer-contact {
        gap: 8px;
        padding: 8px 8px 12px;
    }

    .footer-contact-item {
        gap: 6px;
    }

    .footer-icon {
        width: 28px;
        height: 28px;
    }

    .footer-label {
        font-size: 11px;
    }

    .footer-value {
        font-size: 11.5px;
    }

    .footer-bottom {
        height: 28px;
    }

    .footer-bottom p {
        font-size: 9.5px;
    }
}