@font-face {
    font-family: PlayFair;
    src: url(Playfair_Display/PlayfairDisplay-VariableFont_wght.ttf);
}

@font-face {
    font-family: Poppins;
    src: url(Poppins/Poppins-Regular.ttf);
    font-weight: normal;
}
@font-face {
    font-family: Poppins;
    src: url(Poppins/Poppins-Light.ttf);
    font-weight: lighter;
}


*{
    margin: 0px;
    font-family: PlayFair;
}

.container{
    width: 100%;
}
.navbar{
    width: 95%;
    border-bottom: 1px solid black;
    height: 130px;
    padding-left: 5%;

}
.navbar .left{
    padding-top: 10px;
}
.left{
    float: left;
}

.right{
    float: right;
}
ul {
    list-style-type: none;

}
  
li{
    float: right;
    
}
  
li a{
    margin-right: 7vw;
    display: block;
    color: black;
    text-align: center;
    text-decoration: none;
    line-height: 130px;
    font-weight: 400;
    font-size: 32px;
}
  
li a:hover{
    color:rgb(84, 84, 84);
}

.jumbotron{
    width: 100%;
    background-color: #333333;
    background-image: url(homepage.jpg);
    height: 700px;
    background-size: cover;
    background-position-y: 68%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.background-tint {
    background-color: rgba(33, 33, 33, 0.63);
    background-blend-mode: multiply;
  }
.jumbotron .title{
    color: white;
    font-size: 84px;
    font-weight: 600;
    padding-bottom: 26px;
}
.jumbotron .text{
    color: white;
    font-size: 34px;
    font-weight: 500;
    padding-bottom: 69px;
}
.button{
    padding: 10px 50px;
    background-color: #323232;
    border-radius: 100px;
}
.button a{
    text-align: center;
    text-decoration: none;
    color: white;
    font-family: Poppins;
    font-size: 24px;
    font-weight: 400;
}
.button:hover{
    background-color: #676767;
}
.button a:hover{
    color:rgb(255, 255, 255);
}
.content{
    width: 100%;
}
.content1{
    padding-top: 90px;
    padding-bottom: 90px;
    padding-left: 8%;
    font-weight: 400;
    font-size: 60px;
    border-bottom: 1px solid black;
}
.content2{
    padding-bottom: 109px;
}
.content2 .title{
    margin-top: 54px;
    margin-bottom: 54px;
    font-size: 64px;
    font-weight: 400;
    text-align: center;
}
.works-wrapper{
    display: flex;
    align-items: center;
    justify-content: center;
}
.works{
    width: 436px;
    height: 711px;
    background-color: #F2F2F2;
    border-radius: 25px;
    margin-left: 21px;
    margin-right: 21px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.works .number{
    font-family: Poppins;
    font-size: 32px;
    font-weight: 275;
    padding-bottom: 10px;
}

.works .title{
    font-size: 40px;
    font-weight: 400;
    padding-bottom: 54px;
}
.works .picture{
    width: 170px;
    height: 170px;
    padding-bottom: 74px;
}
.works .button{
    background-color: white;
    color: black;
}
.works .button:hover{
    background-color: rgb(188, 188, 188);
}
.works .button a{
    color: black;
}
.footer{
    width: 100%;
    height: 163px;
    background-color: #323232;
}
.footer .left{
    padding-left: 5%;
}
.footer .right{
    padding-top: 26px;
    padding-right: 5%;
}
.footer .right img{
    -webkit-filter: invert(1);
    filter: invert(1);
}
.footer .left ul li a{
    line-height: 163px;
    margin-right: 38px;
    color: white;
    font-size: 32px;
}

.footer .left img{
    -webkit-filter: invert(1);
    filter: invert(1);
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;
}

.content.contact {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.content.contact .title,.content.about .title{
    font-size: 60px;
    text-align: center;
    padding-top: 70px;
    padding-bottom: 100px;
}
.content.contact .text{
    width: 706px;
    height: 84px;
    background-color: #F2F2F2;
    border-radius: 20px;
    font-size: 34px;
    text-align: center;
    margin-bottom: 65px;
    line-height: 84px;
}
.content.about{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.content.about .left{
    padding-right:14px;
}
.content.about .right{
    padding-left:14px;
}
.mainsquare{
    background-color: #dfdfdf;
    font-size: 34px;
    text-align: center;
    width: 483px;
    height: 84px;
    line-height: 84px;
    border-radius: 20px;   
    margin-top: 12px; 
    margin-bottom: 12px; 
    cursor: pointer;
}
.subsquare{
    margin-top: 12px; 
    margin-bottom: 12px; 
    padding: 20px 36px;
    background-color: rgba(33, 33, 33, 0.63);
    font-size: 26px;
    text-align: center;
    width: 410px;
    border-radius: 20px;
    display: none;
}
.mainsquare.mainsquare:hover{
    background-color: #c5c5c5;
}
.content.readmore{
    height: 1000px;
    margin-top: 180px;
    margin-bottom: 180px;
}
.content.readmore .left{
    width: 48%;
    margin-left: 10%;
    margin-right: 5%;
    margin-top: 60px;

}
.content.readmore .title{
    font-size: 50px;
    margin-bottom: 20px;
}
.content.readmore .text{
    font-size: 32px;
    font-family: Poppins;
    font-weight: lighter;
}
.content.readmore .right{
    float: left;
    width: 10%;
}
.content.readmore .right .image{
    height: 410px;
    width: 410px;
    background-image: url(aboutme.JPG);
    border-radius: 50%;
    background-size: 190%;
    background-position-x: center;
    background-position-y: 45%;
}

.content.carousels .title{
    font-weight: 600;
    font-size: 60px;
    text-align: center;
    padding-top: 70px;
}
.carousel{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 45px;
    margin-bottom: 45px;
}
.carousel .wrapper{
    text-align: center;
}
.carousel .sidewrapper .wrapper div{
    height: 33%;
}
.carousel .wrapper .number{
    font-size: 80px;
    font-weight: 500;  
}
.carousel .wrapper .description{
    font-size: 24px;
    width: 200px;
    text-align: center;
}
.arrow-left,.arrow-right{
    cursor: pointer;
}
.arrow-left{
    -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  margin-top: 100px;
}
.arrow-right{
    margin-left: 100px;
}
.carousel .sidewrapper{
    width: 18%;

}
.carousel-content {
    display: none;
}
.carousel-content.active {
    display: block;
}