@charset "utf-8";
/* CSS Document */

*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif;}
body{background:#111;}
a{ color:#333;cursor: pointer !important;}
header{background:#000;color:#fff;padding:15px 20px;display:flex;align-items:center;justify-content:space-between;}
.menu-icon{font-size:26px;cursor:pointer;border: 2px solid #fff;
  padding: 0px 7px 1px 6px;}
.logo {width:60%;text-align: center;
  padding-left: 220px;}
.logo img{ width:300px;}
.social{display:flex;gap:12px;}
.social span{}
.social span img{ width:40px;}
.sidebar{
  position:fixed;
  top:0;
  left:-260px;
  width:250px;
  height:100%;
  background:#000;
  color:#fff;
  padding:20px;
  transition:0.3s;
  z-index:1000;
}
.sidebar.active{left:0;}
.sidebar h2{margin-bottom:20px;border-bottom:1px solid #444;padding-bottom:10px;}
.sidebar a{display:block;color:#fff;text-decoration:none;padding:12px 0;border-bottom:1px solid #222;}
.sidebar a:hover{color:#f5c542;}

.close-btn{
  font-size:22px;
  cursor:pointer;
  text-align:right;
  margin-bottom:15px;
}

.main{background:#fff;padding:40px 20px;}
.about{max-width: 650px;
  margin: auto;
  text-align: center;
  font-size: 20px;
  width: 100%;}
.about h2{margin-bottom:15px;font-weight:800;text-decoration-line: underline;text-decoration-color: #333;text-decoration-thickness: 1px;}
.about p{line-height:1.6;margin-bottom:10px;}
.grid{max-width:1000px; width:100%;margin:40px auto 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;}
.box{
  height: auto;
  border-radius: 12px;
  margin-bottom: 0px;}
.box img{width: 100%;margin:0px;
  height: auto;}
  .box img:hover{opacity: 0.8;}


footer{background: #000;
  color: #fff;
  padding: 15px 20px 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  font-size: 16px;
  line-height: 40px;}
footer a{color:#fff;text-decoration:none;margin-left:10px;}
.social-box{ display:block !important;}
@media(max-width:979px){
	.logo {
  width: 100%;
  text-align: center;
  padding-left: 0px;
}
	.logo img{ width: 150px;}
	.social{display:none}
	.social-box{display: block !important;}
	 footer .social {
    display: block;
    float: left;
    width: 100%;
    margin: 10px auto
  }
	}

@media(max-width:767px){
  .logo{font-size:20px}
  
 
  .logo { padding-left:0px;}
  
  footer {
  background: #000;
  color: #fff;
  padding: 15px 20px 0px;
  display: block;
  justify-content: space-between;
  flex-wrap: inherit;
  font-size: 16px;
  line-height: 40px;
  text-align: center;
}
}