@import url(./teamMedia.css);

@media (min-width: 0px) and (max-width: 320px) {
    
    .contentForm {
        display: none;
    }
    
    .containerSection1 {
        background: url(../images/services/width320px/White\ colar\ crime.png) no-repeat;
        background-size: cover;
        padding: 50px 0px;
    }

    .blockHeaderSection1 {
        border: none;
    }

    .blockHeaderSection1 h2 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 1);
    }

    .contentSection1 p {
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 0.8);
    }


    .contentSection2 h3 {
        text-align: center;
    }
    
    .containerSeciton5 {
        background: url(../images/services/width320px/Фон_2.png) no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 50px 0px;
    }

    .contentSection5 {
        padding: 0px;
        margin: 0px;
    }

    .headerSection5 h3 {
        color: #FFFFFF;
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
    }
    
    
    .blockTextSection5 p:nth-child(1) {
        color: #EFC079;
        font-size: 20px;
        font-family: 'Gilroy';
        font-weight: 700;
        line-height: 24px;
    }   
    
    .blockTextSection5 p:nth-child(2) {
        color: #FFFFFFCC;
        font-size: 17px;
        font-family: 'Gilroy';
        font-weight: 500;
        line-height: 20px;
    } 

    .mainSeciton6 {
        padding: 50px 0px;
        background: none;
    }
    
    .containerSeciton6 {
        background: 0% 100% / 60% 50% no-repeat url(../images/a-b/width320/R.png),  
        0% 35% / 60% 50% no-repeat url(../images/a-b/width320/P.png);
    }


    .contentFormMobail {
        display: block;
        padding: 30px 40px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.85);
    }

    .contentFormMobail h1 {
        color: #222B3E;
        font-size: 32px;
        font-weight: 600;
    }

    .contentFormMobail form {
        display: flex;
        flex-direction: column;
        color: #222B3E;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form input {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form textarea {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .btnForm {
        background-color: #28a745;
    color: #fff;
    padding: 10px 0px;

    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

    .btnForm:hover {
        background-color: #218838;
    }

}

/* ============================================================================================================================================================== */
/* ==============================================================================WIDTH576PX====================================================================== */
/* ============================================================================================================================================================== */

@media (min-width: 320px) and (max-width: 576px) {
    .contentForm {
        display: none;
    }

    

    .containerSection1 {
        background: url(../images/services/width320px/White\ colar\ crime.png) no-repeat;
        background-size: cover;
        padding: 50px 0px;
    }

    .blockHeaderSection1 {
        border: none;
        padding: 0px;
    }

    .blockHeaderSection1 h2 {
        text-align: start;
        font-size: 20px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 1);
    }



    .contentSection1 p {
        text-align: start;
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 0.8);
    }


    .contentSection2 h3 {
        text-align: center;
        font-size: 20px;
    }

    .contentSection2 p {
        font-size: 16px;
    }

    .contentSection2 ul li {
        font-size: 14px;
    }

    .mainSection3 h1 {
        font-size: 20px;
        line-height: 24px;
        font-weight: 800;
        text-align: center;
    }
    
    .mainSection3 ul li {
        font-size: 14px;
    }

    .mainSection3 ol li {
        font-size: 16px;
    }

    .containerSeciton4 h3 {
        font-size: 20px;
        line-height: 28px;
    }

    .mainSeciton4 ol li {
        font-size: 16px;

    }

    .containerSeciton4 p {
        font-size: 14px;
    }
    .containerSeciton5 {
        background: url(../images/services/width320px/Фон_2.png) no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 50px 0px;
    }

    .contentSection5 {
        padding: 0px;
        margin: 0px;
    }

    .headerSection5 h3 {
        color: #FFFFFF;
        font-size: 20px;
        font-weight: 800;
        line-height: 24px;
        font-family: 'Gilroy';
        text-align: center;
    }
    
    
    .blockTextSection5 p:nth-child(1) {
        color: #EFC079;
        font-size: 16px;
        font-family: 'Gilroy';
        font-weight: 700;
        line-height: 20px;
    }   
    
    .blockTextSection5 p:nth-child(2) {
        color: #FFFFFFCC;
        font-size: 16px;
        font-family: 'Gilroy';
        font-weight: 500;
        line-height: 20px;
    } 

    .mainSeciton6 {
        padding: 50px 0px;
        background: none;
    }
    
    .containerSeciton6 {
        padding: 50px 0px;
        background: 0% 100% / 60% 50% no-repeat url(../images/a-b/width320/R.png),  
        0% 35% / 60% 50% no-repeat url(../images/a-b/width320/P.png);
    }

    .containerSeciton6 h3 {
        font-size: 20px;
        line-height: 28px;
        font-weight: 800;
        text-align: center;
    }

    .mainSeciton6 h4 {
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
    }

    .mainSeciton6 p {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
    }

    .contentFormMobail {
        display: block;
        padding: 30px 40px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.85);
    }

    .contentFormMobail h1 {
        color: #222B3E;
        font-size: 32px;
        font-weight: 600;
    }

    .containerSection7 h3 {
        font-size: 20px;
        font-weight: 800;
        line-height: 28px;
        text-align: start;
    }

    .containerSection7 ol li {
        font-size: 14px;
        line-height: 20px;
        font-weight: 500;
    }

    .contentFormMobail h1 {
        font-size: 20px;
        line-height: 44px;
        font-weight: 700;
    }

    .contentFormMobail form {
        display: flex;
        flex-direction: column;
        color: #222B3E;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form input {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form textarea {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .btnForm {
        background-color: #28a745;
    color: #fff;
    padding: 10px 0px;

    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

    .btnForm:hover {
        background-color: #218838;
    }
}

/* ============================================================================================================================================================== */
/* ==============================================================================WIDTH768px====================================================================== */
/* ============================================================================================================================================================== */

@media (min-width: 576px) and (max-width: 768px) {
    .contentForm {
        display: none;
    }
    
    .containerSection1 {
        background: url(../images/services/width320px/White\ colar\ crime.png) no-repeat;
        background-size: cover;
        padding: 50px 0px;
    }

    .blockHeaderSection1 {
        border: none;
    }

    .blockHeaderSection1 h2 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 1);
    }

    .contentSection1 p {
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 0.8);
    }


    .contentSection2 h3 {
        text-align: center;
    }
    
    .containerSeciton5 {
        background: url(../images/services/width320px/Фон_2.png) no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 50px 0px;
    }

    .contentSection5 {
        padding: 0px;
        margin: 0px;
    }

    .headerSection5 h3 {
        color: #FFFFFF;
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
    }
    
    
    .blockTextSection5 p:nth-child(1) {
        color: #EFC079;
        font-size: 20px;
        font-family: 'Gilroy';
        font-weight: 700;
        line-height: 24px;
    }   
    
    .blockTextSection5 p:nth-child(2) {
        color: #FFFFFFCC;
        font-size: 17px;
        font-family: 'Gilroy';
        font-weight: 500;
        line-height: 20px;
    } 

    .mainSeciton6 {
        padding: 50px 0px;
        background: none;
    }
    
    .containerSeciton6 {
        background: 0% 100% / 60% 50% no-repeat url(../images/a-b/width320/R.png),  
        0% 35% / 60% 50% no-repeat url(../images/a-b/width320/P.png);
    }


    .contentFormMobail {
        display: block;
        padding: 30px 40px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.85);
    }

    .contentFormMobail h1 {
        color: #222B3E;
        font-size: 32px;
        font-weight: 600;
    }

    .contentFormMobail form {
        display: flex;
        flex-direction: column;
        color: #222B3E;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form input {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form textarea {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .btnForm {
        background-color: #28a745;
    color: #fff;
    padding: 10px 0px;

    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

    .btnForm:hover {
        background-color: #218838;
    }
}

/* ============================================================================================================================================================== */
/* ==============================================================================WIDTH992px====================================================================== */
/* ============================================================================================================================================================== */

@media (min-width: 768px) and (max-width: 992px) {
    .contentForm {
        display: none;
    }
    
    .containerSection1 {
        background: url(../images/services/width320px/White\ colar\ crime.png) no-repeat;
        background-size: cover;
        padding: 50px 0px;
    }

    .blockHeaderSection1 {
        border: none;
    }

    .blockHeaderSection1 h2 {
        text-align: center;
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 1);
    }

    .contentSection1 p {
        text-align: center;
        font-size: 20px;
        font-weight: 400;
        line-height: 24px;
        font-family: 'Gilroy';
        color: rgba(255, 255, 255, 0.8);
    }


    .contentSection2 h3 {
        text-align: center;
    }
    
    .containerSeciton5 {
        background: url(../images/services/width320px/Фон_2.png) no-repeat;
        background-size: cover;
        margin: 0px;
        padding: 50px 0px;
    }

    .contentSection5 {
        padding: 0px;
        margin: 0px;
    }

    .headerSection5 h3 {
        color: #FFFFFF;
        font-size: 40px;
        font-weight: 700;
        line-height: 44px;
        font-family: 'Gilroy';
    }
    
    
    .blockTextSection5 p:nth-child(1) {
        color: #EFC079;
        font-size: 20px;
        font-family: 'Gilroy';
        font-weight: 700;
        line-height: 24px;
    }   
    
    .blockTextSection5 p:nth-child(2) {
        color: #FFFFFFCC;
        font-size: 17px;
        font-family: 'Gilroy';
        font-weight: 500;
        line-height: 20px;
    } 

    .mainSeciton6 {
        padding: 50px 0px;
        background: none;
    }
    
    .containerSeciton6 {
        background: 0% 100% / 60% 50% no-repeat url(../images/a-b/width320/R.png),  
        0% 35% / 60% 50% no-repeat url(../images/a-b/width320/P.png);
    }


    .contentFormMobail {
        display: block;
        padding: 30px 40px;
        border-radius: 5px;
        background: rgba(255, 255, 255, 0.85);
    }

    .contentFormMobail h1 {
        color: #222B3E;
        font-size: 32px;
        font-weight: 600;
    }

    .contentFormMobail form {
        display: flex;
        flex-direction: column;
        color: #222B3E;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form input {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .contentFormMobail form textarea {
        padding: 8px 16px;
        border: 0px;
        border-radius: 5px;
        background: white;
        color: #AEADBA;
        font-size: 14px;
        font-weight: 500;
    }

    .btnForm {
        background-color: #28a745;
    color: #fff;
    padding: 10px 0px;

    border: none;
    border-radius: 5px;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    }

    .btnForm:hover {
        background-color: #218838;
    }
}