#photS{
    display:flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 37%;
    z-index: -1;
    font-size:157px;
    opacity:0;
    transition: all ease 1s;
}
body{
    width:100%;
    max-width:1920px;
    margin-left: auto;
    margin-right: auto;
    font-family: Rajdhani-Bold;
    background-color: #272727;
}
main{
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    max-width:1920px;
    flex-direction: column;
}
header{
    width:100%;
    max-width:1920px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;
    /* background: url('/best-it-solution-agency/site/img/Header Background.jpg'); */
    /* background: url('/site/img/Header Background.jpg'); */
    background-position: center center;
    min-height:100vh;
    color:white;
    background-size: cover;
}

body > main > header > section{
    max-width:1000px;
    width:100%;
    display:flex;
    justify-content: flex-start;
    align-items: flex-start;
}
.center > h1 > span{
    color:white;
    text-shadow:black 1px 1px;
}
.center > h1 > span:nth-child(2){
    color:var(--main-color);
    text-shadow:black 1px 1px;
}
.center > h1{
    font-family:Rajdhani-Bold;
    width:100%;
    max-width:487px;
    min-height:270px;
    font-size:90px;
}
.center > p{
    width: 100%;
    max-width:647px;
    min-height:42px;
}
.arrows{
    position: absolute;
    display: flex;
    justify-content: space-between;
    align-items:center;
    width:100%;
    height:100vh;
    font-size:73px;
    color:var(--main-color-two);
}
.arrows:hover{
    color:var(--main-color);
}
.arrows > span{
    width:100px;
    height:100px;
    background-color:#25242288;
    border-radius: 7px;
    display:flex;
    justify-content: center;
    align-items: center;
    margin:3%;

}
.arrows > span:hover{
    background-color: #3d3c38;
}

article{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width:100%;
    max-width:1920px;
}
.aboutUsSection{
    width:100%;
    max-width:1920px;
    min-height:900px;
    display:flex;
    justify-content: center;
    align-items: center;
    background-color:#272724;
}
.aboutUsSection > div{
    width:100%;
    max-width:1200px;
    min-height:555px;
    display:flex;
    justify-content: center;
    align-items: center;
    color:white;
    flex-wrap:wrap;
}
.aboutUsSection > div > section{
    /* overflow: hidden; */
    position: relative;
    padding:55px;
}
.aboutUsSection > div > section > img{
    width:100%;
    position: relative;
    z-index: 2;
}
.aboutUsSection > div > div{
    width:100%;
    max-width:537px;
    display:flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-direction: column;
    min-height:555px;
    margin-left:37px;
}
.aboutUsSection > div > div > div{
    display:flex;
    justify-content: space-between;
    align-items: space-around;
    flex-direction: column;
    width:100%;
    max-width:537px;
}
body > main > article > div > div > div > h2{
    font-size: 50px;
}
.aboutUsSection > div > div > div > h3{
    display:flex;
    justify-content: space-between;
    align-items: space-around;
    width:100%;
    max-width:537px;
}
progress{
    color:var(--main-color);
    width:100%;
    max-width:537px;
    /* background: var(--main-color); */
}
.aboutUsSection > div > div > button{
    width:200px;
    min-height:50px;
    background-color: var(--main-color);
    border-radius: 7px;
    color:white;
    font-size: 20px;
}
.aboutUsSection > div > div > strong{
    color:var(--main-color);
}
.aboutUsSection > div > div > h2 > span{
    color:var(--main-color);
}

.boxSquare{
    display:block;
    width:100px;
    height:100px;
    background-color: var(--main-color);
    position:relative;
    bottom:100px;
    left:397px;
    z-index: 1;
}
.boxParallelepiped{
    /* display:block; */
    width:190px;
    height:80px;
    background-color: #AAAAAA;
    position:relative;
    top:-590px;
    left:-97px;
    z-index: 3;
    display: flex;
    justify-content: center;
    align-items: center;
}

.boxParallelepiped > div{
    width:133px;
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.boxParallelepiped > div > p{
    font-size: 40px;
    margin-right:7px;
    color:var(--main-color);
}
.boxLine{
    background-color: var(--main-color);
    width:5px;
    height:240px;
    display:block;
    position:relative;
    top:327px;
    left:50px;
}

.aboutUsSection > div:nth-child(1) > section:nth-child(1){
    position: relative;
    /* overflow: hidden; */
    height:500px;
}

.servicesSection{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
    width:100%;
    max-width:1920px;
    background-color: #AAAAAA;
}
.servicesSection > div{
    width:100%;
    max-width:640px;
    min-height:640px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #00000054;
}
.servicesSection > div > div{
    width:100%;
    max-width:500px;
    min-height:327px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}
.servicesSection > div > div > strong:nth-child(2){
    font-size: 33px;
    color:var(--main-color);

}
.servicesSection > div > div > strong:nth-child(3){
    font-size:33px;
    color:white;
}
.servicesSection > div > div > hr{
    width:74px;
    height:3px;
    background-color: var(--main-color);
}
.servicesSection > div > div > p{
    width:100%;
    max-width:500px;
    color:white;
    margin-left: 17px;
    margin-right:17px;
}

.servicesSection > div:nth-child(2){
    background: url("../img/john-schnobrich-2FPjlAyMQTA-unsplash\ 1.svg");
    font-size:33px;
}
.servicesSection > div:nth-child(1),.servicesSection > div:nth-child(3),.servicesSection > div:nth-child(5){
    background-color: rgba(0, 0, 0, 0.575);
}
/* body > main > article > div.servicesSection > div:nth-child(2) > div > strong:nth-child(3) */
.servicesSection > div:nth-child(2) > div > strong{
    text-align: center;
}
body > main > article > div.servicesSection > div:nth-child(2) > div > button{
    width:200px;
    height:50px;
    background-color: black;
    color:white;
    border-radius: 17px;
    font-size: 20px;
}
body > main > article > div.servicesSection > div:nth-child(2) > div > strong:nth-child(3) > span{
    color:var(--main-color);
}
body > main > article > div.servicesSection > div:nth-child(2) > div > strong:nth-child(1){
    color:var(--main-color);
}

.testimonialText{
    width:100%;
    max-width:1920px;
    min-height:935px;
    background: url("../img/bg-body4\ 1.jpg");
}

.beforeFooter{
    display:flex;
    width:100%;
    max-width:1920px;
    min-height:1000px;
    justify-content: center;
    align-items: center;
}
.beforeFooter > div{
    width: 100%;
    max-width:1200px;
    min-height:900px;
    display:flex;
    justify-content: center;
    align-items: center;
    flex-wrap:wrap;
}
.beforeFooter > div > div{
    display:flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-direction:column;
    width:100%;
    max-width:470px;
    min-height:710px;
}
.beforeFooter > div > div > p{
    display:flex;
    justify-content: flex-start;
    align-items: center;
    color:#bababa;
    width:100%;
}
.beforeFooter > div > div > p > img{
    margin-right:17px;
}
.beforeFooter > div > div > p > a{
    color:#bababa;
    font-size:20px;
    text-decoration:none;
}
.beforeFooter > div > div > p > a:hover{
    color:#979797;
}
.beforeFooter > div > div > strong{
    color:var(--main-color);
}
.beforeFooter > div > div > h2{
    color:white;
}
.beforeFooter > div > div > h2 > span{
    color:var(--main-color);
    font-size:70px;
}
.beforeFooter > div > div > h3{
    color:var(--main-color);
}

.beforeFooter > div > form{
    width:100%;
    max-width:640px;
    min-height:900px;
    border: 3px solid #C57642;
    /* border-image: linear-gradient(to left,#C57642,#1C1C1B) 1; */
    border-radius: 27px;
    display:flex;
    justify-content: center;
    align-items: center;

    border-width: 4px;
    border-style: solid;
    /* padding: 5px; */
}
.beforeFooter > div > form > button{
    width:52px;
    height:52px;
    background:#D9D9D9;
    border-radius: 50%;
    border:2px solid #383838;
    font-size:30px;
    position: relative;
    margin-left:470px;
}
.beforeFooter > div > form > button:before{
    content: ' Send now';
    color:white;
    display:flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    width:530px;
    height:60px;
    background: linear-gradient(to right,#c5764200,#C57642);
    border-radius:37px;
    top:-6px;
    right:-5px;
    z-index: -1;
}



body > main > img {
    width: 100%;
    max-width: 1300px;
}
body > main > picture > img {
    width: 100%;
    max-width: 1300px;
}
@media(max-width:700px){
    .boxSquare{
        left:370px;
    }
    .center > h1{
        font-size: 70px;
    }
    .beforeFooter > div > form > button{
     
        margin-left:70px;
    }
    .beforeFooter > div > form > button:before{
        /* width:100%; */
        max-width:200px;
    }
    
}
@media(max-width:550px){
    .boxParallelepiped{
        top:-450px;
    }
    .boxSquare{
        left:330px;
    }
    .boxLine{
        top:227px;
    }
    .aboutUsSection > div:nth-child(1) > section:nth-child(1){
        height: 477px;
    }
}@media(max-width:500px){
    
    .boxSquare{
        left:270px;
    }
    .boxLine{
        top:187px;
    }
    .aboutUsSection > div:nth-child(1) > section:nth-child(1){
        height: 400px;
    }
}
@media(max-width:425px){
    
    .boxSquare{
        left:220px;
    }
    .aboutUsSection > div:nth-child(1) > section:nth-child(1){
        height: 370px;
    }
}
@media(max-width:400px){
    .boxParallelepiped{
        top:-350px;
    }
    .boxSquare{
        left:170px;
    }
    .boxLine{
        top:87px
    }
    .aboutUsSection > div:nth-child(1) > section:nth-child(1){
        height: 300px;
    }
}
@media(max-width:300){
    .boxSquare{
        left:170px;
    }
}
@media(max-width:280){
    .boxSquare{
        left:100px;
    }
}