@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
  font-variation-settings:
    "wdth" 100,
    "YTLC" 500;
    
}

:root {
  --primary-color: #121212;
  --text-shadow:rgb(253, 253, 253);
  --card-hover:rgb(178, 228, 255);
  --card-bg: white;
}

body {
  overflow-x: hidden;
}
.container-xxxl {
  width: 100%;
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}
section {
  padding-top: 60px;
  /* padding-bottom: 60px; */
  position: relative;
}

a {
  text-decoration: none;
  color: black;
}

.hero-content .section-para {
  font-weight: 700;
  color: rgb(255, 255, 255);
}

.section-title {
  font-weight: 700;
  color: var(--primary-color);
  font-size: 2.5rem;
  text-shadow: 1px 1px 0px var(--text-shadow);
}
.hero-content .section-title {
  font-weight: 700;
  color: white;
  font-size: 2.5rem;
}
.hero-content .btn-main {
  font-weight: 700;
  background-color: white;
  color: var(--primary-color);
}

.offcanvas {
  overflow-y: auto;
  height: 100vh;
  transition: 0.3s ease-in;
}

.overlay {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  z-index: 3;
}

.hero-section {
  height: 100vh;
  background-image: url(../images/slider/32c7346d6708fc0c6cd648d298be49f5.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  top: -78px;
  display: flex;
  align-items: center;
  justify-content: start;
}

.hero-content {
  width: 100%;
}

.hero-content {
  position: absolute;
  width: fit-content;
  max-width: 95vw;
  top: 45%;
  left: 4%;
z-index: 2;
}

.btn-main {
  background-color: var(--primary-color);
  color: rgb(255, 255, 255);
  box-shadow: 0px 0px 2px rgb(0, 0, 0);
}
.btn-main:hover {
  background-color: var(--primary-color);
  color: rgb(255, 255, 255);
  box-shadow: 0px 0px 2px rgb(0, 0, 0);
}

@media screen and (max-width: 576px) {
  .hero-content {
    top: 17%;
  }
}

@media screen and (min-width: 400px) and (max-width: 576px) {
  .hero-content {
    padding-top: 90px;
    gap: 10px;
  }
}

.img-section {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-img {
  width: 100%;
  height: 100%;
  /* border: 30px solid var(--primary-color); */
}

img {
  width: 100%;
}


/* .cat-img {
  background: rgb(245, 245, 245);
} */
.categories-section {
  background: var(--card-bg);
}

.bg-grey {
  background-color: var(--primary-color);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;

  & a {
    color: white;
    width: 100%;
  }
}

.bg-blue {
  background-color: white;
  border: 1px solid var(--primary-color);
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.product-card {
  margin: 10px;
}

.product-card img {
  width: 100%;
  height: 200px;
  object-fit: contain;
}

#brands .nav-link {
  color: black;
}

.navbar .container{
  max-width: 1920px !important;
}

.navbar-nav .nav-link {
  color: rgb(255, 255, 255);
  letter-spacing: 0.05rem;
  font-weight: 600;
  font-size: 1rem;
}

@media (max-width: 1024px) {
  .navbar {
    background-color: #fff !important;
  }

  .navbar-nav .nav-link {
    color: black;
    letter-spacing: 0.05rem;
    font-weight: 600;
    font-size: 1rem;
  }
}

.navbar {
  top: 0;
  z-index: 999;
  background-color: transparent;
  transition: 0.6s ease-in;
  backdrop-filter: blur(6px);
}

.navbar.scrolled {
  background: white;
  box-shadow: -21px -6px 10px black;

  & .nav-link {
    color: #000;
  }
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  color: var(--primary-color) !important;
  font-weight: bold !important;
}

/*feature section */
.feature {
  background-color: var(--card-bg);
  padding: 20px;
  border-radius: 20px;
  position: relative;
  margin-top: 2rem;
  color: black;
  position: relative;
  transition: 0.3s ease-in;
}

.feature .icon {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  background-color: var(--card-bg);
  border: 2px solid black;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.feature .icon i {
  font-size: 30px;
}

.feature-title {
  font-weight: 600;
  z-index: 10;
  position: relative;
  transition: color 0.5s ease;
}

.feature .section-para {
  z-index: 10;
  position: relative;
  transition: color 0.5s ease;
}

.feature .overlay {
  transition: transform 0.5s ease, opacity 0.5s ease;
  /* transform: rotate(0deg);
  background: linear-gradient(
    90deg,
    rgb(211, 211, 211,0.7) 60%,
    rgb(66, 204, 206,0.7) 40%
  ); */
  /* background: linear-gradient(
    90deg,
    rgb(211, 211, 211) 60%,
    rgb(66, 204, 206) 40%
  ); */
  border-radius: 20px;
}

.feature:hover {
  opacity: 1;
  /* transform: rotate(180deg); */
  box-shadow: 2px 3px 9px -2px rgb(209, 209, 209);
  transform: scale3d(1.03, 1.03, 1.03);
}

/* .feature:hover .feature-title,
.feature:hover .section-para {
  color: black;
} */


/* gallery */
/* .gallery-item {
    position: relative; 
    overflow: hidden;
    border-radius: 10px; 
}

.gallery-item img {
    width: 100%;
    height: auto;
    transition: transform 0.3s ease;
} */

/* .gallery-item .overlay {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0; 
    transition: opacity 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s ease, opacity 0.5s ease;

}

.gallery-item:hover .overlay {
    opacity: 1; 

}

.gallery-item:hover img {
    transform: scale(1.25); 
}

.gallery-item .overlay .overlay-icon {
    color: white;
    font-size: 36px; 
    transition: transform 0.3s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
  transform: rotate(0deg);
}

.gallery-item:hover .overlay .overlay-icon {
    transform: scale(1.2); 

} */

/* .gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 20px;
}

.gallery-item {
  position: relative;
}

.gallery-image {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.gallery-image:hover {
  transform: scale(1.1);
} */

/* Lightbox Modal */
.lightbox {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 99999;
}

.lightbox img {
  max-width: 60vw;
  height: auto;
  border: 5px solid white;
}

@media (min-width: 1024px) {

  .lightbox img {
    max-width: 40vw;
    height: auto;
  }

  #lightbox .close {
    top: -13vw !important;
    right: -41vw !important;
  }
}

#lightbox .close {
  position: relative;
  top: -19.5vw;
  right: -62vw;
  font-size: 24px;
  color: white;
  cursor: pointer;
  height: 30px;
  width: 30px;
  border-radius: 50%;
  background: #000000;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* .modal .btn-close {
    font-size: 1rem; 
    color: red; 
  }
   */



.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* testimonials */
.testimonial-cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1rem;
}

.testimonial-card {
  background: var(--card-bg);
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  padding: 30px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease-in-out;
  margin-bottom: 30px;
  max-width: 320px;
  text-align: center;
  transition: .2s ease;
}

.testimonial-card:hover {
  transform: translateY(-10px);
}

.testimonial-card .card-body {
  padding: 0;
}

.testimonial-card .card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #333;
  margin-bottom: 10px;
}

.testimonial-card .card-text {
  font-size: 1.1rem;
  color: #777;
  margin-bottom: 15px;
  font-style: italic;
}

.testimonial-card .designation {
  font-size: 0.95rem;
  color: #555;
  margin-bottom: 15px;
}

.testimonial-card .quote-icon {
  width: 50px;
  height: 50px;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50'%3E%3Cpath fill='%23121212' d='M25.1 42c-9.4 0-17-7.6-17-17s7.6-17 17-17s17 7.6 17 17s-7.7 17-17 17m0-32c-8.3 0-15 6.7-15 15s6.7 15 15 15s15-6.7 15-15s-6.8-15-15-15'/%3E%3Cpath fill='%23121212' d='m15.3 37.3l-1.8-.8c.5-1.2 2.1-1.9 3.8-2.7s3.8-1.7 3.8-2.8v-1.5c-.6-.5-1.6-1.6-1.8-3.2c-.5-.5-1.3-1.4-1.3-2.6c0-.7.3-1.3.5-1.7c-.2-.8-.4-2.3-.4-3.5c0-3.9 2.7-6.5 7-6.5c1.2 0 2.7.3 3.5 1.2c1.9.4 3.5 2.6 3.5 5.3c0 1.7-.3 3.1-.5 3.8c.2.3.4.8.4 1.4c0 1.3-.7 2.2-1.3 2.6c-.2 1.6-1.1 2.6-1.7 3.1V31c0 .9 1.8 1.6 3.4 2.2c1.9.7 3.9 1.5 4.6 3.1l-1.9.7c-.3-.8-1.9-1.4-3.4-1.9c-2.2-.8-4.7-1.7-4.7-4v-2.6l.5-.3s1.2-.8 1.2-2.4v-.7l.6-.3c.1 0 .6-.3.6-1.1c0-.2-.2-.5-.3-.6l-.4-.4l.2-.5s.5-1.6.5-3.6c0-1.9-1.1-3.3-2-3.3h-.6l-.3-.5c0-.4-.7-.8-1.9-.8c-3.1 0-5 1.7-5 4.5c0 1.3.5 3.5.5 3.5l.1.5l-.4.5c-.1 0-.3.3-.3.7c0 .5.6 1.1.9 1.3l.4.3v.5c0 1.5 1.3 2.3 1.3 2.4l.5.3v2.6c0 2.4-2.6 3.6-5 4.6c-1.1.4-2.6 1.1-2.8 1.6'/%3E%3C/svg%3E");
  color: var(--primary-color);
  margin-bottom: 15px;
}

.card-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--primary-color);
  z-index: -1;
  border-radius: 20px;
  opacity: 0.1;
}

/* .brand-card {
  width: 100%;
} */
/* .brand-cards{
  overflow-x: hidden;
  & .col-1{
    width: clamp(100px , 20vw, 160px);
    max-height: clamp(100px , 20vw, 160px);
    animation-name: infiniteScroll;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
  }
} 
@keyframes infiniteScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(0px - 100%));
  }
} */
/* .tag-list {
  list-style: none;
}

.tag-list li {
  background-color: #2694b9;
  padding: 5px 9px;
  color: #f6f6f6;
  border-radius: 4px;
} */

/* .scroller{
  
 } */
.scroller_inner {
  padding-block: 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 0;
}

.scroller[data-animated="true"] {
  border: 2px solid var(--primary-color);
  overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
  mask: linear-gradient(90deg, transparent, white 15%, white 85%, transparent);
}

.scroller[data-animated="true"] .scroller_inner {
  width: max-content;
  flex-wrap: nowrap;
  animation: scroll var(--animation-duration, 20s) var(--animation-direction, forwards) linear infinite;
}

.scroller[data-direction="right"] {
  --animation-direction: reverse;
}

.scroller[data-direction="left"] {
  --animation-direction: forwards;
}

/* .scroller[data-duration= "fast"]{
  --animation-duration: 20s;
}
.scroller[data-duration= "slow"]{
  --animation-duration: 40s;
} */
@keyframes scroll {
  to {
    transform: translate(calc(-50% - 0.5rem));
  }
}


/* Contact section */
.contact-section {
  padding: 40px 0;
  background-color: var(--card-bg);
}

/* Contact form */
/* .contact-form-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 50px;
  align-items: flex-start;
} */

/* Form container */
/* .form-container {
  width: 60%;
} */

h3 {
  font-size: 28px;
  margin-bottom: 30px;
  color: #333;
  text-align: left;
  font-weight: 600;
}

/* Form row */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-field {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.form-field label {
  font-size: 14px;
  color: #555;
  margin-bottom: 5px;
}

.form-field input,
.form-field textarea {
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 16px;
  color: #333;
  background-color: #f7f7f7;
  transition: border-color 0.3s ease;
}

.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--primary-color);
  outline: none;
}

/* Submit button */
.form-submit button {
  padding: 12px 25px;
  background-color: var(--primary-color);
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.form-submit button:hover {
  background-color: ;
}

/* Map container */
/* .map-container {
  width: 100%;
  height: 450px;
  border-radius: 5px;
  overflow: hidden;
} */

iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .contact-form-wrapper {
    flex-direction: column;
    align-items: center;
  }

  .form-container {
    width: 100%;
  }

  .map-container {
    width: 100%;
    height: 400px;
  }
}

footer{
  background-color: aliceblue;
}
footer a {
  color: #000 !important;
}


/* Style for the modal */
.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  padding-top: 60px;
}

.modal-content {
  background-color: #fefefe;
  margin: 5% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80vw;
  max-width: 700px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  text-align: end;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.asknow {
  font-size: 12px;
  padding: 0;
}

.view-details {
  font-size: 12px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
@keyframes rotate {
  0% {
    transform: rotate(0);
}

100% {
    transform: rotate(360deg);
}
}
/* .hero-content-box{
  position: absolute;
  top: 30%;
  left: 5%;
  z-index: 2;
} */
 .carousel-item img{
  object-fit: cover;
  height: 100vh;
 }
 .carousel-control-next, .carousel-control-prev{
  width: 5% !important;
  z-index: 3;
 }
 .bg-overlay{
  position: absolute;
  top: 0;
  width: 100%;
  height: 100vh;
  z-index: 2;
  background-color: #0000006e;
 }
 /*  */
 /* Gallery Section Styling */
.gallery-section {
padding-top: 50px;
padding-bottom: 50px;
}

.gallery-title {
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 20px;
}

.gallery-para {
font-size: 1.125rem;
color: #555;
margin-bottom: 40px;
}

/* Grid Styling */
.gallery-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 20px;
}

.gallery-item {
position: relative;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.gallery-image {
width: 100%;
height: 100%;
transition: transform 0.3s ease;
}

/* Example of custom spans for specific items */
.gallery-item-1 {
grid-column: span 2;
grid-row: span 2;
}

.gallery-item-2 {
grid-column: span 1;
grid-row: span 1;
}

.gallery-item-3 {
grid-column: span 1;
grid-row: span 1;
}

.gallery-item-4 {
grid-column: span 1;
grid-row: span 1;
}

.gallery-item-5 {
grid-column: span 1;
grid-row: span 1;
}

.gallery-item-6 {
grid-column: span 2;
grid-row: span 2;
}

.gallery-item-7 {
grid-column: span 1;
grid-row: span 1;
}

.gallery-item-8 {
grid-column: span 1;
grid-row: span 1;
}
.gallery-item-9 {
grid-column: span 1;
grid-row: span 1;
}

/* Hover effect */
.gallery-item:hover .gallery-image {
transform: scale(1.1);
}


/* Responsive Design */
@media (max-width: 992px) {
/* .gallery-grid {
 grid-template-columns: repeat(3, 1fr);
} */

.gallery-item-1 {
 grid-column: span 2;
}
}

@media (max-width: 576px) {
.gallery-grid {
 grid-template-columns: repeat(3, 1fr);
 gap: 10px;
}

.gallery-item-1 {
  grid-column: span 1;
  grid-row: span 1;
  }
.gallery-item-6 {
  grid-column: span 1;
  grid-row: span 1;
  }
}