@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); 
*{
    margin: 0;
    padding: 0;
    font-family: poppins,sans-serif;
    scroll-behavior: smooth;
    box-sizing: border-box;
} 
a{
    text-decoration: none;
}
 /* Start Variables */ 
:root {
    --main-color: #ff6600; 
    --second-color:rgba(255, 255, 255, 0.8);   
  }
  /* End Variables */ 
  /* Start Global Rules */  
  ul {
    list-style: none;
  }
  .container {
    padding-left: 15px;
    padding-right: 15px; 
    padding-top: 10px;
    margin-left: auto;
    margin-right: auto;
  }
  /* Small */
  @media (min-width: 768px) {
    .container {
      width: 750px;
    }
  }
  /* Medium */
  @media (min-width: 992px) {
    .container {
      width: 970px;
    }
  }
  /* Large */
  @media (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }
  /* end Global Rules */  
  /* start nav bar */   
  .firstpage{
    background-color: black; 
    width: 100%; 
    min-height: 100vh;    
  }
 .container{
  display: flex;
   justify-content: space-between;
   align-items: center;
   position: relative;  
  }   
  .logo{
    color: var(--main-color); 
    font-size: 1.3rem;
  } 
  .container nav .active{
    color: var(--main-color);
  }
.container nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  } 
  .container nav ul {
    display: flex;     
  } 
  .container nav ul a{
    padding: 30px 10px;
    display: block;
    color: white;
    text-decoration: none;
    font-size: 14px;
    transition: 0.3s;
    position: relative;    
  }   
  .container nav ul a::after{
    content: "";
    width: 0%;
    height: 2px;
    margin: auto;
    display: block;
    background: rgb(252, 115, 3);
    transition: 0.7s;
  } 
.container nav ul a:hover::after{
    width: 100%;
  }
  .container nav .toggle-menu{
    color: white;
  }
  @media (min-width: 768px) {
    .container nav .toggle-menu {
      display: none;
    }
  } 
  @media (max-width: 767px) {     
    .container nav ul {
      display: none;
    }
    .container nav .toggle-menu:hover + ul {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%; 
      justify-content: center; 
      align-items: center;    
      background-color: rgba(222, 30, 30, 0.5);   
    }
    header nav ul li a {
      padding: 15px !important;
    }
  } 
  .container nav .form {
    width: 40px;
    height: 30px;
    position: relative;
    margin-left: 30px;
    border-left: 1px solid white;
  }
  .container nav .form i {
    color: white;
    position: absolute;
    font-size: 20px;
    top: 50%;
    transform: translateY(-50%);
    right: 0; 
    margin-left: 5px;
  } 
   
  /* end nav bar */  
  /* start page1 */  
  .contect{
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;  
    margin-top: 150px;
    flex-wrap: wrap;  
  } 
  .talk{
    flex: 1 1 400px;
  } 
  .talk h2{
    font-size: 2.5rem; 
    color:  var(--second-color); 
  } 
  .talk p{
    margin-top: 40px; 
    width: 65%;
    line-height: 25px; 
    color: white; 
    font: size 1.4rem;
  } 
  .btn{
    text-decoration: none;
    color: white; 
    font-size: 16px;
    border-radius: 6px; 
    background-color: var(--main-color);
    padding: 10px 12px;
    width: 120px; 
    text-align: center;
    display: inline-block;
    border: 1px solid transparent; 
    margin: 30px 0px;
  } 
  .image{
    flex: 1 1 400px;     
  }
  .image img{       
    width: 100%;    
  }   
  @media (max-width: 768px) {
    .talk h2{     
      font-size: 1.8rem;   
      line-height: 33px;    
    }  
    .talk p{   
      width: 95%;             
      font: size 1rem;
    }  
    .talk {
      text-align: center;
    }
  } 
  /* end page1 */  
  /* start page2 */  
  .page2{
    background-image: url(photos/2.jpg); 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: center; 
    width: 100%; 
    min-height: 100vh;
  }
  .overlay{
    text-align: center; 
    margin-top: 40px; 
    background-color: rgb(0 0 0 / 65%);   
    margin-top: 150px;  
    height: 60vh;  
  }  
  .overlay h1{
    color: var(--main-color);      
    font-size: 2rem; 
    margin: 50px 0 20px 0;
  } 
  .overlay p{
    line-height: 26px; 
    color:  var(--second-color);    
  } 
  @media (max-width: 980px) {
    .overlay{
      height: auto;
    }
  }
  /* end page2 */  
  /* start page3 */  
  .page3{
    background-color: black; 
    width: 100%; 
    min-height: 100vh; 
  }
  .contee{
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;  
    padding-top: 70px;
    flex-wrap: wrap;  
    gap: 50px 30px; 
  }  
  .image2{
    flex: 1 1 300px;     
  }
  .image2 img{       
    width: 100%;  
    height: 600px;     
  }    
  .take{
    flex: 1 1 300px;
  } 
  .take h1{
    color: var(--main-color); 
    font-size: 35px;
  } 
  .take p{
    line-height: 26px;    
    color:  var(--second-color);  
    margin-top: 10px; 
    font-size: 20px;
  } 
  @media (max-width: 768px) {
    .take{     
      padding-left: 20px;       
    }   
    .take p{
      font-size: 17px;
    } 
  }
  /* end page3 */  
  /* start page4 */  
  .page4{
    background-color: black; 
    width: 100%; 
    min-height: 100vh; 
  }
   .page4 h1{
    text-align: center; 
    padding-top: 50px; 
    color: var(--main-color); 
    font-size: 35px;
  }  
  .col1{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    grid-gap: 90px; 
    /* min-width: 150px; */
  } 
  .row{
    border: 1px solid white;  
    border-radius: 8px;
    text-align: center; 
    margin-top: 35px;   
  } 
  .row img{
    width: 100%; 
    margin-top: 15px;    
  } 
  .row h3{
    margin-top: 20px;
    margin-bottom: 10px;
    color: white;
  } 
  .row p{
    margin-bottom: 7px;
    color:  rgba(255, 255, 255, 0.7); 
  } 
  @media (max-width: 768px) {
    .page4 h1{
      font-size: 28px;
    }
  }
  /* end page4 */  
  /* start page5 */   
  .page5{
    background-color: black; 
    width: 100%; 
    min-height: 100vh;  
    padding-top: 20px;
  } 
  .cor2{
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    width: 100%;  
    padding-top: 30px;
    flex-wrap: wrap;  
    gap: 50px 30px; 
  } 
  .image4{
    flex: 1 1 450px;
  } 
  .image4 img{       
    width: 100%;  
    height: 600px;     
  }   
  .cor3{
    flex: 1 1 300px;
  }    
  .cor3 h1,h2{
    color: var(--main-color); 
    line-height: 70px; 
    font-size: 45px;
  } 
  .cor3 p{
    color: var(--second-color);  
    width: 80%; 
    line-height: 22px; 
    margin-top: 15px;    
  } 
  .cor3 h3{
    font-size: 25px;  
    color: rgba(30, 200, 222,1); 
    /* line-height: 10px; */
  } 
  @media (max-width: 768px) {
    .cor2{
      padding-left: 15px;
    } 
    .cor3 h1,h2{
      font-size: 30px;
    }
  }
  /* end page5 */  
   /*start footer   */ 
   .footer{
    background-color: black; 
    width: 100%; 
    min-height: 40vh;  
    padding-top: 20px;    
   }
   .crner{    
    padding: 40px;
    display: flex; 
    justify-content: space-between; 
    /* align-items: center; */
    flex-wrap: wrap;
   } 
   .self{
    flex-grow: 1; 
    flex-shrink: 1;
   } 
   .self h1{
   color: var(--main-color); 
   margin-bottom: 15px; 
   font-size: 32px;
   }  
   .self h3{
    color: var(--main-color); 
    margin-bottom: 10px; 
    font-size: 20px;
    }  
    .self a{
      display: flex; 
      flex-direction: column; 
      padding: 5px;  
      color: white;
    }  
    .self a:hover{
      color: var(--main-color);
    }
    .self p{
      padding: 5px;       
      color: var(--second-color); 
      line-height: 25px;
    }  
    .icon2{
      display: flex; 
      gap: 5px;
    }
    .icon2 i{       
      font-size: 25px;        
      color: white;
      transition: color 0.3s;
    }  
    .icon2 .fa-facebook:hover {
      color: #1877f2; 
  }
    .icon2 .fa-instagram:hover {
      color: #c32aa3; 
    } 
  .icon2 .fa-linkedin:hover {
    color: #1da1f2; 
  }
 .icon2 .fa-whatsapp:hover {
    color: #25d366; 
 }   
 @media (max-width: 800px) {  
  .crner{
    flex-direction: column; 
    padding: 14px;
  }   
 


  

}
   /*end footer   */