:root{
    --main-color:#b28430 ;
    --sub-color:#f0d575;
    --gradient: linear-gradient(to right, #b28e44, #d4b341, #eed14c, #a17532);
}


@tailwind base;
@tailwind components;
@tailwind utilities;
img.header_logo {
    width: 100px;
    padding: 10px;
}
.container{
    max-width: 1200px !important;
}
.container.w-full{
    max-width: 1200px;
}
.header-menu{
    background: #fff;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
}
.header-menu.fixed{
    box-shadow: rgba(17, 17, 26, 0.1) 0px 1px 0px;
    background: #fff;
}
.bg-white{
    background: #fff;
}

.right {
    margin-right: 100px;
}

.top-nav-main a {
    color: #fff;
    text-decoration: none;
    position: relative;
}
.menu-mobile-icon{
    padding:14px;
    font-size:25px;
    font-weight:700;
     color:#b28430;
}

.mail_lordicon {
    width: 30px;
    height: 30px;
    position: absolute;
    top: -11px;
    left: -42px;
}
.sub-menu{
    padding: 5px 30px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.sub-menu .link2{
    position: relative;
}
.sub-menu1{
    background: #fff;
    position: absolute;
    margin-top: -30px;
    left: 100%;
    padding: 5px 30px;
    border-radius: 4px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.choose-type.choose-currency.flex.items-center.gap-1\.5.ml-5 {
    margin-left: 40px;
}

.social_links a {
    padding: 0px 10px;
}

.bg-black {
    --tw-bg-opacity: 1;
    background-color: rgb(178 132 48) !important;
}
.bg-gray{
    background-color: #000;
}
.text-button-uppercase.head{
    color: #f0d575;
    font-size: 16px !important;
    font-weight: 600 !important;
}


.bg-padding{
    padding: 50px 0px !important;
}
.bg-color{
    background-color: #f7f4ef;
}

a.banner-item:hover{
    color: #b28430 !important;
}

.about-sec h2{
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    padding-bottom: 20px;
}
.about-sec h3{
    font-size: 30px;
    font-weight: 600;
    padding-bottom: 20px;
}
.about-sec .image img{
    height: 300px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
}

input{
    border-color: none !important;
}
.banner-img img{
    border-radius: 8px;
}

.testimonial-item{
    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
    background-color: #fff;
    margin: 10px;
    border-radius: 8px;
}

/* product section */



.product-card{
    /* box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px; */
    border-radius: 8px;
      box-shadow: 0 10px 30px rgb(51 51 51 /10%);

}
.product-card .pro-img img{
    height: 250px;
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.product-card .pro-content{
    padding: 20px;

}
.bg-img{
     height:300px !important;
     width:100%;
    
}
.bg-img img{
    height:300px !important;
   width:100%;
    object-fit:cover;
}
.collection-name{
    font-size:16px;
    font-weight:600;
    padding:5px 10px;
    margin:10px auto;
    border-radius:4px;
    margin-top:-50px;
    background:#fff;
    text-align:center;
    width:90%;
    position:relative;
    z-index:1;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}
.product-card .pro-content h3 {
    font-size: 25px;
    font-weight: 600;
    /* color: #000; */
    padding-bottom: 20px;
    color: #b0812d;
    text-shadow: 0px 0px 0px #000;
}

.product-details .product-list{
    border-radius: 8px;
    box-shadow: rgba(9, 30, 66, 0.25) 0px 1px 1px, rgba(9, 30, 66, 0.13) 0px 0px 1px 1px;
    background-color: #fff;
}
.ph{
    font-size:30px !important;
    padding-left:20px !important;
}


.product-details .product-list h4{
    font-size: 25px;
    font-weight: 500;
    text-align: center;
    color: #fff;
    padding-bottom: 30px;
    background-color: #a17532;
    padding: 10px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.product-details .product-list .product{
    padding: 30px;
    margin-bottom:20px;
}
.product-details .product-list li {
   list-style: none;
}
.product-details .product-list li a{
    display: block;
    padding: 5px 20px;
    border: 2px solid #03045e;
    color: #03045e;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 20px;
    border-radius: 4px;
    transition: 0.5 ease-in-out;
    display: flex;
    align-items: center;
    gap: 10px;
}


.product-details .content{
    padding:0px 30px;
}
.product-details .content h2{
    font-size: 36px;
    font-weight: 600;
    padding-bottom: 20px;
}
.product-details .content p{
    padding-bottom: 20px;
}
.product-details .content img{
    height: 450px;
    width: 100%;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
    margin-bottom: 20px;
}
.product-details .content .s-crop{
    display: grid;
    grid-template-columns: auto auto;
}
.product-details .content ul li{
    font-size: 16px;
    font-weight: 500;
    display: block;
    padding-bottom: 10px;
    color: #333;
}
.product-details .content h4{
    font-size: 25px;
    font-weight: 600;
    padding-bottom: 20px;
}
.product-details .product-list li a.active,
.product-details .product-list li a:hover{
    background: #03045e;
    color: #fff;
}

.company-infor p{
    color: #eee;
}

/* footer */

.caption1{
    color: #eee;
    font-size: 14px;
    font-weight: 500;
}
.company-infor a{
    color: #eee;
}
.company-infor a:hover{
    color: #f0d575;
}
.company-infor span{
    color: #eee;
}
.footer-bottom p{
    color: #eee;
}
.footer-bottom p a:hover{
    color: #f0d575;
}
.social_links.link{
    display: flex;
}
.social_links.link a i{
    height: 35px;
    width: 35px;
    border: 2px solid var(--sub-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.map iframe{
    height: 100px;
    width: 100%;
    border-radius: 8px;
    box-shadow: rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
    margin-bottom: 10px;
    border: 2px solid #f0d575;
}


/* Style the Image Used to Trigger the Modal */
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (Image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
  animation-name: zoom;
  animation-duration: 0.6s;
}

@keyframes zoom {
  from {transform:scale(0)}
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 768px){
  .modal-content {
    width: 100%;
  }
  img.header_logo {
      height:70px;
      width:auto;
      object-fit:contain;
  }
  .bg-img img{
    height:300px;
    width:100%;
    object-fit:cover;
}
.text-button-uppercase.head{
    margin-top:20px;
}
}

.breadcrumb-block a{
    color: #000;
}


/* contact us page */

.form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
}

[type="text"],
input:where(:not([type])),
[type="email"],
[type="url"],
[type="password"],
[type="number"],
[type="date"],
[type="datetime-local"],
[type="month"],
[type="search"],
[type="tel"],
[type="time"],
[type="week"],
[multiple],
textarea,
select {
  -webkit-appearance: none;
  appearance: none;
  background-color: #fff;
  border-color: #ddd !important;
  border-width: 1px;
  border-radius: 4px !important;
  padding-top: 0.5rem;
  padding-right: 0.75rem;
  padding-bottom: 0.5rem;
  padding-left: 0.75rem;
  font-size: 1rem;
  line-height: 1.5rem;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
}

.form-content {
  padding: 50px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  border-radius: 8px;
}
.form-content h6 {
  font-size: 25px;
  font-weight: 600;
  color: #000;
  padding-top: 20px;
  padding-bottom: 10px;
}
.form-content p,
.form-content a {
  display: flex;
  gap: 10px;
  color: #333;
}
.vm-content {
  padding: 30px;
  border-radius: 8px;
  box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
  text-align: center;
  background-color: #fff;
  min-height: 260px;
}
.vm-content h3 {
  font-size: 30px;
  font-weight: 600;
  color: #b28430;
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
}
.vm-content p {
  text-align: left;
}
.vm-content img {
  height: 100px;
}

/* image pop up */

.gallery-item {
  width: calc(33.333% - 10px);
  position: relative;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.3s;
}

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

/* Lightbox */
.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: 1000;
}

.lightbox-img {
  max-width: 90%;
  max-height: 90%;
  border-radius: 8px;
}

.close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  cursor: pointer;
  user-select: none;
}