@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

.navbar .navbar-nav .nav-link{
  font-family: "Open Sans", sans-serif !important;
  text-transform: uppercase;
}
.bg-light-gray1{
  background: #f1f1f1;
}
.navbar .navbar-nav .nav-link .fs-20 {
    font-size: 19px;
    margin-top: -3px;
}

.bg-gradient-red-transparent {
    background: #ff0001 !important;
}/* পুরো মেনু horizontally center */
#navbarNav .navbar-nav {
    justify-content: center;
}

/* লিঙ্কের ভেতরের লেখা center */
#navbarNav .nav-link {
    text-align: center;
}
.navbar-nav {
    width: 100%;
    justify-content: center;
}
header .rf-header {
    padding-left: 0px;
    padding-right: 0px;
}

header .rf-header .custom-20 {
    background: #fff;
    height: 120px;
}
header .navbar [class*=col-] {
    padding: 0 0px;}
header .navbar [class*=col-].text-center {
    justify-content: center;
}

.tp-caption{
   z-index: 10;
}.smooth-move{
  display:inline-block;
  animation: leftRight 3s ease-in-out infinite alternate;
}

@keyframes leftRight{
  0%{ transform: translateX(8px); }
  100%{ transform: translateX(-8px); }
}


.right-curve{
  --s: 18px;  
  position:relative;
  overflow:hidden;  
}

.right-curve::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -7px;
    right: -22px;
    width: 44px;
    background: radial-gradient(circle at left center, #790a0a00 20px, #ff0018 21px) repeat-y;
    background-size: 27px 35px;
}
.left-curve{
  --s: 18px;  
  position:relative;
  overflow:hidden;  
}

.left-curve::after {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -7px;
    left: 0px;
    width: 44px;
    background: radial-gradient(circle at right center, #790a0a00 20px, #ff0018 21px) repeat-y;
    background-size: 27px 35px;
}

header .rf-header .custom-20.gd-bg {
    background: linear-gradient(82deg, #ffffff, #ff0001);
    height: 120px;
}
header .rf-header .custom-20.gd-bg2 {
    background: linear-gradient(82deg, #ff0001, #fff);
    height: 120px;
}

a.slider-bottom-arrow {
    font-size: 22px !important;
    letter-spacing: 0px !important;
    line-height: 24px !important;
    padding-top: 20px !important;
}.categories-style-01 a {
    font-family: 'Open Sans';
}

/*Products-slider*/



.carousel {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel img.item {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.5s ease;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.carousel img.item.active {
  width: 300px;
  height: 300px;
  z-index: 10;
  border-radius: 0px;
}

.arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 20px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  width: 40px;
}

.arrow.prev { left: -50px; }
.arrow.next { right: -50px; }

.center-display {
  width: 200px;
  height: 200px;
  margin: 30px auto;
}

.center-display img {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.carousel-wrapper {
  position: relative;
  width: 1100px;
  height: 400px;
  margin: 50px auto;
}

.carousel img.item {
  position: absolute;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  cursor: pointer;
  transition: all 0.5s ease;
}

.carousel img.item.active {
  border-width: 3px;
}

.center-display {
  position: absolute;
  bottom: 260px; /* adjust according to activeSize */
  left: 50%;
  transform: translateX(-50%);
  width: 220px;
  height: 220px;
  border-radius: 15px;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.5s ease;
  display: none;
}



.container-wrapper{
  margin: auto;
  max-width: 95%;
}
.container-wrapper2{
  margin: auto;
  max-width: 80%;
}
.video-overlay{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:#1e4590;      /* ????? ???? ?? */
  opacity:0.7;         /* ??? ???? 0.7 ??? */
  z-index:1;
}


/* CONTENT ???????? ???? */
.container-wrapper{
  position:relative;
  z-index:3 !important;  /* ???????? */
}
        .knobContainer {
            text-align: center;
            margin: 10px;
        }

        .knobContainer canvas {
            cursor: pointer;
        }

        .rightPanel {
            float: right;
            width: 223px;
            border-radius: 5px;
            margin-left: 5px;
        }

        /* Specific mapael css class are below
         * 'mapael' class is added by plugin
        */
        
        .mapael .mapTooltip {
            position: absolute;
            background-color: #fff;
            moz-opacity: 0.80;
            opacity: 0.80;
            filter: alpha(opacity=80);
            border-radius: 4px;
            padding: 10px;
            z-index: 1000;
            max-width: 200px;
            display: none;
            color: #232323;
        }
        
        .mapael .map {
            margin-right: 228px;
            overflow: hidden;
            position: relative;
            background-color: #232323;
            border-radius: 5px;
        }

        /* For all zoom buttons */
        .mapael .zoomButton {
            background-color: #fff;
            border: 1px solid #ccc;
            color: #000;
            width: 15px;
            height: 15px;
            line-height: 15px;
            text-align: center;
            border-radius: 3px;
            cursor: pointer;
            position: absolute;
            top: 0;
            font-weight: bold;
            left: 10px;

            -webkit-user-select: none;
            -khtml-user-select : none;
            -moz-user-select: none;
            -o-user-select : none;
            user-select: none;
        }

        /* Reset Zoom button first */
        .mapael .zoomReset {
            top: 10px;
        }

        /* Then Zoom In button */
        .mapael .zoomIn {
            top: 30px;
        }

        /* Then Zoom Out button */
        .mapael .zoomOut {
            top: 50px;
        }
        
        
/* ===== Popup wrapper ===== */
.qv-modal{
  width:1056px;
  max-width:calc(100vw - 20px);
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  position:relative;
  box-shadow:0 40px 90px rgba(0,0,0,.25);
  margin: auto;
}
.shop-footer {
    background: #ffc8c894;
    padding: 6px 17px;
}


/* Close */
.qv-close {
    position: absolute;
    top: 10px;
    right: 12px;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 50%;
    background: #c90000;
    font-size: 28px;
    cursor: pointer;
    z-index: 10;
    color: #fff;
}

/* ===== Layout ===== */
.qv-container{
  display:flex;
  align-items:center;
}
.qv-details {
    padding-left: 15px;
}
/* LEFT IMAGE */
.qv-image-wrap {
    width: 800px;
    min-width: 360px;
    background: #fff1f1;
}
.qv-image{
  width:100%;
  height:100%;
  min-height:420px;
  background-size: auto !important;
  background-position:center;
  background-repeat: no-repeat;
}
quickview-image
/* RIGHT DETAILS */
.qv-details{
  flex:1;
  padding:28px;
  background:#fafafa;
  display:flex;
  flex-direction:column;
}

/* Title & text */
.qv-badge{
  display:inline-block;
  background:#ffecec;
  color:#e53935;
  padding:5px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  width:max-content;
  margin-bottom:10px;
}
.qv-title{
  margin:0 0 8px;
  font-weight:800;
  color:#111;
}
.qv-desc{
  font-size:14.5px;
  color:#555;
  line-height:1.6;
}

/* Meta */
.qv-meta{
  margin:18px 0;
  padding:14px;
  background:#fff;
  border-radius:12px;
  border:1px solid #eee;
  width: 350px;
}
.qv-meta-row{
  display:flex;
  justify-content:space-between;
  padding:8px 0;
  border-bottom:1px dashed #ddd;
}
.qv-meta-row:last-child{border-bottom:0}

/* Buttons */
.qv-actions{
  margin-top:auto;
  display:flex;
  gap:10px;
}

/* ===== Responsive ===== */
@media(max-width:768px){
  .qv-container{flex-direction:column}
  .qv-image-wrap{
    width:100%;
    min-width:100%;
  }
  .qv-image{min-height:260px}
}
.qv-modal button.mfp-close:before, .qv-modal button.mfp-close:active:before{
  display: none;
}

.subscribe-popup .mfp-close{
    background-color: red;
}
.page-title-extra-large h1 {
    font-size: 3.3rem;
    line-height: 3.3rem;
    margin-top: 80px;
}

.shop-box .shop-image a{
  display:block;
  position:relative;
  overflow:hidden;
  border-radius:14px; /* optional */
}

.shop-box .shop-image img{
  width:100%;
  height:auto;            
  object-fit:content;       
  object-position:center;  
  display:block;
}
.shop-boxed .shop-box {
border: none;
    background: linear-gradient(45deg, #ffffff, #ff45451c);
}

.shop-boxed .shop-box:hover {
    border: 2px solid #ffeaea;
    border:none !important;
}
.shop-boxed .shop-box .shop-image a {
    border-radius: 0px ! IMPORTANT;
}
.grid-item:hover .shop-footer,
.shop-box:hover .shop-footer{
    background: #b10016; /* red (Rani / Goldmark tone) */
}
/* smooth transition */
.shop-box{
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
}

/* hover ? lift up */
.shop-box:hover{
    transform: translateY(-8px);
    box-shadow: 0 18px 40px rgba(0,0,0,.15);
}
/* text color change on hover */
.grid-item:hover .shop-footer a,
.shop-box:hover .shop-footer a{
    color: #ffffff !important;
}
/* base � only normal menu links */
.navbar-nav .nav-item:not(.header-button) > .nav-link{
    position: relative;
    display: inline-block;
    padding-bottom: 6px;
}

/* underline */
.navbar-nav .nav-item:not(.header-button) > .nav-link::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #ffffff; /* white underline */
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s ease;
}

/* hover */
.navbar-nav .nav-item:not(.header-button) > .nav-link:hover::after{
    transform: scaleX(1);
}

/* active */
.navbar-nav .nav-item:not(.header-button) > .nav-link.active::after{
    transform: scaleX(1);
}



.navbar .navbar-nav li {
    padding: 10px 20px;
}
.navbar .navbar-nav .nav-link {
    padding: 0px;
    padding-bottom: 5px;
}

 .navbar-nav .nav-link.header-button::after{
   display: none;
 }
 li.nav-item.header-button a {
    padding: 10px 20px !important;
}

.shop-sidebar .shop-filter li a
{
    color: #000;
}


/*loading animation*/


/* Fullscreen loader */
#page-loader {
    position: fixed;
    inset: 0;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

/* Logo animation */
.loader-logo {
    width: 360px;
    animation: zoomPulse 2.5s ease-in-out infinite;
}

@keyframes zoomPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.6;
    }
    50% {
        transform: scale(1);
        opacity: 1;
    }
    100% {
        transform: scale(0.8);
        opacity: 0.6;
    }
}


/* ====== Conflict-proof Modal (only transform+opacity) ====== */
#teamModal.teamModal{
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;

  display: grid !important;
  place-items: center !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: opacity .22s ease !important;
}

#teamModal.teamModal.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#teamModal .teamModal__bg{
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0,0,0,.80) !important;
}

/* Popup box */
#teamModal .teamModal__box{
  position: relative !important;
  width: min(1200px, calc(100% - 24px)) !important;
  background: #fff !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.45) !important;

  transform: translate3d(0, 22px, 0) scale(.96) !important;
  opacity: 0 !important;

  will-change: transform, opacity !important;

  transition:
    transform .42s cubic-bezier(.22,.61,.36,1) !important,
    opacity .22s ease !important;
}

#teamModal.teamModal.is-open .teamModal__box{
  transform: translate3d(0,0,0) scale(1) !important;
  opacity: 1 !important;
}

/* Close button */
#teamModal .teamModal__x{
  position: absolute !important;
  top: 10px !important;
  right: 12px !important;
  width: 44px !important;
  height: 44px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: rgba(0,0,0,.08) !important;
  font-size: 30px !important;
  line-height: 44px !important;
  cursor: pointer !important;
}

/* Layout */
#teamModal .teamModal__grid{
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
}

#teamModal .teamModal__img img{
  width: 100% !important;
  height: 100% !important;
  min-height: 390px !important;
  object-fit: cover !important;
  display: block !important;
}

#teamModal .teamModal__info{
  padding: 28px !important;
}

#teamModal #teamModalTitle {
    margin: 0 0 0px !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #b10016 !important;
    line-height: 24px;
}
#teamModal #teamModalRole{
  margin: 0 0 14px !important;
  font-weight: 600 !important;
  color: #444 !important;
}
#teamModal #teamModalDesc{
  color: #333 !important;
  line-height: 1.3 !important;
  font-size: 15px !important;
  text-align: justify;
}

/* Mobile */
@media (max-width: 768px){
  #teamModal .teamModal__grid{ grid-template-columns: 1fr !important; }
  #teamModal .teamModal__img img{ min-height: 260px !important; }
}
.certificate .image-gallery-style-06 .gallery-box img {
    width: 100%;
    border: 15px solid #787878;
    border-style: groove;
}

/* 1st row � 2 smaller columns */
.overlap-height .row > .col:nth-child(1),
.overlap-height .row > .col:nth-child(2) {
    flex: 0 0 45%;
    max-width: 35%;
}

/* 2nd row � 3 equal columns */
.overlap-height .row > .col:nth-child(3),
.overlap-height .row > .col:nth-child(4),
.overlap-height .row > .col:nth-child(5) {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
}

/* center align first row */
.overlap-height .row {
    justify-content: center;
}

/* mobile */
@media (max-width: 991px) {
    .overlap-height .row > .col {
        flex: 0 0 100%;
        max-width: 100%;
    }
}
.world-shipment .grid.gutter-extra-large li {
    padding: 5px;
}