body{ background: #3E1F14; color:#F2E8D5; font-size:17px;  font-family: 'Quicksand', sans-serif;overflow-x: hidden;margin: 0;padding-top: 97px;}
html { scroll-behavior: smooth;}
h1,h2,h3,h4,h5,h6,p,ul{ margin: 0; padding:0; }
li{ list-style: none; }
a:hover{ text-decoration:none; }
a{text-decoration: none;cursor: pointer; color: unset;}
.ptb-100{padding: 100px 0px;}
.text-center {text-align: center !important;}
.justify-content-center { justify-content: center !important;}
.btn-primary { background-color: #B87333 ;border: none; border-radius: 25px; color: #f2e8d5;padding: 7px 15px !important;font-weight: bold;}
.navbar{background-color: #F2E8D5 !important}
.bg-white{background-color: #3E1F14 !important}
.border-bottom{border-bottom :2px solid #B87333 !important;}
.border-top{border-top :2px solid #B87333 !important;}
.btn.btn-primary:focus {outline: none;box-shadow: none;}
.form-control:focus{color: unset;background-color: unset;border-color: unset;box-shadow: unset;}
.form-control:focus{color: #f2e8d5;background-color:#2F170F;border-color: #F2E8D5;}
/***********header*************/
.top-header{background-color: #3E1F14;font-size: 14px;}
.navbar{background-color: #F2E8D5; z-index: 1000;}
.top-header ul li a {color: #F2E8D5;font-size: 14px; margin-right: 8px;}
.navbar-logo { height: 50px;}
.header{margin-top: 0;}
.navbar .container{max-width: 1500px !important;}
.header .navbar-nav .nav-link {font-weight: 500;color:#3E1F14;margin-right: 12px;padding: 9px 10px 4px !important; font-size: 14px;
  text-transform: uppercase;opacity: 0.7;}
.header .navbar-brand {margin-right: 40px;font-weight: 600; color: #3E1F14;}
.header .navbar-nav .nav-link:hover {color:#2F170F;font-family: 'SoDo Sans SemiBold' !important;opacity: 1;}
.header .navbar-nav .nav-item .active{color:#2F170F;font-family: 'SoDo Sans SemiBold' !important;opacity: 1;font-weight: 600;}
.header .navbar-nav .nav-item .border-bottom{border-bottom: 2px solid #3e1f14 !important;white-space: nowrap;}
.header .navbar-logo {width: 165px;height: auto;}
/***************video-banner*************/
.video-banner .parallaximg {position: relative; height: 100vh; overflow: hidden;}
.video-banner .parallaximg .img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
.video-banner .parallaximg .img video {position: absolute;top: 50%;left: 50%; min-width: 100%;min-height: 100%;transform: translate(-50%, -50%);
  object-fit: cover;z-index: 0;}
.video-banner .parallaximg .img.overlay::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: #2E2A2A;opacity: 0.4;z-index: 1;}
.video-banner .parallaximg .img .btn-primary {background-color: #B87333;border: none;border-radius: 25px;color: #f2e8d5;}
.video-banner .parallaximg .content {position: absolute;z-index: 1;top: 60%;left: 50%;transform: translate(-50%, -50%);text-align: center;padding-top: 100px;}
.video-banner h1 {font-size: 47px;font-weight: 500;font-family: 'Playfair Display', serif; line-height: 57px;color: #d1b18e;}
.video-banner p {font-family: 'Quicksand', sans-serif;font-size: 14px;line-height: 23px; color: #f2e8d5;}
/******************about-us***************/
.concepts-section h2 { font-size: 30px; color: #D1B18E; line-height: 1.3; }
.concepts-section p.lead { font-size: 16px; color: #F2E8D5; max-width: 800px; margin: 0 auto; line-height: 1.7; }
.concept-card {background: #2F170F; border: 1px solid #b87333; border-radius: 16px; padding: 25px; transition: all 0.4s ease; min-height: 180px;}
.concept-card:hover { transform: translateY(-5px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);}
.concept-card h4 { font-weight: 600; font-size: 20px; color: #b87333; }
.concept-card p { color: #F2E8D5; font-size: 15px; line-height: 1.6; }
@media (max-width: 768px) {
  .concepts-section h2 { font-size: 22px; }
  .concepts-section p.lead { font-size: 14px; }
  .concept-card { padding: 20px; }
}
.paragraph{font-size: 14px;}
/*.about-us .overlay{height: 83% !important;}*/
.animate-on-scroll { opacity: 0; transform: translateY(40px);transition: all 0.8s ease-out;}
.animate-on-scroll.active {opacity: 1; transform: translateY(0);}
@keyframes slideDown {
  from {opacity: 0;transform: translateY(-50px);}
  to {opacity: 1;transform: translateY(0);}
}
.about-info {position: relative;margin-top: -10vh;background: #3E1F14;padding: 100px 30px 60px;z-index: 2; color: #f8f8f8;text-align: center; overflow: hidden;}
.curve-top {position: absolute;top: -1px; left: 0;width: 100%;height: 100px;overflow: hidden;line-height: 0;}
.curve-top svg {position: relative;display: block;width: 100%;height: 100px;}
.about-content{margin-bottom: 30px;}
.about-content .section-title{ font-weight: 600;  font-size: 27px; color: #B87333;font-family: 'Quicksand', sans-serif;margin: 30px 0px 20px;}
.p-text{transition: border 0.3s ease-in, box-shadow 0.3s ease-in, background 0.3s, opacity 0.3s ease-in;color: #f2e8d5;
    font-family: 'Quicksand', sans-serif; font-weight: 400; font-size: 18px;line-height: 1.9em; text-align: center;}
/*************Logo-Scroll**************/
.logo-scroll .img-block { animation: scroll 20s linear infinite; width: 268px; text-align: center; }
.logo-scroll img { width: 80px;height: 80px; border-radius: 50%;background-color: #3e1f14;}
.logo-scroll .img-block h3{ display:inline-block; font-size:22px; font-style:italic; padding-left:4px; text-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
.logo-scroll .slide-track {width: 100%; display: flex; overflow: hidden;}
.logo-scroll .slider {background-color: #B87333;}
@keyframes scroll {0% {transform: translateX(0);} 100% {transform: translatex(-1000%)}}
/****************eco********************/
.eco-cup-section .coffee-heading{margin-bottom: 59px;}
.eco-cup-section .coffee-heading h2{border-bottom: none;}
.eco-cup-section {position: relative;display: flex;align-items: center;justify-content: center;text-align: center; margin: auto;
 background: url('../images/gallery-3.jpg') no-repeat center center;background-size: cover;background-attachment: fixed;
  color: white;z-index: 1; padding: 80px 20px;  min-height: auto;}
.eco-cup-section .overlay {position: relative; background-color: rgba(62, 31, 20, 0.7); width: 100%; padding: 50px 20px; z-index: 1;}
.eco-cup-section > .overlay > * { position: relative;z-index: 2;}
.eco-cup-section * {margin: 0;padding: 0; box-sizing: border-box;}
.eco-cup-section { font-family: 'Quicksand', sans-serif;height: 100%; width: 100%;padding: 50px;}
.eco-cup-header h1 {color: #f2f2f2;font-size: 36px;margin-bottom: 20px;animation: fadeInUp 1.8s ease-in-out; margin-top: 30px;}
.eco-cup-header p {color: #F1E3D3; font-size: 18px;margin-bottom: 40px; animation: fadeInUp 1.8s ease-in-out;}
.eco-cup-section .view-menu{background-color: #f2f2f2; border: none;border-radius: 25px;padding: 7px 19px; color: #2E2A2A;}
.eco-cup-benefits {display: flex; flex-wrap: wrap; justify-content: center; gap: 50px;
  animation: fadeInUp 1.8s ease-in-out; margin-bottom: 40px;}
.benefit-card { max-width: 200px;}
.benefit-card .coffee-img { width: 180px;height: 180px;border-radius: 50%; object-fit: cover; box-shadow: 0 2px 6px rgba(0,0,0,0.1); 
  transition: transform 0.3s ease;}
.benefit-card h3 { font-size: 18px;color: #F1E3D3;}
.benefit-card:hover {transform: translateY(-10px);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);}
.benefit-card.show {opacity: 1;transform: translateY(0);}
@keyframes fadeInUp {
  0% {opacity: 0; transform: translateY(100px);}
  100% {opacity: 1;transform: translateY(0);}
}
@keyframes fadeInUp {
  0% {opacity: 0;transform: translateY(100px);}
  100% {opacity: 1; transform: translateY(0); }
}
.eco-cup-benefits.in-view {animation: fadeInUp 1.2s ease-out forwards;}
/*********************menu**************/
.menu-text-center{text-align: center;padding-bottom: 40px;}
.index-menu .menu-text-center p{font-size: 14px;margin-top: 24px;color: #B87333;}
.menu-text-center h1{color: #B87333;}
.index-menu {padding: 60px 0;}
.index-menu .container {max-width: 1200px;margin: 0 auto; padding: 0 20px;}
.index-menu .col-sm-4 {margin-bottom: 30px;transition: transform 0.3s ease;animation: fadeInUp 1s ease forwards; opacity: 0;}
.index-menu .col-sm-4:nth-child(1) {animation-delay: 0.2s;}
.index-menu .col-sm-4:nth-child(2) {animation-delay: 0.4s;}
.index-menu .col-sm-4:nth-child(3) {animation-delay: 0.6s;}
.index-menu .menu-item{border-left: 1px solid #B87333;padding-left: 20px;}
.index-menu h2 {font-size: 22px;margin-bottom: 10px; color: #d1b18e;}
.index-menu p {color: #F1E3D3; font-size: 14px;line-height: 1.5;margin: 0px 0px 15px;}
.view-more {display: inline-flex; align-items: center; gap: 10px; padding: 7px 20px; border-radius: 25px;background-color: transparent;color: #F2E8D5;
  font-weight: bold; text-decoration: none; transition: background-color 0.3s ease, color 0.3s ease;}
.view-more .icon { display: flex; align-items: center; justify-content: center; background-color: #B87333; color:#F2E8D5;border-radius: 50%;width: 28px;height: 28px;
  transition: background-color 0.3s ease, color 0.3s ease;}
.view-more:hover {background-color: #B87333;color: #F2E8D5;}
.index-menu .menu-item img { width: 100%;height: 250px;border-radius: 8px; margin-top: 15px;transition: transform 0.3s ease;}
@keyframes fadeInUp {
  from {transform: translateY(40px); opacity: 0;}
  to {transform: translateY(0);opacity: 1;}
}
.row {display: flex; flex-wrap: wrap;margin: 0 -15px;}
.col-sm-4 { width: 100%; padding: 0 15px; box-sizing: border-box;}
/************************Trending**************Team*********contact****************/
.trending-slider img{background-color: #2F170F;}
.parallax-section{max-height: 100%;}
.contact { display: flex; flex-wrap: wrap;padding: 50px 0;margin: 40px 0px 70px;}
.contact .left, .contact .right { flex: 1; min-width: 300px; }
.contact .right { color: white; padding: 30px; }
.contact .brewing-title, .franchise-form .brewing-title { font-size: 22px; margin-bottom: 20px; }
.contact form label { display: block; margin: 10px 0 5px; font-size: 14px; color: #F2E8D5; }
.contact form input, .contact form textarea, .contact form select { font-size: 12px; width: 100%; padding: 10px; margin: 8px 0;
  border: 1px solid #D1B18E !important; border-radius: 5px; background-color: transparent; color: #F2E8D5; }
@media (max-width: 768px) { .contact { flex-direction: column; padding: 15px; }
  .contact .left { margin-bottom: 15px;}
  .contact .right { padding: 20px;} 
  .contact .brewing-title ,.franchise-form .brewing-title{ font-size: 20px; }
  .contact form label { font-size: 13px; }
  .contact form input, .contact form textarea, .contact form select { font-size: 14px;
   } .contact .whatsapp { bottom: 20px; right: 20px; }
 }
 @media (max-width: 480px) {
  .contact .brewing-title,.franchise-form .brewing-title { font-size: 18px; }
  .contact form label { font-size: 12px; }
  .contact form input, .contact form textarea, .contact form select { font-size: 14px;}
}
/******************text-banner****************/
.text-banner {background-color: #B87333;overflow: hidden; padding: 0; position: relative; text-transform: uppercase;}
.marquee_text {  white-space: nowrap; overflow: hidden;}
.marquee-wrapper { display: inline-block; animation: scrollLeft 60s linear infinite;}
.marquee span {margin-right: 80px;display: inline-block;line-height: 1;font-size: 47px;font-weight: 900;text-transform: uppercase;letter-spacing: 0;
  font-family: 'Avenir Next LT Pro Condensed', sans-serif;color: #3E1F14; -webkit-text-stroke: 1px #0e304f; opacity: 0.2;}
@keyframes scrollLeft {
  0% {transform: translateX(0%);}
  100% {transform: translateX(-50%);}
}
/****************contact-info********************/
.contact-section .col-lg-5{padding: 0px !important; border-radius: 14px !important;}
.contact-section .col-lg-6{background-color: #2F170F;}
.contact-section .row{gap: 50px;}
.contact-section .border{border: 4px double #B87333 !important; padding: 30px; border-radius: 59px;}
.contact-section p{font-size: 12px;margin: 10px 5px;}
.contact-title {font-weight: 700; font-size: 28px; margin-bottom: 20px;}
.map-responsive {position: relative; width: 100%; padding-bottom: 56.25%; height: 0;overflow: hidden; border-radius: 8px; box-shadow: 0 0 10px rgba(0,0,0,0.1);}
.map-responsive iframe {position: absolute; top: 0; left: 0;width: 100%;height: 100%; border: 0;}
.contact-section i { margin-right: 8px; color: #B87333;}
/*****************Footer*************/
.custom-footer {background-color:#3E1F14 ; position: relative; padding-top: 60px;
  font-family: 'Quicksand', sans-serif; text-align: center;}
.footer-curve svg { position: absolute; top: -1px; left: 0; width: 100%; height: 100px;}
.footer-content { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: flex-start;  padding: 40px 20px;}
.footer-brand .brand-logo {font-size: 35px; color: #d1b18e; margin-bottom: 20px;font-weight: 600;}
.social-icons a {background: #f2e8d5; color: #3F2A1D; font-size: 20px; padding: 10px;transition: 0.3s;
  margin: 5px; border-radius: 50%; display: inline-block; text-align: center;}
.social-icons a:hover { background: #B87333;  color: #f2e8d5;}
.footer-links { display: flex; flex-direction: column; gap: 10px;text-align: justify;}
.footer-links a { color: #f2e8d5; text-decoration: none; transition: 0.2s;}
.footer-links a:hover { color: #B87333;}
.footer-apps{display: flex;  flex-direction: column; gap: 4px; text-align: justify;}
.footer-apps img { max-width: 120px; margin: 10px 0;}
.footer-newsletter p { margin-bottom: 10px;text-align: justify;}
.newsletter-box { display: flex; align-items: center; border: 2px solid #f2e8d5; border-radius: 30px;padding: 8px 16px;
     background: rgb(47 23 15); margin-top: 15px;}
.newsletter-box i { color: #B87333; font-size: 18px; margin-right: 10px;}
.newsletter-box input { border: none; outline: none; background: transparent; color:#d1b18e;  flex: 1;}
.footer-bottom { background-color: #2F170F; color: #f2e8d5 ;padding: 20px 10px; font-size: 0.85rem;}
/*********************Mobile-Responsive*******************/
@media (max-width: 768px) {
  .header .navbar-nav .nav-link {font-size: 14px; padding: 10px 8px !important;margin-right: 0px;}
  .header .navbar-nav .nav-link {font-size: 14px;padding-left: 14px !important;padding-right: 14px !important;white-space: nowrap;}
  .nav-item .btn-primary{margin-top: 10px;}
  .header .navbar-brand { margin-right: 20px;}
  .header .navbar-logo { height: 40px;}
  .header .navbar-nav { display: flex;flex-direction: column;align-items: center; margin-top: 20px;}
  .header .navbar-toggler{margin-right: 20px;}
  .video-banner .parallaximg {height: 60vh;}
  .video-banner .parallaximg .img video { min-width: 100%; min-height: 100%;}  
  .video-banner .parallaximg .content { top: 60%;transform: translate(-50%, -50%); padding-top: 0;}
  .video-banner h1 {font-size: 28px;line-height: 35px;}
  .video-banner p {font-size: 12px;line-height: 18px;}
  .video-banner .parallaximg .img .btn-primary {padding: 10px 20px;font-size: 14px;}
  .paragraph{padding:0 34px;font-size: 12px;}
}
@media (max-width: 480px) {
  .video-banner h1 {font-size: 24px;}
  .video-banner p {font-size: 11px;}  
  .video-banner .parallaximg .img .btn-primary {padding: 8px 18px; font-size: 12px;}
  .header .navbar-nav .nav-link {font-size: 12px;padding: 8px 6px !important;}
}
@media (max-width: 768px) {
  .about-info { padding: 60px 20px 40px;  margin-top: -9vh;}
  .about-content .section-title {font-size: 15px;}
  .p-text { font-size: 14px;line-height: 1.7em;padding: 0 10px;}
  .about-us-btn { display: inline-block;margin-top: 20px; font-size: 16px; padding: 8px 16px;}
  .about-us-banner { height: 70vh; }
  .curve-top svg {height: 60px;}
  .btn-primary{font-size: 14px !important;}
  .index-menu h2{font-size: 18px;}
}
@media (max-width: 768px) {
  .eco-cup-benefits { justify-content: center;  gap: 30px 20px; }
  .benefit-card {  flex: 0 0 45%; max-width: 45%;}
}
@media (max-width: 768px) {
  .eco-cup-section {padding: 30px;background-position: center; background-size: cover;}
  .eco-cup-header h1 { font-size: 24px;margin-top: 20px;}
  .eco-cup-header p {font-size: 16px;line-height: 1.6;}  
  .benefit-card {max-width: 100%;}
  .benefit-card .coffee-img {width: 150px;height: 150px;}
  .benefit-card h3 {font-size: 16px; margin-top: 10px;}
  .view-menu { font-size: 16px;padding: 8px 16px;margin-top: 20px;}
}
@media (max-width: 480px) {
  .eco-cup-header h1 {font-size: 20px;}
  .eco-cup-header p {font-size: 15px;}
  .benefit-card .coffee-img {width: 130px; height: 130px;}
  .view-menu { font-size: 14px;padding: 7px 14px;}
}
@media (min-width: 768px) {.col-sm-4 {width: 33.3333%;}}
@media (max-width: 768px) {
  .marquee span {font-size: 35px;-webkit-text-stroke: 0; font-weight: 700;letter-spacing: 1px;}}
@media (max-width: 480px) {
  .marquee span {font-size: 30px;-webkit-text-stroke: 0;font-weight: 700;}}
@media (max-width: 768px) {
  .footer-content { flex-direction: column; align-items: center;padding: 30px 15px;text-align: center; gap: 30px;}
  .footer-brand .brand-logo {font-size: 28px; margin-bottom: 15px;}
  .social-icons a { font-size: 18px;padding: 8px;margin: 4px;}
  .footer-links,
  .footer-apps,
  .footer-newsletter {align-items: center;text-align: center;}
  .footer-links a,
  .footer-apps p,
  .footer-newsletter p {font-size: 16px;}
  .footer-apps img { max-width: 100px;}
  .newsletter-box {flex-direction: row; padding: 6px 12px; width: 100%; max-width: 300px;margin: 0 auto; }
  .newsletter-box i {font-size: 16px;}
  .newsletter-box input { font-size: 14px;}
  .footer-bottom { font-size: 0.75rem; padding: 15px 10px;}
}
@media (max-width: 780px) {
  .footer-brand .brand-logo { font-size: 24px;}
  .social-icons a { font-size: 16px; padding: 7px;}
  .footer-apps img { max-width: 90px;}
  .newsletter-box {padding: 5px 10px;}
  .newsletter-box input {font-size: 13px;}
  .eco-cup-section .coffee-heading h2{font-size: 18px !important;}
  .contact-section{padding-bottom: 0px !important;padding-top: 0px !important;}
  .contact-section .col-lg-6{margin-bottom: 0px !important;border-radius: 10px;}
  .contact-section .row{gap:34px;}
  .contact-section .brewing-title{text-align: center;}
  .contact-section p{}
  .navbar .container-fluid{max-width: 357px; margin: auto;}
}
@media (max-width: 768px){.logo-scroll .img-block { animation: scroll 20s linear infinite; width: 140px; text-align: center; }
.logo-scroll img { width: 50px;height: 50px; border-radius: 50%;}
}
/**************************************About-us-page********************/
.video-banner{max-width: 1230px; margin: auto;border-radius: 90%;}
.video-banner .parallaximg {position: relative;max-height: 500px;margin: 40px 0px;border-radius: 20px;}
.video-banner .parallaximg .img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.video-banner .parallaximg .img video { position: absolute; top: 0; left: 50%; min-width: 100%; min-height: 100%; transform: translate(-50%, -50%);
  object-fit: cover; z-index: 0; }
.video-banner .parallaximg .img.overlay::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; 
  background-color:#3E1F14; opacity: 0.6; z-index: 1; }
.video-banner .parallaximg .content { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;
  padding-top: 0px; width: 100%; }
.video-banner .parallaximg .content .row { display: flex; align-items: center; justify-content: center; }
.video-banner .animated-image { animation: slideInRight 1s ease-out; }
@keyframes slideInLeft {
  0% {transform: translateX(-100%); opacity: 0;}
  100% {transform: translateX(0);opacity: 1;}
}
@keyframes slideInRight {
  0% {transform: translateX(100%);opacity: 0;}
  100% {transform: translateX(0); opacity: 1;}
}
@media (max-width: 768px) {.img-fluid{width: 309px;}}
@media (min-width: 768px) { .video-banner .animated-text { padding-left: 130px;  text-align: left; }}
@media (max-width: 767.98px) {
  .video-banner .animated-text {padding-left: 0; text-align: center;}
  .product-grid .col-md-3 {padding-bottom: 15px;}
}
/****our-story****/
.our-story-img img { max-width: 100%; height: auto; transition: transform 0.3s ease; }
.our-story-img img:hover { transform: scale(1.02); }
.coffee-heading { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.coffee-heading h2 { font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 800;  margin: 0 !important;border-bottom:3px double #B87333;
    color: #D1B18E;}
.bean-icon { width: 35px; height: auto; }
.story .text-muted{color: #F2E8D5 !important;text-align: justify;margin: 12px 0px;}
/****parallax-section****/
.parallax-section { padding: 138px 0 147px 0; position: relative; max-height: 350px; background: url('../images/slider.jpg') no-repeat center center;
  background-size: cover; background-attachment: fixed; display: flex; align-items: center; justify-content: center; color: white; overflow: hidden; z-index: 1; }
.parallax-section { padding-bottom: 20vh;}
.parallax-section .overlay{background-color: rgba(62, 31, 20, 0.5); width: 100%;height: 100%; position: absolute; top: 0; left: 0;  z-index: 1;}

.stats-section { background: linear-gradient(135deg, #3E1F14, rgba(62, 31, 20, 0.6)), url('../images/home-banner.jpg');background-size: cover; background-position: center;
  color: #F2E8D5; text-align: center; border: 4px double #B87333; border-radius: 40px; max-width: 1230px; margin: 0px auto; padding: 80px 20px; min-height: 350px;
   display: flex; align-items: center; justify-content: center; position: relative; z-index: 2; }
.stats-section .container { width: 100%; }
.stat-number { background: linear-gradient(45deg, #b87333, #B87333); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.stat-number { font-size: 3rem; font-weight: 800; color: #B87333; transition: transform 0.3s ease; }
.stat-label { font-size: 1.2rem; font-weight: 600; color:#F2E8D5; text-transform: uppercase; font-family: 'Quicksand', sans-serif; margin-top: 10px; }
.stats-section { margin-top: -20vh; margin-bottom: -20vh;  }

.parallax-brewing .overlay { background-color: rgba(62, 31, 20, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }
.parallax-inner { position: absolute; top: 60%;  left: 50%; transform: translate(-50%, -50%); z-index: 2; color: #F2E8D5; 
  text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.parallax-inner p{color: #F2E8D5;}
.brewing-title { font-size: 3rem; font-weight: bold;font-family: 'Playfair Display', serif; margin-bottom: 30px;color: #D1B18E;}
.brewing-button { padding: 12px 24px; font-weight: bold; color: #F2E8D5; border: 1px solid #F2E8D5; text-transform: uppercase; text-decoration: none;
  transition: all 0.3s ease; }
.brewing-button:hover { background-color: #F2E8D5 !important; color: #B87333 !important; }
.btn-primary:hover{ background-color: #F2E8D5 !important; color: #B87333 !important; }
.parallax-brewing {padding: 138px 0 147px 0;  position: relative; min-height: 400px; background: url('../images/slider.jpg') no-repeat center center;
  background-size: cover; background-attachment: fixed; display: flex;  align-items: center; justify-content: center;
  color: #F2E8D5; overflow: hidden; z-index: 1;}
.parallax-brewing{padding-top: 20vh}
.product-card { background: #f2e8d5; padding: 15px; text-align: center; border-radius: 8px; transition: transform 0.3s ease;transition: box-shadow 0.3s ease;
box-shadow: 0 0 0 rgba(0, 0, 0, 0); border: 4px double #3E1F14;}
.product-card img { width: 100%; height: auto; border-radius: 4px; transition: transform 0.3s ease; }
.product-card h5 { margin-top: 15px; font-weight: bold; color: #3E1F14; }
.product-card:hover { transform: translateY(-10px); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15); }
.product-card:hover img { transform: scale(1.05); }

.aboutus-video-container { max-width: 100%; margin: 0 auto; }
.aboutus-video-container video { width: 100%; height: auto; display: block; }

.parallax-gallery{padding: 138px 0 147px 0;  position: relative; min-height: 200px; background: url('../images/banner-2.jpeg') no-repeat center center;
  background-size: cover; background-attachment: fixed; display: flex;  align-items: center; justify-content: center;
  color: #F2E8D5; overflow: hidden; z-index: 1;}
.parallax-gallery .overlay { background-color: rgba(62, 31, 20, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; }

.about-images { overflow: hidden; }
.image-container { display: flex; flex-direction: column; gap: 0px; overflow: hidden; padding: 0px; }
.about-images { overflow: hidden; }
.slider-row { position: relative; width: 100%; max-height: 260px; overflow: hidden;}
.slider-row:hover .slider-track { animation-play-state: paused;}
@keyframes scroll-left {0% { transform: translateX(0%); }100% { transform: translateX(-50%); }}
@keyframes scroll-right { 0% { transform: translateX(-50%); } 100% { transform: translateX(0%); }}
.slider-track { display: flex; gap: 35px; animation: scroll-left 30s linear infinite;}
.slider-row.reverse .slider-track { animation: scroll-right 30s linear infinite;}
.img-box { width: 250px;height: 200px; display: flex; justify-content: center; align-items: center;flex-shrink: 0;}
.img-box img {max-width: 100%; max-height: 100%; object-fit: contain; transition: transform 0.3s ease-in-out; border-radius: 20px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,0.35));}
.img-box img:hover {transform: scale(1.08); z-index: 2;}
@media (max-width: 768px) {
  .stat-number { font-size: 30px; }
  .stat-label { font-size: 16px; }
  .our-story-img img{max-width: 70%;}
  .coffee-heading h2 { font-size: 20px; }
  .bean-icon { width: 30px; }
  .text-muted{font-size: 14px;margin: 15px 6px;}
  .product-card h5{font-size: 16px;}
  .brewing-title { font-size: 18px;margin-bottom: 15px !important;}
  .parallax-brewing .parallax-inner{top: 70%;}
  .slider-track img { width: 24vw; height: 98px; }
}
@media (hover: none) { .slider-track img:active { transform: scale(1.08); } }
@media (max-width: 768px) {
  .contact-info-section .brewing-title{font-size: 19px;}
  .c-1{padding: 0px 34px;}
  .franchise-form{display: none;}
  .promo-content .brewing-title{font-size: 36px;}
  .promo-content p{font-size: 15px;}
  .franchise-open-form.parallax-section{min-height: 570px;}
  .promo-content a {display: block !important;}
  .ready-cafe{width: 170px;}
  .brewing-title{font-size: 25px !important;}
  .franchise img{display: none;}
  .usp-box h5 {font-size: 14px !important;}
  .ready-cafe{width: 170px;}
}
@media (max-width: 768px) {
  .top-header{display: none;}
  .team-member p{padding: 0 34px;}
  .trending-slider{padding-left: 34px; padding-right: 34px;}
  .team-member .text-muted{margin-bottom: 10px;}
  body{padding-top: 37px;}
}
/********************usp-of-franchise*********************/
.usp-box h5{font-size: 17px;}
.usp-box {font-size: 14px;color: #f2e8d5;height: 100%;display: flex;align-items: center; justify-content: center; 
  text-align: center;min-height: 130px;font-weight: 600; border-radius: 12px;letter-spacing: 2.5px;}
.usp-1 { background-color: #3e1f14 ; }
.usp-2 { background-color: #704214 ; }
.usp-3 { background-color: #a67b5b ; }
.usp-4 { background-color: #b87334 ; }
.franchise .brewing-title{font-size: 30px;margin: 0 !important}
.franchise-cta { position: relative;padding: 50px 0;}
.franchise-cta h2 { font-size:30px;}
.franchise-points li { font-size: 1.1rem; font-weight: 500; margin: 12px 0; display: flex; gap: 12px; text-align: left;}
.franchise-points li i { color: #b87334; font-size: 1.3rem; }
.btn-primary:hover { background-color: #d49858; transform: translateY(-3px);}
@media (max-width: 991px) {
  .franchise-cta { background-attachment: scroll; }
  .franchise-cta .row { text-align: center; }
  .franchise-cta img { max-width: 100%; }
}
.logo-details {background-color: #3e1f14;padding: 34px 16px;border-radius: 10px;}
.form-control:focus{color: unset;background-color: unset;border-color: unset;box-shadow: unset;}
.form-control:focus{color: #f2e8d5;background-color:#2F170F;border-color: #F2E8D5;}
.brew-t , .display-6{color: #D1B18E;}
.promo-content .brewing-title {font-size: 46px; margin-top: 11px;}
/**************franchise-popup*****************/
.franchise-form { background:#3e1f14; color: #fff;border-radius: 10px;}
.franchise-form input,
.franchise-form textarea { background: #2f170f; border: none;color: #f2e8d5;}
.franchise-form input::placeholder,
.franchise-form textarea { color: #f2e8d5;font-size: 12px;}
.about-info .p-text{max-width: 800px;margin: auto;}
.promo-content a{display: none;}
.franchise-popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(15, 10, 8, 0.7); display: none;
   justify-content: flex-end; align-items: stretch; z-index: 9999; }
.franchise-content { background: #3E1F14; color: #fff; width: 400px; max-width: 90%; height: 100%; padding: 40px 30px; 
  position: relative; overflow-y: auto; animation: slideInRight 0.4s ease; }
@keyframes slideInRight { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.close-btn { position: absolute; top: 15px; right: 20px; font-size: 30px; color:#B87333; background: none; border: none; cursor: pointer; line-height: 1;}
.form-control{border-color: unset;border: unset;}
.franchise-content .form-control { width: 100%; background: #2F170F ;border-radius: 5px; color: #F2E8D5; padding: 10px 12px; font-size: 14px;}
.form-control::placeholder { color: #c8b8a2; }
.franchise-content::-webkit-scrollbar { width: 6px; }
.franchise-content::-webkit-scrollbar-thumb { background: #a88c6f; border-radius: 3px; }
/*****trending-slider***
.trending-slider { color: #F2E8D5; padding-top: 60px; padding-bottom: 60px; }
.trending-slider img { width: 100%; height: 250px; object-fit: cover; border-radius: 10px; }
.swiper { max-width: 995px; margin: 40px auto auto; padding-bottom: 40px; }
.slider-caption { font-size: 1.1rem; font-weight: 600; margin-top: -10px; padding: 30px 0; background-color: #2F170F; color: #F2E8D5; }
.swiper-button-next, .swiper-button-prev { background-color: #B87333; width: 34px; height: 34px; border-radius: 50%; top: 50%;
  transform: translateY(-50%); z-index: 20; opacity: 0.9; transition: opacity 0.3s ease; }
.swiper-button-next:hover, .swiper-button-prev:hover { opacity: 1; }
.swiper-button-next::after, .swiper-button-prev::after { font-size: 14px; color: #F2E8D5; }
@media (min-width: 992px) {
  .swiper-button-prev { left: 10px;}
  .swiper-button-next { right: 10px; }
}
@media (max-width: 991px) {
  .swiper-button-prev { left: 10px; }
  .swiper-button-next { right: 10px; }
}
.swiper-pagination-bullet { background: #D1B18E; opacity: 0.6; }
.swiper-pagination-bullet-active { background: #B87333; opacity: 1; }
.swiper-slide img:hover { transform: scale(1.03); transition: transform 0.3s ease-in-out; }
@media (max-width: 767px) {
  .slider-caption { font-size: 14px; padding: 20px 0; }
  .trending-slider { margin-bottom: 0px !important; } 
}**/
/***** TRENDING SECTION *****/

.trending-slider {
    color: #F2E8D5;
    padding-top: 60px;
    padding-bottom: 60px;
}

.trending-slider .trending-item {
    width: 100%;
    text-align: center;
    overflow: hidden;
}

.trending-slider img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px 10px 0 0;
    display: block;
    transition: transform 0.3s ease-in-out;
}


/* Image hover */

.trending-slider .trending-item:hover img {
    transform: scale(1.03);
}


/* Caption */

.trending-slider .slider-caption {
    font-size: 1.1rem;
    font-weight: 600;
    margin: -1px 0 0;
    padding: 30px 10px;
    background-color: #2F170F;
    color: #F2E8D5;
    border-radius: 0 0 10px 10px;
    min-height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =====================================
   TABLET
===================================== */

@media (max-width: 991px) {

    .trending-slider {
        padding-top: 50px;
        padding-bottom: 50px;
    }

}


/* =====================================
   MOBILE
===================================== */

@media (max-width: 767px) {

    .trending-slider {
        padding-top: 40px;
        padding-bottom: 40px;
        margin-bottom: 0 !important;
    }

    .trending-slider img {
        height: 220px;
    }

    .trending-slider .slider-caption {
        font-size: 14px;
        padding: 20px 5px;
        min-height: 60px;
    }

}
/********************Menu-page***********************/
.highlight-box-section{position: relative;padding:50px 0px 20px ;}
.highlight-box {background: rgba(63, 27, 17, 0.9);border: 1px solid #B87333; border-radius: 12px; color: #F2E8D5;font-size: 16px;
  line-height: 1.6; box-shadow: 0 0 10px rgba(184, 115, 51, 0.2); max-width: 90%; margin: 0 auto 40px; padding: 20px 25px;}
.menu-tab:focus { outline: none; box-shadow: none; }
.menu-tab-grid { display: flex; overflow-x: auto; gap: 15px; scroll-behavior: smooth; padding-bottom: 10px; }
.menu-tab-grid::-webkit-scrollbar { height: 4px; max-width: 100px; }
.menu-tab-grid::-webkit-scrollbar-track { background: #2F170F; }
.menu-tab-grid::-webkit-scrollbar-thumb { background: #B87333; border-radius: 4px; }
.menu-tab { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; background: transparent;
  border: 1px solid transparent; color: #BFAE9A; font-size: 15px; font-weight: 500; padding: 10px 18px;
  border-radius: 8px; transition: all 0.3s ease; cursor: pointer; white-space: nowrap; }
.menu-tab i { font-size: 20px; margin-right: 8px; opacity: 0.7; }
.menu-tab.active { background-color: #2F170F; color: #D1B18E; border: 1px solid #B87333; }
.menu-tab:hover { background: rgba(184,115,51,0.15); color: #D1B18E; }
.menu-tab:hover i { opacity: 1; }
.menu-card { background: #2F170F; border: 1px solid #B87333; border-radius: 12px; overflow: hidden;
  transition: transform 0.3s ease; height: 100%; }
.menu-card:hover { transform: translateY(-5px); }
.menu-card img { width: 100%; height: 180px; object-fit: cover; border-bottom: 1px solid #B87333; }
.menu-card-body { padding: 12px; }
.menu-card-body h5 { color: #D1B18E; font-weight: 600; font-size: 16px; }
.menu-card-body p { color: #F2E8D5; font-size: 13px; margin-bottom: 6px; }
.price { display: inline-block; color: #B87333; font-weight: 600; font-size: 14px; }
.menu-pane { display: none; }
.menu-pane.active { display: block; }
.menu-pane .row { row-gap: 25px; } 
@media (max-width: 768px) {
  .menu-card img { height: 150px; }
  .menu-card-body h5 { font-size: 14px; }
  .menu-card-body p { font-size: 12px; } 
}
/****************contact-us**********************/
.contact-info-section .brewing-title{color: #B87333; font-size: 23px; margin-bottom: 0px;}
.contact-card .icon{color: #b87333;font-size:32px;}
.contact-card{background:#2F170F; border-radius:12px;}
.contact-card h5{color: #d1b18e;}
.contact-card p{font-size: 14px;}
.contact-inner {display: flex; flex-wrap: wrap;align-items: center; gap: 30px;}
.contact-inner .left,
.contact-inner .right {flex: 1; min-width: 359px;}
.contact-inner .left img { width: 100%; height: auto;border-radius: 8px;}
.contact-inner .right {background-color:#2f170f; border-radius: 36px;padding: 30px;}
@media (max-width: 768px) {.contact-inner { flex-direction: column;}}
.support-boxes {display: flex; flex-wrap: wrap;gap: 30px;}
.support-card {background: #F2E8D5; color: #2f170f; border-radius: 10px; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
  padding: 25px 30px; width: 260px; transition: transform 0.3s ease, box-shadow 0.3s ease;}
.support-card:hover { transform: translateY(-5px); box-shadow: 0 6px 15px rgba(0, 0, 0, 0.25);}
.support-number {color:#b87333;font-weight: 700; margin-right: 8px; font-size: 1.1rem;}
.support-card p { display: inline; font-size: 1rem; font-weight: 500;}
@media (max-width: 768px) {
  .franchise-title { text-align: center;margin-bottom: 20px;}
  .support-card { width: 100%;
    text-align: center;
  }
}
/*********************franchise-page**********************/
.franchise-section .brewing-title{font-size: 30px;margin-bottom: 30px;}
.franchise-section .p-text{font-size: 15px;}
.franchise-card {background: #2F170F;border: 1px solid #b87333;border-radius: 12px; padding: 20px;width: 100%;
  text-align: center;transition: all 0.3s ease;}
.franchise-card:hover { background: rgba(255, 255, 255, 0.2);transform: translateY(-6px);}
.franchise-card i {font-size: 30px;color: #b87334; margin-bottom: 12px;}
.franchise-card h5 {font-weight: 600;font-size: 16px;color: #F2E8D5; line-height: 1.5;}
.franchise-section {background: #3E1F14; position: relative;overflow-x: clip;width: 100%;}
.franchise-section .container {max-width: 100%; padding-left: 15px; padding-right: 15px; overflow: visible;}
.franchise-section .row { margin-left: 0; margin-right: 0;}
.franchise-section .col-lg-5,
.franchise-section .col-lg-7 {padding-left: 15px;padding-right: 15px;}
@media (max-width: 768px) {
  .franchise-section .row { margin: 0;}
  .franchise-section .col-lg-5,
  .franchise-section .col-lg-7 {padding-left: 10px;padding-right: 10px;}
}
/**************************************gallery-page**********************/
/**************************************
            GALLERY PAGE
**************************************/

.gallery-card {
    position: relative;
    overflow: hidden;
    border-radius: 14px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

.gallery-card img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
    border-radius: 14px;
}

.gallery-card:hover img {
    transform: scale(1.08);
}


/* OVERLAY */

.gallery-card .overlay {
    position: absolute;
    inset: 0;
    background: rgba(47, 23, 15, 0.75);

    opacity: 0;

    transition: opacity 0.4s ease;

    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-card:hover .overlay {
    opacity: 1;
}

.gallery-card .text {
    color: #D1B18E;
    font-weight: 600;
    font-size: 1.1rem;
    text-transform: capitalize;
}


/* =================================
        IMAGE LIGHTBOX
================================= */

.gallery-lightbox {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(0, 0, 0, 0.92);

    display: none;

    align-items: center;
    justify-content: center;

    padding: 40px;

    z-index: 99999;
}


/* SHOW */

.gallery-lightbox.active {
    display: flex;
}


/* LARGE IMAGE */

.gallery-lightbox img {
    max-width: 90%;
    max-height: 90vh;

    object-fit: contain;

    border-radius: 8px;

    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5);
}


/* CLOSE BUTTON */

.gallery-lightbox-close {
    position: absolute;

    top: 25px;
    right: 30px;

    width: 45px;
    height: 45px;

    border: none;
    border-radius: 50%;

    background: #B87333;
    color: #F2E8D5;

    font-size: 22px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;
}

.gallery-lightbox-close:hover {
    background: #F2E8D5;
    color: #B87333;

    transform: scale(1.08);
}


/* MOBILE */

@media (max-width: 767px) {

    .gallery-card img {
        height: 220px;
    }

    .gallery-lightbox {
        padding: 20px;
    }

    .gallery-lightbox img {
        max-width: 95%;
        max-height: 85vh;
    }

    .gallery-lightbox-close {
        top: 15px;
        right: 15px;

        width: 40px;
        height: 40px;

        font-size: 18px;
    }

}
/*************************************Youtube-section************************/
/* =========================================================
   CRAFTSMEN YOUTUBE SECTION
========================================================= */

.craftsmen-youtube-section {
    background: #2F170F;
    padding: 75px 0 85px;
    overflow: hidden;
}


/* =========================================================
   HEADING
========================================================= */

.craftsmen-youtube-heading {
    margin-bottom: 40px;
}

.craftsmen-youtube-heading h5 {
    color: #B87333;
    font-family: 'Quicksand', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.craftsmen-youtube-heading h2 {
    color: #F2E8D5;
    font-family: 'Playfair Display', serif;
    font-size: 38px;
    font-weight: 700;
    margin: 0;
}


/* =========================================================
   CAROUSEL
========================================================= */

.craftsmen-video-carousel {
    position: relative;
    width: 100%;
    padding: 0 45px;
}


/* VIEWPORT */

.craftsmen-video-viewport {
    width: 100%;
    overflow: hidden;
}


/* TRACK */

.craftsmen-video-track {
    display: flex;
    gap: 20px;
    transition: transform 0.6s ease;
    will-change: transform;
}


/* =========================================================
   VIDEO CARD
========================================================= */

.craftsmen-video-card {
    flex: 0 0 calc((100% - 60px) / 4);
    min-width: 0;
}


/* VIDEO */

.craftsmen-video {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #1F0E09;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
}


/* IMAGE */

.craftsmen-video img {
    width: 100%;
    height: 250px;
    display: block;
    object-fit: cover;
    transition: transform 0.5s ease;
}


/* HOVER */

.craftsmen-video:hover img {
    transform: scale(1.05);
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.craftsmen-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    width: 60px;
    height: 60px;

    border: none;
    border-radius: 50%;

    background: #B87333;
    color: #F2E8D5;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 28px;

    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.35);

    transition: all 0.3s ease;
}


.craftsmen-play-btn:hover {
    background: #F2E8D5;
    color: #B87333;

    transform: translate(-50%, -50%) scale(1.12);
}


/* =========================================================
   PREVIOUS / NEXT BUTTONS
========================================================= */

.craftsmen-video-prev,
.craftsmen-video-next {

    position: absolute;

    top: 50%;
    transform: translateY(-50%);

    width: 40px;
    height: 40px;

    border: none;
    border-radius: 50%;

    background: #B87333;
    color: #F2E8D5;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 10;

    transition: all 0.3s ease;
}


.craftsmen-video-prev {
    left: 0;
}


.craftsmen-video-next {
    right: 0;
}


.craftsmen-video-prev:hover,
.craftsmen-video-next:hover {

    background: #F2E8D5;
    color: #B87333;

    transform: translateY(-50%) scale(1.08);
}


.craftsmen-video-prev i,
.craftsmen-video-next i {
    font-size: 14px;
}


/* =========================================================
   YOUTUBE MODAL
========================================================= */

.craftsmen-youtube-modal {

    position: fixed;

    inset: 0;

    width: 100%;
    height: 100%;

    background: rgba(20, 8, 4, 0.92);

    display: none;

    align-items: center;
    justify-content: center;

    padding: 20px;

    z-index: 99999;
}


.craftsmen-youtube-modal.active {
    display: flex;
}


/* MODAL CONTENT */

.craftsmen-youtube-modal-content {

    position: relative;

    width: min(900px, 95%);

    background: #2F170F;

    padding: 15px;

    border-radius: 14px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}


/* VIDEO FRAME */

.craftsmen-youtube-frame {

    position: relative;

    width: 100%;

    aspect-ratio: 16 / 9;

    overflow: hidden;

    border-radius: 10px;
}


.craftsmen-youtube-frame iframe {

    width: 100%;
    height: 100%;

    border: none;

    display: block;
}


/* CLOSE BUTTON */

.craftsmen-youtube-close {

    position: absolute;

    right: -15px;
    top: -15px;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

    background: #B87333;
    color: #F2E8D5;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    font-size: 18px;

    z-index: 20;

    transition: all 0.3s ease;
}


.craftsmen-youtube-close:hover {

    background: #F2E8D5;
    color: #B87333;

    transform: scale(1.08);
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .craftsmen-youtube-section {
        padding: 60px 0 70px;
    }

    .craftsmen-video-card {

        flex: 0 0 calc((100% - 40px) / 3);

    }

    .craftsmen-video img {
        height: 230px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .craftsmen-youtube-section {

        padding: 50px 0 60px;

    }


    .craftsmen-youtube-heading {

        margin-bottom: 30px;

    }


    .craftsmen-youtube-heading h5 {

        font-size: 15px;

    }


    .craftsmen-youtube-heading h2 {

        font-size: 28px;

    }


    .craftsmen-video-carousel {

        padding: 0 35px;

    }


    .craftsmen-video-track {

        gap: 12px;

    }


    .craftsmen-video-card {

        flex: 0 0 calc((100% - 12px) / 2);

    }


    .craftsmen-video img {

        height: 190px;

    }


    .craftsmen-play-btn {

        width: 46px;
        height: 46px;

        font-size: 21px;

    }


    .craftsmen-video-prev,
    .craftsmen-video-next {

        width: 30px;
        height: 30px;

    }


    .craftsmen-video-prev i,
    .craftsmen-video-next i {

        font-size: 11px;

    }


    .craftsmen-youtube-modal {

        padding: 15px;

    }


    .craftsmen-youtube-modal-content {

        width: 100%;

        padding: 8px;

    }


    .craftsmen-youtube-close {

        right: -8px;
        top: -8px;

        width: 34px;
        height: 34px;

        font-size: 15px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .craftsmen-video img {

        height: 160px;

    }

}