@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    font-family: "Roboto", sans-serif;
    width: 100%;
    overflow-x: hidden;
}
/* Start-header */
.header{
    width: 100%;
}
.header .container{
   margin: 20px 0;
}
.header .container .line{
    height:2px;
    background-color: #d6d3d3;
    display:block;
    clear: both;
    width: 115%;
    margin-left:30px;
}
.header .container .nav{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom:10px;
    width: 100%;
}
.header .container .nav .left {
    margin-top: 10px;
    margin-left: 100px;
}
.header .container .nav .right {
    margin-right:10px;
}

.header .container .nav .left i{
    color: rgb(255, 136, 0);
    font-size: 20px;
    margin-left:20px
}
.header .container .nav .left span{
    margin: 0 0  80px 20px;
    opacity: 0.6;
}
.header .container .nav .right ul{
    list-style: none;

}
.header .container .nav .right ul li{
    display: inline-block;
    margin-right:30px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: rgb(226, 222, 222);
    text-align: center;
    transition: background-color 0.8s;

}
.header .container .nav .right ul li:hover{
    background-color:rgb(255, 136, 0);
}

.header .container .nav .right ul li a{
    text-decoration: none;
}
.header .container .nav .right ul li a i{
    color: rgb(255, 255, 255);
    font-size: 15px;
    margin-top:8px;
}
.nav-bar{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    background-color: #fff;
    width: 100%;
}
.nav-bar .Hambouger{
    display:none;
    margin: 0 70px 20px 0;
    cursor: pointer;
}
.nav-bar .Hambouger .bar{
    width: 30px;
    height: 3px;
    background-color: #000000;
    border-radius: 20px;
    margin-top:5px;
    display:block;
    transition: all 0.6s ease;
}
.nav-bar h1{
    font-size: 30px;
    font-weight: 800;
    font-family:"Roboto";
    margin-left: 80px;
}
.nav-bar .nav-items{
    list-style: none;
    margin-right:50px;
  

}
.nav-bar .nav-items .list-link{
    display: inline-block;
    margin-right: 30px;
}
.nav-bar .nav-items .list-link:first-child{
    color:rgb(255, 136, 0);
    font-size: 18px;
    font-weight: 500;
    font-family:"Roboto";
    cursor: pointer;
}
 
.nav-bar .nav-items .list-link:nth-child(2){
    font-size: 18px;
    font-weight: 500;
    font-family:"Roboto";
    cursor: pointer;
 }
.nav-bar .nav-items .list-link:nth-child(3){
    font-size: 18px;
    font-weight: 500;
    font-family:"Roboto";
    cursor: pointer;
 }
.nav-bar .nav-items .list-link:nth-child(4){
    font-size: 18px;
    font-weight: 500;
    font-family:"Roboto";
    cursor: pointer;
 }
.nav-bar .nav-items .list-link:last-child{
   font-size: 18px;
    font-weight: 500;
    font-family:"Roboto";
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 40px;
    text-align: right;
    line-height: 40px;
    background-color: #000;
    color: #fff;
    border-radius: 20px;
    padding-right: 20px;
 }
.nav-bar .nav-items .list-link:last-child span{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color:rgb(255, 136, 0) ;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
 }
 .nav-bar .nav-items .list-link:last-child span i{
  font-size:15px;
 }
 .nav-bar .nav-items .list-link:nth-child(2):hover{
    color:rgb(255, 136, 0);
 }
.nav-bar .nav-items .list-link:nth-child(3):hover{
    color:rgb(255, 136, 0);
 }
.nav-bar .nav-items .list-link:nth-child(4):hover{
    color:rgb(255, 136, 0);
 }
.nav-bar.nav-items .list-link:last-child:hover{
    color:rgb(255, 136, 0);
 }
 .carousel {
    width: 100%;
 }

 .carousel-caption{
    position: absolute;
    top:100px;
    left:-100px;
 }
 .carousel-caption h5{
    color:rgb(255, 136, 0);
    margin-right: 150px;
    font-size: 50px;
 }
 .carousel-caption p{
    font-size:30px;
    color: #fff;
    margin-left:20px;
 }
/* End-header */
/* start-Featured */
main .container{
    margin: 100px 200px;
}
main .container .featured{
    display: grid;
    grid-template-columns: repeat(3,1fr);

}
main .container .featured  .col-1 img{
    border-radius: 10px;
    display: inline-block;
    height: 450px;
}
main .container .featured .col-1 picture{
    width: 100px;
    height: 100px;
    background-color: #f35525;
    border-radius: 50%;
    display:block;
    text-align: center;
    position: relative;
    bottom: 50px;
    right: 30px;
}
main .container .featured .col-1 picture .feat{
    margin:20px 0px 0px 10px;
    width: 60px;
    height:60px;
}
main .container .featured .col-2{
    margin-left: 40px;
}
main .container .featured .col-2 span{
    border-left: 3px solid #ee626b;
    color: #ee626b;
    padding-left: 10px;
}
main .container .featured .col-2 h2{
    font-size:40px;
    width: 200px;
    margin-top: 30px;
    font-weight: 900;
}
main .container .featured .col-2 ul{
    list-style: none;
    width: 200px;
    position: relative;
    top: 100px;
    right: 40px;
}
main .container .featured .col-2 ul li{
    margin-top: 20px;
}
main .container .featured .col-2 ul li details p{
    width: 250px;
    margin-top: 20px;
    font-weight: 18px;
    line-height: 30px;
    animation: translatp 0.7s ease-in-out;
}
@keyframes translatp{
    0%{
        transform: translateY(10px);
    }
    100%{
        transform: translateY(0);
    }
}
main .container .featured .col-2 ul li details summary{
    list-style: none;
    border-bottom: 1px solid #d8d8d8;
    transition: color 0.8s;
    width: 250px;
    font-size:20px;
    
}
main .container .featured .col-2 ul li details summary:focus{
    color: #ee626b;
}
main .container .featured .col-3 {
    width:260px;
    box-shadow: 1px 1px 5px 2px #00000081;
    border-radius: 10px;
    padding: 30px 30px 0px 30px;
}
main .container .featured .col-3 .col-4{
    width: 100%;
}
main .container .featured .col-3 .col-4 img{
    margin-top:20px;
    height: 60px;
}
main .container .featured .col-3 .col-4 h3{
    display: inline-block;
    margin-left: 20px;
}
main .container .featured .col-3 .col-4  span{
    display: block;
   position: relative;
   bottom: 30px;
    margin-left: 80px;
    opacity: 0.6;
}
main .container .featured .col-3 .col-5{
    width: 100%;
}
main .container .featured .col-3 .col-5 img{
    margin-top:20px;
    height: 60px;
}
main .container .featured .col-3 .col-5 h3{
    display: inline-block;
    margin-left: 20px;
}
main .container .featured .col-3 .col-5  span{
    display: block;
   position: relative;
   bottom: 30px;
    margin-left: 80px;
    opacity: 0.6;
}
main .container .featured .col-3 .col-6{
    width: 100%;
}
main .container .featured .col-3 .col-6 img{
    margin-top:20px;
    height: 60px;
}
main .container .featured .col-3 .col-6 h3{
    display: inline-block;
    margin-left: 20px;
}
main .container .featured .col-3 .col-6  span{
    display: block;
   position: relative;
   bottom: 30px;
    margin-left: 80px;
    opacity: 0.6;
}
main .container .featured .col-3 .col-6 p{
    position: relative;
    bottom: 20px;
    opacity: 0.6;
}
main .container .featured .col-3 .col-7{
    width: 100%;
}
main .container .featured .col-3 .col-7 img{
    margin-top:20px;
    height: 60px;
}
main .container .featured .col-3 .col-7 h3{
    display: inline-block;
    margin-left: 20px;
}
main .container .featured .col-3 .col-7  span{
    display: block;
   position: relative;
   bottom:15px;
    margin-left: 100px;
    opacity: 0.6;
}
main .container .featured .col-3 .col-7 p{
    position: relative;
    bottom: 15px;
    left: 10px;
    opacity: 0.6;
}


/* End-Featured */
/* Start-Video-View */
.videos{
    background: url(../images/video-bg.jpg) center center/cover no-repeat;
    height:80vh;
    text-align: center;
}
.videos .container .view span{
    color: #ee626b;
    border-left: 3px solid #ee626b;
    padding-left:10px;
    display: inline-block;
    margin-top:100px;
   
}
.videos .container .view h2{
    color: #fff;
    margin:40px 0px 0px 400px;
    line-height:50px;
    text-align: center;
    width:300px;
    font-size: 40px;
    font-weight: 800;
}
.videos .container .video {
    margin-top: 50px;
    position: relative;
}
.videos .container .video img{
    width:1000px;
    height:400px;
    border-radius: 10px;

}
.videos .container .video span{
    width:90px;
    height:90px;
    border-radius: 50%;
    background-color: #f355259f;
    color: #f35525;
    text-align: center;
    line-height:100px;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 45%;
    text-align: center;
}
.videos .container .video span i{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #fff;
    line-height:60px;
    font-size: 30px;
    cursor: pointer;
}
/* End-Video-View */
/* Start-experince */
.experince .container {
    margin: 380px 170px 50px;
}
.experince .container .row{
    display:inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 180px;
}
.experince .container .row .col{
    width: 220px;
    height: 100px;
    background-color :#f355251e;
    border-radius: 10px;
    position: relative;
}
.experince .container .row .col::after{
    content: "";
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    top:-20px;
    right:-30px;
    background-color: #f35525;

}
.experince .container .row .col h3{
    color: #f35525;
    font-size:40px;
    font-weight: 900;
    font-family:"Roboto";
    margin-top: 20px;

}
.experince .container .row .col div{
    font-size: 18px;
    position: relative;
    left: 70px;
    bottom: 60px;
}
.experince .container .row .col div span{
    display: block;
}



/* End-experince */
/* start-Best-Deal */
.bestdeal .container{
    margin: 100px 150px;
}
.bestdeal .container .items{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}
.bestdeal .container .items .clear{
    clear: both;
}
.bestdeal .container .items .item span{
    color:#ee626b;
    border-left: 2px solid #ee626b;
    padding-left: 10px;
    display: block;
}
.bestdeal .container .items .item h3{
    font-size: 50px;
    font-family:"Roboto";
    font-weight: 900;
    width: 400px;
    margin-top: 30px;
    line-height: 60px;
}
.bestdeal .container .items .buttons{
    margin-top: 40px;
}
.bestdeal .container .items .buttons .btn-1{
    padding: 12px 40px;
    background-color: #f35525;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin:20px 0 0 40px;
    display: inline-block;
    transition: padding 0.1s;
}
.bestdeal .container .items .buttons .btn-2{
    padding: 12px 40px;
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin:20px 0 0 40px;
    display: inline-block;
    transition: padding 0.1s;

}
.bestdeal .container .items .buttons .btn-3{
    padding: 12px 40px;
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin:20px 0 0 40px;
    display: inline-block;
    transition: padding 0.1s;
}
.bestdeal .container .items .buttons .btn-1:hover{
    padding: 11px 39px;
}
.bestdeal .container .items .buttons .btn-2:hover{
    padding: 11px 39px;
}

.bestdeal .container .items .buttons .btn-3:hover{
    padding: 11px 39px;
}
.bestdeal .container .vila-info{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    margin-top: 50px;
}
.bestdeal .container .vila-info .info {
    width:300px;
    height: 410px;
    box-shadow: 5px 5px 5px 5px rgba(248, 246, 246, 0.911);
    border-radius: 10px;
    padding: 10px;
}
.bestdeal .container .vila-info .info div:not(:last-child){
    border-bottom: 1px solid #e2d9d9;
    padding: 20px;
}
.bestdeal .container .vila-info .info div:last-child{
    padding: 20px;
}

.bestdeal .container .vila-info .info div span{
    opacity: 0.6;
    display: inline-block;
}
.bestdeal .container .vila-info .info div b{
    display: inline-block;
    font-size: 25px;
    margin-left: 15px;
}
.bestdeal .container .vila-info img{
    height: 370px;
    width: 400px;
}
.bestdeal .container .vila-info .more-info{
    margin-left: 70px;
}
.bestdeal .container .vila-info .more-info p{
    margin-top: 20px;
    font-size: 16px;
    width: 220px;
    line-height:25px;
    opacity: 0.7;
}
.bestdeal .container .vila-info .more-info div{
    font-size: 18px;
    font-weight: 500;
    font-family:"Roboto";
    cursor: pointer;
    position: relative;
    width: 200px;
    height: 40px;
    text-align: right;
    line-height: 40px;
    background-color: #000;
    color: #fff;
    border-radius: 20px;
    padding-right: 20px;
}
.bestdeal .container .vila-info .more-info div span{
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color:rgb(255, 136, 0) ;
    color: #fff;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
}
.bestdeal .container .vila-info .more-info div span i{
    font-size:15px;
}

/* End-Best-Deal */
/* Start-proparties */
.proparties .container{
    margin: 100px 110px;
    text-align: center;
}
.proparties .container .lef-bord{
    color:#ee626b;
    padding-left:10px;
    border-left: 3px solid #ee626b;
    display: inline-block;
}
.proparties .container h2{
    margin:30px 0 0 38%;
    font-size: 40px;
    font-weight: 900;
    max-width:300px;
    line-height:60px;
}
.proparties .container .clear{
    clear: both;
}
.proparties .container .proparties-items {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 50px;
}
.proparties .container .proparties-items .item{
    width: 330px;
    height:570px;
    background-color: #fcf7f7;
    text-align: center;
    border-radius: 5px;
}
.proparties .container .proparties-items .item img{
    width: 280px;
    border-radius: 5px;
    margin-top: 20px;
}
.proparties .container .proparties-items .item div{
    display: flex;
    justify-content:center;
    align-items: center;
    gap:50px;
}
.proparties .container .proparties-items .item div .left{
    width: 100px;
    height: 35px;
    line-height: 35px;
    background-color:#f3552544;
    color: #000;
    margin-top:30px;
}
.proparties .container .proparties-items .item div .right{
    color:#f35525;
    font-size:25px;
    margin-top: 30px;
}
.proparties .container .proparties-items .item h4{
    margin-top: 20px;
    font-size: 20px;
    font-weight: 900;
}
.proparties .container .proparties-items .item ul{
    list-style: none;
    border-bottom: 1px solid #ebe6e6;
    padding-bottom:30px;
    text-align: left;
}
.proparties .container .proparties-items .item ul li{
    display: inline-block;
    font-size: 17px;
}
.proparties .container .proparties-items .item ul li span{
    opacity: 0.6;
}
.proparties .container .proparties-items .item ul li:nth-child(2){
    margin-left:30px;
}
.proparties .container .proparties-items .item ul li:nth-child(4){
   margin-left:30px;
}
.proparties .container .proparties-items .item button{
    padding: 12px 40px;
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin:20px 0 0 10px;
    display: inline-block;
    transition: background-color 0.6s;
}
.proparties .container .proparties-items .item button:hover{
    background-color:#f35525;
}
/* End-proparties */
/* Start-contact */
.contact{
    background: url(../images/contact-bg.jpg) center center/cover no-repeat;
    height: 100vh;
}
.contact .conatiner{
    margin: 2000px auto;
    text-align: center;
}
.contact .container .head span{
    text-align: center;
    display: inline-block;
    border-left: 3px solid #ee626b;
    color: #ee626b;
    padding-left: 10px;
    margin:50px 0 0 45%;
}
.contact .container .head .clear{
    clear: both;
}
.contact .container .head h4{
    font-size: 40px;
    font-weight: 900;
    margin:30px 0 0 35%;
    max-width: 300px;
    line-height: 60px;
    text-align: center;
    color: #fff;

}

.contact .container .content{
    display:flex;
    justify-content:space-between;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap:0;
    margin: 100px 0;

}
.contact .container .content .map iframe{
    border-radius: 10px;
    width:550px;
}
.contact .container .content .map .clear{
    clear: both;
}
.contact .container .content .map  .left{
    width:250px;
    height: 110px;
    float: left;
    background-color: #f8f3f3;
    border-radius: 10px;
    margin-top: 20px;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.322);
}
.contact .container .content .map  .left div{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    margin-top: 20px;
}
.contact .container .content .map  .left img{
    display: inline-block;
    width:45px;
    margin: -1px 0 0 20px;
}
.contact .container .content .map .left ul{
    list-style: none;
    display: inline-block;
}
.contact .container .content .map .left ul li:first-child{
    font-weight: 900;
    font-size: 18px;
}
.contact .container .content .map .left ul li:nth-child(2){
    opacity: 0.6;
}
.contact .container .content .map  .right{
    width:250px;
    height: 110px;
    background-color: #f8f3f3;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.322);
    border-radius: 10px;
    float: right;
    margin-top: 20px;
}
.contact .container .content .map  .right div{
    display: flex;
    justify-content:center;
    align-items: center;
}
.contact .container .content .map  .right img{
    display: inline-block;
    width: 50px;
    margin: 35px 0 20px 25px;
}
.contact .container .content .map  .right ul{
    list-style: none;
    display: inline-block;
    margin: 30px 0px 0 0;
}
.contact .container .content .map .right ul li:first-child{
    font-weight: 900;
    font-size: 18px;
}
.contact .container .content .map .right ul li:nth-child(2){
    opacity: 0.6;
}

.contact .container .content form {
    width:450px;
    height: 580px;
    border-radius: 10px;
    background-color: #fdfdfd;
    box-shadow: 1px 1px 5px 3px rgba(0, 0, 0, 0.322);
    padding:30px;
    margin-bottom:40px;
}
.contact .container .content form label{
    margin-top: 10px;
}
.contact .container .content form input{
    display: block;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    width: 100%;
    background-color: #f7eaea;
    margin:10px 0 0 5px;
}
.contact .container .content form textarea{
    display: block;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    width: 100%;
    height: 100px;
    background-color: #f7eaea;
    margin:15px 0 0 5px;
}
.contact .container .content form button{
    padding: 12px 40px;
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 5px;
    border: none;
    margin:20px 0 0 10px;
    display: inline-block;
    transition: background-color 0.6s;
}
.contact .container .content form button:hover{
    background-color:#f35525;
}
/* End-contact */
.loader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    transition: opacity 15s  visibility 15s;
    background: #1e1e1e url(../images/preload.webp) center center no-repeat;
    background-size:20%;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loader-hidden{
    opacity: 0;
    visibility: hidden;
}

/* Start-footer */

footer{
    width: 100%;
    height:70px;
    background-color:#1e1e1e;
    color: #fff;
    text-align: center;
    margin-top:400px;
}
footer p{
    font-size:18px;
    font-weight: 700;
    font-family:Tahoma,sans-serif;
    position: relative;
    top: 20px;
}
/* End-footer */
@media (max-width:1440px){
    .header .container .line {
        width: 100%;
      }
      .nav-bar {
        width: 95%;
      }
      main .container {
        margin: 100px 100px;
      }
      .videos .container .view h2 {
        margin-left:488px;
      }
      .videos .container .video {
        margin-top: 10px;
      }
      .experince .container {
        margin: 380px 213px 50px;
      }
      .bestdeal .container .items {
        justify-content: flex-start;
        gap: 74px;
      }
      .proparties .container {
        margin: 100px 100px;
      }
      .contact .container .content .map iframe {
        border-radius: 10px;
        width: 230%;
      }
      .contact .container .content {
        justify-content: flex-start;
        gap: 100px;
      }
      .contact .container .content .map .right {
        margin-left: 20px;
      }
      .contact .container .content form {
        margin-bottom: 0;
        margin-top: 200px;
        width: 230%;
      }
      footer {
        margin-top:164px;
      }
}
@media (max-width:1024px){
    main .container {
        margin: 100px 60px;
      }
      .videos .container .view h2 {
        margin-left: 308px;
      }
      .videos .container .video img {
        width: 930px;
      }
      .experince .container {
        margin: 380px 23px 50px;
      }
      .bestdeal .container .items .buttons {
        margin: auto;
      }
      .bestdeal .container {
        margin: 100px 10px;
      }
      .proparties .container {
        margin: 100px 67px;
      }
      .proparties .container h2 {
        margin: 30px 0 0 34%;
      }
      .contact .container .head h4 {
        margin: 30px 0 0 32%;
      }
      .contact .container .content {
        gap: 19px;
        position: absolute;
        right: 0px;
      }
      .contact .container .content .map iframe {
        border-radius: 10px;
        width: 180%;
        margin-right: 70px;
        position: relative;
        right: 461px;
      }
      

    .contact .container .content .map .left {
     position: relative;
     right: 455px;
    }
      .contact .container .content form {
        width: 100%;
        position: relative;
        right: 394px;
        width: 162%;
      }
      footer {
        margin-top: 1400px;
      }

}

@media (max-width:768px){
    .header .container .nav {
        justify-content: center;
    }
    .header .container .nav .right {
        margin: 20px auto;
    }
    .header .container .nav .right ul {
        list-style: none;
        margin-left: 120px;
    }
    main .container {
        margin: 100px 2px;
    }
    main .container .featured .col-1 img {
        border-radius: 10px;
        display: inline-block;
        height: 330px;
    }
    main .container .featured .col-1 picture {
        width: 60px;
        height: 60px;
        position: relative;
        bottom: 20px;
        right: 11px;
    }
    main .container .featured .col-1 picture .feat {
        margin: 12px 0px 0px 10px;
        width: 40px;
        height: 40px;
    }
    main .container .featured .col-2 h2 {
        font-size: 32px;
    }
    main .container .featured .col-2 ul {
        list-style: none;
        width: 200px;
        position: relative;
        top: 28px;
        right: 55px;
    }
    main .container .featured .col-2 ul li details summary {
        list-style: none;
        border-bottom: 1px solid #d8d8d8;
        transition: color 0.8s;
        width: 216px;
        font-size: 20px;
    }
    main .container .featured .col-3 {
        margin-left:5px;
        width: 243px;
    }
    main .container .featured .col-3 .col-4 img {
        margin-top: 25px;
        height: 45px;
    }
    main .container .featured .col-3 .col-4 h3 {
        font-size: 22px;
    }
    main .container .featured .col-3 .col-4 span {
        margin-left: 67px;
        font-size: 17px;
    }
    main .container .featured .col-3 .col-5 img {
        height: 45px;
    }
    main .container .featured .col-3 .col-5 h3 {
        font-size: 22px;
    }
    main .container .featured .col-3 .col-5 span {
        margin-left: 67px;
        font-size: 17px;
    
    }
    main .container .featured .col-3 .col-6 img {
        height: 45px;
    }
    main .container .featured .col-3 .col-6 h3 {
        font-size: 22px;
    }
    main .container .featured .col-3 .col-6 span {
        margin-left: 67px;
        font-size: 17px;
    
    }
    main .container .featured .col-3 .col-7 img {
        height: 45px;
    }
    main .container .featured .col-3 .col-7 h3 {
        font-size: 22px;
    }
    main .container .featured .col-3 .col-7 span {
        margin-left: 67px;
        font-size: 17px;
    
    }
    .videos .container .view h2 {
        margin-left: 187px;
    }
    .videos .container .video img {
        width: 532px;
    }
    .experince .container .row .col h3 {
        font-size: 30px;
        text-align: center;
    }
    .experince .container {
        margin: 386px 62px 50px;
      }
    .experince .container .row .col div {
        font-size: 18px;
        position: relative;
        left: -3px;
        bottom: 6px;
        text-align: center;
    }
    .experince .container .row .col {
        width: 95px;
        height: 136px;
    
    }
    .contact .container .content {
        gap: 100px;
      }
      .contact .container .content .map iframe {
        margin-left: 30px;
        width: 90%;
        margin-left: 495px;
      }
      .contact .container .content form {
        position: relative;
        right: 0px;
        left: 10px;
        width: 97%;
      }

      .contact .container .content .map .left {
        position: relative;
        right: 0;
      }
      .contact .container .content .map .left {
        width: 161px;
        margin-left: 30px;
      }
      .contact .container .content .map .left ul {
        margin-right: 47px;
      }
      .contact .container .content .map .left ul li:first-child {
        font-weight: 700;
        font-size: 15px;
      }
    .contact .container .content .map .left img {
      width: 33px;
      margin: 0px -17px 23px 44px;
    }
      .contact .container .content .map .right {
        width: 161px;
    left: 4px;
    bottom: 7px;
  }
      .contact .container .content .map .right ul {
        margin-right: 47px;
      }
      .contact .container .content .map .right ul li:first-child {
        font-weight: 700;
        font-size: 15px;
      }
    .contact .container .content .map .right img {
      width: 33px;
      margin: 0px -17px 0 44px;
    }
    .nav-bar {
       margin-top: -180px;
    }
    .nav-bar .nav-items{
        text-align: center;
        margin-top: 250px;
        position:relative;
        top: 0;
        left:-500px;    
    }
    
    .nav-items.active{
        left: 0;
    }
    .nav-bar .nav-items .list-link{
        display: block;
        margin-top: 10px;
    }
    .nav-bar .Hambouger{
        display:block;
    }
    .nav-bar .Hambouger.active .bar:first-child{

        transform:translateY(4px) rotate(45deg);
    }
    .nav-bar .Hambouger.active .bar:nth-child(2){

        display: none;
    }
    .nav-bar .Hambouger.active .bar:last-child{
        transform:translateY(-4px) rotate(-45deg);
    }
  
    
}
@media (max-width:425px){
    .header .container .nav {
        display: none;
      }
      .header .container .line{
        display: none;
      }
    .nav-bar {
        margin-top: -50px;
        display: flex;
        justify-content: center;
        flex-direction: row;
        flex-wrap: nowrap;
        padding: 30px;
      }
      .nav-bar h1 {
        margin-left:90px;
        font-size: 25px;
      }
      main .container {
        margin: 100px 40px;
      }
      main .container .featured .col-3 {
        margin-top: 100px;
      }
      main .container .featured {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: baseline;
        align-content: center;
      }
      .videos .container .view h2 {
        margin-left: 42px;
        font-size: 23px;
      }
      .videos .container .video img {
        width: 385px;
      }
      .videos .container .video img {
        width: 385px;
        height: 200px;
      }
      .videos .container .video span {
        width: 75px;
        height: 75px;
        position: absolute;
        top: 33%;
        left: 39%;
        line-height: 80px;
      }
    .videos .container .video span i {
      width: 40px;
      height: 40px;
      line-height: 40px;
      font-size: 24px;
    }
      .experince .container {
        margin: 160px 152px 50px;
      }
      .experince .container .row {
        flex-direction: column;
        gap: 50px;
      }
      .experince .container .row .col {
        width: 106px;
      }
      .bestdeal .container .items .item h3 {
        font-size: 35px;
      }
      .bestdeal .container .items {
        gap: 0px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .bestdeal .container .items .buttons {
        margin: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
      }
      .proparties .container {
        margin: 100px 10px;
      }
      img, svg {
        vertical-align: middle;
        margin-right: 24px;
      }
      .bestdeal .container .vila-info .more-info {
        margin-left: 39px;
        margin-top: 50px;
      }
      .proparties .container h2 {
        margin: 30px 0 0 10%;
        font-size: 30px;
      }
      .contact .container .head h4 {
        margin: 30px 0 0 17%;
        font-size: 30px;
      }
      .bestdeal .container .vila-info {
        display: flex;
        margin-top: 50px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      }
      .contact .container .content {
        gap: 0;
        display: flex;
        justify-content: center;
        align-items: baseline;
        flex-direction: column;
        margin-right: 38px;
      }
      .contact .container .content .map iframe {
        margin-left: 30px;
        width: 93%;
        position: relative;
        left: 0;
      }
      .contact .container .content .map .left {
        width: 161px;
        margin-left: 146px;
      }
      .contact .container .content .map .right {
        position: relative;
        left: -80px;
      }
      .contact .container .content form {
        margin: 275px auto auto 31px;
      }
      footer {
        margin-top: 1450px;
      }
      footer p {
        font-size: 10px;
      }
      .contact .container .content form {      
      margin: 29px auto auto 31px;
      }
    }
    @media (max-width:375px){
        
          .nav-bar {
            margin-top: 0px;
            flex-direction: column;
            margin-left: 30px;
          }
        .nav-bar .nav-items {
            left: 0;
            margin-top: 14px;
          }
          .nav-bar .Hambouger {
           display: none;
          }
          .nav-bar h1 {
            margin-left: -41px;
            font-size: 25px;
          }
          main .container {
            margin: 100px 20px;
          }
          .videos .container .video img {
            width: 340px;
          }
          .experince .container {
            margin: 160px 126px 50px;
          }
          .proparties .container {
            margin: 100px 8px;
          }
          .contact .container .content .map iframe {
            position: relative;
            left:5px;
          }
          .contact .container .content .map .left {
            width: 161px;
            margin-left:95px;
          }
          .contact .container .content .map .right {
            left: -85px;
          }
          .contact .container .content form {
            margin: 264px auto auto 22px;
            width: 320px;
          }
          footer {
            margin-top: 1470px;
          }
    }