@import url(https://fonts.googleapis.com/css?family=Roboto+Slab|PT+Sans+Caption&subset=latin,cyrillic);
body{

    color: aliceblue;
    background-color: rgb(2, 1, 1);
    /* background-color: aliceblue; */

}
.btn-close{
    color: #fc9732;
}
.wraper{
    max-width: 1400px;
    margin: 0 auto;
}
.main{
    min-height: 500px;
}
.nav-item {
    margin-right: 32px;
}

    .nav-item:last-child {
        margin: 0;
    }

.logoImg{
    border-radius: 20%;
}
.navbar li  a {
  color: aliceblue;
  font-size:25px;
  /* font-family: Century gothic; */
    /* color:#E2A126!important;
    text-shadow: 1px 0 1px #fe9d3e,
    0 1px 1px #fe9d3e,
    -1px 0 1px #fe9d3e,
    0 -1px 1px #fe9d3e; */
}
.navbar li:hover a {
    /* text-transform: uppercase; */
    color: #fe9d3e;
  }
a {
    text-decoration: none;
    color: aliceblue;
}

    a:hover {
        text-decoration: none;
        color: #fe9d3e;
    }
.navbar{
    font-size: 0.8em;
    z-index: 1;
    /* background: rgba(0, 0, 0, 0); */

}
h1{
    font-weight: 600;

}
.navhead{
    height: 75vh; 
    background-image: url(../img/wallpap.jpg);
    object-fit: cover;
    z-index: 12;
    background-size: 100% 100%;
    color: aliceblue;
}
.btn-outline-success{
    font-size: 0.7em;
}
.slogan{
    font-family: 'Roboto Slab', serif;
    font-weight: normal;
    color: aliceblue;
    /* color:#E2A126; */
    text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
             0 3px 2px 0px hsla(330, 100%, 15%, 0.5);
    margin-top: 5%;
    margin-left: 30%;
    max-width: 35%;
    /* font-family: Century gothic; */
}
.btn-outline-success{
    font-size: 1em;
    --bs-btn-font-weight: 600;
    --bs-btn-color:#fe9d3e;
    --bs-btn-border-color:#fe9d3e;
}
.btn-outline-success:hover{
    color: aliceblue;
    background-color: #fe9d3e;
    border-color:aliceblue;
}
.btn-outline-success:focus{
    color: aliceblue;
    background-color: #fe9d3e;
    border-color:aliceblue;
}


#myModal {
    width: 35%;
     height: 45%;
    /* background-image: url(../img/fonModalForm.png); */
    padding: 18px 9px;
    border-radius: 4px;
    background-color: rgb(2, 1, 1);
    box-shadow: 0px 0px 5px 5px aliceblue;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    margin: auto;
    display: none;
    opacity: 0;
    z-index: 38;
    text-align: center;
}
#myModal #myModal__close {
    width: 21px; height: 21px;
    position: absolute;
    font-size: 29px;
    top: 1px; right: 11px;
    cursor: pointer;
    display: block;
}
#myOverlay {
    z-index: 37;
    position: fixed;
    background: rgba(0,0,0,.7);
    width: 100%; height: 100%;
    top: 0; left: 0;
    cursor: pointer;
    display: none;
}

.form-control{
    border: 2px solid #fe9d3e;
}
.formText{
    font-size: 15px;
}
.fromUp{
    width: 100%;
    height: 10%;

}
.scroll{
    position: absolute;
    margin-left:47%;
    
}
.toscrol{
    height:1000px;
}

/* Main start */

.firstBlock{
    background-image: url(../img/phoneBlockOrangetest.png);
    background-size: 100% 100%;
    font-weight: 600;
    height: auto;
}

.secondBlock{

    /* background-image: url(../img/phoneBlockOrange2.png); */
    /* background-color: #fd8d1f; */
    background: linear-gradient(to left, #fd8d1f,#fc9732 );
    background-size: 100% 100%;
}
.thirdBlock{
    height: 1050px;
    background-image: url(../img/phoneBlockOrangetest2.png);
    background-size: 100% 100%;
    font-weight: 600;

}

/* ------------------ us ------------------------ */
/* .blocks1{
    display: flex;
    flex-flow: wrap;
}
.block2{
    margin-top: 4%;
}
.block{
    margin-top: 4%;
}
.roundedCorners{
    border-radius: 10%;
    max-width: 100%;
}
.usText2{
    margin-top: 20%;
} */

 .usTitle{
    font-size: 2.6em;
    font-weight: 600;
} 
.blocks1{
    display: flex;
    flex-flow: wrap;
}
.block2{
    margin-top: 1%;
}
.roundedCorners{
    margin-top: 0%;
}
.roundedCornersImg{
   width: 100%;
   height: 100%;
   width: 70vh;
   height: 45vh;
   border-radius: 10%;
}

.uslugiTop{

    position: relative;
    z-index: 7;
    margin-top: 4%;
    width: 1800px;
}


.uslugiTopchildImg{
    border-radius: 5px;
}

.blockTitle{
    font-weight: 600;

}
.block1Title{
    margin-top:0%;
    margin-right:0%;
    text-align: right;
}
.blockBody{
    font-size: 1.1em;
}
.block1Body{
    margin-top: 2%;
    margin-left: 38%;
    max-width: 400px;
    text-align: right;
}
.block2Title{
    margin-top: 36%;
    margin-left: 4%;
}
.block2Body{
    margin-top: 1%;
    margin-left: 4%;
    max-width: 400px;
}

/* ------------------ us end ------------------------ */

/* ------------------ repairBlocks ------------------------ */
.repairTitle{
    margin-top: 2%;
    font-size: 2.6em;
}
.repairBlocksPhone{
    width: 180vh;
    height: 200vh;
    margin:auto;
    margin-top: 5%;
    border-radius: 5%;
    background-color: black;
}
.repairBlocks{
    border-radius: 5%;
}
.repairBlock{
    margin-top: 2%;
    margin-bottom: 5%;

}
.repairBlockBig{
    margin-top: 3%;

}

.repairBlockBigImg{
    max-height: 100%;
    width: 100%;
    height: 100%;
    border-radius: 7%;
}
.repairBlock:hover .scale{
    transform: scale(1.05);
}
.repairBlockBig:hover .scale{
    transform: scale(1.05);
}
.titileImg2{
    font-weight: 600;
    transition: transform 1s;
}
.titileImg{
    font-weight: 600;
    transition: transform 1s;
}
.repairBlockBig:hover .titileImg {
    color: #fc9732;
}
.repairBlock:hover .titileImg {
    color: #fc9732;
}
.repairBlock:hover .titileImg2 {
    color: #fc9732;
}
.scale {
    display: inline-block; 
    overflow: hidden; 
    transition: transform 0.35s;
   }


.repairBlockImg{
    border-radius: 7%;
    max-height: 70%;
    width: 100%;
    height: 100%;
}
.textOnBigImg{
    position	: absolute;
    margin-top: -5%;
    text-align: center;
    font-weight:600;
    margin-left: 26%;
    color:black;
}
.textOnImg{
    position	: absolute;
    margin-top: -10%;
    text-align: center;
    font-weight:600;
    margin-left: 3%;
}
.textOnImg2{
    position	: absolute;
    margin-top: -10%;
    text-align: center;
    font-weight:600;
    margin-left: 4%;
    color: black;
}
.repairBlockButton{
    margin-top: 2%;
    width: 25%;
    height:50px;
    font-size: 1.2em;
    --bs-btn-font-weight: 600;
    --bs-btn-color: white;
    background-color:#fe9d3e;
    --bs-btn-border-color:#fe9d3e;
}
.repairBlockButton:hover{
    color: #fe9d3e;
    background-color: black;
    border-color:#fe9d3e;
}
.repairBlockButton:focus{
    color: aliceblue;
    background-color: #fe9d3e;
    border-color:aliceblue;
} 

/* ------------------ repairBlocks end------------------------


/* ------------------ recieveFrom start------------------------ */
.recieveFromTitle{
    margin-top: 3%;
    font-size: 2.6em;
}
.form{
    margin-top: 4%;
}
.recieveForm{
    opacity: 95%;
    margin-top: 8%;
    /* width: 120vh;
    height: 75vh; */
    background-color: aliceblue;
    border-radius: 5%;
    color:black;
}
.recieveFormInput{
    width: 80vh;
    height: 5vh;
}
.recieveFormTextarea{
    width: 80vh;
    height: 10vh;
    max-height: 12vh;
}
.myLinkModal1{
    width: 14vh;
    height:5vh;
    font-size: 1.3em;
    margin-bottom: 2%;
}

/* ------------------ recieveFrom end------------------------ */


/* ------------------ footer start------------------------ */
.foterUl{
    text-align: right;
}
.foterUl2{
    font-size: 1.1em;
    margin-top: 4%;
    width: 100vh;
    text-align: left;
}
.foterUl3{
    margin-top:5%;
}
.foterUl li{
    display: inline-block;
}
.foterUl2 li{
    display: inline-block;
    margin-left: 2%;
}
.footerItemNav{
    font-size: 1.2em;
    color: white;
}
.footerH{
    font-size: 1.8em;
}
.footerNum{
    
    width: 35vh;
    height: 12vh;
    text-align: right;
}
.footerIco{
    margin-left: 3%;
   margin-bottom: 70%;
}
.footerNumber{
    margin-top: -3%;
    position: relative;
}
.footerHr{
    margin-top: -8%;
    margin-left: 37%;
    width: 42vh;
    border-width: 2px;
}
.footerIcons{
    text-align: right;
}

/* ------------------ footer end------------------------ */
@media only screen and (min-width: 1300px) and (max-width: 1600px){
    .roundedCornersImg{
        width: 45vh;
        height: 40vh;
        width: 100%;
        height: 100%;
    }
    .roundedCorner1{
        margin-top: 1%;
    }
    .roundedCorners{
        height: 450px;
    }
    .footerNumber{
        margin-left: -3.5%;
    }
    .repairBlocksPhone{
        width: 180vh;
        height: 220vh;
    }
    .recieveButton{
        width: 15%;
        height: 15%;
    }
    #myModal {
         height: 50%;
    }
}


/* -----------------screen media 2k------------------------ */
@media(min-width: 2260px) {
    .repairBlocksPhone{
        width: 70%;
        height: 130vh;
        margin:auto;
        margin-top: 5%;
        border-radius: 5%;
        background-color: black;
    }
    .textOnBigImg{
        margin-left: 15%;
    }
    .repairBlockBig{
        width: 200vh;
        height: 60vh;
    }
    .repairBlockBigImg{
        width: 100%;
        height: 100%;
    }
    .repairBlock{
        height: 75vh;
    }
    /* ---------us---------- */
    .usTitle{
        font-size: 2.6em;
        font-weight: 600;
    } 
    .blocks1{
        display: flex;
        flex-flow: wrap;
    }
    .block2{
        margin-top: 1%;
    }
    .roundedCorners{
        margin-top: 0%;
    }
    .roundedCornersImg{
       width: 100%;
       height: 100%;
       border-radius: 10%;
    }
    
    /* ---------us end---------- */
    .textOnBigImg{
        text-align: center;
    }
    /* ------------------ recieveFrom start------------------------ */
.recieveFromTitle{
    margin-top: 4%;
    font-size: 2.6em;
}
.form{
    margin-top: 4%;
}
.recieveForm{
    margin: 0 auto;
    opacity: 95%;
    margin-top: 8%;
    width: 100%;
    height: 60vh;
    background-color: aliceblue;
    border-radius: 5%;
    color:black;
}
.recieveFormInput{
    width: 80vh;
    height: 4vh;
}
.recieveFormTextarea{
    width: 80vh;
    height: 8vh;
    max-height: 10vh;
}
.myLinkModal1{
    width: 11vh;
    height:4vh;
    font-size: 1.2em;
}

/* ------------------ recieveFrom end------------------------ */

/* ------------------ footer start------------------------ */
.footerHr{
    margin-top: -8%;
    margin-left: 37%;
    width: 31vh;
    border-width: 2px;
}
/* ------------------ footer end------------------------ */

}
/* -----------------screen media 800 start ------------------------ */

/* -----------------screen media 800 end ------------------------ */


/* -----------------screen media 2k end ------------------------ */

@media only screen and (max-width: 380px){
    .slogan{
        font-size: 1em;
        margin-left: 35%;
        max-width: 35%;
        /* font-family: Century gothic; */
    }
    .repairBlocksPhone{
        width: 100%;
        height: 1200px;
        margin:auto;
        margin-top: 5%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;   
        background-color: black;
    }
    .repairBlockBig{
        width: 100%;
    }
    .repairBlockBigImg{
        width: 100%;
        height: 100%;
        
    }
    .repairBlock{
        margin-top: 10%;
    }
    .repairBlock2{
        margin-top: -25%;
    }
    .repairBlockImg{
        width: 100%;
        height: 100%;
    }
    .textOnBigImg{
        margin-top: -10%;
        font-size: 0.5em;
        text-align: center;
    }
    .textOnImg{
        margin-top: -15%;
        font-size: 0.5em;
        text-align: center;
    }
    .textOnImg2{
        margin-top: -10%;
        font-size: 0.5em;
        text-align: center;
    }
    
    .titileImg{
        font-size: 1.6em;
    }
    .titileImg2{
        font-size: 1.6em;
    } 
    /* ------------------ recieveFrom start------------------------ */
    .recieveFromTitle{
        font-size: 2.1em;
    }
    .myLinkModal1{
        font-size: 1em;
    }
/* ------------------ recieveFrom end------------------------ */
/* -----------------screen media 750 start ------------------------ */
}
@media only screen and (min-width: 620px) and (max-width: 1050px) {
    .navhead{
        height: 50vh; 
        background-image: url(../img/wallpap.jpg);
        object-fit: cover;
        z-index: 12;
        background-size: 100% 100%;
        color: aliceblue;
    }
    .slogan{
        margin-top: 6%;
        font-size: 1.8em;
        font-family: 'Roboto Slab', serif;
        font-weight: normal;
        color: aliceblue;
        /* color:#E2A126; */
        text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
                 0 3px 2px 0px hsla(330, 100%, 15%, 0.5);
        margin-left: 40%;
        max-width: 35%;
        /* font-family: Century gothic; */
    }
    .roundedCornersImg{
        width: 100%;
        height: 100%;
        height: 30vh;
        /* width: 50vh; */
        border-radius: 10%;
     }
    .firstBlock{
        background-image: url(../img/indexPhoneMobile.png);
        background-size: 100% 100%;
        width: 100%;
        height: auto;
        object-fit: cover;
        background-repeat: no-repeat;
        /* background-color: #fc9732; */
    }
    .secondBlock{
        background-color: white;
    }
    .thirdBlock{
        width: 100%;
        height: auto;
        /* background-color: #fc9732; */
        /* background-image: url(../img/phoneMobileTest.png); */
    }

    .navhead{
        height: 38vh; 
    }
    .slogan{
        margin-left: 20%;
    }
    .slogan2{
        font-size: 1.1em;
        width: 35vh;
    }
/* -----------------us start ------------------------ */
    .usTitle{
        font-size: 2em;
    }
    .block1Title{
        margin-top: 4%;
        text-align: center;
        font-size: 1.5em;
    }
    .blockBody{
        font-size: 1em;
        text-align: center;
        margin: 0 auto;
    }
    .block1Body{
        margin-top: 5%;
        text-align: center;
    }
    .roundedCorners{
        margin-top: 5%;
    }
    /* .col1{
        order:2;
    }
    .col2{
        margin-top: -20%;
        order:1;
    } */

/* -----------------us start ------------------------ */

/* -----------------repair start ------------------------ */
     .repairTitle{
        margin-left: 10%;
        font-size: 2em;
        max-width: 50vh;
    }
    .repairBlocksPhone{
        width: 100%;
        height: 95vh;
        margin:auto;
        margin-top: 5%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;   
        background-color: black;
    }
    
    .textOnBigImg{
        margin-top: -8%;
        margin-left: 20%;
        font-size: 1.2em;
    }
    .textOnImg{
        margin-top: -20%;
        margin-left: 3%;
        font-size: 1em;
    }
    .textOnImg2{
        margin-top: -20%;
        margin-left: 4%;
        font-size: 1em;
    }
    
    .titileImg{
        font-size: 1.6em;
    }
    .titileImg2{
        font-size: 1.6em;
    } 

/* -----------------repair end ------------------------ */

/* ------------------ recieveFrom start------------------------ */
    .recieveForm{
        margin-bottom: 10%;
        min-height: 62vh;

    }
    .recieveFormInput{
        width: 96%;
        height: 6vh;
    }
    .recieveFormTextarea{
        width: 96%;
        height: 10vh;
        max-height: 12vh;
    }
    .recieveButton{
        width: 40%;
        height: 10%;
    }
/* ------------------ recieveFrom end------------------------ */

/* ------------------ footer start------------------------ */
.foterUl{
    text-align: right;
    margin-left: -10%;
}
.foterUl2{
    font-size: 1em;
    margin-top: 4%;
    margin-left: -20%;
    width: 40vh;
    text-align: left;
}
.foterUl3{
    margin-top:5%;
}
.foterUl li{
    display: inline-block;
}
.foterUl2 li{
    /* text-decoration: n; */
    display: inline-block;
    margin-left: 2%;
}
.footerItemNav{
    font-size: 1em;
    color: white;
    /* display: inline-block; */
}

.footerH{
    font-size: 1.5em;
}
.footerNum{
    /* text-align: right; */
    /* margin-left: 75%; */
    /* background-color: #fc9732; */
    width: 25vh;
    height: 12vh;
    text-align: right;
    
}
.footerIco{
    margin-left: 3%;
   margin-bottom: 70%;
   width: 70px;
   height: 70px;
}
.footerNumber{
    font-size: 1.5em;
    margin-top: 0%;
    margin-left: -10%;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    position: relative;
}
.footerHr{
    margin-top: -8%;
    margin-left:28%;
    width: 32vh;
    border-width: 2px;
}
.footerIcons{
    text-align: right;
}

/* ------------------ footer end------------------------ */
}
/* -----------------screen media 750 end ------------------------ */


/* -----------------screen media 480 start ------------------------ */


@media only screen and (max-width: 600px)  {
    #myModal {
        width: 85%;
         height: 50%;
    }
    .navhead{
        height: 100vh; 
        background-image: url(../img/wallpap.jpg);
        object-fit: cover;
        z-index: 12;
        background-size: 100% 100%;
        color: aliceblue;
    }
    .slogan{
        font-size: 1.4em;
        font-family: 'Roboto Slab', serif;
        font-weight: normal;
        color: aliceblue;
        /* color:#E2A126; */
        text-shadow: 0 2px 0 0px hsl(330, 100%, 25%),
                 0 3px 2px 0px hsla(330, 100%, 15%, 0.5);
        margin-left: 35%;
        max-width: 35%;
        /* font-family: Century gothic; */
    }
    .roundedCornersImg{
        width: 100%;
        height: 100%;
        height: 30vh;
        /* width: 50vh; */
        border-radius: 10%;
     }
    .firstBlock{
        background-image: url(../img/indexPhoneMobile.png);
        background-size: 100% 100%;
        width: 100%;
        height: auto;
        object-fit: cover;
        background-repeat: no-repeat;
        /* background-color: #fc9732; */
    }
    .secondBlock{
        background-color: white;
    }
    .thirdBlock{
        width: 100%;
        height: auto;
        background-color: #fc9732;
        /* background-image: url(../img/phoneMobileTest.png); */
    }

    .navhead{
        height: 38vh; 
    }
    .slogan{
        margin-left: 20%;
    }
    .slogan2{
        font-size: 1.1em;
        width: 35vh;
    }
/* -----------------us start ------------------------ */
    .usTitle{
        font-size: 2em;
    }
    .block1Title{
        margin-top: 4%;
        text-align: center;
        font-size: 1.5em;
    }
    .blockBody{
        font-size: 1em;
        text-align: center;
        margin: 0 auto;
    }
    .block1Body{
        margin-top: 5%;
        text-align: center;
    }
    .roundedCorners{
        margin-top: 5%;
    }
    .col1{
        order:2;
    }
    .col2{
        margin-top: -20%;
        order:1;
    }

/* -----------------us start ------------------------ */

/* -----------------repair start ------------------------ */
     .repairTitle{
        font-size: 2em;
        max-width: 50vh;
    }
    .repairBlocksPhone{
        width: 100%;
        max-height: 1450px;
        margin:auto;
        margin-top: 5%;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;   
        background-color: black;
    }
    .repairBlockBig{
        width: 100%;
    }
    .repairBlockBigImg{
        object-fit: cover;
        width: 100%;
        height: 100%;
        
    }
    .repairBlock{
        margin-top: 10%;
        width: 100%;
    }
    .repairBlock2{
        margin-top: -38%;
    }
    .repairBlockImg{
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .textOnBigImg{
        margin-top: -10%;
        margin-left: 4%;
        font-size: 0.8em;
    }
    .textOnImg{
        margin-top: -10%;
        margin-left: 4%;
        font-size: 0.8em;
    }
    .textOnImg2{
        margin-top: -10%;
        margin-left: 4%;
        font-size: 0.8em;
    }
    
    .titileImg{
        font-size: 1.6em;
    }
    .titileImg2{
        font-size: 1.6em;
    } 

/* -----------------repair end ------------------------ */

/* ------------------ recieveFrom start------------------------ */
    .recieveForm{
        margin-bottom: 10%;
        min-height: 80vh;

    }
    .recieveFormInput{
        width: 96%;
        height: 6vh;
    }
    .recieveFormTextarea{
        width: 96%;
        height: 10vh;
        max-height: 12vh;
    }
    .recieveButton{
        width: 40%;
        height: 10%;
    }
/* ------------------ recieveFrom end------------------------ */

/* ------------------ footer start------------------------ */
.foterUl{
    text-align: right;
}
.foterUl2{
    font-size: 1em;
    margin-top: 4%;
    max-width: 120%;
    margin-left: -10%;
    width: 100vh;
    text-align: left;
}
.foterUl2 li{
 margin-bottom: -1em;
 margin-right: 1em;
}
.foterUl3{
    margin-top:5%;
}
.foterUl li{
    display: inline-block;
}
.foterUl2 li{
    /* text-decoration: n; */
    display: inline-block;
    margin-left: 2%;
}
.footerItemNav{
    font-size: 1em;
    color: white;
    /* display: inline-block; */
}

.footerH{
    font-size: 1.5em;
}
.footerNum{
    /* text-align: right; */
    /* margin-left: 75%; */
    /* background-color: #fc9732; */
    width: 25vh;
    height: 12vh;
    text-align: right;
    
}
.footerIco{
    margin-left: 3%;
   margin-bottom: 70%;
   width: 70px;
   height: 70px;
}
.footerNumber{
    font-size: 1.5em;
    margin-top: 0%;
    margin-left: -10%;
    word-break: break-all;
    word-wrap: break-word;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
    position: relative;
}
.footerHr{
    margin-top: -8%;
    margin-left:28%;
    width: 32vh;
    border-width: 2px;
}
.footerIcons{
    text-align: right;
}
}
/* -----------------screen media 480 end ------------------------ */