@import "style.css";

body {
  scroll-behavior: smooth;
  font-weight: normal;
  font-size: 17px;
}



:root {
  --bodybg: #fcf5ee;
  --primary: #202020;
  --secondary: #F16D2C;
  --tertiary: #066D7C;
  --topnavbar-bg: #fcf5ee;
  --menuactive: #F16D2C;
  --menuhover: #F16D2C;
  --white: #ffffff;
  --transition: all 0.3s ease;
  --linkhover: #F16D2C;
  --card-title: #066D7C;
  --text: #4B5563;
  --footer: #1F2937;
  --footer-text: #D1D5DB;
}

a {
  text-decoration: none;
  &:hover {
    color: var(--linkhover);
  }
}

img {
  width: 100%;
  height: auto;
}

.common-btn {
  background: var(--secondary);
  color: var(--white);
  border: none;
  line-height: normal;
  padding: 5px 20px;
  font-size: 16px;
}
/*menu section start*/
.menu-section .navbar {min-height: 76px;transition: var(--transition);backdrop-filter: blur(10px);padding: 0;background: var(--topnavbar-bg) !important;}
.menu-section .navbar .nav-item {padding: 0 1rem;}
.menu-section .navbar .nav-item.active .nav-link {color: var(--menuactive);}
.menu-section .navbar .nav-item .nav-link {position: relative;padding: 0;color: var(--primary);font-size: 16px;font-weight: 500;cursor: pointer;display: block;}
.menu-section .navbar .nav-item .nav-link:hover {color: var(--menuhover);}
.menu-section .navbar .nav-item .nav-link.active {color: var(--menuactive);}
.menu-section .logo-section .logo-img img {height: 60px; display: block;}
.menu-section .navbar .nav-item.dropdown .dropdown-menu .dropdown-item {font-size: 14px;}
.menu-section .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:hover {background: var(--primary); color: var(--white);}
.menu-section .navbar .nav-item.dropdown .dropdown-menu .dropdown-item:active { background: var(--primary); color: var(--white); }
.navbar-toggler { background: var(--secondary);}
.offcanvas {height: 100vh;}
.offcanvas .offcanvas-body {align-items: center;}
.offcanvas.offcanvas-end {width: 90%;}
.offcanvas.text-bg-dark {background-color: var(--topnavbar-bg) !important;}
.offcanvas.show.text-bg-dark {background-color: #ffffff !important;}

.navbar-toggler { background: var(--secondary);}
.offcanvas {height: 100vh;}
.offcanvas.offcanvas-end {width: 90%;}
.offcanvas.text-bg-dark {background-color: var(--topnavbar-bg) !important;}
.offcanvas.show.text-bg-dark {background-color: #ffffff !important;}
 
.page-content-wrapper {
  padding-top: 110px;
}
.hero-section {
  margin-top: 76px;
}
.hero-section .hero-single-slider-box {
  align-items: center;
  width: 100%;
  display: flex;
  justify-content: center;
}
.hero-section .hero-single-slider-box .slider-box img {
  object-fit: cover;
  object-position: center;
  width: 100%;
  aspect-ratio:1;
}

.collection-section {
  padding-bottom: 120px;
}
.banner-section {
  width: 100%;
}
/*menu section End*/
.carousel {
  margin-top: 15px;
}
#myCarousel h4{
  font-family: Jost, sans-serif;
  color: #1e1c1c;
  font-size: 64px;
  line-height: 1.25;
  font-weight: 700;
}
#myCarousel { overflow: hidden;}
#myCarousel .carousel-item a{background:var(--secondary); font-size:16px; font-weight: 600; color:var(--white ); padding:13px 32px; display:inline-block; }
#myCarousel .carousel-item a:hover{ background: var(--primary); text-decoration:none;  }
#myCarousel .carousel-item h4{-webkit-animation-name:fadeInLeft; animation-name:fadeInLeft;}
#myCarousel .carousel-item p{-webkit-animation-name:slideInRight; animation-name:slideInRight;}
#myCarousel .carousel-item a{-webkit-animation-name:fadeInUp; animation-name:fadeInUp;}
#myCarousel .carousel-item .mask img{-webkit-animation-name:slideInRight; animation-name:slideInRight; display:block; height:auto; max-width:100%;}
#myCarousel h4, #myCarousel p, #myCarousel a, #myCarousel .carousel-item .mask img{-webkit-animation-duration: 1s; animation-duration: 1.2s;-webkit-animation-fill-mode: both;animation-fill-mode: both;}
#myCarousel .container {max-width: 1430px;  }
#myCarousel .carousel-item{height:100%; padding-bottom: 30px;}
#myCarousel{position:relative; z-index:1;}
.carousel-control-next, .carousel-control-prev{height:40px; width:40px; padding:12px; top:50%; bottom:auto; transform:translateY(-50%); background-color: #f47735; }
.carousel-item {
  position: relative;
  display: none;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  transition: -webkit-transform .6s ease;
  transition: transform .6s ease;
  transition: transform .6s ease,-webkit-transform .6s ease;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000px;
  perspective: 1000px;
}
.carousel-fade .carousel-item {
  opacity: 0;
  -webkit-transition-duration: .6s;
  transition-duration: .6s;
  -webkit-transition-property: opacity;
  transition-property: opacity
}
.carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
  opacity: 1
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-right.active {
  opacity: 0
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0)
}
@supports (transform-style:preserve-3d) {
  .carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
    -webkit-transform:translate3d(0, 0, 0);
    transform:translate3d(0, 0, 0)
  }
}
.carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active {
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp;
}
@-webkit-keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes slideInRight {
  from {
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.slideInRight {
  -webkit-animation-name: slideInRight;
  animation-name: slideInRight;
}
.contact-touch-section {background: var(--bodybg);}
.get-touch-card {background: #fff; border: 1px solid #E6ECF1;border-radius: 12px;box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);padding: 20px;}
.touch-control-input {height: auto;border-radius: 8px; border: 1px solid #EEF2F6;padding: 10px 14px;font-size: 14px;color: #374151;outline: none;width: 100%; background: #F7F7F9;}
.touch-control-input::placeholder {color: #9AA3AF;outline: none;border: none;}
.touch-control-input:focus {background: #F7F7F9;outline: none;box-shadow: inherit;}
.map-card {background: #fff;border: 1px solid #E6ECF1;border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); padding: 8px;}
.map-embed {position: relative;overflow: hidden; border-radius: 10px;}
.map-embed iframe {display: block;width: 100%;height: 360px;border: 0;border-radius: 10px;}

.video-box {background: #fff;border-radius: 12px;overflow: hidden;box-shadow: 0 4px 10px rgba(0,0,0,0.1);margin-bottom: 25px; position: relative;}
.video-box .video-icon {position: absolute; transform: translateY(-50%);top: 50%;left: calc(50% - 15px);}
.video-box .video-icon img {width: 50px;}
.video-title {padding: 12px;font-size: 16px;font-weight: 600; width: 100%; text-align: center;}
.video-title .video-title-box {display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;height:46px;}

@media screen and (max-width: 991px) {
  #myCarousel h4 {
    font-size: 40px;
  }
  #myCarousel .carousel-item .mask img{ width: 70%;}
}