/* Big Tablets and below */
@media (min-width: 2400px) {
    .bwsBottom-right img {
        max-width: 15vw;
    }
}

@media (max-width: 1440px) {
    :root {
        --font-size-h1: 80px;
        --font-size-h2: 38px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --font-size-h5: 18px;
        --font-size-h6: 16px;
        --font-size-p: 15px;
    }

    /* footer start */
    .footerTop {
        height: 778px;
    }

    /* Footer Close */
    /* Homepage start********************************* */
    .hero {
        height: 800px;
    }

    .hero-content h1 {
        font-size: 90px;
    }

    .hero-buttons .btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Section three start */
    .about-grid {
        flex-direction: row;
        gap: 50px;
        flex-wrap: wrap;
    }

    .about-left h1 {
        font-size: 32px;
    }

    .feature-grid {
        flex-direction: row;
        flex-wrap: nowrap;
    }

    .feature-box {
        flex: 1 1 100%;
    }

    .about-bottom-text {
        font-size: 70px;
    }

    /* Section three close */

    /* section four start */
    .service-block {
        gap: 30px;
        flex-wrap: nowrap;
        padding: 50px 0px;
    }

    /* section four close */

    /* Section five start */
    .location-slider .swiper-slide {
        height: 628px;
    }


    .location-slider .swiper-button-next,
    .location-slider .swiper-button-prev {
        display: block !important;
    }

    .location-slider .swiper-button-prev.swiper-button-prev.metro-prev {
        left: 20px;
        top: 20px;
        width: 40px !important;
    }

    .location-slider .swiper-button-next.metro-next {
        top: 20px;
        left: 60px;
        width: 40px !important;
    }

    .location-slider .slide-content .slide-content-text {
        font-size: 20px;
        padding: 68px 0px;
    }

    /* Section five close */

    /* Section 6 start */
    .building-slider .slider-item {
        flex: 0 0 65%;
        /* approx 1.8 slides */
        height: 400px;
    }

    .building-slider .slider-info h3 {
        font-size: 18px;
    }

    .building-slider .slider-info p {
        font-size: 14px;
    }

    .buildingSwiper .swiper-slide {
        padding: 0 !important;
        margin-right: 10px !important;
    }

    .building-tomorrow .slide-inner .sliderImage img {
        height: 350px;
    }

    /* Section 6 close */

    /* Section 7 start */
    .buildWithSaraya-card .card-left {
        max-width: 583px;
        padding-right: 50px;
    }

    .buildWithSaraya-card .buildWithSaraya-text {
        color: var(--white-color);
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }

    .buildWithSaraya-card .card-left {
        max-width: 965px;
    }

    .buildWithSaraya-img {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .buildWithSaraya-heading {
        color: var(--white-color);
        font-size: 20px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -0.6px;
        margin-top: 20px;
    }

    .bswCardText {
        color: var(--white-color);
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        opacity: .6;
    }

    .buildWithSaraya-card.bottom-card {
        gap: 40px;
        width: 100%;
        margin-top: 40px;
    }

    .bwsBottom-left {
        max-width: 377px;
        width: 100%;
        margin: -20rem 0 0 0;
    }

    .bwsBottom-right {
        max-width: 1210px;
        width: 100%;
        gap: 20px;
        margin: 5rem 0 0 0;
    }

    .bwsBottom-right img {
        max-width: 30vw;
        width: 100%;
        border-radius: 12px;
        object-fit: cover;
        margin: 0px;
    }

    .bwsBottom-right .buildWithSaraya-heading {
        margin-top: 0px;
    }

    /* Section 7 close */

    /* Section 8 start */
    .equipmentGrid .equipmentCardLeft {
        width: 24%;
    }

    .equipmentGrid .equipmentCardRight {
        width: 76%;
        margin-top: 70px;
    }

    .equipmentSlider .slide-inner .sliderImage img {
        height: 300px;
        border-radius: 12px;
        object-fit: cover;
    }

    /* Section 8 close */
    /* Homepage close********************************* */

    /* About us start******************************* */

    /* Section seven start */
    .abtBottom {
        padding: 80px 0px 40px;
        background-color: #fff;
    }

    .abtBottom-grid {
        display: flex;
        justify-content: center;
        gap: 60px;
        flex-wrap: wrap;
        text-align: center;
    }

    .abtBottom-item {
        flex: 1 1 30%;
        max-width: 300px;
    }

    /* Section seven close */
    /* About us close******************************* */

    /* ***************************************************** *
/* Project page start *********************************/
    /* === DEFINING TOMORROW SECTION === */
    .project-page-header a {
        color: var(--primary-color);
    }

    .definingTomorrow {
        padding: 0px 0px;
    }

    .definingTomorrow-top {
        padding: 180px 0px 0px;
        max-width: 550px;
        margin: auto;
    }


    .definingTomorrow-subtitle {
        color: var(--primary-color);
        text-align: center;
        font-size: 14px;
        opacity: 0.6;
    }

    .definingTomorrow-heading {
        font-size: 98px !important;
        line-height: 95px;
    }

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

    /* Bottom Flex Row */
    .definingTomorrow-innerBox {
        display: flex;
        gap: 20px 0px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .definingTomorrow-innerBox .img-box {
        width: 50%;
    }

    .definingTomorrow-innerBox .img-box img {
        height: 450px !important;
    }

    /* Section two start********************************** */
    .riyadhMetro {
        padding: 79px 0px;
    }

    .riyadhMetro-row {
        flex-wrap: nowrap;
        gap: 40px;
    }

    /* Left Column */
    .riyadhMetro-left {
        width: 35%;
        padding-top: 42px;
    }

    .riyadhMetro-right {
        width: 65%;
    }

    .riyadhMetroSlider .swiper-slide img {
        height: 556px;
        border-radius: 12px;
    }

    /* Section two close********************************** */

    /* Section three start */
    /* === PROJECT SHOWCASE === */
    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-heading h2 {
        font-size: 48px;
    }

    .projectShowcase-gallery {
        gap: 35px;
        flex-wrap: wrap;
        margin-top: 91px;
    }

    .projectShowcase-card {
        width: 31%;
    }

    /* Section three start */

    /* Project page close********************************* */
    /* ****************************************************** */



}

@media (max-width: 1330px) {

    /* footer start */
    .footerTop {
        height: 578px;
    }

    /* Footer Close */

    .bwsBottom-left {
        max-width: 377px;
        width: 100%;
        margin: -15rem 0 0 0;
    }

    .bwsBottom-right {
        max-width: 1210px;
        width: 100%;
        gap: 20px;
        margin: 5rem 0 0 0;
    }

    /* section 9 start */
    .certificateArea .certificateImage {
        height: 120px;
    }

    .certificateArea .certificateImage::before {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage::after {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage img {
        max-width: 150px;
    }

    /* section 9 close */
    /* Homepage clsoe*************************************************** */

    /* Abour us start********************************* */
    .hero-content h1 {
        font-size: 75px;
    }

    .aboutHero .heroRight {
        max-width: 604px;
    }

    /* Our mission start */
    .ourVision {
        padding: 80px 0px;
        background-size: cover;
    }

    .ourVision-heading {
        font-size: 44px;
        line-height: normal;
    }

    .ourVision-buttons {
        flex-direction: row;
    }

    .ourVision-btn-primary,
    .ourVision-btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* Abour us close********************************* */
}

@media (max-width: 1150px) {
    .bwsBottom-left {
        max-width: 377px;
        width: 100%;
        margin: -8rem 0 0 0;
    }

    .bwsBottom-right {
        max-width: 1210px;
        width: 100%;
        gap: 20px;
        margin: 2rem 0 0 0;
        flex-direction: column;
    }

    .bwsBottom-right img {
        max-width: 100%;
        width: 100%;
        border-radius: 12px;
        object-fit: cover;
        margin: 0px;
    }

    /* Section 8 start */
    .equipmentSection {
        padding: 60px 0px;
    }

    .equipmentGrid {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 20px;
    }

    .equipmentGrid .equipmentCardLeft {
        width: 30%;
    }

    .equipmentGrid .equipmentCardRight {
        width: 70%;
        margin-top: 70px;
    }

    .equipmentSlider .slide-inner .sliderImage img {
        height: 250px;
        border-radius: 12px;
        object-fit: cover;
    }

    /* Section 8 close */

    /* section 9 start */
    .certificateArea .certificateImage {
        height: 120px;
    }

    .certificateArea .certificateImage::before {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage::after {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage img {
        max-width: 150px;
    }

    /* section 9 close */
    /* homepage close**************************************************** */

    /* About us tart**************************************************** */
    .hero-content h1 {
        font-size: 75px;
    }

    /* About us close ****************************************************/


    /* ***************************************************** *
    /* Project page start *********************************/
    /* === DEFINING TOMORROW SECTION === */
    .project-page-header a {
        color: var(--primary-color);
    }

    .definingTomorrow {
        padding: 0px 0px;
    }

    .definingTomorrow-top {
        padding: 120px 0px 0px;
        max-width: 550px;
        margin: auto;
    }


    .definingTomorrow-subtitle {
        color: var(--primary-color);
        text-align: center;
        font-size: 14px;
        opacity: 0.6;
    }

    .definingTomorrow-heading {
        font-size: 78px !important;
        line-height: 70px;
    }

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

    /* Bottom Flex Row */
    .definingTomorrow-innerBox {
        display: flex;
        gap: 20px 0px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .definingTomorrow-innerBox .img-box {
        width: 50%;
    }

    .definingTomorrow-innerBox .img-box img {
        height: 350px !important;
    }

    /* Section two start********************************** */
    .riyadhMetro {
        padding: 69px 0px;
    }

    .riyadhMetro-row {
        flex-wrap: nowrap;
        gap: 40px;
    }

    /* Left Column */
    .riyadhMetro-left {
        width: 35%;
        padding-top: 42px;
    }

    .riyadhMetro-right {
        width: 65%;
    }

    .riyadhMetroSlider .swiper-slide img {
        height: 456px;
        border-radius: 12px;
    }

    /* Section two close********************************** */

    /* Section three start */
    /* === PROJECT SHOWCASE === */
    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-heading h2 {
        font-size: 48px;
    }

    .projectShowcase-gallery {
        gap: 25px;
        flex-wrap: wrap;
        margin-top: 91px;
    }

    .projectShowcase-card {
        width: 31%;
    }

    .projectShowcase-thumb img {
        height: 202px;
    }

    /* Section three start */

    /* Project page close********************************* */
    /* ****************************************************** */


}

/* Big Tablets and below */
@media (max-width: 1024px) {
    :root {
        --font-size-h1: 60px;
        --font-size-h2: 32px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --font-size-h5: 18px;
        --font-size-h6: 16px;
        --font-size-p: 15px;
    }

    /* footer start */
    .footerTop {
        height: 578px;
    }

    /* Footer Close */
    /* Homepage start********************************* */
    .hero {
        height: 600px;
    }

    .hero-content h1 {
        font-size: 70px;
    }

    .hero-buttons .btn {
        font-size: 14px;
        padding: 10px 20px;
    }


    /* Section three start */
    .about-grid {
        flex-direction: row;
        gap: 50px;
        flex-wrap: wrap;
    }

    .about-left h1 {
        font-size: 32px;
    }

    .feature-grid {
        flex-direction: row;
    }

    .feature-box {
        flex: 1 1 100%;
    }

    .about-bottom-text {
        font-size: 60px;
    }

    /* Section three close */

    /* section four start */
    .service-block {
        gap: 30px;
        flex-wrap: nowrap;
        padding: 50px 0px;
    }

    /* section four close */

    /* Section five start */
    .location-slider .swiper-slide {
        height: 628px;
    }


    .location-slider .swiper-button-next,
    .location-slider .swiper-button-prev {
        display: block !important;
    }

    .location-slider .swiper-button-prev.swiper-button-prev.metro-prev {
        left: 20px;
        top: 20px;
        width: 40px !important;
    }

    .location-slider .swiper-button-next.metro-next {
        top: 20px;
        left: 60px;
        width: 40px !important;
    }

    .location-slider .slide-content .slide-content-text {
        font-size: 18px;
        padding: 68px 0px;
    }

    /* Section five close */

    /* Section six start */
    .building-tomorrow .section-title {
        font-size: 38px;
        max-width: 450px;
    }

    .building-tomorrow .section-description {
        max-width: 550px;
    }

    .buildingSwiper .swiper-slide {
        padding: 0 !important;
        margin-right: 10px !important;
    }

    .building-tomorrow .slide-inner .sliderImage img {
        height: 300px;
    }

    /* Section six close */

    /* section 7 start */
    .bwsBottom-left {
        max-width: 377px;
        width: 100%;
        margin: -5rem 0 0 0;
    }

    /* section 7 close */
    /* Section 8 start */
    .equipmentSection {
        padding: 60px 0px;
    }

    .equipmentGrid {
        display: flex;
        justify-content: space-between;
        align-items: start;
        gap: 20px;
    }

    .equipmentGrid .equipmentCardLeft {
        width: 30%;
    }

    .equipmentGrid .equipmentCardRight {
        width: 70%;
        margin-top: 70px;
    }

    .equipmentSlider .slide-inner .sliderImage img {
        height: 220px;
        border-radius: 12px;
        object-fit: cover;
    }

    /* Section 8 close */

    /* section 9 start */
    .certificateArea .certificateImage {
        height: 120px;
    }

    .certificateArea .certificateImage::before {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage::after {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage img {
        max-width: 150px;
    }

    /* section 9 close */
    /* Homepage close********************************* */

    /* Abour us start********************************* */
    .aboutHero .heroRight {
        max-width: 100%;
        margin-top: 40px;
    }

    /* Our mission start */
    .ourVision {
        padding: 80px 0px;
        background-size: cover;
    }

    .ourVision-heading {
        font-size: 42px;
        line-height: normal;
    }

    .ourVision-buttons {
        flex-direction: row;
    }

    .ourVision-btn-primary,
    .ourVision-btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* Section 4 OUR Mission start */
    .ourMission .card-left {
        max-width: 650px;
    }

    .ourMission .card-right {
        max-width: 450px;
    }

    .ourMission .card-right .card-right-text {
        color: var(--white-color);
        font-size: 24px;
        margin: 0px 0 50px;
    }

    /* Section 4 OUR Mission close */

    /* Section 6 Our Pillars start */
    .ourPillars .secTitle {
        font-size: 44px;
    }

    .ourPillars-grid {
        gap: 50px;
        flex-wrap: nowrap;
        margin-top: 50px;
    }

    .ourPillars-column {
        max-width: 200px;
    }

    /* Section 6 Our Pillars close */

    /* Section seven start */
    /* section seven start */
    .abtBottom {
        padding: 80px 0px 40px;
        background-color: #fff;
    }

    .abtBottom-grid {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        text-align: center;
    }

    .abtBottom-item {
        flex: 1 1 30%;
        max-width: 300px;
    }

    /* Section seven close */
    /* Section seven close */
    /* Abour us close********************************* */

    /* Project page start****************************** */
    /* Section three start */
    /* === PROJECT SHOWCASE === */
    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-heading h2 {
        font-size: 48px;
    }

    .projectShowcase-gallery {
        gap: 25px;
        flex-wrap: wrap;
        margin-top: 91px;
    }

    .projectShowcase-card {
        width: 31%;
    }

    .projectShowcase-thumb img {
        height: 202px;
    }

    /* Section three start */
    /* Project page close********************************** */



}

/* Tablets and below */
@media (max-width: 992px) {
    :root {
        --font-size-h1: 54px;
        --font-size-h2: 28px;
        --font-size-h3: 24px;
        --font-size-h4: 20px;
        --font-size-h5: 18px;
        --font-size-h6: 16px;
        --font-size-p: 15px;
    }

    /* footer start */
    .footerTop {
        height: 478px;
    }

    .footerMiddle-grid {
        display: flex;
        flex-wrap: wrap;
        gap: 30px;
    }

    /* Footer Close */

    /* Homepage start********************************* */
    .hero-content h1 {
        font-size: 70px;
    }

    .hero-buttons .btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Hero section close */

    /* Section two start */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Section two close */

    /* Section three start */
    .about-grid {
        flex-direction: column;
        gap: 80px;
        flex-wrap: wrap;
    }

    .about-left h1 {
        font-size: 32px;
    }

    .feature-grid {
        flex-direction: column;
    }

    .feature-box {
        flex: 1 1 100%;
    }

    .about-bottom-text {
        font-size: 50px;
    }

    /* Section three close */

    /* Section four start */
    .service-block {
        flex-direction: column-reverse;
    }

    .service-block.reverse {
        flex-direction: column;
    }

    .service-text h2 {
        font-size: 28px;
    }

    .divider-label {
        font-size: 16px;
        padding: 5px 12px;
    }

    .service-image {
        flex: 1 1 45%;
        border-radius: 12px;
        max-width: 1024px;
        width: 100%;
        align-self: stretch;
    }

    /* Seciton four close */

    /* Section five start */
    .location-slider .swiper-slide {
        height: 628px;
    }


    .location-slider .swiper-button-next,
    .location-slider .swiper-button-prev {
        display: block !important;
    }

    .location-slider .swiper-button-prev.swiper-button-prev.metro-prev {
        left: 20px;
        top: 20px;
        width: 40px !important;
    }

    .location-slider .swiper-button-next.metro-next {
        top: 20px;
        left: 60px;
        width: 40px !important;
    }

    .location-slider .slide-content .slide-content-text {
        font-size: 18px;
        padding: 68px 0px;
    }

    /* Section five close */

    /* Section Six start */
    .building-tomorrow .section-title {
        font-size: 38px;
        max-width: 100%;
    }

    .building-tomorrow .section-description {
        max-width: 100%;
    }

    .buildingSwiper .swiper-slide {
        padding: 0 !important;
        margin-right: 10px !important;
    }

    .building-tomorrow .slide-inner .sliderImage img {
        height: 280px;
    }

    /* Section Six Close */

    /* Section 7 start */
    .bwsBottom-left {
        max-width: 100%;
        width: 100%;
        margin: 1rem 0 1rem 0;
        display: flex;
        gap: 20px;
    }

    .bwsBottom-left img {
        max-width: 300px;
        object-fit: cover;
    }

    .bwsBottom-left .buildWithSaraya-heading {
        margin-top: 0px;
    }

    .bwsBottom-right {
        max-width: 100%;
        width: 100%;
        gap: 20px;
        margin: 5rem 0 0 0;
        flex-direction: row;
        display: flex;
    }

    .bwsBottom-right img {
        max-width: 400px;
        width: 100%;
        border-radius: 12px;
        object-fit: cover;
        margin: 0px;
    }

    .bwsBottom-right .buildWithSaraya-heading {
        margin-top: 0px;
    }

    /* Section 7 close */
    /* Section 8 start */
    .equipmentSection {
        padding: 60px 0px;
    }

    .equipmentGrid {
        display: flex;
        justify-content: space-between;
        align-items: start;
        flex-direction: column;
        gap: 20px;
    }

    .equipmentGrid .equipmentCardLeft {
        width: 100%;
    }

    .equipmentCardLeft p {
        margin-top: 20px;
    }

    .equipmentGrid .equipmentCardRight {
        width: 100%;
        margin-top: 0px;
    }

    .equipmentSlider .slide-inner .sliderImage img {
        height: 250px;
        border-radius: 12px;
        object-fit: cover;
    }

    /* Section 8 close */
    /* section 9 start */
    .certificateArea .certificateImage {
        height: 120px;
    }

    .certificateArea .certificateImage::before {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage::after {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage img {
        display: block;
        max-width: 150px;
        height: auto;
        object-fit: contain;
        z-index: 2;
        filter: grayscale(1);
    }

    /* section 9 close */
    /* Homepage close********************************* */

    /* About us start********************************* */
    /* Section 4 OUR Mission start */
    .aboutHero .hero-overlay {
        padding-bottom: 50px;
    }

    .ourMission .card-left {
        max-width: 650px;
    }

    .ourMission .card-right {
        max-width: 450px;
    }

    .ourMission .card-right .card-right-text {
        color: var(--white-color);
        font-size: 24px;
        margin: 40px 0 50px;
    }

    /* Section 4 OUR Mission close */

    /* Section seven start aboutUsBuildingTomorrow */
    .innerAboutUsBuilding {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .aboutUsBuildingTomorrow .img-box {
        width: 48%;
    }

    .aboutUsBuildingTomorrow .img-box .container {
        padding: 0px 0px !important;
    }

    /* Section seven close aboutUsBuildingTomorrow */

    /* About us close ********************************** */


    /* ***************************************************** *
    /* Project page start *********************************/
    /* === DEFINING TOMORROW SECTION === */
    .project-page-header a {
        color: var(--primary-color);
    }

    .definingTomorrow {
        padding: 0px 0px;
    }

    .definingTomorrow-top {
        padding: 120px 0px 0px;
        max-width: 550px;
        margin: auto;
    }


    .definingTomorrow-subtitle {
        color: var(--primary-color);
        text-align: center;
        font-size: 14px;
        opacity: 0.6;
    }

    .definingTomorrow-heading {
        font-size: 78px !important;
        line-height: 70px;
    }

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

    /* Bottom Flex Row */
    .definingTomorrow-innerBox {
        display: flex;
        gap: 20px 0px;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .definingTomorrow-innerBox .img-box {
        width: 50%;
    }

    .definingTomorrow-innerBox .img-box img {
        height: 350px !important;
    }

    /* Section two start********************************** */
    .riyadhMetro {
        padding: 69px 0px;
    }

    .riyadhMetro-row {
        flex-wrap: wrap;
        gap: 40px;
    }

    /* Left Column */
    .riyadhMetro-left {
        width: 100%;
        gap: 20px;
        padding: 0;
    }

    .riyadhMetro-right {
        width: 100%;
    }

    .riyadhMetroSlider .swiper-slide img {
        height: 300px;
        border-radius: 12px;
    }

    /* Section two close********************************** */

    /* Section three start */
    /* === PROJECT SHOWCASE === */
    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-heading h2 {
        font-size: 48px;
    }

    .projectShowcase-gallery {
        gap: 50px;
        flex-wrap: wrap;
        margin-top: 91px;
    }

    .projectShowcase-card {
        width: 31.2%;
    }

    /* Section three start */

    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-heading h2 {
        font-size: 28px;
    }

    .projectShowcase-gallery {
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 91px;
    }

    .projectShowcase-card {
        width: 48%;
    }

    .projectShowcase-thumb img {
        height: 250px;
    }

    /* section three close */

    /* Project page close********************************* */
    /* ****************************************************** */

}

/* Tablets <768px */
@media (max-width: 768px) {
    :root {
        --font-size-h1: 48px;
        --font-size-h2: 24px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
        --font-size-h5: 16px;
        --font-size-h6: 14px;
        --font-size-p: 14px;
    }

    /* footer start */
    .footerTop {
        height: 428px;
    }

    .footerLogoArea {
        max-width: 100%;
    }

    .footerMiddle-grid {
        flex-direction: column;
    }

    .footerTop-text {
        font-size: 48px;
    }

    .footerLogoArea,
    .companyArea,
    .helpArea,
    .newsletterArea {
        flex: 1 1 100%;
    }

    /* Footer Close */

    /* Homepage start********************************* */
    .hero-content h1 {
        font-size: 46px;
    }

    .hero-buttons .btn {
        font-size: 14px;
        padding: 10px 20px;
    }

    /* Hero section close */

    /* Section two start */
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat-number {
        font-size: 36px;
    }


    .stat-description {
        font-size: 14px;
    }

    /* Section two close */

    /* Section three start */
    .about-grid {
        flex-direction: column;
        gap: 50px;
        flex-wrap: wrap;
    }

    .about-left h1 {
        font-size: 32px;
    }

    .feature-grid {
        flex-direction: column;
    }

    .feature-box {
        flex: 1 1 100%;
    }

    .about-bottom-text {
        font-size: 40px;
        padding-top: 60px;
    }

    /* Section three close */

    /* Section four start */
    .services-grid {
        flex-direction: column;
        gap: 30px;
        text-align: center;
    }

    .services-title h2 {
        color: #000;
        font-size: 36px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        letter-spacing: -1.08px;
        opacity: .2;
    }


    /* Section four close */

    /* Section five start */
    .location-slider .swiper-slide {
        height: 588px;
    }

    .location-slider .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .location-slider .swiper-button-next,
    .location-slider .swiper-button-prev {
        display: block !important;
    }

    .location-slider .swiper-button-prev.swiper-button-prev.metro-prev {
        left: 20px;
        top: 0px;
        width: 40px !important;
    }

    .location-slider .swiper-button-next.metro-next {
        top: 0px;
        left: 60px;
        width: 40px !important;
    }

    .location-slider .slide-content .slide-content-text {
        font-size: 18px;
        padding: 68px 0px;
    }

    /* Section five close */

    /* Section Six start */
    .building-tomorrow .section-title {
        font-size: 38px;
        max-width: 100%;
    }

    .building-tomorrow .section-description {
        max-width: 100%;
    }

    .buildingSwiper .swiper-slide {
        padding: 0 !important;
        margin-right: 10px !important;
    }

    .buildingSwiper .slide-inner .container {
        padding: 0px 10px 0px 0px !important;
    }

    .building-tomorrow .slide-inner .sliderImage img {
        height: 280px;
    }

    /* Section Six Close */

    /* Section 7 start */
    .buildWithSaraya-card .card-left {
        padding: 0 0 20px 0;
    }

    .buildWithSaraya-card.top-card.d-flex.justify-content-between.align-items-start {
        flex-direction: column;
    }

    .buildWithSaraya-heading {
        margin-top: 0px;
    }

    .bwsBottom-left {
        max-width: 100%;
        width: 100%;
        margin: 1rem 0 1rem 0;
        display: flex;
        gap: 20px;
        flex-direction: column;
    }

    .bwsBottom-left img {
        max-width: 100%;
        height: 300px;
        object-fit: cover;
        margin-bottom: 0;

    }

    .bwsBottom-left .buildWithSaraya-heading {
        margin-top: 0px;
    }

    .bwsBottom-right {
        max-width: 100%;
        width: 100%;
        gap: 20px;
        margin: 5rem 0 0 0;
        flex-direction: column;
        display: flex;
    }

    .bwsBottom-right img {
        max-width: 100%;
        height: 300px;
        border-radius: 12px;
        object-fit: cover;
        margin: 0px;
    }

    .bwsBottom-right .buildWithSaraya-heading {
        margin-top: 0px;
    }

    /* Section 7 close */

    /* section 9 start */
    .certificateArea .certificateImage {
        height: 120px;
    }

    .certificateArea .certificateImage::before {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage::after {
        width: 76px;
        height: 100%;
    }

    .certificateArea .certificateImage img {
        display: block;
        max-width: 150px;
        height: auto;
        object-fit: contain;
        z-index: 2;
        filter: grayscale(1);
    }

    /* section 9 close */
    /* Homepage close********************************* */

    /* Abour us start********************************* */
    /* Our mission start */
    .ourVision {
        padding: 80px 0px;
        background-size: cover;
    }

    .ourVision-heading {
        font-size: 34px;
        line-height: normal;
    }

    .ourVision-buttons {
        flex-direction: row;
    }

    .ourVision-btn-primary,
    .ourVision-btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* Our vision start */
    .ourMission .card-left {
        max-width: 100%;
    }

    .ourMission .card-right {
        max-width: 100%;
    }

    /* Our vision close */

    /* Section 6 Our Pillars start */
    .ourPillars .secTitle {
        font-size: 44px;
    }

    .ourPillars-grid {
        gap: 50px;
        flex-wrap: nowrap;
        margin-top: 50px;
    }

    .ourPillars-column {
        max-width: 100%;
    }

    /* Section 6 Our Pillars close */

    /* section seven start */
    .abtBottom {
        padding: 80px 0px 40px;
        background-color: #fff;
    }

    .abtBottom-grid {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        text-align: center;
    }

    .abtBottom-title {
        font-size: 28px;

    }

    .abtBottom-item {
        flex: 1 1 30%;
        max-width: 200px;
    }

    /* Section seven close */
    /* Abour us close********************************* */


    /* ***************************************************** *
    /* Project page start *********************************/
    /* === DEFINING TOMORROW SECTION === */
    .project-page-header a {
        color: var(--primary-color);
    }

    .definingTomorrow {
        padding: 0px 0px;
    }

    .definingTomorrow-top {
        padding: 120px 0px 0px;
        max-width: 550px;
        margin: auto;
    }


    .definingTomorrow-subtitle {
        color: var(--primary-color);
        text-align: center;
        font-size: 14px;
        opacity: 0.6;
    }

    .definingTomorrow-heading {
        font-size: 68px !important;
        line-height: 60px;
    }

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

    /* Bottom Flex Row */
    .definingTomorrow-innerBox {
        display: flex;
        gap: 20px 0px;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 !important;
    }

    .definingTomorrow-innerBox .img-box {
        width: 100%;
    }

    .definingTomorrow-innerBox .img-box .container {
        padding: 0 !important;
    }

    .definingTomorrow-innerBox .img-box img {
        height: 260px !important;
    }

    /* Section three start */


    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-topRow {
        margin-bottom: 0px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .projectShowcase-heading h2 {
        font-size: 28px;
    }

    .projectShowcase-gallery {
        gap: 20px;
        flex-wrap: wrap;
        margin-top: 40px;
    }

    .projectShowcase-card {
        width: 48%;
    }

    .projectShowcase-thumb img {
        height: 250px;
    }

    /* section three close */

    /* Project page close********************************* */
    /* ****************************************************** */


}

/* Mobile <576px */
@media (max-width: 576px) {
    :root {
        --font-size-h1: 48px;
        --font-size-h2: 30px;
        --font-size-h3: 22px;
        --font-size-h4: 16px;
        --font-size-h5: 14px;
        --font-size-h6: 13px;
        --font-size-p: 13px;
    }

    /* Section five start */
    .location-slider .swiper-slide {
        height: 488px;
    }

    .location-slider .slider-nav {
        top: 60px;
        left: 15px;
    }

    .location-slider .container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    .location-slider .swiper-button-next,
    .location-slider .swiper-button-prev {
        display: block !important;
    }

    .location-slider .swiper-button-prev.swiper-button-prev.metro-prev {
        left: 20px;
        top: -10px;
        width: 40px !important;
    }

    .location-slider .swiper-button-next.metro-next {
        top: -10px;
        left: 60px;
        width: 40px !important;
    }

    .location-slider .slide-content .slide-content-text {
        font-size: 18px;
        padding: 48px 0px;
    }

    /* Section five close */

    /* Section 6 start */
    /* Section six start */
    .building-tomorrow .section-title {
        font-size: 38px;
        max-width: 100%;
    }

    .building-tomorrow .section-description {
        max-width: 100%;
    }

    .buildingSwiper .swiper-slide {
        padding: 0 !important;
    }

    /* Section Six start */
    .buildingSwiper .swiper-slide {
        padding: 0 !important;
        margin-right: 10px !important;
    }

    .building-tomorrow .slide-inner .sliderImage img {
        height: 280px;
    }

    /* Section Six Close */
    /* Section 6 close */
    /* Home page close************************** */

    /* About us start************************** */
    /* Section 6 Our Pillars start */
    .ourPillars .secTitle {
        font-size: 44px;
    }

    .ourPillars-grid {
        gap: 50px;
        flex-wrap: wrap;
        margin-top: 50px;
        display: flex;
        flex-direction: column;
    }

    .ourPillars-column {
        max-width: 100%;
    }

    .ourPillars-middle {
        align-items: flex-start;
    }

    .ourPillars-left,
    .ourPillars-content,
    .ourPillars-right {
        max-width: 100%;
        text-align: center;
    }

    .ourPillars-image.mobile {
        margin: 60px 0px 40px;
        display: block;
    }

    .ourPillars-image.mobile img {
        max-width: 200px;
    }

    .ourPillars-image.desktop {
        display: none;
    }

    .ourPillars-text {
        font-size: 12px;
    }

    /* Section 6 Our Pillars close */

    /* Section seven start aboutUsBuildingTomorrow */
    .innerAboutUsBuilding {
        display: flex;
        gap: 20px;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .aboutUsBuildingTomorrow .img-box {
        width: 100%;
    }

    .aboutUsBuildingTomorrow .img-box .container {
        padding: 0px 0px !important;
    }

    .abtBottom {
        padding: 80px 0px 20px;
        background-color: #fff;
    }

    .abtBottom-grid {
        display: flex;
        justify-content: center;
        gap: 40px;
        flex-wrap: wrap;
        text-align: center;
    }

    .abtBottom-title {
        font-size: 32px;

    }

    .abtBottom-item {
        flex: 1 1 100%;
        max-width: 700px;
    }

    /* Section seven close aboutUsBuildingTomorrow */
    /* About us close************************** */


    /* ***************************************************** *
    /* Project page start *********************************/
    /* === DEFINING TOMORROW SECTION === */
    .project-page-header a {
        color: var(--primary-color);
    }

    .definingTomorrow {
        padding: 0px 0px;
    }

    .definingTomorrow-top {
        padding: 120px 0px 0px;
        max-width: 550px;
        margin: auto;
    }


    .definingTomorrow-subtitle {
        color: var(--primary-color);
        text-align: center;
        font-size: 14px;
        opacity: 0.6;
    }

    .definingTomorrow-heading {
        font-size: 58px !important;
        line-height: 50px;
        padding: 22px 0px;
    }

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

    /* Bottom Flex Row */
    .definingTomorrow-innerBox {
        display: flex;
        gap: 20px 0px;
        justify-content: space-between;
        flex-wrap: wrap;
        padding: 0 !important;
    }

    .definingTomorrow-innerBox .img-box {
        width: 100%;
    }

    .definingTomorrow-innerBox .img-box .container {
        padding: 0 !important;
    }

    .definingTomorrow-innerBox .img-box img {
        height: 260px !important;
    }

    /* Section three start */

    .projectShowcase {
        padding: 80px 0px;
    }

    .projectShowcase-topRow {
        margin-bottom: -40px;
        flex-wrap: wrap;
        flex-direction: column-reverse;
        gap: 30px;
    }

    .projectShowcase-heading h2 {
        font-size: 28px;
    }

    .projectShowcase-gallery {
        gap: 30px;
        flex-wrap: wrap;
        margin-top: 91px;
    }

    .projectShowcase-card {
        width: 100%;
    }

    .projectShowcase-thumb img {
        height: 250px;
    }

    /* section three close */
    /* Project page close********************************* */
    /* ****************************************************** */
}