@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');
/* Global Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Gilda Display", serif;

}


:root {
  --primary-color: #DD1725;
  --secondary-color: #FFB600;
  --text-color: #4C4C4C;
  --text-sub-color: #777777;
  --bg: #fff1f2;

  --h1-w: 600;
  /* Semi Bold */
  --h1-s: 40px;

  --h2-w: 600;
  /* Semi Bold */
  --h2-s: 20px;

  --h3-w: 600;
  /* Semi Bold */
  --h3-s: 18px;

  --h4-w: 400;
  /* Regular */
  --h4-s: 16px;

  --h5-w: 600;
  /* Semi Bold */
  --h5-s: 14px;

  --h6-w: 400;
  /* Semi Bold */
  --h6-s: 14px;
}






body {
  font-family: 'Roboto', sans-serif;
  background-color: #fff7f8;
  line-height: 1.6;
}

a {
  text-decoration: none !important;
  color: inherit !important;
}

ul {
  list-style: none;
}

.navbar-brand {
  font-size: 2rem;
  font-weight: bold;
  color: #a30747 !important;
}

.form-control {
  border-color: var(--primary-color) !important;
  border: 2px solid var(--primary-color) !important;
  border-radius: 5px;
}

.btn-search {
  background-color: var(--primary-color) !important;
  color: white;
  border-radius: 0 5px 5px 0;
  border: none;
  outline: none;
  height: 100%;
}

.tab, .nav-link {
  color: var(--text-color) !important;
  font-weight: var(--h5-w) !important;
  font-size: var(--h5-w) !important;
  white-space: nowrap;
  cursor: pointer;
}

.tab:hover,.nav-link:hover .active {
  border-bottom: 3px solid var(--primary-color) !important;
  color: var(--primary-color) !important;

}

.tab.active-nav,.nav-link.active-nav {
  border-bottom: 3px solid var(--primary-color) !important;
  color: var(--primary-color) !important;
}



/* Second Nav Bar */
#second-navbar {
  background-color: white;
  border-bottom: 1px solid #f1f1f1;
}

#second-navbar .tab,#second-navbar .nav-link {
  color: black;
  font-weight: 400;
  text-transform: uppercase;
  text-decoration: none;
}

#second-navbar .custom-nav-item {
  /* Add any specific styling for the custom class here if needed */
}


/* Menu Slide-in Styles */
.menu-slide {
  position: fixed;
  top: 0;
  right: -300px;
  width: 300px;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  transition: right 0.3s ease;
  z-index: 9999;
}

.menu-slide .menu-content {
  padding: 20px;
}

.menu-slide.open {
  right: 0;
}

.btn-close {
  background-color: transparent;
  border: none;
  font-size: 30px;
  cursor: pointer;
  position: absolute;
  top: 20px;
  right: 20px;
}


.navbar-toggler {
  outline: none !important;
  border: none !important;
}

.btn-close {
  outline: none !important;
  border: none !important;
  width: 2px !important;
  height: 2px !important;
  font-weight: 400 !important;
}

@media (max-width:991px) {
  #seachboxbtn {
    display: none !important;
  }

  .tab:hover,.nav-link:hover {
    border-bottom: none ;


  }

  #second-navbar{
    display: none !important;
  }

  #secondnavres{
display: block  !important;
  }
}





/* card all css starting */
.category-section {
  background-color: #fff1f2;
  padding: 30px 0;
  border-radius: 20px;
}

.category-title {
  font-size: 1rem;
  font-weight: bold;
  text-align: start;
  margin-bottom: 20px;
  color: var(--primary-color);
}



.card-img-top {
  height: 220px;
  /* width: 150px; */
  object-fit: cover;
  margin: 0 auto;
  border-radius: 20px;
}

/* .card img {
  transition: transform 0.3s ease-in-out;
} */

/* .card:hover img {
  transform: scale(1.05);
} */

.card-title {
  font-size: 1rem;
  font-weight: bold;
  color: #800040;
}

.explore-link {
  font-size: 0.9rem;
  color: #800040;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.3s ease;
}

.explore-link:hover {
  color: #d4006d;
}

.card {
  background-color: transparent !important;


  border: none !important;

}

/* Responsive Styling for 336px */
@media (max-width: 336px) {
  .category-title {
      font-size: 1.5rem;
      text-align: center;
  }

  .card-img-top {
      height: 120px;
      width: 120px;
  }

  .card-title {
      font-size: 0.9rem;
  }

  .explore-link {
      font-size: 0.8rem;
  }

  .card {
      margin-bottom: 20px;

  }
}

.card-body h5{
  font-size: var(--h2-s);
  font-weight: var(--h2-w);
  color: var(--primary-color);

}

.card-body a{
  font-size: var(--h6-s);
  font-weight: var(--h6-w);
  color: var(--text-color);
}


.category-title{
  font-size: var(--h1-s);
  font-weight: var(--h1-w);
}

/* card all css starting */



/* banner1 Css starting   */
 /* World Best's Jewellery Section */
 .world-best-jewellery {
  background: url('/assets/img/banner1.jpg') no-repeat Right center/cover;
  position: relative;
  min-height: 500px;
  color: #fff;
  display: flex;
  align-items: center;
}

.world-best-jewellery .overlay {
  background: none; /* Remove black background */
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.world-best-jewellery .content {
  max-width: 100%;

  /* max-width: 600px; */
  text-align: start;
}

.world-best-jewellery h2 {
  font-size: 2.5rem;
  font-weight: bold;
  text-align: left !important;
}

.world-best-jewellery h2 span {
  color: var(--secondary-color);; /* Gold color */
}

.world-best-jewellery p {
  font-size: 1.1rem;
  margin: 20px 0;
}

.explore-btn {
  background-color: var(--secondary-color); /* Gold color */
  color: #000;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
}

.explore-btn:hover {
  background-color: #ffcc00;
  color: #000;
}
/* banner1 Css ending   */


.custom-card img {
  width: 100%;
  height: auto;
}
.custom-card h5 {
  position: absolute;
  bottom: 20px;
  left: 20px;
  color: white;
  background-color: rgba(0, 0, 0, 0.5);
  padding: 10px;
  border-radius: 5px;
}



/* footer css starting  */
  /* Custom Styles for Footer */
  footer {
    background: #fff1f2;
    padding: 40px 0;
  }

  .footer-links {
    color: #4C4C4C;
    font-size: 14px;
    opacity: 0.8;
    transition: all 0.3s ease;
  }

  .footer-links:hover {
    color: #dd1725;
    text-decoration: underline;
  }

  .social-icons svg {
    width: 24px;
    height: 24px;
    fill: #333;
    transition: all 0.3s ease;
  }

  .social-icons a:hover svg {
    fill: #dd1725;
  }

  .social-icons {
    display: flex;
    gap: 15px;
  }
  /* home css st*/
  .card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;

  }

  .about-us h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
  }

  .about-us p {
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 50px;
  }

  .globalabtn {
    text-decoration: none;
    color: white !important;
    background-color: var(--primary-color);
    padding: 10px 40px;
    border-radius: 5px;

  }

  .globalabtn:hover{
    background-color: #ce1329 !important;
    color: white !important;

  }



  .globalabtnyellow {
    text-decoration: none;
    color: black !important;
    background-color: var(--secondary-color);
    padding: 10px 40px;
    border-radius: 5px;
    transition: background-color 0.3s;

  }

    .globalabtnyellow:hover{
    background: #eda400 !important;
  }



  /* message from director css starting  */
  .message-card {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;

  }

  .message-card img {
    border-radius: 8px;
  }

  .message-card h3 {
    font-size: 1.5rem;
    color: black;
  }

  .message-card .contact-info {
    margin-top: 10px;
  }

  .message-card .contact-info a {
    text-decoration: none;
    color: #8e44ad;
  }

  /* message from director css ending  */



  /* blog section css starting    */
  .custom-mm {
    background-color: var(--bs-primary-mm);
    border-color: var(--bs-primary-mm);
    color: white; /* Text color for better contrast */
  }

  .custom-mm:hover {
    background-color: #7a2626; /* Optional: Slightly darker shade on hover */
    border-color: #7a2626;
  }


  .bg-color{
    background-color: var(--bg-section-color);
  }

.card{
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

  .blog-title {
    font-size: 1.25rem;
    font-weight: bold;
    color: #a51717;
  }
  .blog-meta {
    font-size: 0.85rem;
    color: #6c757d;
  }
  .read-more {
    color: #a51717;
    font-weight: bold;
    text-decoration: none;
  }
  .blog-card {
    border: none;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
  }
  .blog-card:hover {
    transform: scale(1.02);
  }
  .a{
    text-decoration: none;
  }
  /* blog section css ending    */
  /* review section Css Starting */

  .carousel .carousel-item {
    color: #999;
    overflow: hidden;
    min-height: 120px;
    font-size: 13px;
  }
  .carousel .media img {
    width: 80px;
    height: 80px;
    display: block;
    border-radius: 50%;
  }
  .carousel .testimonial {
    padding: 0 15px 0 60px ;
    position: relative;
  }
  .carousel .testimonial::before {
    content: "\201C";
    font-family: Arial,sans-serif;
    color: #e2e2e2;
    font-weight: bold;
    font-size: 68px;
    line-height: 54px;
    position: absolute;
    left: 15px;
    top: 0;
  }
  .carousel .overview b {
    text-transform: uppercase;
    color: #1c47e3;
  }
  .carousel .carousel-indicators {
    bottom: -40px;
  }
  .carousel-indicators li, .carousel-indicators li.active {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin: 1px 3px;
    box-sizing: border-box;
  }
  .carousel-indicators li {
    background: #e2e2e2;
    border: 4px solid #fff;
  }
  .carousel-indicators li.active {
    color: #fff;
    background: #1c47e3;
    border: 5px double;
  }
  /* review section Css Ending */

  /* Premium Description section Starting   */
  .jewellery-images img {
    width: 100%;
    height: auto;
    border-radius: 8px;
  }
/* footer css ending  */
/* home css en */



/* review section css starting   */
.testimonial-section .testimonial-heading {
 color: #000;
 font-size: 26px;
 font-weight: 300;
 text-align: center;
 text-transform: uppercase;
 position: relative;
 margin: 30px 0 70px;
}

.testimonial-section .testimonial-heading::after {
 content: "";
 width: 100px;
 position: absolute;
 margin: 0 auto;
 height: 4px;
 border-radius: 1px;
 background: var(--primary-color) !important ;
 left: 0;
 right: 0;
 bottom: -20px;
}

.testimonial-section .carousel-item {
 color: var(--text-color)!important;
 overflow: hidden;
 min-height: 120px;
 font-size: 13px;
}

.testimonial-section .carousel-item img {
 width: 80px;
 height: 80px;
 border-radius: 50%;
}

.testimonial-section .testimonial {
 padding: 0 15px 0 60px;
 position: relative;
}

.testimonial-section .testimonial::before {
 content: "\201C";
 font-family: Arial, sans-serif;
 color: var(--primary-color)!important;
 font-weight: bold;
 font-size: 68px;
 line-height: 54px;
 position: absolute;
 left: 15px;
 top: 0;
}

.testimonial-section .overview b {
 text-transform: uppercase;
 color: var(--primary-color) !important;
}

.testimonial-section .carousel-indicators button {
 width: 20px;
 height: 20px;
 border-radius: 50%;
 margin: 1px 3px;
 box-sizing: border-box;
}

.testimonial-section .carousel-indicators button.active {
 background: var(--primary-color)!important;
 border: 5px double #fff;
}

/* review section css endind   */






/* review section Css Starting */
.testimonial-section h2 {
  color: #000;
  font-size: 26px;
  font-weight: 300;
  text-align: center;
  text-transform: uppercase;
  position: relative;
  margin: 30px 0 70px;
}

/* h2::after {
content: "";
width: 100px;
position: absolute;
margin: 0 auto;
height: 4px;
border-radius: 1px;
background: #1c47e3;
left: 0;
right: 0;
bottom: -20px;
} */

.carousel .carousel-item {
  color: #999;
  overflow: hidden;
  min-height: 120px;
  font-size: 13px;
}
.carousel .media img {
  width: 80px;
  height: 80px;
  display: block;
  border-radius: 50%;
}
.carousel .testimonial {
  padding: 0 15px 0 60px ;
  position: relative;
}
.carousel .testimonial::before {
  content: "\201C";
  font-family: Arial,sans-serif;
  color: #e2e2e2;
  font-weight: bold;
  font-size: 68px;
  line-height: 54px;
  position: absolute;
  left: 15px;
  top: 0;
}
.carousel .overview b {
  text-transform: uppercase;
  color: #1c47e3;
}
.carousel .carousel-indicators {
  bottom: -40px;
}
.carousel-indicators li, .carousel-indicators li.active {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin: 1px 3px;
  box-sizing: border-box;
}
.carousel-indicators li {
  background: #e2e2e2;
  border: 4px solid #fff;
}
.carousel-indicators li.active {
  color: #fff;
  background: #1c47e3;
  border: 5px double;
}
/* review section Css Ending */