@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Eksell Display Stencil';
    src: url(../font/Eksell-Display-Stencil.ttf) format('truetype');
}
  
@font-face {
    font-family: 'Eksell Display Large';
    src: url(../font/Eksell-Display-Large.ttf) format('truetype');
    font-weight: normal;
}
  
@font-face {
    font-family: 'Eksell Display Medium';
    src: url(../font/Eksell-Display-Medium.ttf) format('truetype');
    font-weight: normal;
}
  
@font-face {
    font-family: 'Eksell Display Small';
    src: url(../font/Eksell-Display-Small.ttf) format('truetype');
    font-weight: normal;
}

:root{
    --primary-color: rgba(251,229,208,1);
    --secondary-color: rgba(218,144,175,1);
    --extra-color: rgba(239,106,86,1);
    --extra-color2: #ffffff; 
    --extra-color3: rgba(246,167,155,1);
    --extra-color4: rgba(249, 225, 215, 0.3);
    --extra-color5: #DACCD9;
    --extra-color6: #DAABC3;
    --acolortext: #E4CDAA;
    --pcolortext: #404040;
    --titlecolortext: #262626;
    --semititlecolortext: #DA6E8C;
    --landfontsize: 90px;
    --afontsize: 16px;
    --pfontsize-extrasmall: 12px;
    --pfontsize: 16px;
    --pfontsize-secondary: 18px;
    --ptitlefontsize: 32px;
    --ptitlefontsize-secondary: 36px;
    --ptitlefontsize-third: 60px;
    --font-family: 'Poppins', sans-serif;
    --font-family2: 'Eksell Display Small', sans-serif;
    --font-family3: 'Eksell Display Stencil', sans-serif;
    --font-family4: 'Eksell Display Medium', sans-serif;
    --font-family5: 'Eksell Display Large', sans-serif;
}

*{
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: var(--font-family);
}

h1, h2, h3, h4, h5, h6, p{
    margin: 0;
    padding: 0;
}

p{
    color: var(--pcolortext);
}

a{
    text-decoration: none;
}

@media (max-width: 1200px) {
    .container{
        position: relative;
    }

    .fourth-section{
        padding: 12% 5%;
    }
}

@media (max-width: 992px) {
    :root{
        --ptitlefontsize-third: 55px;
    }
    header{
        padding: 0;
    }
    .logo-container img{
        width: 13%;
    }
    .link-container{
        display: flex;
    }
    .brand-pictures{
        column-gap: 80px;
    }
    .work-container{
        flex-direction: column;
        padding: 8% 6% 4%;
    }
    .work-container2{
        flex-direction: column;
        padding: 8% 6% 4%;
    }
    .work-image{
        flex: 1;
        width: auto;
    }
    .testimonial-container{
        padding: 5% 0 4%;
        height: auto;
        align-items: flex-end;
        justify-content: center;
    }
    .testimonial {
        width: 70%;
        opacity: 0;
        display: none;
        transition: opacity 0.5s ease-in-out;
    }

    .testimonial-p{
        text-align: center;
        line-height: 25px;
    }

    .testimonial-content{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .testimonial-name{
        align-items: center;
    }

    .testimonial.active-slide {
        display: flex;
        opacity: 1;
    }

    .prev-button,
    .next-button {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        padding: 10px;
        font-size: 20px;
        background: linear-gradient(236deg, var(--primary-color) 0%, var(--extra-color3) 100%);
        border-radius: 100%;
        padding: 10px 15px;
        border: none;
        cursor: pointer;
        display: block;
    }

    .prev-button {
        left: -10px;
    }

    .next-button {
        right: -10px;
    }

    .first-section{
        padding: 0;
    }

    .container{
        flex-direction: column-reverse;
        border-radius: 0;
    }

    .design-text{
        align-items: center;
    }

    .design-contents{
        padding: 0% 6% 4%;
    }

    .design-image{
        padding: 0;
    }

    .design-image img{
        height: 80%;
    }

    .design-button{
        align-items: center;
    }

    .img-first{
        display: none;
    }

    .img-second{
        display: block;
    }
}

@media (max-width: 768px) {
    :root{
        --ptitlefontsize-secondary: 28px;
        --ptitlefontsize-third: 40px;
    }
    .logo-container img{
        width: 10%;
    }
    .container{
        padding: 0 0 20px;
    }

    .container2{
        gap: 10px;
    }
    .work-container ,.work-container2{
        align-items: flex-start;
    }
    .work-content{
        align-items: flex-start;
        gap: 30px;
    }
    .brand-pictures{
        padding: 8% 5% 0;
        column-gap: 55px;
    }
}

@media (max-width: 576px) {
    :root{
        --ptitlefontsize-third: 34px;
        --landfontsize: 60px;
    }
    .nav-container{
        padding: 6% 8%;
    }
    .logo-container img{
        width: 15%;
    }
    .display-n{
        display: none;
    }
    .second{
        /* padding: 12% 0 8%; */
        padding: 0;
    }
    .brand-picture{
        margin: auto auto;
        white-space: nowrap;
        flex-wrap: nowrap;
        width: 100%;
        height: 100%;
        overflow: hidden;
        display: flex;
        padding: 7%;
        justify-content: center;
        gap: 80px;
        align-items: center;
    }

    .brand-picture img{
        display: inline-block;
        animation: myanimation 10s linear infinite;
        white-space: nowrap;
        will-change: transform;
    }

    .brand-picture img{
        width: 80px;
    }

    .row .collection-filter button{
        font-size: 13px;
    }

    footer{
        padding: 5%;
        gap: 8px;
        flex-direction: column;
    }

    @keyframes myanimation {
        from { transform: translateX(500%); }
		to { transform: translateX(-550%); }
    }
}

@media (max-width: 479px) {
    .button-style, .button-style2{
        width: 100%;
    }
    .button-container{
        width: 100%;
        flex-direction: column;
    }
    .row .collection-filter button{
        font-size: 11px;
    }
    .work-container, .work-container2{
        padding: 8% 0% 4%;
    }
    .testimonial{
        width: 100%;
    }
    .next-button, .prev-button{
        display: none;
    }
}

@media (max-width: 375px) {
    .row .collection-filter button{
        font-size: 10px;
    }
}

@media (max-width: 337px) {
    .row .collection-filter button{
        font-size: 9px;
    }
}