/* ==================== [ 1500px ] ==================== */
@media (min-width: 1500px) {

    /* ==================== [ Common Start ] ==================== */
    .container-fluid,
    .container {
        max-width: calc(var(--container) + (var(--container-padding) * 2));
    }

    /* ==================== [ Common End ] ==================== */
}

/* ==================== [ 1399px ] ==================== */
@media (max-width: 1399px) {

    /* ==================== [ Headings ] ==================== */
    :root {
        --h1-fs: 160px;
        --h1-lh: 170px;

        --h2-fs: 52px;
        --h2-lh: 100%;

        --h3-fs: 42px;
        --h3-lh: 100%;

        --h4-fs: 28px;
        --h4-lh: 100%;

        --h5-fs: 24px;
        --h5-lh: 100%;

        --h6-fs: 20px;
        --h6-lh: 28px;
    }

    /* ==================== [ Root CSS End ] ==================== */

    /* ==================== [ Font Sizes Start ] ==================== */
    :root {
        --fs-18: 17px;
        --fs-20: 19px;
        --fs-22: 21px;
        --fs-24: 23px;
        --fs-28: 26px;
        --fs-30: 28px;
        --fs-32: 30px;
        --fs-35: 33px;
        --fs-40: 36px;
        --fs-48: 44px;
    }

    /* ==================== [ Font Sizes End ] ==================== */

    /* ==================== [ Margins Start ] ==================== */
    :root {
        --spacing-50: 45px;
    }

    /* ==================== [ Margins End ] ==================== */

    /* ==================== [ Our Services Start ] ==================== */
    .our-services .services-container {
        padding: 60px 0 80px;
    }

    .our-services .servicesSlider .swiper-slide .card {
        max-width: 380px;
        padding: 24px;
    }

    /* ==================== [ Our Services Start ] ==================== */

    /* ==================== [ Our Vision, Mission Start ] ==================== */
    .vision-mission {
        padding: 120px 20px 0;
    }

    .vision-mission .vision-mission-wrapper::before {
        right: 30.72%;
        max-width: 350px;
    }

    .vision-mission .vision-mission-wrapper::after {
        height: 120px;
    }

    .vision-mission .vision-mission-container {
        align-items: flex-start;
    }

    .vision-mission .content .heading {
        margin-bottom: 40px;
    }

    .vision-mission .content .part-group {
        max-width: 768px;
        gap: 30px;
    }

    .vision-mission .image {
        max-width: 400px;
        width: 100%;
        aspect-ratio: 557 / 831;
    }

    /* ==================== [ Our Vision, Mission End ] ==================== */
}

/* ==================== [ 1199px ] ==================== */
@media (max-width: 1199px) {

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 120px;
        --h1-lh: 130px;

        --h2-fs: 44px;
        --h2-lh: 100%;

        --h3-fs: 36px;
        --h3-lh: 100%;

        --h4-fs: 26px;
        --h4-lh: 100%;

        --h5-fs: 22px;
        --h5-lh: 100%;

        --h6-fs: 18px;
        --h6-lh: 26px;
    }

    /* ==================== [ Headings End ] ==================== */

    /* ==================== [ Font Sizes Start ] ==================== */
    :root {
        --fs-18: 17px;
        --fs-20: 18px;
        --fs-22: 20px;
        --fs-24: 22px;
        --fs-28: 24px;
        --fs-30: 26px;
        --fs-32: 28px;
        --fs-35: 30px;
        --fs-40: 34px;
        --fs-48: 40px;
    }

    /* ==================== [ Font Sizes End ] ==================== */

    /* ==================== [ Margins Start ] ==================== */
    :root {
        --spacing-50: 40px;
    }

    /* ==================== [ Margins End ] ==================== */



    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner .left-content,
    .home-banner .right-content {
        height: 800px;
    }

    .home-banner .left-content {
        padding-right: 20px;
    }

    .home-banner .left-content .content .title * {
        line-height: 100%;
    }

    .home-banner .left-content .content .disc {
        margin-bottom: 100px;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ Our Vision, Mission Start ] ==================== */
    .vision-mission {
        padding: 100px 20px 0;
    }

    .vision-mission .vision-mission-wrapper::before {
        right: 30.72%;
        max-width: 300px;
    }

    .vision-mission .vision-mission-wrapper::after {
        height: 100px;
    }

    .vision-mission .content .heading {
        margin-bottom: 40px;
    }

    .vision-mission .content .part-group {
        max-width: 768px;
        gap: 30px;
    }

    .vision-mission .image {
        max-width: 380px;
        width: 100%;
        aspect-ratio: 557 / 831;
    }

    /* ==================== [ Our Vision, Mission End ] ==================== */
}

/* ==================== [ 991px ] ==================== */
@media (max-width: 991px) {

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 80px;
        --h1-lh: 90px;

        --h2-fs: 36px;
        --h2-lh: 100%;

        --h3-fs: 30px;
        --h3-lh: 100%;

        --h4-fs: 24px;
        --h4-lh: 100%;

        --h5-fs: 20px;
        --h5-lh: 100%;

        --h6-fs: 18px;
        --h6-lh: 24px;
    }

    /* ==================== [ Headings End ] ==================== */

    /* ==================== [ Font Sizes Start ] ==================== */
    :root {
        --fs-18: 16px;
        --fs-20: 18px;
        --fs-22: 19px;
        --fs-24: 21px;
        --fs-28: 23px;
        --fs-30: 24px;
        --fs-32: 26px;
        --fs-35: 28px;
        --fs-40: 30px;
        --fs-48: 34px;
    }

    /* ==================== [ Font Sizes End ] ==================== */

    /* ==================== [ Margins Start ] ==================== */
    :root {
        --spacing-50: 35px;
    }

    /* ==================== [ Margins End ] ==================== */

    /* ==================== [ Extra Common Start ] ==================== */
    .swiper-tools {
        gap: 12px;
    }

    .swiper-button {
        width: 40px;
        height: 40px;
    }

    .swiper-button svg {
        width: 18px;
    }

    /* ==================== [ Extra Common End ] ==================== */

    /* ==================== [ Header Start ] ==================== */
    .header .deskMenu {
        display: none !important;
    }

    .header .header-group {
        display: flex;
    }

    /* ==================== [ Header End ] ==================== */

    /* ==================== [ Floating Menu Start ] ==================== */
    .floating-menu {
        display: block;
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9;
    }

    .floating-menu .navbar-collapse ul {
        margin: 0;
        margin-bottom: 20px;
        min-width: 250px;
        background: rgba(255, 255, 255, 0.60);
        backdrop-filter: blur(6px);
        padding: 10px 20px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.05), 0px 17px 17px 0px rgba(0, 0, 0, 0.05), 0px 37px 22px 0px rgba(0, 0, 0, 0.02), 0px 66px 26px 0px rgba(0, 0, 0, 0.00), 0px 103px 29px 0px rgba(0, 0, 0, 0.00);
        border-radius: 20px;
        -webkit-border-radius: 20px;
        -moz-border-radius: 20px;
        -ms-border-radius: 20px;
        -o-border-radius: 20px;
    }

    .floating-menu .navbar-collapse ul .nav-link {
        padding: 10px 0;
        margin: 0;
        font-weight: 400;
        font-size: 18px;
        color: var(--black);
        opacity: 0.8;
    }

    .floating-menu .navbar-collapse ul .nav-item:is(:hover, :focus-visible, :active, .active, .current-menu-item) .nav-link {
        color: var(--primary);
    }

    .floating-menu .menuButton {
        display: flex;
        align-items: center;
        justify-content: flex-end;
    }

    .floating-menu .menuButton {
        width: 100%;
    }

    .floating-menu .menuButton .navbar-toggler {
        font-weight: 400;
        font-size: 20px;
        color: var(--black);
        padding: 10px 18px;
        border-radius: 50px;
        background: rgba(255, 255, 255, 0.60);
        backdrop-filter: blur(6px);
        -webkit-border-radius: 50px;
        -moz-border-radius: 50px;
        -ms-border-radius: 50px;
        -o-border-radius: 50px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid rgba(0, 0, 0, 0.10);
        box-shadow: 0px 4px 9px 0px rgba(0, 0, 0, 0.05), 0px 17px 17px 0px rgba(0, 0, 0, 0.05), 0px 37px 22px 0px rgba(0, 0, 0, 0.02), 0px 66px 26px 0px rgba(0, 0, 0, 0.00), 0px 103px 29px 0px rgba(0, 0, 0, 0.00);
    }

    .floating-menu .menuButton .navbar-toggler .bars {
        width: 20px;
        height: 20px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        flex-direction: column;
    }

    .floating-menu .menuButton .navbar-toggler .bars span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: black;
        opacity: 0.8;
        border-radius: 8px;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
    }

    .floating-menu .menuButton .navbar-toggler:not(.collapsed) .bars {
        display: block !important;
    }

    .floating-menu .menuButton .navbar-toggler:not(.collapsed) .bars span:first-child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        -webkit-transform: translate(-50%, -50%) rotate(45deg);
        -moz-transform: translate(-50%, -50%) rotate(45deg);
        -ms-transform: translate(-50%, -50%) rotate(45deg);
        -o-transform: translate(-50%, -50%) rotate(45deg);
    }

    .floating-menu .menuButton .navbar-toggler:not(.collapsed) .bars span:last-child {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        -webkit-transform: translate(-50%, -50%) rotate(-45deg);
        -moz-transform: translate(-50%, -50%) rotate(-45deg);
        -ms-transform: translate(-50%, -50%) rotate(-45deg);
        -o-transform: translate(-50%, -50%) rotate(-45deg);
    }

    /* ==================== [ Floating Menu End ] ==================== */

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner .home-banner-container {
        flex-direction: column;
    }

    .home-banner .left-content,
    .home-banner .right-content {
        height: fit-content;
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        flex-direction: column;
        justify-content: space-between;
        gap: 80px;
    }

    .home-banner .left-content {
        padding-top: 80px;
        padding-bottom: 0;
    }

    .home-banner .left-content .content .title * {
        font-size: 30px;
        line-height: 100%;
    }

    .home-banner .left-content .content .disc {
        margin-bottom: 100px;
        line-height: 140%;
    }

    .home-banner .branding {
        position: relative;
        left: unset;
        transform: unset;
        -webkit-transform: unset;
        -moz-transform: unset;
        -ms-transform: unset;
        -o-transform: unset;
    }

    .home-banner .branding>* {
        font-size: clamp(28px, -1.57px + 9.24vw, 90px);
        /* 28px, viewport: 320px -> 90px, viewport: 991px */
    }

    .home-banner .branding::before {
        height: clamp(60px, 10.40px + 15.50vw, 164px);
        /* 60px, viewport: 320px -> 164px, viewport: 991px */
        width: clamp(42px, 8.14px + 10.58vw, 113px);
        /* 42px, viewport: 320px -> 113px, viewport: 991px */
        top: clamp(-99px, -16.29px + -8.35vw, -43px);
        /* 42px, viewport: 320px -> 113px, viewport: 991px */
        left: clamp(-60px, -0.92px + -5.96vw, -20px);
        /* -20px, viewport: 320px -> -60px, viewport: 991px */
    }

    /* ==================== [ Home Banner End ] ==================== */


    /* ==================== [ About Us Start ] ==================== */
    .about-us {
        position: relative;
        padding: 80px 20px 80px 20px;
    }

    .about-us .about-container::before {
        display: none;
    }

    .about-us .about-flex {
        flex-direction: column;
        gap: 30px;
    }

    .about-us .left-content {
        flex-shrink: 0;
    }

    .about-us .right-content .disc * {
        line-height: 35px;
    }

    /* ==================== [ About Us End ] ==================== */

    /* ==================== [ Our Services Start ] ==================== */
    .our-services .services-container {
        padding: 80px 0;
    }

    .our-services .heading-container {
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .our-services .services-container .heading {
        text-align: center;
    }

    .our-services .servicesSlider .swiper-slide .card {
        max-width: 340px;
        padding: 20px;
    }

    /* ==================== [ Our Services Start ] ==================== */

    /* ==================== [ Our Vision, Mission Start ] ==================== */
    .vision-mission {
        padding: 80px 20px 0;
    }

    .vision-mission .vision-mission-wrapper::before {
        right: 50%;
        max-width: 300px;
        bottom: 70px;
        top: auto;
    }

    .vision-mission .vision-mission-wrapper::after {
        height: 80px;
    }

    .vision-mission .vision-mission-container {
        flex-direction: column;
        gap: 40px;
    }

    .vision-mission .content .heading {
        margin-bottom: 35px;
        text-align: center;
    }

    .vision-mission .content .part-group {
        max-width: 768px;
        gap: 24px;
    }

    .vision-mission .image {
        margin-inline: auto;
        max-width: 320px;
    }

    /* ==================== [ Our Vision, Mission End ] ==================== */
}

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

    /* ==================== [ Headings Start ] ==================== */
    :root {
        --h1-fs: 48px;
        --h1-lh: 56px;

        --h2-fs: 32px;
        --h2-lh: 100%;

        --h3-fs: 26px;
        --h3-lh: 100%;

        --h4-fs: 22px;
        --h4-lh: 100%;

        --h5-fs: 18px;
        --h5-lh: 100%;

        --h6-fs: 16px;
        --h6-lh: 22px;
    }

    /* ==================== [ Headings End ] ==================== */

    /* ==================== [ Font Sizes Start ] ==================== */
    :root {
        --fs-18: 16px;
        --fs-20: 17px;
        --fs-22: 18px;
        --fs-24: 20px;
        --fs-28: 22px;
        --fs-30: 23px;
        --fs-32: 24px;
        --fs-35: 26px;
        --fs-40: 28px;
        --fs-48: 30px;
    }

    /* ==================== [ Font Sizes End ] ==================== */

    /* ==================== [ Margins Start ] ==================== */
    :root {
        --spacing-50: 30px;
    }

    /* ==================== [ Margins End ] ==================== */

    /* ==================== [ About Us Start ] ==================== */
    .about-us {
        padding: 60px 20px 60px 20px;
    }

    .about-us .about-flex {
        gap: 30px;
    }

    .about-us .left-content {
        width: 100%;
    }

    .about-us .left-content .title {
        text-align: center;
    }

    .about-us .left-content .image {
        max-width: 100%;
    }

    .about-us .right-content .disc * {
        line-height: 35px;
    }

    /* ==================== [ About Us End ] ==================== */

    /* ==================== [ Our Services Start ] ==================== */
    .our-services .services-container {
        padding: 60px 0;
    }

    .our-services .servicesSlider .swiper-slide {
        width: 100%;
    }

    .our-services .servicesSlider .swiper-slide .card {
        padding: 20px;
        max-width: 100%;
        width: 100%;
    }

    /* ==================== [ Our Services Start ] ==================== */

    /* ==================== [ Our Vision, Mission Start ] ==================== */
    .vision-mission {
        padding: 60px 20px 0;
    }

    .vision-mission .vision-mission-wrapper::before {
        transform: translateX(50%);
        right: calc(50% + 150px);
        max-width: 260px;
        bottom: 60px;
        top: auto;
        -webkit-transform: translateX(50%);
        -moz-transform: translateX(50%);
        -ms-transform: translateX(50%);
        -o-transform: translateX(50%);
    }


    .vision-mission .vision-mission-wrapper::after {
        height: 70px;
    }

    .vision-mission .vision-mission-container {
        flex-direction: column;
        gap: 40px;
    }

    .vision-mission .content .heading {
        margin-bottom: 35px;
        text-align: center;
    }

    .vision-mission .content .part-group {
        max-width: 768px;
        gap: 24px;
        flex-direction: column;
    }

    .vision-mission .content .part-group .seprator {
        display: none;
    }

    .vision-mission .image {
        margin-inline: auto;
        max-width: 280px;
    }

    /* ==================== [ Our Vision, Mission End ] ==================== */
}

/* ==================== [ 575px ] ==================== */
@media (max-width: 575px) {

    /* ==================== [ Home Banner Start ] ==================== */
    .home-banner .left-content .content .disc {
        margin-bottom: 80px;
        max-width: 100%;
        text-align: center;
    }

    .home-banner .left-content .content .disc * {
        margin-bottom: 0;
    }

    .home-banner .left-content .content .action,
    .home-banner .left-content .content .title {
        margin-inline: auto;
    }

    .home-banner .left-content .content .title * {
        text-align: center;
    }

    /* ==================== [ Home Banner End ] ==================== */

    /* ==================== [ About Us Start ] ==================== */
    .about-us {
        padding-block: 40px;
    }

    .about-us .right-content .disc * {
        line-height: normal;
    }

    /* ==================== [ About Us End ] ==================== */

    /* ==================== [ Our Services Start ] ==================== */
    .our-services .services-container {
        padding: 40px 0;
    }

    /* ==================== [ Our Services Start ] ==================== */

    /* ==================== [ Our Vision, Mission Start ] ==================== */
    .vision-mission {
        padding: 40px 20px 0;
    }

    .vision-mission .vision-mission-wrapper::before {
        right: calc(50% + 120px);
        max-width: 220px;
        bottom: 60px;
    }

    .vision-mission .vision-mission-wrapper::after {
        height: 70px;
    }

    .vision-mission .content .part-group .part .title * {
        margin-bottom: 10px;
    }

    .vision-mission .content .heading {
        margin-bottom: 35px;
        text-align: center;
    }

    .vision-mission .image {
        max-width: 260px;
    }

    /* ==================== [ Our Vision, Mission End ] ==================== */
}