<style>




body {margin:0
    color: #000010;
 
    
}

* {box-sizing: border-box;
 user-select: none;
 
}



.logi{
    width:100px;
    height:100px;
    margin-top: -30px;
    margin-left: -330px;
    margin-bottom: 7px;;
     }

@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: 23px;
    color: #28382c; 
    margin-top: -84px;
    font-weight: bolder;
    margin-left: 115px;
   
}
 
@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: 764px) {
  .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;
    
  }
}
.header {

  overflow: hidden;
 
  padding: 14px 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: maroon;
    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 {
   
  }
  .header input[type=text] {
   
  }
}


   
@media screen and (max-width: 1300px) {
  .header a {
    float: right;
    
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}




.topnav {
  overflow: hidden;
  background-color: whitesmoke;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  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 {

  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:730px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 730px) {
  .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=====================*/



.dirtycontainer{
	margin: 20px;
   font-family: "Gowun Batang", serif;
	margin-bottom: -25px;
    
  
background-size: 36px 54px;
background-image: radial-gradient(#d5e0d9 4px, transparent 4px), radial-gradient(#d5e0d9 4px, transparent 4px);
background-size: 13px 13px;
background-position: 0 0, 6.5px 6.5px;
background-color: rgba(197, 217, 204, 0.53);
     border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.dirtyrow{
	width: 100%;
	display: flex;
    justify-content: center;
	
	flex-wrap: row;
}

.dirtyimage{
	background: black;
	position: relative;
	flex: 1;
	max-width: 450px;
	height: 320px;
	margin: 12px;
	overflow: hidden;
}

.dirtyimage img{
	opacity: 0.5;
	position: relative;
	vertical-align: top;
	transition: 0.6s;
	transition-property: opacity;
      width: 100%;
  height: 100%;
}



.dirtyimage .dirtydetails{
	z-index: 1;
	position: absolute;
	top: 0;
	right: 0;
	color: #fff;
	width: 100%;
	height: 100%;
}

.dirtyimage .dirtydetails h2{
	text-align: center;
	font-size: 35px;
	
	font-weight: 300;
	margin-top: 70px;
	transition: 0.4s;
	transition-property: transform;
    color: azure;
}

.dirtyimage .dirtydetails h2 span{
	font-weight: 400;
}

.dirtyimage:hover .dirtydetails h2 span{
	transform: translateY(-30px);
}

.dirtyimage .dirtydetails p  {
	margin: 30px 30px 0 30px;
	font-size: 13px;
	font-weight: 600;
	text-align: center;
	opacity: 0;
	transition: 0.6s;
	transition-property: opacity, transform;
}

.dirtyimage:hover .dirtydetails p{
	opacity: 1;
	transform: translateY(-75px);
}

.dirtyimage:hover .dirtydetails h2{
	opacity: 1;
	transform: translateY(-60px);
}






/* Responsive CSS */

@media (max-width: 1080px){
	.dirtyimage{
		
		max-width: 200px;
	}
    .dirtyimage .dirtydetails p  {
		font-size: 10px;
	}
    .dirtyimage .dirtydetails h2{
        font-size: 20px;
            line-height:0.5px;
        
    }
}


	@media (max-width: 1264px){
	.
    .dirtyimage .dirtydetails h2{
        
            line-height:0.5px;
        
    }
}


    
@media (max-width: 818px) {
	.dirtycontainer {
		 display: none;;
         
    }
}

      





/*===============================================================end of slider gallery home page=====================*/


</style>