@media screen and (min-width: 428px) {
    .conteiner {
        width: 428px;                       
    }
    .modal {
        width: 392px;
        height: 586px;
    }
    /* .section-four-li {
        flex-wrap: wrap;
        display: flex;
        gap: 64px 24px;
        margin-top: 72px;
        justify-content: center;
    }    */
}

@media screen and (min-width: 768px) {        
    .conteiner {
        width: 768px;
    }
    .modal {
        width: 408px;
        min-height: 586px;
    }
    .conteiner-table {
        width: 582px;
    }
    .current::after {
        content: '';
        position: absolute;
        width: 100%;
        left: 0;
        height: 4px;
        background: var(--color-background-btn);
        bottom: -27px;
        border-radius: 2px;
        display: block;
    }  
    .header {
        height: 72px;
        display: flex;
        align-items: center;
    }
        .header-link {
            font-style: normal;
            font-weight: 500;
            font-size: 16px;
            line-height: 1.5;       
            transition-property: color;
            transition-duration: 250ms;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }   
       
    .header-nav {
        display: flex;
    }
    .header-conteiner {
        display: flex;
       
    }
   
    /* .adress-list {        
        display:flex;
        flex-direction: column;
        gap: 12px;
        height: 40px;
    } */
 .adress {
     /* margin-left: auto; */
     display: block;
 }

 .adress-list {
     flex-direction: column;
     gap: 12px;
 }



    .adress-link {
        font-size: 12px;
        line-height: 1.17;
        letter-spacing: 0.04em;
    }

    .hero {
        background-image:linear-gradient(rgba(46, 47, 66, 0.7),
                rgba(46, 47, 66, 0.7)), url(../images/hero-table.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 112px 0;
    }
        @media (min-device-pixel-ratio: 2),
        (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi),
        (min-resolution: 2dppx) {
    
            .hero {
                background-image: linear-gradient(rgba(46, 47, 66, 0.7),
                        rgba(46, 47, 66, 0.7)),
                    url(../images/hero-table2x.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: cover;
                padding: 112px 0;
            }
        }
    .hero-title {
        max-width: 496px;
        height: 120px;
        font-size: 56px;
        line-height: 1.07;
    }
    
    .section-two-text {
        display: flex;
        gap: 72px 24px;
        flex-wrap: wrap;
        justify-content: center;
    }
    .two-section {
        width: calc((100% - 24px) /2);
    }
    .section-three {
        display: none;
    }
    .section-title {
        text-align: left;
    }
    .section-four-li {
        gap:72px 24px;
    }
    .customers-svg {
        width: 168px;
    }
    .customers-ul {
        gap: 72px 24px;
        display: flex;
    }
    .customers-li {
        flex-basis: calc((100% - 48px) /3);
    }
    .div-soc {
        margin-top: 0;
        margin-left: 24px;
    }
    .ul-portfolio {
        gap: 72px 24px ;
    }
   .section-portfolio {
       padding: 64px 0px 96px;
   }
    .btn-portfolio {
        justify-content: center;
    }
    .li-portfolio {
        width: calc((100% - 24px) /2);    
    }
    .e-mail-input {
        display: block;
        margin-left: 0px;
    }
    .footer-txt-hero {
        justify-content: left;
    }
    .logo-text-footer {
        justify-content: flex-start;
    }    
    .social-text {
        text-align: left;
    }
    .form-footer {
        gap: 24px;
    }
}

@media screen and (min-width: 1158px) {
    .conteiner {
        width: 1158px;
    }
    .modal {
        width: 408px;
        min-height: 584px;
    }
    .header {
        padding: 24px 0px;
    }
    .current::after {
        bottom: -27px;
    }
    .adress-list {
        display:flex;
        flex-direction: inherit;
        gap: 40px;
    }
        .adress-link {
            font-style: normal;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.02em;
        }
    .hero {
        background-image: linear-gradient(rgba(46, 47, 66, 0.7),
                       rgba(46, 47, 66, 0.7)), url(../images/hero-desktop.jpg);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        padding: 188px 0px;
    }
    
    @media (min-device-pixel-ratio: 2),
        (-webkit-min-device-pixel-ratio: 2),
        (min-resolution: 192dpi),
        (min-resolution: 2dppx) {
        
            .hero {
                background-image: linear-gradient(rgba(46, 47, 66, 0.7),
                            rgba(46, 47, 66, 0.7)),
                    url(../images/hero-desktop2x.jpg);
                background-repeat: no-repeat;
                background-position: top center;
                background-size: cover;
                padding: 188px 0px;
            }
    }
    

 /*---------------------------------Section2-----------------------------*/
        .section-two {
            padding-top: 120px;
            padding-bottom: 120px;
        }
        .two-section {
            flex-basis: calc((100%-3*24)/4);
        }
        .two-section-icon {
            background-color: var(--color-cloud);
            border-radius: 4px;
            height: 112px;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 8px;
        }
        .two-section-cvg {
            width: 62px;
            height: 62px;
        }
        .section-two-text {
            display: flex;
            flex-wrap: nowrap;
            gap: 24px;
            justify-content: center;
        }
        .section-title {
            font-weight: 500;
            font-size: 20px;
            line-height: 1.2;
            letter-spacing: 0.02em;
            color: var(--color-background-main);
            margin-bottom: 8px;
        }
        .section-text {
            width: 264px;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.02em;
        }
/*---------------------------------Section3-----------------------------*/
        .section-three {
            display: block;
            padding-bottom: 120px;
        }
        .section-three-img {
            display: flex;
            gap: 24px;
        }
        .three-title-section {
            text-align: center;
            font-size: 36px;
            line-height: 1.11;
            text-align: center;
            letter-spacing: 0.02em;
            text-transform: capitalize;
            color: var(--color-background-main);
            margin-bottom: 72px;
        }
        .section-title {
            font-weight: 500;
            font-size: 20px;
            line-height: 1.2;
            letter-spacing: 0.02em;
            color: var(--color-background-main);
        }
        .section-text {
            font-weight: 400;            
        }
        .section-four {
            padding-bottom: 120px;
            padding-top: 120px;
        }
/*---------------------------------Section4-----------------------------*/
    .section-four {
        padding-bottom: 120px;
        padding-top: 120px;
    }
/*---------------------------------Section5-----------------------------*/
    .section-five {
        padding-top: 120px;
        padding-bottom: 120px;
    }   
    .customers {
        font-size: 36px;
        line-height: 1.11;
        text-align: center;
        letter-spacing: 0.02em;
        text-transform: capitalize;
        color: var(--color-background-main);
    }
    .customers-ul {
        gap: 24px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }
        .section-portfolio {
            padding: 100px 0px 120px;
        }    
        .li-portfolio {
            width: calc((100% - 48px) /3);
        }
        .ul-portfolio {
             gap: 48px 24px;
        }
    .customers-logo {
        fill: var(--color-costumers);
        transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .customers-svg {
        border: 1px solid var(--color-costumers);
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: border-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
    }
    .customers-svg:hover,
    .customers-svg:focus {
        border-color: var(--color-ocean);
    }
    .customers-svg:hover>.customers-logo,
    .customers-svg:focus>.customers-logo {
        fill: var(--color-ocean);
    }
    
        .footer-studio {
            background-color: var(--color-background-main);
            padding: 100px 0px;
            display: flex;
        }    
        .footer-txt-hero {
            display: flex;
            flex-wrap: nowrap;
        }   
        .footer-text {
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.02em;
            width: 264px;
            color: var(--color-cloud);
            margin-top: 16px;
        }    
        .span-logo-footer {
            color: var(--color-cloud);
        }    
        .logo-text-footer {
            text-decoration: none;
            font-family: 'Raleway',
                sans-serif;
            font-style: normal;
            font-weight: 800;
            font-size: 18px;
            line-height: 1.17;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--color-iris);
        }    
        .div-soc {
            display: block;
            margin-left: 120px;
        }    
        .soc-footer {
            gap: 16px;
            display: flex;    
        }    
        .social-text {
            font-weight: 500;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.02em;
            color: var(--color-white);
            margin-bottom: 16px;
           
        }    
        .soc-li {
            width: 40px;
            height: 40px;
        }    
        .footer-link {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: var(--color-iris);
            border-radius: 50%;
            transition-property: background-color;
            transition-duration: 250ms;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
        }    
        .footer-link:hover,
        .footer-link:focus {
            background-color: var(--color-iconfooter);
        }    
        .form-footer {
            display: flex;
            flex-wrap: nowrap;
            
        }    
        .e-mail-input {
            margin-left: 80px;
            margin-top: 0;
        }    
        .label-footer {
            font-weight: 500;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.02em;
            color: var(--color-white);
            /* margin-bottom: 16px; */
        }    
        .input-footer::placeholder {
            font-weight: 400;
            font-size: 12px;
            line-height: 2;
            display: flex;
            align-items: center;
            letter-spacing: 0.04em;
            color: var(--color-white);
        }    
        .input-footer {
            display: block;
            border: 1px solid #FFFFFF;
            border-radius: 4px;
            padding: 8px 16px;
            width: 264px;
            height: 40px;
            font-weight: 500;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.02em;
            color: var(--color-white);
            background-color: var(--color-background-main);
            opacity: 1;
        }    
        .input-button {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 16px;
            font-weight: 500;
            font-size: 16px;
            line-height: 1.5;
            letter-spacing: 0.04em;
            color: var(--color-white);
            background-color: var(--color-iris);
            border-radius: 4px;
            border: none;
            box-shadow: none;
            fill: var(--color-white);
            padding: 8px 24px;
            transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
            cursor: pointer;
        }    
        .input-button:hover,
        .input-button:focus {
            background-color: var(--color-background-btn);
        }
}