/*.....FONTS............*/

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



 /* colour variables */
 :root{
    --white: #fff;
    --black: #222;
    --green: #6cbe02;
    --grey1: #f0f0f0;
    --grey2: #e9d7d3;
    --color-primary: #2e3267;
--color-primary: #424890;

--color-primary: #6c63ff;
--color-success: #00bf8e;
--color-warning: #f7c94b;
--color-danger: #f75842;
--color-danger-variant: rgba(247, 88, 66, 0.4);
--color-white: #fff;
--color-light: rgba(255, 255, 255, 0.7);
--color-black: #000;
--color-bg: #1f2641;
--color-primary: #2e3267;
--color-primary: #424890;
    
 }

 /* Basic reset  */
 *,
 *::after,
 *::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
 }

 html{
    box-sizing: border-box;
    font-size: 62.5%;
 }

 body{
    font-family: "roboto", sans-serif;
    font-size: 1.6rem;
    background-color: var(--white);
    font-weight: 400;
    font-style: normal;
 }

 a{
    text-decoration: none;
    color: inherit;
 }

 li{
    list-style-type: none;
 }

 img{
    width: 100%;
 }

 .container{
    max-width: 114rem;
    margin: 0 auto;
    padding: 0 3rem;
 }
 .d-flex{
    display: flex;
    align-items: center;
 }

 /* Header  */
 .header{
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;
    z-index: 0;

 }

 .navigation{
   position: center;
   z-index: 2;
   height: 6rem;
   line-height: 6rem;
   background-color: var(--color-primary);
 }

 .nav-center {
   justify-content: space-between;
 }

 .logo{
   color: var(--white);

 }

 .nav-center .nav-item:not(:last-child){
   margin-right: 0.5rem;
 }

 .nav-center .nav-link {
   font-size: 1.8rem;
   padding: 1rem;
   color: var(--white);
 }
 
.nav-center .nav-link:hover {
   color: var(--green);

}

.nav-center .hamburger{
   display: none;
   font-size: 2.3rem;
   
   cursor: pointer;
}


@media (max-width: 768px) {
   .nav-list{
      position: fixed;
      top: 12%;
      left: -100%;
      flex-direction: column;
      align-items: flex-start;
      box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
      background-color: var(--color-primary);
      height: 100%;
      width: 0;
      max-width: 35rem;
      z-index: 100;
      transition: all 300ms ease-in-out;
   }
   .nav-list.open{
      left: 0;
      width: 100%;

   }

   .nav-list .nav-item{
      margin: 0 0 1rem 0;
      width: 100%;
   }
   .nav-list .nav-link{
      font-size: 2rem;
      color: var(--white);

   }

   .nav-center .hamburger{
      display: block;
      color: var(--white);
      font-size: 3rem;
   }



  

/*......... slide...............*\

/* Slideshow container */
.slideshow-container {
   max-width: 100%;
   position: relative;
   margin: auto;
   margin-top: 5rem;
   
 }
 
 /* Hide the images by default */
 .mySlides {
   display: none;
 }
 
.fade img{
 max-height: 700px;
}
 /* Next & previous buttons */
 .prev, .next {
   cursor: pointer;
   position: absolute;
   top: 50%;
   width: auto;
   margin-top: -22px;
   padding: 16px;
   color: white;
   font-weight: bold;
   font-size: 18px;
   transition: 0.6s ease;
   border-radius: 0 3px 3px 0;
   user-select: none;
 }
 
 /* Position the "next button" to the right */
 .next {
   right: 0;
   border-radius: 3px 0 0 3px;
 }
 
 /* On hover, add a black background color with a little bit see-through */
 .prev:hover, .next:hover {
   background-color: rgba(0,0,0,0.8);
 }
 
 /* Caption text */
 .text {
   color: #f2f2f2;
   font-size: 40px;
   padding: 8px 12px;
   position: absolute;
   bottom: 10rem;
   width: 100%;
   text-align: left;
 }
 
 /* Number text (1/3 etc) */
 .numbertext {
   color: #f2f2f2;
   font-size: 12px;
   padding: 8px 12px;
   position: absolute;
   top: 0;
 }
 

 
 .active, .dot:hover {
   background-color: #717171;
 }
 
 /* Fading animation */
 .fade {
   animation-name: fade;
   animation-duration: 1.5s;
 }
 
 @keyframes fade {
   from {opacity: .4}
   to {opacity: 1}
 }

}


.header .content{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80%;
   z-index: 1;
   text-align: center;
}

.header .content h1{
   font-size: 7rem;
   color: white;
   margin-bottom: 4rem;
}

.header .search{
   width: 70rem;
   margin: 0 auto;
   padding: 1rem 2rem;
   background-color: rgba(0, 0, 0, 0.6);
   display: flex;
   align-items: center;
   justify-content: center;
}

.header .search input{
   width: 100%;
   padding: 1.5rem 0;
   text-indent: 1rem;
   font-size: 1.6rem;
   margin-right: 1rem;
   outline: none;
   border: none;
}

.header .search a{
   display: inline-block;
   padding: 1.5rem 4rem;
   background-color: var(--green);
   color: white;
   border-radius: 0.5rem;

}


@media (max-width: 996px) {
   .header .content h1{
      font-size: 5rem;
      margin-bottom: 2rem;
   }
   .header .search{
      width: 100%;

   }
}

@media (max-width: 567px) {
   .header .content h1{
      font-size: 5rem;
      margin-bottom: 2rem;
   }
   .header .search{
      width: 100%;

   }

   .header .search input{
      padding: 1rem 0;
      font-size: 1.3rem;
   }

.header .search a{
   padding: 1rem;
}
}
   






/* PROPERTIES */

.section{
padding: 10rem 0;
}

.section.rent{
   background-color: #f0f4f7;
}

.rent-center{
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(25rem, 1fr));
   gap: 4rem 2rem;
}

.title{
   text-align: center;
   margin-bottom: 5rem;
   padding: 1rem;

}

.title h1{
   font-weight: 100;
   font-size: 8rem;
   margin-bottom: 1rem;
   font-weight: bold;
}

.title p{
   font-weight: bold;
   font-size: 2.5rem;
   text-align: justify;
   text-align: center;
}

.rent .box{
   transition: all 300ms ease-in-out;
   background-color: white;
}

.rent .box:hover{
   box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
}

.rent .box .top {
padding: 1rem;
position: relative;
height: 20rem;
transition: all 300ms ease-in-out;
}

.rent .box:hover .top {
   cursor: pointer;
}

.rent .box .top img {
height: 100%;
object-fit: cover;
}


.rent .box .overlay {
   position: absolute;
   top: 0;
   left: 0;
   padding: 1rem;
   background-color: white;
   height: 20rem;
   width: 100%;

}

.rent .box .overlay::after {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   background-color: rgba(0, 0, 0, 0.2);
   height: 100%;
   width: 100%;
   opacity: 0;
   visibility: hidden;
   transition: all 300ms ease-in-out;
}

.rent .box .top:hover .overlay::after{
   opacity: 1;
   visibility: visible;
}

.rent .box .pos {
   position: absolute;
   top: 2rem;
   left: 2rem;
}

.rent .box .pos span{
   display: inline-block;
   font-size: 1.3rem;
   color: white;
   margin-right: 0.5rem;
   padding: 0.3rem;
   border-radius: 0.3rem;
}


.rent .box .pos span:first-child{
   background-color: #43c370;
}

.rent .box .pos span:last-child{
   background-color: #e0203b;
}


.rent .box .bottom {
   padding: 1.5rem;
}


.rent .box .bottom p {
font-size: 2rem;
font-weight: 500;
color: #555;
cursor: pointer;
transition: all 300ms ease-in-out;
}

.rent .box .bottom div{
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 1rem;
   color: #555;

}

.rent .box .bottom div span{
   font-size: 1.8rem;
}

.rent .box:hover .bottom p {
color: #006eff
}

.rent .box .bottom div i {
   font-size: 2.5rem;
}

@media (max-width: 768px) {
   .title h1 {
      font-size: 4rem;
   }
}

@media (max-width: 567px) {
   .title h1 {
      font-size: 3rem;
   }
}




/* grid properties*/

.wrapper{
   display: grid;
   grid-gap: 10px;
   grid-template-columns: repeat(3, 1fr);
}

.wrapper .box {
   border-radius: 5px;
   overflow: hidden;
}

.wrapper .box img{
   height: 100%;
   object-fit: cover;
   transition: all 500ms ease-in-out;
}

.wrapper .box:hover img{
transform: scale(1.1);
}

.wrapper .box1 {
   grid-column: 1 /span 2;
   height: 35rem;
}


.wrapper .box2 {
   grid-column: 3;
   grid-row: 1 / span 2
}


.wrapper .box3 {
   grid-column: 1;
   grid-row: 2;
}


.wrapper .box4 {
   grid-column: 2;
   grid-row: 2;
}









@media (max-width: 768px){
   .wrapper .box1 {
      grid-column: 1 /span 3;
      height: 20rem;
   }
   
   
   .wrapper .box2 {
      grid-column: 3;
      grid-row: 2;
      height: 20rem;
   }
}

@media (max-width: 567px){
   .wrapper .box{
      height: 15rem;
   }
}



/*contact*/
.contact{
   background: url("./images/image7.jpg") no-repeat fixed; 
   color: white;
   padding: 10rem 20rem;

}

.contact .row{
   display: grid;
   grid-template-columns: 1fr 1fr;
   align-items: center
}

.contact .row .col h2{
   margin-bottom: 1.5rem;
   font-size: 3rem;
}

.contact .row .col p{
   margin-bottom: 2rem;
   font-size: 1.8rem;
   width: 70%;
}

.btn-1{
   background-color: var(--green);
   color: white;
   display: inline-block;
   border-radius: 1rem;
   font-size: 1.8rem;
   padding: 1.5rem 5rem;
}

.contact form div{
   position: relative;
   margin: 0 auto;
}

.contact form input{
   font-family: 'Roboto', sans-serif;
   text-indent: 2rem;
   font-size: 1.8rem;
   width: 100%;
   border-radius: 1rem;
   padding: 2rem 0;
   outline: none;
   border: none;
}

.contact form a{
   position: absolute;
   top: 0;
   right: 0;
   background-color: var(--green);
   color: white;
   margin: .5rem;
   padding: 1.7rem 5rem;
   border-radius: 1rem;
}




@media (max-width: 996px) {
   .contact {
      padding: 8rem;
   }
}

@media (max-width: 768px) {
   .contact .row {
      grid-template-columns: 1fr;
      gap: 5rem 0;
   }
}

@media (max-width: 567px) {
   .contact {
      padding: 8rem 1rem;
   }
}




/*.......about.......*/

.achievements{
   margin-top: 3rem;
   margin-right: 3rem;
   
}
.container-img{
size: 5px;
}

.container-part1{
   display: grid;
   grid-template-columns: 40% 60%;
   gap: 5rem;
   
}

.container-archi h1{
   color: var(--color-black);
   text-align: center;
   font-size: 5rem;

   
   
}
.container-archi p{
   color: var(--black);
   margin-top: 3rem;
   margin-right: 5rem;
   text-align: justify;
   font-size: 2.5rem;
   font-weight: bold;
}
.part2icons{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.5rem;
   margin-top: 3rem;
   margin-bottom: 5rem;

}

  
.cards{
   color: white;
   background-color: var(--color-danger);
   padding: 1.6rem;
   border-radius: 1rem;
   text-align: center;
   transition: var(--transition);
   margin-right: 5rem;

}
.cards:hover{
   background: var(--color-primary);
   box-shadow: 0 3rem 3rem rgba(0, 0, 0, 0, 3);
}

.icons{
 background: var(--color-primary);
 padding: 0.6rem;
 border-radius: 1rem;
 display: inline-block;
 margin-bottom: 2rem;
 font-size: 2rem;
}
.cards:nth-child(2) .icons{
   background: var(--color-success);
}
.cards:nth-child(3) .icons{
   background: var(--color-warning);   
}
.cards:nth-child(1) .icons{
   background: var(--color-primary);
}

.heading{
   color: var(--color-black);
   text-align: center;
   font-size: larger;
   

}
.heading h3{
margin-bottom: 5rem;
font-size: 5rem;
}


.team{
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   
   
}
.team{
   color: white;
   text-align: center;
   gap: 3rem;
   margin-left: 3rem;
   box-shadow: inset 0 0 3rem rgba(0, 0, 0, 0.5);
   margin-right: 3rem;
   margin-bottom: 5rem;
   
}

.team p{
   color: var(--color-light)
}
.team-member{
   background-color: var(--color-primary);
   border-radius: 1rem;
   border: 1px solid transparent;
   position: relative;
   overflow: hidden;


}
.team-member:hover{
   background: transparent;
   background-color: var(--color-bg2);
}
.team-member-images{
   filter: saturate(0);
}
.team-member-images:hover{
   filter: saturate(1);
}
.team-member-socials{
   position: absolute;
   transform: translateY(-50%);
   top: 50%;
   right: -100%;
   display: flex;
   flex-direction: column;
   background: var(--color-primary);
   border-radius: 1rem 0 0 1rem;
   box-shadow: -2rem 0 2rem rgba(0, 0, 0, 0.3);
   transition: var(--transition);

}
.team-member-socials a{
   padding: 1rem;
}
.team-member:hover .team-member-socials{
   right: 0;
}

/*........media queries......about us tablet...*/

@media screen and (max-width: 1024px) {
   .achievements{
       margin-top: 2rem;
   }
   .container-part1{
       grid-template-columns: 1fr;
       gap: 4rem;
   }
   .container-archi{
       width: 80%;
       margin: 0 auto;
   }
   .team{
       grid-template-columns: repeat(3, 1fr);
       gap: 1.5rem;
   }
   .part2icons{
       margin-left: 3rem;
   }
}

/*.................mobilephones............*/
@media screen and (max-width: 600px) {
.part2icons{
   grid-template-columns: 1fr 1fr;
   gap: 0.7rem;
   
}   
.team{
   grid-template-columns: 1fr 1fr;
   gap: 0.7rem
}
.team{
   margin-left: 1rem;
}

}


/*media video*/
.containervideo{
   width: 80%;
   margin: 80px auto;
}

.containervideo h1{
   padding: 60px 0;
   color:var(--color-black); 
   font-size: 44px;
   text-align: center;
}

.video-player{
   border: 20px solid #555;
}




/*footer*/

.footer{
   padding: 7rem 1rem;
   background: #303441;
}

.footer .row{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   max-width: 99.6rem;
   margin: 0 auto;
}

.footer .row .col{
   flex-direction: column;
   color: white;
   align-items: flex-start;

}

.footer .row .col:last-child{
   flex-direction: row;
   justify-content: center;
}

.footer .row .col:last-child span{
font-size: 2.5rem;
margin-right: .5rem;
color: white;
}

.footer .row .col a{
   color: white;
   font-size: 1.5rem;
   padding: 0.5rem;
   font-weight: 300;
}

.footer .row .col h4{
      margin-bottom: 1rem;
}

.footer .row .col:last-child span:hover{
   color:#43c370
}



@media (max-width: 567px) {
   .footer .row{
      grid-template-columns: 1fr;
      row-gap: 3rem;
   }
}