@import "./style.css";

@media screen and (max-width: 1500px) {
    .home-page {
        .wave-section {
            svg {
                scale: 1;
            }
        }
    }
}

@media screen and (max-width: 1399px) {
    .home-page {
        .wave-section {
            svg {
                scale: 0.98;
            }
        }
    }

    .journal-page {
        .hero {
            .floating-box {
                width: 70%;
            }
        }
    }
}

@media screen and (max-width: 1300px) {
    .home-page {
        .about-section {
            .line-text-wrapper {
                left: 1.6%;
            }

            .image-box {
                margin-left: 10.38%;
            }
        }
    }
}

@media screen and (max-width: 1199px) {
    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 40%;
            }

            .floating-banner-leaf {
                width: 9%;
            }
        }
    }

    .project-detail-page {
        .hero {
            height: auto;
        }
    }

    .journal-page {
        .hero {
            .floating-box {
                width: 85%;
            }
        }
    }
}

@media screen and (max-width: 992px) {
    .grid-style-1 {
        gap: 4rem;
    }

    .home-page {
        .hero.home {
            .floating-banner-text {
                padding-inline: 4.69%;
            }
        }

        .about-section {
            .line-text-wrapper {
                left: 5.6%;
            }

            .image-box {
                width: 60%;
                margin: 0 auto;
                margin-bottom: 40px;
            }

            .text-box {
                padding-left: 21%;
            }
        }

        .services-section {
            .grid-style-1 {
                gap: 4rem;
            }
        }

        .visit-studio-section {
            .container {
                .line-box {
                    left: 1.69%;
                }

                .text-content {
                    padding-right: 6%;
                }
            }
        }

        .journal-section {
            .swiper-container {
                .journal-swiper {
                    width: 72%;
                }
            }
        }
    }

    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 50%;
            }

            .floating-banner-leaf {
                width: 10%;
            }
        }

        .work-section {
            .cards-row {
                .work-card {
                    .image-box {
                        img {
                            height: 370px;
                        }
                    }
                }
            }
        }
    }

    .contact-us-page {
        .contact-form-section {
            .form-style-1 {
                padding-right: 0;
            }

            .image-box {
                width: 35%;
                margin: 0 auto;
                margin-top: -170px;
            }

            .connect-section {
                .heading {
                    width: 35%;
                    margin: 0 auto;
                }
            }

            .form-wrapper {
                margin-top: 100px;
            }
        }

        .testimonial-section {
            .testimonial-swiper-container {
                .testimonial-swiper {
                    width: 78%;
                }
            }
        }

        .brands-section {
            .grid-box {
                gap: 60px;
            }
        }
    }

    .studio-page {
        .studio-section {
            .studio-wrapper {
                .images-box {
                    align-items: flex-end;
                    -webkit-align-items: flex-end;

                    .image-2 {
                        margin-top: 0;
                        margin-bottom: 13px;
                    }
                }

                .image-text-box {
                    flex-direction: column;

                    .text-box {
                        width: 100%;
                        margin-top: 8%;
                    }
                }
            }
        }

        .bay-shop-section {
            .image-box {
                width: 65%;
            }
        }

        .podcast-section {
            .image-box {
                background: var(--light);
            }

            .text-box-wrapper {
                padding-left: 2%;

                .line-box {
                    left: 3%;
                }
            }
        }
    }

    .service-page {
        .hero {
            .floating-banner-images {
                width: 600px;
                height: 600px;

                .banner-floating-image {
                    &.image-main {
                        bottom: 0%;
                        left: 50%;
                    }

                    &.image-svg {
                        left: 80%;

                        width: 100px;
                    }

                    &.image-wave {
                        left: 15%;
                        bottom: 31%;
                    }

                    &.image-photo {
                        left: 20%;
                        bottom: -30%;
                    }
                }
            }

            .floating-text {
                right: -1%;
                bottom: -51%;

                p {
                    span {
                        color: var(--primary-alt);
                    }
                }
            }
        }

        .services-section {
            .service-wrapper {
                .service-box {
                    .images-container {
                        width: 64%;
                        margin-left: auto;
                    }
                }

                &.service-wrapper-4 {
                    .images-container {
                        margin-top: 0;

                        .image-2 {
                            left: -50%;
                        }
                    }
                }
            }
        }
    }

    .about-page {
        .about-working {
            height: auto;

            .about-ways-banner {
                width: 40%;
                margin: 0 auto;
            }
        }

        .about-founders-note {
            .note-wrapper {
                .image-box {
                    width: 48%;
                }

                .note-box {
                    width: calc(55% + 50px);
                }

                .image-3 {
                    width: 160px;
                }

                .image-4 {
                    .image4-content {
                        padding-top: 60px;
                        padding-left: 70px;
                        padding-right: 50px;
                    }
                }
            }
        }
    }

    .project-detail-page {
        .hero {
            height: auto;
        }

        .project-detail-section {
            .text-image-wrapper {
                .image-content {
                    img {
                        height: 300px;
                    }
                }
            }

            .images-container {
                .image-1 {
                    height: 450px;
                }

                .image-2 {
                    height: 400px;
                }
            }

            .images-wrapper {
                .image-1 {
                    height: 320px;
                }

                .image-2 {
                    height: 300px;
                }
            }
        }
    }

    .journal-page {
        .hero {
            .floating-box {
                .text-box {
                    padding: 10% 7%;
                }
            }
        }

        .tips-section {
            .text-box {
                padding-left: 5%;
            }
        }
    }
}

@media screen and (max-width: 767px) {
    .blog-container {
        padding-inline: 7%;
    }

    /* header */
    .header-style-2 {
        .navbar-nav {
            padding-block: 1.69%;

            .nav-brand {
                z-index: 111;
            }

            .navbar-list {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: var(--dark);
                flex-direction: column;
                transform: translateX(100%);
                justify-content: center;
                z-index: 11;

                .list {
                    max-height: 60px;
                }

                .menu-link {
                    font-size: 40px;
                    color: var(--light) !important;
                    font-family: var(--font-primary);

                    &.active {
                        color: var(--primary-alt) !important;
                    }
                }
            }

            .main-button-wrapper {
                display: none;
            }

            .button-collapse-wrapper {
                display: flex;
                z-index: 111;

                button {
                    font-size: 24px;
                }
            }
        }
    }

    /* header */
    .home-page {
        .about-section {
            padding-top: 120px;
            padding-bottom: 100px;
        }

        .our-work-section {
            min-height: auto;

            .our-work-wrapper {
                flex-direction: column;

                .dash-box {
                    scale: 0.85;
                    left: 50%;
                    transform: translateX(-50%) rotate(90deg);
                }
            }
        }

        .services-section {
            height: auto;

            .grid-style-1 {
                gap: 4rem;
                grid-template-columns: repeat(1, 1fr);
                place-content: center;
                place-items: center;

                .grid-item {
                    width: 45%;

                    .image-box {
                        position: relative;

                        img.bg-image {
                            height: 400px;
                            width: 100%;
                        }

                        .floating-box {
                            bottom: 3%;
                            height: fit-content;
                        }
                    }
                }
            }
        }

        .visit-studio-section {
            .container {
                .text-content {
                    position: relative;
                    width: 100%;
                    inset: 0;
                    margin-top: 30px;
                    transform: translate(0%, 0%);
                }

                .image-box {
                    .bird-image {
                        left: 6%;
                        width: 40%;
                    }
                }
            }
        }

        .journal-section {
            height: auto;
            padding-block: 100px;

            .swiper-container {
                .journal-swiper {
                    width: 77%;

                    .swiper-slide {
                        .card-style-1 {
                            flex-direction: column;

                            .text-content {
                                margin-top: 25px;
                            }

                            .image-box {
                                width: 100%;

                                img {
                                    height: 300px;
                                    width: 100%;
                                    object-fit: cover;
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 60%;
            }

            .floating-banner-leaf {
                width: 13%;
            }
        }

        .work-section {
            .filter-wrapper {
                gap: 15px;
            }
        }
    }

    .contact-us-page {
        .contact-form-section {
            .image-box {
                width: 45%;
            }

            .connect-section {
                .heading {
                    width: 45%;
                }
            }
        }

        .brands-section {
            .grid-box {
                gap: 70px;
                grid-template-columns: repeat(4, 1fr);
            }
        }

        .testimonial-section {
            .testimonial-swiper-container {
                .testimonial-swiper {
                    width: 85%;
                }
            }
        }
    }

    .studio-page {
        .hero {
            .floating-objects {
                width: 450px;
                height: 450px;

                .image-1 {
                    position: absolute;
                    top: -4%;
                    left: -13%;
                    width: 160px;
                }
            }
        }

        .studio-section {
            padding-top: 200px;
        }

        .bay-shop-section {
            .image-box {
                width: 80%;
            }
        }

        .podcast-section {
            .text-box-wrapper {
                padding-left: 0;
                width: 100%;

                .line-box {
                    left: 5px;
                }
            }
        }
    }

    .about-page {
        section.about-page-section {
            .about-content {
                p {
                    width: 100%;
                }
            }

            .flower {
                opacity: 0.5;
            }
        }

        .about-working {
            height: auto;

            .about-ways-banner {
                width: 45%;
                margin: 0 auto;
            }
        }

        .about-founders-note {
            .note-wrapper {
                flex-direction: column;

                .note-box {
                    margin-left: 0;

                    .button-box {
                        justify-content: center;
                        gap: 25px;
                    }
                }

                .image-box {
                    width: 100%;
                }

                .note-box {
                    width: 100%;
                }

                .image-3 {
                    right: 5%;
                }

                .image-4 {
                    .image4-content {
                        padding-top: 80px;
                    }
                }

                .image-6 {
                    width: 15%;
                    bottom: -9%;
                    right: 2%;
                }
            }
        }
    }

    .project-detail-page {
        .project-detail-section {
            .text-image-wrapper {
                flex-direction: column;

                .image-content {
                    width: 90%;
                    margin-top: 7%;
                    margin-left: auto;

                    img {
                        height: 300px;
                    }
                }
            }

            .images-container {
                .image-1 {
                    height: 400px;
                }

                .image-2 {
                    height: 380px;
                }
            }

            .images-wrapper {
                .image-1 {
                    height: 290px;
                }

                .image-2 {
                    height: 290px;
                    margin-top: 15%;
                }
            }
        }
    }

    .journal-page {
        .tips-section {
            .text-box {
                padding-left: 0;
            }
        }
    }

    .about-page {
        .hero.about {
            position: relative;
            height: 80vh;
            min-height: 580px;

            .about-img-card {
                bottom: -100px;
            }
        }
    }
}

@media screen and (max-width: 650px) {
    .footer {
        .footer-navigation {
            padding-block: 35px;

            .navigation-list {
                flex-direction: column;
                gap: 15px;

                .list {
                    .link {
                        padding-inline: 0;
                        border-right: 0;
                    }
                }
            }
        }

        .socials-list {
            flex-direction: column;
            gap: 15px;

            .list {
                .link {
                    padding-inline: 0;
                    border-right: 0;
                }
            }
        }
    }

    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 65%;
            }

            .floating-banner-leaf {
                width: 15%;
            }
        }
    }

    .contact-us-page {
        .brands-section {
            .grid-box {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        .testimonial-section {
            .testimonial-swiper-container {
                .testimonial-swiper {
                    width: 70%;

                    .background-image {
                        display: none;
                        background: var(--light);
                    }

                    .testimonial-card {
                        background: var(--light);
                        height: auto;

                        .text-content {
                            .testimonial-content {
                                flex-direction: column;
                                padding: 10%;
                                align-items: flex-start;

                                .testimonial-text {
                                    width: 100%;
                                    padding: 3% 12% 3% 3%;

                                    .image-box {
                                        bottom: -25%;
                                    }
                                }

                                .testifier {
                                    width: 100%;

                                    .inner-title {
                                        text-align: start;
                                        margin-top: 70px;
                                        bottom: -25%;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }

    .about-page {
        .about-working {
            .about-ways-banner {
                width: 60%;
            }
        }
    }
}

@media screen and (max-width: 596px) {
    .home-page {
        .hero.home {
            & .floating-banner-text {
                .heading {
                    font-size: 45px !important;
                }

                .sub-heading {
                    font-size: 20px !important;
                }

                .hero-brief {
                    font-size: 17px !important;
                }
            }
        }

        .about-section {
            .line-text-wrapper {
                left: 4.69%;
            }

            .image-box {
                width: 75%;
            }

            .text-box {
                padding-left: 13%;

                .brief {
                    width: 85%;
                }
            }
        }

        .services-section {
            height: auto;

            .grid-style-1 {
                .grid-item {
                    width: 100%;

                    .image-box {
                        position: relative;

                        img.bg-image {
                            height: 500px;
                            width: 100%;
                        }
                    }
                }
            }
        }
    }

    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 75%;
            }
        }

        .work-section {
            .filter-wrapper {
                gap: 10px;
            }
        }
    }

    .contact-us-page {
        .hero {
            .floating-text {
                .inner-heading {
                    font-size: 20px;
                    letter-spacing: 4px;
                }
            }
        }

        .contact-form-section {
            .image-box {
                width: 60%;
            }

            .connect-section {
                .heading {
                    width: 60%;
                }
            }
        }

        .testimonial-section {
            .testimonial-swiper-container {
                .testimonial-swiper {
                    .testimonial-card {
                        .text-content {
                            .testimonial-content {
                                padding: 5%;
                            }
                        }
                    }
                }
            }
        }
    }

    .studio-page {
        .hero {
            .floating-objects {
                width: 415px;
                height: 415px;

                .image-1 {
                    top: -2%;
                    left: -5%;
                    width: 120px;
                }

                .floating-text {
                    top: 60%;
                    left: 50%;

                    p {
                        line-height: 235%;
                    }
                }
            }
        }

        .studio-section {
            .studio-wrapper {
                .image-text-box {
                    .text-box {
                        p {
                            padding: 20px 20px;
                        }
                    }
                }
            }
        }

        .bay-shop-section {
            .image-box {
                width: 100%;
            }
        }
    }

    .service-page {
        .hero {
            .floating-banner-images {
                width: 500px;
                height: 600px;

                .banner-floating-image {
                    &.image-photo {
                        left: 23%;
                        bottom: -25%;
                        width: 125px;
                    }
                }

                .floating-text {
                    right: -18%;
                }
            }
        }
    }

    .about-page {
        .about-working {
            height: auto;

            .about-ways-banner {
                width: 80%;
            }
        }

        .about-founders-note {
            .note-wrapper {
                .image-4 {
                    .image4-content {
                        padding-top: 55px;
                        padding-left: 35px;
                        padding-right: 35px;
                    }
                }
            }
        }
    }

    .project-detail-page {
        .project-detail-section {
            .text-image-wrapper {
                .image-content {
                    img {
                        height: auto;
                        display: flex;
                        min-height: 200px;
                    }
                }

                .text-content {
                    width: 90%;
                }
            }

            .images-container {
                .image-1 {
                    height: auto;
                    display: flex;
                    min-height: 200px;
                }

                .image-2 {
                    height: auto;
                    display: flex;
                    min-height: 170px;
                }
            }

            .images-wrapper {
                .image-1 {
                    height: auto;
                    display: flex;
                    min-height: 200px;
                }

                .image-2 {
                    height: auto;
                    display: flex;
                    min-height: 200px;
                }
            }
        }
    }

    .contact-us-page {
        .contact-form-section {
            .form-wrapper {
                .text-box {
                    .contact-list {
                        width: 75%;
                    }
                }
            }
        }
    }
}

@media screen and (max-width: 496px) {
    .home-page {
        .hero.home {
            .floating-banner-text {
                .heading {
                    font-size: 41px !important;
                }
            }
        }

        .about-section {
            .line-text-wrapper {
                left: 3.69%;
            }

            .text-box {
                .brief {
                    width: 85%;
                }
            }
        }

        .services-section {
            .grid-style-1 {
                .grid-item {
                    .image-box {
                        img.bg-image {
                            height: 400px;
                        }
                    }
                }
            }
        }
    }

    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 80%;
            }
        }

        .work-section {
            .filter-wrapper {

                .filter-button,
                span {
                    font-size: 18px;
                }
            }
        }
    }

    .contact-us-page {
        .brands-section {
            .grid-box {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .testimonial-section {
            .testimonial-swiper-container {
                .testimonial-swiper {
                    .testimonial-card {
                        .text-content {
                            .testimonial-content {
                                padding: 3%;
                            }
                        }
                    }
                }
            }
        }
    }

    .studio-page {
        .hero {
            .floating-objects {
                width: 95%;
                height: 415px;

                .image-2 {
                    height: 100%;
                }
            }
        }
    }

    .service-page {
        & .hero {
            .floating-banner-images {
                scale: 0.9;
                transform-origin: left;
                left: 53%;
            }
        }
    }

    .about-page {
        .hero.about {
            .about-img-card {
                .sunflower {
                    top: -17%;
                    width: 85px;
                }
            }
        }
    }
}

@media screen and (max-width: 416px) {
    .home-page {
        .hero.home {
            .floating-banner-text {
                .heading {
                    font-size: 35px !important;
                }

                .sub-heading {
                    font-size: 18px !important;
                }

                .hero-brief {
                    font-size: 15px !important;
                }
            }
        }
    }

    .work-page {
        .hero {
            .floating-banner-overlay {
                width: 90%;
            }

            .floating-banner-leaf {
                width: 20%;
            }
        }

        .work-section {
            .filter-wrapper {

                .filter-button,
                span {
                    font-size: 16px;
                    letter-spacing: 5px;
                }
            }
        }
    }

    .studio-page {
        .hero {
            .floating-objects {
                width: 100%;

                .floating-text {
                    width: 90%;
                }
            }
        }
    }

    .service-page {
        & .hero {
            .floating-banner-images {
                scale: 0.78;

                .floating-text {
                    scale: 1.05;
                }
            }
        }
    }

    .about-page {
        .about-working {
            .about-ways-banner {
                .about-ways-content {
                    padding: 30px;
                }
            }
        }

        .about-founders-note {
            .note-wrapper {
                .image-3 {
                    width: 120px;
                }

                .image-4 {
                    .scroll-content {
                        overflow-x: hidden;
                        overflow-y: auto;
                        padding-right: 20px;
                        height: 210px;
                    }

                    .envelop-image {
                        min-height: 310px;
                    }

                }
            }
        }
    }

    .contact-us-page {
        .hero {
            .floating-text {
                .inner-heading {
                    font-size: 18px;
                    letter-spacing: 4px;
                }
            }
        }
    }
}

@media screen and (max-width: 360px) {
    .about-page {
        .about-founders-note {
            .note-wrapper {
                .image-4 {
                    .envelop-image {
                        min-height: 325px;
                    }
                }
            }
        }
    }
}