<style>




body {margin:0
    color: #000010;
 
    
}

* {box-sizing: border-box

 font-family: "Alegreya", serif;

user-select: none;
}



.logi{
    width:80px;
    height:80px;
    margin-top: -30px;
    margin-left: -270px;
    margin-bottom: 30px;
     }


@media screen and (max-width: 1325px) {
  
    
    .logi { width:65px;
    height:70px;
         margin-left:-210px;
        margin-bottom: 43px;
    }
  
  }

@media screen and (max-width: 830px) {
  
    
    .logi { width:52px;
    height:56px;
         margin-left:-180px;
        margin-bottom: 43px;
    }
  
  }






@media screen and (max-width: 764px) {
  
    
    .logi { 
         margin-left:-150px;
        
    }
  
  }
@media screen and (max-width: 623px) {
  
    
    .logi { width:50px;
    height:55px;
         margin-left:-180px;
       
    }
  
  }
@media screen and (max-width:416px) {
  
    
    .logi { width:45px;
    height:50px;
         margin-left:-150px;
        margin-bottom: 8px;
    }
  
  }

@media screen and (max-width: 320px) {
  
    
     .logi { width:35px;
    height:40px;
         margin-left:-130px;
         margin-bottom: -5px;
       
    }
  
}
.pLogi{
    font-family: "Anton", sans-serif;
    font-size: 18px;
    color: #28382c; 
    margin-top: -98px;
    font-weight: bolder;
    margin-left: 115px;
      margin-left:90px;
}
 

@media screen and (max-width: 1325px) {
  .pLogi {
    font-size: 14px; 
       margin-left: 74px;
      margin-top: -90px;
  }
}


@media screen and (max-width: 830px) {
  .pLogi {
    font-size: 12px; 
       margin-left: 60px;
      margin-top: -80px;
  }
}

@media screen and (max-width: 788px) {
  .pLogi {
    font-size: 10px;
      margin-left: 55px; 
      margin-top: -80px;
  }
}


@media screen and (max-width: 623px) {
  .pLogi {
    font-size: 12px;
      margin-left: 70px; 
      margin-top: -87px;
  }
}


@media screen and (max-width: 416px) {
  .pLogi {
    font-size: 10px;
      margin-left: 45px; 
      margin-top: -45px;
  }
}
@media screen and (max-width: 320px) {
  .pLogi {
    font-size: 8px;
      margin-left: 35px; 
      margin-top: -28px;
    
  }
}


.master{
    
    
    
    
}

.header {

  overflow: hidden;
 
  padding: 2px 5px;

 background: 
      radial-gradient(farthest-side at -33.33% 50%,#0000 52%,rgba(43, 135, 62, 0.69) 54% 57%,#0000 59%) 0 calc(80px/2),
      radial-gradient(farthest-side at 50% 133.33%,#0000 52%,rgba(43, 135, 62, 0.69) 54% 57%,#0000 59%) calc(80px/2) 0,
      radial-gradient(farthest-side at 133.33% 50%,#0000 52%,rgba(43, 135, 62, 0.69) 54% 57%,#0000 59%),
      radial-gradient(farthest-side at 50% -33.33%,#0000 52%,rgba(43, 135, 62, 0.69) 54% 57%,#0000 59%),
      rgba(31, 125, 102, 0.95);
background-size: calc(80px/4.667) 80px,80px calc(80px/4.667);


}


.header a {
  float: left;
  color: #dba514;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 10px; 
  line-height: 20px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 10px;
  font-weight: bold;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}


.header-right {
  float: right;
}


.header .search-container {
    display: flex;
    align-items: center;
    border: 1px solid golden;
    border-radius: 30px;
    padding: 1px;
    width:100%;
    max-width: 300px;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.header .search-container:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
    border-color:gold;
}

.header .search-input {
    border: none;
    outline: none;
    padding: 8px 10px;
    flex-grow: 1;
    border-radius: 30px;
    font-size: 16px;
}

.header .search-button {
    background-color: darkgoldenrod;
    border: none;
    border-radius: 50%;
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: aliceblue;
    transition: background-color 0.3s ease;
}

.header .search-button:hover {
    background-color: gold;
}

 .header .search-icon {
    width: 20px;
    height: 20px;
    
    color: aliceblue;
}

@media (max-width: 1300px) {
   .header .search-input {
        padding: 8px 15px;
        font-size: 14px;
    }

     .header .search-button {
        padding: 8px;
    }

   .header .search-icon {
        width: 10px;
        height: 10px;
      
    }
}

.headerv .search-container button:hover {
  background-color: #0056b3;
}

@media screen and (max-width: 1000px) {
  .header .search-container {
    float: none;
  }
    .header a, {

 float: none;
    display: block;
    text-align: left;
    width: 100%;
    margin: 0;
    padding: 14px;
border: 1px  solid grey;  }


.header input[type=text], .header .search-container button {
    float: none;
    display: block;
    text-align: left;
    width: 50%;
    margin: 0;
    padding: 14px;
      border: 1px  solid grey;  
  }
  .header input[type=text] {
    border: 1px solid #ccc;  
  }
}


   
@media screen and (max-width: 1000px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}




.topnav {
  overflow: hidden;
  background-color: whitesmoke;
    
  font-family: "Roboto", sans-serif;
     
}

.topnav a {
  float: left;
  display: block;
  color: #123722;
  text-align: center;
  padding: 0px 10px;
  text-decoration: none;
  font-size: 16px;
    font-weight: bolder;
    margin-top: 35px;
}

.active {
 text-decoration: underline;
  color:maroon;
}

.topnav .icon {
  display: none;
}

.topnav-right {
  float: right;
    margin-right: 20px;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 16px;    
  border: none;
  outline: none;
   color: #123722;
     font-weight: bolder;
  padding: 0px 8px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  margin-top: 35px; 
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {

  color: darkred;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

@media screen and (max-width: 1300px) {
    .topnav a{
        padding: 0px 5px;
  text-decoration: none;
  font-size: 12px;
        
    }
    .dropdown .dropbtn{
        
     font-size: 12px;   
    }
    .dropdown-content{
     font-size: 12px;   
    }
  }

@media screen and (max-width: 940px) {
    .topnav a{
        padding: 0px 4px;
  text-decoration: none;
  font-size: 10px;
        
    }
    .dropdown .dropbtn{
        
     font-size: 10px;   
    }
    .dropdown-content{
     font-size: 10px;   
    }
  }



@media screen and (max-width:748px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 748px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
   .topnav-right {
    float: right;
    display: block;
  }
  
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: center;
  }
}


@media screen and (max-width: 622px) {
  
    
    .topnav a { font-size: 14px;
    }
  
  }

@media screen and (max-width: 416px) {
  .topnav a { font-size: 11px;
    }
  
}


@media screen and (max-width: 416px) {
  .topnav a { font-size: 10px;
    }
  
}
/*===============================================================the end of nevigation=====================*/


/*===============================================================start of slider gallery home page=====================*/

/*===============================================================end of slider gallery home page=====================*/


</style>