@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap');

*{
margin: 0;
padding: 0;
box-sizing: border-box;
}

body{
display:grid;
height:100vh;
width:100%;
max-width:1400px;
margin:auto;
grid-template-areas:
	'header header header'
	'main  main  main'
	'footer footer footer';
grid-template-columns:repeat(3,1fr);
	grid-template-rows:70px 1fr 0.4fr;
	gap:20px;
	
	font-family: "Montserrat", sans-serif;
	font-size:14px;
	line-height:22px;
}

header{
/*border:1px solid black;*/
grid-area:header;
position:sticky;
background:#fff;
top:0;
left:0;
/*right:0;*/
}

header a{
text-decoration:none;
color:inherit;
}

#header{
display:flex;
justify-content:space-between;
align-items:center;
padding:10px;
}
#header ul{
list-style:none;
display:flex;
gap:5px;
}

.header-left{
display:flex;
justify-content:center;
align-content:center;
align-items:center;
/*justify-items:center;*/
p{
	font-weight:600;
}
}

.header-left img{
width:100%;
object-fit:cover;
}
.logo{
width:70px;
}

.header-center{
form > .form{
display:flex;
background:#fff;
border:1px solid #f1efef;
input,button{
padding:7px;
border:none;
background:#fff;
}
input{
width:100%;
}
}
}
main{
//border:2px solid pink;
grid-area:main;
}

#main{
display:flex;
justify-content:center;
align-items:center;
gap:;
}

#main .search .wrap{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
	justify-content:center;
	align-items:center;
a{
	    text-decoration:none;
	    color:inherit;
		background:none;
	}
}
#main .search .image{
	width:100px;
	height:100px;
	object-fit:contain;
}
#main .search .image img{
	width:100%;
}
#main .pagination { text-align: center; margin-top: 20px; }
 #main .pagination a { margin: 0 5px; padding: 10px 15px; border: 1px solid #ddd; text-decoration: none; color: #007BFF; background:#fff;}
  #main  .pagination a.active { font-weight: bold; color: white; background-color: #007BFF; }
  #main  .pagination a:hover { background-color: #0056b3; color: white; }
  
.main-left{
height:400px;
//border:1px solid red;
width:100%;
display:flex;
justify-content:center;
align-items:center;
text-align:center;
background:rgba(0,169,221,1);
color:#fff;
}
.main-left h1{
//margin:50px auto;
}
.main-left button{
margin:3px;
padding:10px;
border:none;

}
.main-right{
background:url("smiley.jpg");
height:400px;
background-repeat:no-repeat;
background-position:80% 20%;
//border:1px solid yellow;
width:100%;
background-size:cover;
object-fit:cover;
}

h1{
font-family: 'Cormorant Garamond', serif;
font-size:26px;
line-height:30px;
text-transform:uppercase;
}
h2{
font-family: 'Cormorant Garamond', serif;
font-size:22px;
line-height:24px;
font-weight:;
}
p{
font-family: "Montserrat", sans-serif;
	font-size:14px;
	line-height:20px;
	font-weight:;
}
section.scroll-grid {
            text-align: center;
            padding: 20px;
        }

        .main-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            overflow: hidden;
            transition: transform 0.3s ease-in-out;
        }

        .main-grid-item {
            background: #f9f9f9;
            padding: 10px;
            border-radius: 10px;
            text-align: center;
        }

        .main-grid-item img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
		
.grid-main{
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
				overflow-y:hidden;
            }
            
.grid-main::-webkit-scrollbar {
  width: 3px;
  height: 3px;
}
.grid-main::-webkit-scrollbar-thumb {
  background: black;
  border-radius: 5px;
}
.grid-main::-webkit-scrollbar-track {
  background: transparent;
}
            .grid-item-main {
                width:100%;
                flex: 0 0 auto;
                scroll-snap-align: center;
            }
			.grid-item-main > div {
			display:flex;
			flex-wrap:wrap;
			justify-content:center;
			align-items:center;
			gap:10px;
			}
			.grid-item-main > div span{
			width:400px;
			}
			.grid-item-main img {
            max-width: 100%;
            height: auto;
            border-radius: 5px;
        }
			
			.carousel-indicator {
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }

            .indicators {
                width: 12px;
                height: 12px;
                margin: 5px;
                background-color: #ddd;
                border-radius: 50%;
                cursor: pointer;
                transition: background 0.3s ease;
            }

            .indicators.active {
                background-color: #333;
            }

footer{
grid-area:footer;
//border:1px solid black;
}
.footer{
display:flex;
//flex-wrap:wrap;
gap:20px;
justify-content:space-between;
align-items:center;
background:#544741;
padding:20px;
color:#fff;
}
.footer a{
text-decoration:none;
color:inherit;
border-bottom:1px dotted #fff;
}

.footer-left{
    text-align:center;
color:#fff;


ul{
align-items:center;
list-style:none;
padding:5px;

}
ul a{
text-decoration:none;
color:inherit;
border-bottom:1px dotted #fff;
padding: 3px;
}
}
.foot{
//margin:auto;
text-align:center;
background:#000;
color:#fff;
padding:20px;
}
.foot ul{
display:flex;
justify-content:space-between;
align-items:center;
gap:10px;
list-style:none;
padding:5px;

}
.foot ul a{
text-decoration:none;
color:inherit;
border-bottom:1px dotted #fff;
}
.qr{
max-width:100px;
width:100%;
height:100px;
}
.qr img{
width:100%;
object-fit:cover;
}
.menu-container {
            position:relative;
            top: 0;
            left: 0;
            width: 100%;
          /*  height: 100vh;*/
            background: rgba(0, 0, 0, 0.5);
            display: none;
            justify-content: flex-end;
		/*	overflow-y:scroll;*/
        }
        .menu {
           position: relative;
            width: 250px;
          /*  height: 100vh;*/
            background: #fff;
            display: flex;
			justify-content:flex-start;
			align-items:center;
			align-content:center;
			flex-wrap:;
			gap:10px;
           flex-direction: column;
           // padding-top: 300px;
            transition: transform 0.3s ease-in-out;
            box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5);
            transform: translateX(100%);
			overflow-y:scroll;
        }
        .menu a {
            color: black;
            padding:5px;
            text-decoration: none;
           // border-bottom: 1px solid #444;
            transition: background 0.3s;
        }
        .menu a:hover {
            background: #555;
        }
		
		.menu > div{
		padding-top:20px;
		padding:15px;
		form > .form{
display:flex;
background:#fff;
border:1px solid #000;
input,button{
padding:7px;
border:none;
background:inherit;
}
input{
width:;
}
}
		}
		
		.menu ul {
		list-style:none;
		padding:5px;
		text-align:center;
		}
		.menu li {
		padding:5px;
		}
		.topic{
		font-weight:bold;
		}
        .hamburger {
            display: none;
            flex-direction: column;
            cursor: pointer;
            gap: 5px;
            z-index: 1000;
            position: relative;
        }
        .hamburger div {
            width: 35px;
            height: 4px;
            background:black;
            border-radius: 5px;
            transition: transform 0.3s ease-in-out;
        }
        .hamburger.active div:nth-child(1) {
            transform: translateY(9px) rotate(45deg);
        }
        .hamburger.active div:nth-child(2) {
            opacity: 0;
        }
        .hamburger.active div:nth-child(3) {
            transform: translateY(-9px) rotate(-45deg);
        }
        .menu-container.show {
            display: flex;
        }
        .menu.show {
            transform: translateX(0);
        }
  .sect{
   text-align:center;
 // width:100%;
 // height:400px;
  margin:20px;
  padding:20px;
  }
  .sect h1{
  padding:10px;
  }
  .sect p{
  padding:10px;
  }
  .sect > div{
  display:flex;
  justify-content:space-even;
  align-items:center;
  }
  section:nth-child(3){
  background:#d8d8d8;

  }
  section:nth-child(4){
  background:#5a7931;
  color:#fff;
  }
  
 #header .view-mini{
  display:none;
  background:#f9f9f9;
  padding:10px;
  }
  .view-mini li{
  padding:10px;
  color:#000;
  }
  .view-mini li:hover{
	  color:blue;
  }
  #header .view:hover .view-mini{
  display:block;
  }
  .view > div{
  display:flex;
  }
   .tabs {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin-bottom: 20px;
        }

        .tabs a {
            text-decoration: none;
            padding: 10px 15px;
            background: #ddd;
            border-radius: 5px;
            color: #333;
            transition: background 0.3s ease;
        }

        .tabs a:hover, .tabs a.active {
            background: #333;
            color: #fff;
        }

        .content {
            display: none;
            margin-top: 20px;
        }

        .content div {
            display: none;
            padding: 20px;
            background: #f9f9f9;
            border-radius: 5px;
        }

        .content div.active {
            display: block;
        }
.video{
width:500px;
}
        @media (max-width: 900px) {
			.logo{
				width:50px;
			}
			.header-center{
			display:none;
			}
            .hamburger {
                display: flex;
            }
			#header ul{
			display:none;
			}
			
 .main-grid {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
            }

            .main-grid-item {
                width:100%;
                flex: 0 0 auto;
                scroll-snap-align: center;
            }
			.main-right{
			display:none;
			}
			 /* Indicators */
            .carousel-indicators {
                display: flex;
                justify-content: center;
                margin-top: 10px;
            }

            .indicator {
                width: 12px;
                height: 12px;
                margin: 5px;
                background-color: #ddd;
                border-radius: 50%;
                cursor: pointer;
                transition: background 0.3s ease;
            }

            .indicator.active {
                background-color: #333;
            }
			/*indicators End*/
			
			
			            .tabs {
                display: none; /* Hide tabs in mobile view */
            }

            .content {
                display: flex;
                overflow-x: auto;
                scroll-snap-type: x mandatory;
                scroll-behavior: smooth;
                gap: 10px;
            }

            .content div {
                width: 100%;
                flex: 0 0 auto;
                scroll-snap-align: center;
                display: block; /* Always visible in mobile */
            }
			
			.sect > div{
			flex-wrap:wrap;
			}
			
			.video{
			width:300px;
			height:300px;
			}
        }