@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300;400;700&family=Poppins:wght@400;700&Space+Grotesk:wght@700&display=swap');
@import url('https://cdn-uicons.flaticon.com/uicons-regular-rounded/css/uicons-regular-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-solid-rounded/css/uicons-solid-rounded.css');
@import url('https://cdn-uicons.flaticon.com/uicons-brands/css/uicons-brands.css');
@import url('https://cdn-uicons.flaticon.com/uicons-solid-straight/css/uicons-solid-straight.css');


@media(min-width: 766px) and (max-width: 856px) {
    .tablet-reverse {
        flex-direction: column-reverse;
    }

    .about-studio-container p,
    .about-studio-container h3 {
        text-align: center;
    }
}


/* tablet size */
@media(min-width: 768px) and (max-width: 1200px) {
    h1 {
        font-size: 37px;
    }

    h2 {
        font-size: 32px !important;
    }

    h3,
    p.do-contact-us {
        font-size: 22px !important;
    }

    h4,
    h5,
    p.any-inquiry {
        font-size: 20px !important;
    }

    h5 {
        font-size: 18px !important;
    }

    p {
        font-size: 14px;
    }

    .index-numbers p {
        font-size: 43px;
    }

    .testimonial-img {
        width: 210px;
        height: 210px;
    }

    .testimonial-text {
        width: 70%;
    }

    .testimonial-content {
        padding: 35px 10px;
    }

    .arrow {
        width: calc(1rem + 0.6vmin);
        height: calc(1rem + 0.6vmin);
    }

    .services-inner img {
        width: 50%;
    }

    .why-choose-us-container img {
        max-width: 85%;
    }

    .why-choose-us-inner {
        width: 380px;
        padding: 15px 25px;
    }

    .services {
        padding: 0 60px 0;
    }

    .why-choose-us-container::after {
        height: 320px;
        width: 340px;
        top: 90px;
    }

    .why-choose-us-container::before {
        height: 260px;
        width: 405px;
        left: 258px;
    }

    .our-goal-title {
        padding-left: 0px;
    }

    .our-goal-title::after {
        left: 0%;
        width: 130%;
    }

    .our-story-container {
        flex-direction: column;
        align-items: center;
    }

    .our-story-container img {
        width: 59%;
    }

    .our-story-desc {
        width: 59%;
        margin: auto;
    }

    .our-story-desc::before {
        top: 10%;
        width: 300px;
        height: 280px;
    }

    .our-story-desc::after {
        left: -17%;
        top: -50%;
    }

    .about-studio-container {
        display: flex;
        flex-direction: column;
        text-align: center !important;
        justify-content: center;
    }

    .who-are-we-container::before {
        height: 100vh;
        width: 100vw;
    }

    .why-choose-us-inner {
        top: 10vh;
        padding: 15px;
        display: flex;
        justify-content: center;
        flex-direction: column;
    }

    .why-choose-us-container::after {
        left: 38vw;
    }

    .who-are-we-container::before {
        left: -400px;
        top: -60px;
    }

    .happiness-img {
        width: 40% !important;
    }

    .outlet-title {
        font-size: 16px;
    }

    .footer-item {
        width: 30%;
    }

    .product-thumbnails>img {
        width: 45px;
        height: 45px;
        object-fit: cover;
    }

    .modal-content {
        max-width: 55%;
    }

    .seo-slide-container {
        padding: 17rem 0;
    }

    .index-card {
        width: 16rem;
        margin: 8px auto;
    }

    .ctrl-btn.next {
        left: 90%;
    }

    .instafeed-container {
        width: calc(33% - 5px);
    }

    .instafeed-container img {
        height: 33vw;
    }
}

@media(min-width: 800px) and (max-width: 1200px) {
    .gallery-img img {
        width: 350px;
        height: 300px;
    }

    .gallery-img .label {
        padding: 0px;
        height: 50px;
    }

    .gallery-img {
        margin: 1rem;
    }
}

@media(min-width: 768px) and (max-width: 800px) {
    .gallery-img img {
        width: 300px;
        height: 270px;
    }

    .gallery-img .label {
        padding: 0px;
        height: 40px;
    }

    .gallery-img {
        margin: 1rem;
    }
}

@media(min-width: 943px) and (max-width: 1200px) {
    .product {
        max-width: calc(31.33% - 10px);
    }

    .faq-cardbox {
        width: 22rem;
    }
}

@media(min-width: 768px) and (max-width: 943px) {
    .product {
        max-width: calc(30%);
    }

    .product-big-img {
        height: 13rem;
    }

    .thumbnail-img {
        height: 2.2rem;
        width: calc(25%);
    }
}

@media(min-width: 795px) and (max-width: 1200px) {
    .seo-slide {
        padding: 2rem 4rem;
    }
}

@media(min-width: 766px) and (max-width: 795px) {
    .seo-slide {
        padding: 3rem;
    }
}

@media(min-width: 490px) and (max-width: 767px) {
    .four.columns.outlet-text {
        width: calc(50% - 10px) !important;
        display: inline-flex;
        justify-content: flex-start;
    }
}


@media(min-width: 768px) and (max-width: 841px) {
    .product-details {
        height: 8vw;
    }
}


@media(min-width: 461px) and (max-width: 680px) {
    .rectangle {
        width: 70vw;
    }
}

/* Mission and Vision (About our studio) */
@media(min-width: 768px) and (max-width: 845px) {
    .mission-and-vision .box-outline {
        left: 70px;
    }

    .mission-and-vision .box-fill {
        left: 350px;
    }
}

@media(min-width: 845px) and (max-width: 930px) {
    .mission-and-vision .box-outline {
        left: 100px;
    }

    .mission-and-vision .box-fill {
        left: 388px;
    }
}

@media(min-width: 931px) and (max-width: 1051px) {
    .mission-and-vision .box-outline {
        left: 18%;
    }

    .mission-and-vision .box-fill {
        left: 49%;
    }
}