/*
Template Name: Forest
File: Layout CSS
Author: TemplatesOnWeb
Author URI: https://www.templateonweb.com/
Licence: <a href="https://www.templateonweb.com/license">Website Template Licence</a>
*/

/*********************center_home****************/
.carousel-caption{
	background-color: var(--bg_back)!important;
	bottom:0;
	left:0;
	color:var(--bs-white);
	width:100%;
	height:100%;
	padding: 180px 140px 0px 140px;
	text-align:left;
 }
.carousel-caption h1{
   font-size:60px;
 }

/*********************center_home_end****************/

/*********************gallery****************/
.masonry-item img {
      width: 100%;
      height: auto;
      display: block;
 }

#gallery .modal-dialog {
	max-width: 800px;
}
.homei1i2{
	padding-top:60%;
	display:none;
	transition: 0.3s; 
 }
.gallery_left:hover .homei1i2{
	display:block; 
	transition: 0.3s;
 }
.modal {
  z-index:10000;
 }
.homei1i2o{
  padding-top:26%;
 }
.homei1i2o1{
  padding-top:66%;
 }
.homei1i2o2{
  padding-top:58%;
 }
.modal-title{
  font-size:30px;
}
/*********************gallery_end****************/

/*********************spec****************/
.spec_1_left span{
	width:120px;
	height:120px;
	line-height:120px;
}

.video_icon {
   top:43%;
   left:43%;
}
.video_icon a{
    width: 80px;
    height: 80px;
    line-height: 80px;
}
/*********************spec_end****************/


/*********************faq****************/

.accordion-button {
	background:var(--bs-dark);
	color:var(--bs-white);
	padding:8px 15px;
	border: 0;
	font-size: 20px;
	text-align: left;
	border-radius:0;
	font-weight:bold;
}
.accordion-button:focus {
	box-shadow: none;
	border: none;
}
.accordion-button:not(.collapsed) {
	background:var(--green);
	color:var(--bs-white);
	padding:8px 15px;
}
.accordion-body {
	padding: 20px;
}

.accordion-button::after {
	width: auto;
	height: auto;
	content: "+";
	font-size: 40px;
	background-image: none;
	font-weight: 100;
	color: var(--bs-white);
	transform: translateY(-4px);
}
.accordion-button:not(.collapsed)::after {
	width: auto;
	height: auto;
	background-image: none;
	content: "-";
	font-size: 40px;
	transform: translate(-5px, -4px);
	transform: rotate(0deg);
}
.accordion-item{
	border:none;
	border-radius:0;
	background:none;
}


.center_team {
    background-image: url(../image/2.jpg);
    background-position: center center;
    background-size: cover;
}
.center_price {
    background-image: url(../image/3.jpg);
    background-position: center center;
    background-size: cover;
}
.center_event {
    background-image: url(../image/2.jpg);
    background-position: center center;
    background-size: cover;
}
.center_gallery {
    background-image: url(../image/1.jpg);
    background-position: center center;
    background-size: cover;
}
.center_faq {
    background-image: url(../image/2.jpg);
    background-position: center center;
    background-size: cover;
}
/*********************faq_end****************/


@media screen and (max-width : 767px){
.carousel-caption {
    position:static!important;
	padding:15px 15px 50px 15px;
	background:var(--bs-dark)!important;
	text-align:left!important;
}
.carousel-caption h1 {
    font-size: 30px;
}
.carousel-caption br {
    display:none;
}
.carousel-caption p {
    width:100%!important;
}

.carousel-caption ul li {
    margin:5px!important;
}
.about_h1_right{
	padding-left:0!important;
}
.feature_2_left  {
	margin-top:10px;
	margin-bottom:10px;
}
.spec_1_left {
	margin-top:10px;
	margin-bottom:10px;
}
.video_icon {
    left: 36%;
}
.price_1_left  {
	margin-top:10px;
	margin-bottom:10px;
}

.faq_1_right{
	margin-top:20px;
}
.event_1_left {
	margin-top:10px;
	margin-bottom:10px;
}
.exhib_1_left{
	padding-right:0!important;
	margin-bottom:15px;
}

 }


@media (min-width:576px) and (max-width:767px) {

 }
 
@media (min-width:768px) and (max-width:991px) {

.center_home img{
   min-height:550px;
 }
.carousel-caption h1 {
    font-size: 50px;
}
.carousel-caption br {
    display:none;
}
.carousel-caption p {
    width:70%!important;
}
.carousel-caption{
	padding: 70px 90px 0px 90px;
 }

 .about_h1_right{
	padding-left:0!important;
	margin-top:0!important;
}
.spec_1_left {
	margin-top:10px;
	margin-bottom:10px;
}
.info_1_left{
	padding:0!important;
	margin:0!important;
}
#info{
	 padding-top:50px;
	 padding-bottom:50px;
}
.price_1_left  {
	margin-top:10px;
	margin-bottom:10px;
}
.event_1_left_inner_right{
	margin-top:0!important;
}
.exhib_1_left{
	padding-right:0!important;
}
.video_icon {
    left: 38%;
}
 }

@media (min-width:992px) and (max-width:1200px) {
.center_home img{
   min-height:600px;
 }
.carousel-caption h1 {
    font-size: 50px;
}
.carousel-caption{
	padding: 120px 120px 0px 120px;
 }

.about_h1_right{
	padding-left:0!important;
	margin-top:0!important;
}
.info_1_left{
	padding:0!important;
	margin:0!important;
}
#info{
	 padding-top:50px;
	 padding-bottom:50px;
}
.video_icon {
    left: 40%;
}
.event_1_left_inner_right{
	margin-top:0!important;
}
 }

@media (min-width:1201px) and (max-width:1300px) {
.center_home img{
   min-height:680px;
 }
 }
@media screen and (min-width : 1400px){
.carousel-caption{
	padding: 220px 140px 0px 140px;
 }
.info_1_left {
	padding-top:100px!important;
}

 }

/* Header logo: larger and fills its slot */
.header-logo {
  height: 5.4rem;      /* change this to make it larger/smaller */
  width: auto;
  max-width: 320px;    /* limit width if needed */
  display: block;
  object-fit: contain;
}

/* Keep offcanvas logo smaller */
.offcanvas .offcanvas-logo,
.offcanvas .logo-img.offcanvas-logo {
  height: 2.2rem;
  max-width: 160px;
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .header-logo { height: 3rem; max-width: 240px; }
}
@media (max-width: 576px) {
  .header-logo { height: 2.4rem; max-width: 160px; }
}

/* custom video ratio for 1920x818 ~ 42.6% */
.ratio-custom {
  width: 100%;
  max-width: 1100px; /* adjust to control visible size */
  margin: 0 auto;
  aspect-ratio: 1920 / 818;
  position: relative;
  background: #000;
}
.ratio-custom iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
/* fallback for older browsers: maintain a similar height */
@supports not (aspect-ratio: 1/1) {
  .ratio-custom { padding-bottom: 42.6%; height: 0; }
  .ratio-custom iframe { position: absolute; top:0; left:0; height:100%; width:100%; }
} /* <-- close @supports */

.embed-center { display:block; text-align:center; }

/* increase video max width and keep aspect */
.ratio-custom.video-wide {
  width: 100%;
  aspect-ratio: 1920 / 818;
  max-width: 1600px; /* increased from 100px */
  margin: 0 auto 1.5rem;
  background: #000;
  position: relative;
  overflow: hidden;
  /* use !important only if still overridden */
  /* max-width: 1600px !important; */
}

/* keep player full-size */
#yt-player { width:100%; height:100%; }

/* visible unmute button (moved to the left side) */
.yt-unmute-btn {
  position: absolute;
  left: 18px;
  bottom: 18px;
  z-index: 10;
  background: rgba(0,0,0,0.6);
  color: #fff;
  border: 0;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.yt-unmute-btn:focus { outline: 2px solid rgba(255,255,255,0.15); }

/* place unmute button at left center (more specific so it overrides earlier rules) */
.ratio-custom.video-wide .yt-unmute-btn {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
  z-index: 9999;
  display: inline-flex;
}

/* fallback override if another rule still wins */
.ratio-custom.video-wide .yt-unmute-btn.important-override {
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  bottom: auto !important;
  z-index: 9999 !important;
}

/* responsive */
@media (max-width: 1200px) {
  .ratio-custom.video-wide { max-width: 1200px; }
}
@media (max-width: 768px) {
  .ratio-custom.video-wide { aspect-ratio: 7/3; max-width: 100%; }
}

/* center About column content (stack and center text) */
.about_h1_right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;   /* keep overall column left-aligned by default */
  justify-content: center;
  text-align: left;          /* text left by default */
  padding-left: 0 !important;
}

/* center the section title (H2) and the main H1 */
.about_h1_right h2,
.about_h1_right h1.font_48 {
  align-self: center;
  text-align: center;
  width: 100%;
  max-width: 900px;
}

/* keep the paragraph left-aligned */
.about_h1_right p {
  align-self: flex-start;
  text-align: left;
}

/* small screen tweak */
@media (max-width: 767px) {
  .about_h1_right h2,
  .about_h1_right h1.font_48 { max-width: 100%; padding: 0 1rem; }
}

/* footer logo sizing (increase a bit but keep contained) */
.footer-logo {
  height: 5.2rem;    /* increased from 2.4rem */
  width: auto;
  max-width: 200px;  /* prevent overflow */
  display: block;
  object-fit: contain;
}
.footer_1_left .footer-logo { max-width: 100%; }

/* responsive */
@media (max-width: 768px) {
  .footer-logo { height: 3.8rem; max-width: 160px; }
}

/* ensure carousel video fills the slide area like an image */
.carousel-item video.carousel-video {
  width: 100%;
  height: 100%;
  object-fit: cover; /* crop/fill to maintain aspect ratio */
  display: block;
}
/* optionally set a min-height on carousel-item to avoid layout jump */
.carousel-item {
  min-height: 400px;
}
@media (min-width: 992px) {
  .carousel-item { min-height: 560px; }
}

/* brighten carousel video */
.carousel-item video.carousel-video {
  /* simple quick change: increase brightness and a touch of contrast */
  filter: brightness(1.18) contrast(1.04);
  /* ensure GPU acceleration for smooth rendering */
  will-change: filter, transform;
}

/* alternative: subtle white overlay using blend mode for a more natural brighten */
.carousel-item video.carousel-video + .video-brighten-overlay,
.carousel-item .video-brighten-overlay {
  pointer-events: none;
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,0.06); /* tweak opacity */
  mix-blend-mode: screen;
  z-index: 1; /* sit above video but below captions if needed */
}

/* Compact, left-matching language toggle + nicer dropdown */
#header .nav_right .nav-link.dropdown-toggle,
.navbar .nav_right .nav-link.dropdown-toggle {
  font-size: 0.95rem;            /* match other nav items */
  padding: 0.28rem 0.6rem;       /* reduce vertical padding so header height doesn't grow */
  line-height: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: auto;
  color: inherit;
}

/* slightly smaller globe icon so it doesn't push the header height */
#header .nav_right .nav-link .bi,
.navbar .nav_right .nav-link .bi {
  font-size: 1rem;
  line-height: 1;
}

/* friendly full-name label sizing */
#lang-current { font-size: 0.95rem; font-weight: 500; }

/* tidy dropdown menu that aligns to the toggle and looks neat */
#header .nav_right .dropdown-menu,
.navbar .nav_right .dropdown-menu {
  min-width: 150px;
  padding: 0.2rem 0;
  margin-top: 0.35rem;
  border-radius: 6px;
  box-shadow: 0 8px 22px rgba(11, 33, 58, 0.12);
  border: 0;
  background: #fff;
  right: 0; /* keep it aligned to the right edge of the toggle */
}

/* compact, readable menu items */
#header .nav_right .dropdown-item,
.navbar .nav_right .dropdown-item {
  padding: 0.45rem 1rem;
  font-size: 0.95rem;
  color: #1f2937;
  white-space: nowrap;
}

/* hover / active styles that match site green */
#header .nav_right .dropdown-item:hover,
.navbar .nav_right .dropdown-item:hover,
#header .nav_right .dropdown-item.active {
  background: rgba(34,197,94,0.07);
  color: #0b662e;
}

/* offcanvas/mobile: keep menu items full-width and simpler */
.offcanvas .nav_right .dropdown-menu {
  position: static !important;
  box-shadow: none;
  background: transparent;
  padding-left: 0;
}
.offcanvas .nav_right .dropdown-item {
  color: inherit;
  padding-left: 0.75rem;
}

/* ensure the language toggle doesn't force navbar taller on small screens */
@media (max-width: 576px) {
  #header .nav_right .nav-link.dropdown-toggle { padding: 0.2rem 0.45rem; font-size: 0.92rem; }
  #header .nav_right .dropdown-menu { min-width: 120px; }
}

/* fix language dropdown vertical alignment in navbar */
#header .nav_right {
  display: flex;
  align-items: center; /* force vertical center */
  height: 100%;        /* match parent navbar height */
}

#header .nav_right .nav-item {
  display: flex;
  align-items: center;
}

#header .nav_right .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* ensure it works in both desktop nav and offcanvas */
.navbar-nav.nav_right {
  align-items: center;
}

@media (max-width: 991px) {
  /* offcanvas: keep left-aligned, no special centering needed */
  .offcanvas .nav_right { align-items: flex-start; }
}

/* center disclaimer in the subs section */
#subs .subs_1 {
  display: flex;               /* row is already flex, but ensure */
  align-items: center;         /* vertical center */
  justify-content: center;     /* horizontal center across columns */
  min-height: 100px;           /* increase if you want more vertical space */
  padding-top: 0rem;
  padding-bottom: 0rem;
}

#subs .subs_1_left {
  text-align: center;          /* center text */
  max-width: 900px;            /* constrain width for nicer lines */
  margin: 0 auto;
}

/* larger disclaimer text in subs section */
#subs .subs_1_left p {
  font-size: 1.05rem;       /* increase size */
  line-height: 1.6;         /* improve readability */
  max-width: 75ch;          /* limit line length for readability */
  margin: 0;                /* keep alignment */
}

/* slight tweak for small screens */
@media (max-width: 420px) {
  #subs .subs_1_left p { font-size: 0.98rem; max-width: 100%; }
}

/* Ensure top bar is visible on small/mobile devices and stays compact */
@media (max-width: 767px) {
  /* override earlier rules that hide #top */
  #top {
    display: block !important;
    padding-top: 6px;
    padding-bottom: 6px;
  }

  .top_1 {
    align-items: center;
    gap: 6px;
  }

  .top_1_left ul {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
  }

  .top_1_left li {
    font-size: 13px;
    line-height: 1.2;
    white-space: normal;
    margin: 0;
  }

  .top_1_right {
    text-align: right;
    margin-top: 4px;
  }

  .top_1_right .social_icon {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    align-items: center;
  }
}

/* extra small phones */
@media (max-width: 420px) {
  .top_1_left li { font-size: 12px; }
  .top_1_right .social_icon { gap: 6px; }
}

/* hide top social icons on small/mobile devices */
@media (max-width: 767px) {
  .top_1_right .social_icon {
    display: none !important;
    visibility: hidden !important;
    height: 0;
    margin: 0;
    padding: 0;
  }
}

#info .info_1 {
  align-items: stretch; /* ensure both columns match height */
}

#info .info_1_right video {
  width: 100%;
  max-height: 620px; /* reduce overall visible height */
  height: auto;
  object-fit: contain; /* scale to fit without cropping */
  background: #6aaf08; /* letterbox color when aspect ratios differ */
  margin: 0 auto; /* center horizontally if letterboxed */
  display: block;
}

/* slightly larger on wide screens */
@media (min-width: 1200px) {
  #info .info_1_right video { max-height: 580px; }
}

/* smaller on very small phones */
@media (max-width: 420px) {
  #info .info_1_right video { max-height: 320px; }
}

/* Raise left column text in #info section */
#info .info_1_left {
  /* remove large utility margin and use controlled spacing */
  margin-top: 4rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;

  /* layout control so vertical shift is predictable */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  transform: translateY(-24px); /* lift up - increase negative to raise more */
  transition: transform 160ms ease;
}

/* larger screens: lift a bit more */
@media (min-width: 992px) {
  #info .info_1_left {
    transform: translateY(-36px);
    padding-top: 1.5rem !important;
  }
}

/* small screens: reset to normal flow so layout doesn't break */
@media (max-width: 767px) {
  #info .info_1_left {
    transform: none;
    padding-top: 0.75rem !important;
    margin-top: 0.5rem !important;
  }
}

/* Slightly darker background for #feature (override Bootstrap .bg-light here) */
#feature.bg-light {
  background-color: #dff7df !important; /* adjust: darker -> increase contrast (e.g. #e0e7e1 or #dfeee0) */
  transition: background-color 200ms ease;
}