* {
     margin: 0;
     padding: 0;
     color: white;
 }
body{
  font-family: "my-font";
}




 nav {
     display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
 color: #ffffff !important;
     background-color: rgb(10, 21, 86);

 }

 li a {
  color: #ffffff !important;
 }
 .navbar{
    display: flex;
    justify-content: center;
    align-items: center;
 }

.lists {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}
 
.lists p{
    font-size: medium;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-weight: 500;
}
.logo img{
    width: 140px;
    align-items: center;
}
form .search-box{
    padding: 10px 15px;
    border-radius: 15px;
    text-align: center;
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
    border: 0.3px solid ;
    background-color: #ffffff;
    color: orangered;
}
 button.btn{
    
    border-radius: 15px;
    color: white;
    padding: 10px 15px;
    border: 0.3px solid ;
    background-color: rgb(255, 131, 7);box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}
li a:hover{
    cursor: pointer;
    text-decoration: underline 0.1px orangered;
    color: rgb(255, 131, 7) !important;
 }
 .thumbnail{
    background-image: url(./asset/main-img.png);
    height: 65vh;
    width: 100%;
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;
 }
 .thumb-head{
    display: flex;
    justify-content: center;
    align-items: end;
    width: 100%;
    height: 50%;
 }

 .thumb-head h2{
font-size: 45px;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }

 .thumb-para{

     display: flex;
    justify-content: center;
    align-items:start;
    width: 100%;
    height: 20%;
    
    
 }

  .thumb-para p{
color: rgba(238, 238, 238, 0.894);

  }
  .thump-strip{
      display: flex;
    justify-content: center;
    align-items:center;
    width: 100%;
    height: 30%;
    
    
  }
  .thump-strip image{
    width: 30px;
  }
  

  
 
    #card-by-me{  
  background-color: rgb(228, 242, 245);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 423px;
  height: 90px;


    border-radius: 15px;
 box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

i {
  color: #a33c3c !important;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
}

  #card-by-me p{
    text-align: start;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    padding-left: 20px;
    padding-right: 20px;
    text-transform: capitalize ;
    font-size: small;
    color: rgb(48, 48, 48);
  }

.card-loc {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.card-loc p {
  margin: 0;
}


 /* .sm-text{
    display: flex;
  justify-content: center;
  align-items:end;
  width: 100%;
  height: 100%;
 } */

 #packet{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
 }
 .heading-aft-main{
  height: 18vh;
  color: #000;
  display: flex;
  justify-content: start;
  align-items: center;
  text-transform: capitalize;


 }

  .heading-aft-main:hover{
   color: rgb(40, 104, 146);



  }
#card-by-me:hover{
background-color: #3c81a3;
cursor: pointer;
opacity:0.6 ;

}
#love-head{
  height: 35vh;
gap: 30px;


  
 
}

.btn-blue{
  padding: 10px 22px;
  color: #3c81a3;
  background-color: white;
  border: 0.2px solid  #3c81a4 ;
   box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  
}

.btn-blue:hover{
  background-color: #3c81a3;
  color: #ffffff;
  transition: 1.5s;
}

#rectangles{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  justify-content: center;
  align-items: center;
  row-gap: 29px ;
  column-gap: 1px; 
  margin: 0% ;
  padding: 0% !important;
 
}

#rects{
  height:400px;
  width: 300px;
  background-repeat: no-repeat;
  border-radius: 12px;
  /* background-color: #a33c3c; */


 
}
.bg-1{
  background-image: url(./asset/rectangle1.png);
}

.bg-2{
  background-image: url(./asset/rectangl2.png) ;
}
.bg-3{
  background-image: url(./asset/rectangle3.png)
  ;
}
.bg-4{
  background-image: url(./asset/Rectangle\ 4.png);
}
.bg-5{
  background-image: url(./asset/rectangle\ 5.png);
}
.bg-6{
  background-image: url(./asset/rect6.png);
}
.bg-7{
  background-image: url(./asset/bg-7.png);
}
.bg-8{
  background-image: url(./asset/rect\ 8.png);
}

.cont-n-pri{
  width: 100%;
  height: 80%;

   display: flex;
   justify-content: space-around;
align-items: end;
margin: 0;


}

.cont-n-pri p{
  font-size: x-large;
  font-weight: 500;

}
.btn-rect{
  display: flex;
 height: 20%;
  align-items: center;
 text-align: center;
  width: 100%;

  margin: 0%;
  justify-content: center;
  align-items: center;
  
}


.btn-rect button{
  padding: 8px 75px;
  background-color: rgb(255, 255, 255);
  color: #3c81a3;
  border-radius: 12px;
  font-size: smaller;
  
  
}
.btn-rect :hover{
  background-color: #3c81a3;
  transition: 2s;
  color: aliceblue;
}


#rects:hover{
  cursor: pointer;
  transition: 1s;
  opacity: 0.5 ;
}


.square{
  background-color: #3c81a3;

  height: 60vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items:  flex-start;
  border-radius: 30px;
  flex-direction: column;
   box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
   gap: 30px;
}
.first-line{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  height: 20%;
  gap: 20px;
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 30px;
  
  
}
.first-line button{
  padding: 10px 50px;
  background-color: #ffffff;
  color:#276968;;
  text-align: center;
  border: none;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: 20px;
  font-weight: 700;
}

.first-line button:hover{
  background-color: #3c81a3;
  color: #ffffff;
  transition: 1.5s;
}

.middle-part{
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding-right: 30px;
  /* flex-direction: column; */
 overflow:auto;
  padding-left: 30px;
  padding-top: 30px !important;
  margin-top: 20px;
  padding-bottom: 30px;
  width: 100%;
  height: 50%;
    padding-right: 30px;
  padding-left: 30px;
  
}

.lower-part{
  
  height: 20%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
    padding-right: 30px;
  padding-left: 30px;
  padding-top: 30px;
  padding-bottom: 30px;

}

.lower-part button{
  padding: 10px 80px;
  background-color: #ffffff;
  border: none;
  color: #276968;
  text-align: center;
   box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
  border-radius: 10px;
  font-weight: 700;
}

.lower-part button:hover{
  background-color: #3c81a3;
  color: #ffffff;
  transition: 1.5s;
}

.sec-pic{
 
  width:100% !important;
height: 100% !important;


 border-radius: 15px;


}

.sec-pic{
  /* background-image: url(./asset/pic2.png); */
     width:100% !important;
height:100% !important;

   border-radius: 15px;
   


}



.airport{
  /* margin-left: 30px !important; */
   margin-top: 50px !important;

}
/* .context{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
} */


.end{
 height: 15vh;
 background-color: #3c81a4;
 margin-top: 30px;
 display: flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
 gap: 10px
 ;
}
.end h1{
  font-family: 'Courier New', Courier, monospace;
  font-size: medium;
text-transform: capitalize;
}

.end:hover{
  background-color: #001113 !important;
  color: #3c81a3 !important;

}

@media (max-width:768px) {
  .sec-pic{
   padding-top: 30px;
  }
}




@media (max-width:1535px) {
  #rectangles{
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 3px;
    row-gap: 32px;
  }
}

@media (max-width:1115px) {
  #rectangles{
    grid-template-columns: 1fr 1fr ;
    column-gap: 12px;
    row-gap: 32px;
    margin-left: 40px;
  }
}

  

@media (max-width:725px) {
  #rectangles{
    grid-template-columns: 1fr  ;
   margin-left: 50px !important;
    
    row-gap: 43px;
  }
  
}
@media (max-width:481px) {
  #rectangles{
    grid-template-columns: 1fr  ;
  margin-left: 50px !important;
    
    
  }
  .square{
    margin-left: 20px;
  }
  
}