/* Import CSS */
@import url('global.css');
@import url('typography.css');
@import url('color.css');
@import url('component.css');

/* Variables */
:root{

    --header-height:16rem;
    --video-box-padding:19rem;

}
@media(width < 1200px){
    :root{

        --header-height:6rem; 
        --video-box-padding:12rem;
    
    }
}
@media(width < 992px){
    :root{

        --video-box-padding:8rem;
    
    }
}
@media(width < 768px){
    :root{

        --video-box-padding:5rem;
    
    }
}

body{font-family: var(--font-family); font-size: var(--font-size); color: var(--text-color); background-color: var(--light-grey); font-weight: 400;}

a {color:var(--primary); }

/* Header Start */
header.position-fixed{position: fixed; left: 0; top: 0; z-index: 9999; width: 100%; box-shadow: 0 .1rem .2rem rgba(0,0,0,10%); transition: var(--transition);}
header.position-fixed + *{margin-top: var(--header-height);}
header{min-height: var(--header-height); display: flex; flex-direction: column; background-color: white;}
.header-top{min-height: 5rem; background-color: var(--primary); display: flex; align-items: center; padding: 1rem 0;}
.header-top .container{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem var(--gutter);}
.header-top p{color: white; font-weight: 500;}
.header-links{display: flex; align-items: center; gap: .5rem var(--gutter);}
.header-links > a{color: white; font-weight: 500;}
.header-links > a:hover{text-decoration: underline;}
.header-content{flex: 1; padding: 1rem 0; display: flex; align-items: center;}
.header-content .container{display: flex; align-items: center; gap: 1rem var(--gutter);}
/* .logo img{max-width: 13.8rem;} */
.logo { width: 160px;  height: 100%;}
.logo img {width:100%;height:100%}
header nav{margin-left: auto;}
@media(width > 1199px){
    header nav:not(:last-child){margin-right: 4rem;}
}
@media(width < 1200px){
    .header-content .buttons{margin-left: auto;}  
    .logo img{max-width: 11.5rem;}
}
@media(width < 768px){
    .header-top {display: none;}
    .header-top .container{justify-content: center;}
    .header-top p{text-align: center;}
    header .cart-btn{display: none;}
}





/* Navigation Styles */
nav > ul{display: flex; list-style: none; max-width: 1400px; margin: 0 auto; padding: 0; height: 100%;}
nav > ul > li{position: static; font-size: var(--font-size);}
nav > ul > li > a{display: flex; align-items: center; gap: 0 .5rem; padding: 1rem 0; line-height: 1; font-size: var(--font-size); font-weight: 600; color: var(--primary); white-space: nowrap; text-decoration: none;}
nav > ul > li > a span{margin-left: 0.5rem; display: flex; align-items: center;}
nav > ul > li > a span svg{width: 12px; height: 12px; transition: transform 0.3s;}

/* Mega Menu Dropdown */
.menu-dropdown{position: absolute; top: 100%; left: 0; right: 0; width: 100%; background: white; box-shadow: 0 5px 5px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s, visibility 0.3s; list-style: none; z-index: 10000; padding-top: 60px; margin-top: 0; background-clip: padding-box;}
.menu-dropdown::before{content: ''; position: absolute; top: -50px; left: 0; right: 0; height: 60px; z-index: -1;}
.menu-dropdown-inner{max-width: 1300px; margin: -60px auto 0; padding: 3rem 2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem;}
.menu-dropdown-inner li{border: 0 !important;}
.mega-column{list-style: none;}
.mega-column-title{font-family: 'archia-semibold'; font-size: var(--h6); padding: 0 0 5px 0;}
.mega-column li{margin-bottom: 0.5rem;}
.mega-column a{display: block; padding: 0.75rem 1rem; text-decoration: none; border-radius: 0; transition: background-color 0.2s, color 0.2s, transform 0.2s; border-top: 1px solid var(--light-grey);}
.mega-column a:hover{transform: translateX(4px);}
.mega-featured{background: var(--primary); padding: 1.5rem; border-radius: 8px; color: white;}
.mega-featured p, .mega-featured a{color: white;}
.mega-featured a{text-decoration: underline;}

/* Backdrop overlay */
body::after{content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.4); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; z-index: 9998; pointer-events: none; transition: opacity 0.3s, visibility 0.3s;}
body.mega-menu-active::after{opacity: 1; visibility: visible;}

/* Desktop Styles (1200px and above) */
@media (width > 1199px){
    nav{display: block !important;}
    nav > ul{display: flex; align-items: center; gap: .5rem var(--gutter);}
    nav > ul > li{display: flex; height: 100%; align-items: center;}
    nav > ul > li:hover .menu-dropdown, .menu-dropdown:hover{opacity: 1; visibility: visible; pointer-events: auto;}
    nav > ul > li:hover > a span svg{transform: rotate(180deg);}
}

/* Mobile Styles (below 1200px) */
@media (width < 1200px){
    nav{position: absolute; left: 0; top: 100%; width: 100%; max-height: calc(100vh - var(--header-height)); overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; box-shadow: 0 4px 12px rgba(0,0,0,0.1); border-top: .1rem solid var(--light-grey); border-bottom: .1rem solid var(--light-grey); background-color: white; display: none;}
    nav > ul{flex-direction: column; padding: 0; margin: 0;}
    nav > ul > li{width: 100%; height: auto; display: block; border-bottom: 1px solid #e8e8e8; transition: background-color 0.2s ease;}
    nav > ul > li > a{min-height: 56px; padding: 16px 20px; padding-right: 60px; display: flex; align-items: center; font-size: 16px; font-weight: 600; color: var(--primary); background: white; transition: all 0.3s ease; position: relative;}
    nav > ul > li > a:active, nav > ul > li.active > a{background: #f8f9fa;}
    nav > ul > li > a span{width: 56px; height: 56px; background-color: var(--primary); display: flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 0; transform: none; transition: all 0.3s ease; cursor: pointer; pointer-events: auto; z-index: 100;}
    nav > ul > li > a span svg{pointer-events: none; transition: transform 0.3s ease; color: white;}
    nav > ul > li.active > a span svg{transform: rotate(180deg);}
    .menu-dropdown{position: static; width: 100%; box-shadow: none; padding: 0; margin: 0; background: #f8f9fa; display: none; border-left: 4px solid var(--primary); opacity: 1; visibility: visible; pointer-events: auto;}
    nav > ul > li:not(.active) .menu-dropdown{display: none;}
    nav > ul > li.active .menu-dropdown{display: block;}
    .menu-dropdown::before{display: none;}
    .menu-dropdown-inner{grid-template-columns: 1fr; padding: 0; gap: 0; margin: 0; max-width: 100%;}
    .mega-column{list-style: none; padding: 0; margin: 0;}
    .mega-column-title{font-size: 14px; padding: 12px 20px; background: var(--primary); color: white; margin: 0; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid rgba(255,255,255,0.2);}
    .mega-column a{padding: 14px 20px 14px 32px; font-size: 15px; border-top: none; border-bottom: 1px solid #e0e0e0; color: #333; min-height: auto; display: flex; align-items: center; background: white; transition: all 0.25s ease; position: relative;}
    .mega-column a:active{background: #f0f7ff; padding-left: 36px; color: var(--primary);}
    .mega-column a::before{content: "›"; position: absolute; left: 16px; font-size: 20px; color: var(--primary); opacity: 0; transition: all 0.25s ease;}
    .mega-column a:active::before{opacity: 1; left: 20px;}
    .mega-column li{display: block; margin-bottom: 0;}
    .mega-column li:last-child a{border-bottom: none;}
    .mega-featured{display: none;}
    body.mega-menu-active::after{display: none;}
    nav::-webkit-scrollbar{width: 6px;}
    nav::-webkit-scrollbar-track{background: #f1f1f1;}
    nav::-webkit-scrollbar-thumb{background: #ccc; border-radius: 3px;}
    nav::-webkit-scrollbar-thumb:hover{background: #999;}
        }












        





/* Footer Start */
footer{background-color: white;}
.footer-top{min-height: 10rem; padding: 1.5rem 0; display: flex; align-items: center; justify-content: center;}
.footer-top > *{text-align: center; color: var(--primary);}
.footer-content{padding: var(--gutter) 0;}
.footer-content > .row > * > :not(:first-child){margin-top: var(--gutter);}
.footer-links li:not(:last-child){margin-bottom: 1rem;}
.footer-links li{display: flex;}
.footer-links li a{display: flex; align-items: center; gap: 0 1rem; line-height: 1; font-size: var(--font-size); font-weight: 500; color: var(--text-color); white-space: nowrap;}
.footer-links li a:hover{color: var(--primary); text-decoration: underline;}

.footer-links.blogs {max-width:100%}
.footer-links.blogs li {max-width:100%}
.footer-links.blogs li a {display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}

.footer-content .row > :first-child{max-width: 40rem;}
.footer-content .row > :last-child{max-width: 32rem;}
.address li{font-size: var(--fs-sm); display: flex; line-height: 1;}
.address li:not(:last-child){margin-bottom: 1rem;}
.address li a{display: block; line-height: 1; color: var(--primary); font-weight: 600;}

.footer-logos{display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--gutter); padding: var(--gutter) 0;}
.footer-logos img{max-height: 8rem;}


@media(width < 1200px){
    .footer-content .row > :first-child, .footer-content .row > :last-child{max-width: 100%;}
    .footer-links-wrap > *{flex: 1;}
}
@media(width > 767px){
    .footer-links-wrap{display: flex; justify-content: space-between; margin: calc((var(--gutter) / 2) * -1);}
    .footer-links-wrap > *{padding: calc(var(--gutter) / 2);}
}
@media(width < 768px){
    .footer-links-wrap > :not(:last-child){margin-bottom: 1rem;}
    .footer-content  > .row > * > h6 + :not(:first-child){margin-top: 1rem;}
    .footer-content {text-align: center;}
    .footer-links li, .address li{justify-content: center;}
}


.footer-copyright {min-height:100px;}
.footer-copyright ul li {margin:0 10px }
.footer-copyright ul.footer-links li {margin-bottom: 0 !important;}



/* Footer End */

/* ===================== Home Page Start ===================== */

/* Stickers Sidebar Start */
.stickers-sidebar{background-color: white;}
.stickers-sidebar-banner figure img{width: 100%;}
.stickers-sidebar-content{padding: var(--gutter);}
.stickers-sidebar-content > :not(:last-child){margin-bottom: var(--gutter);}
.stickers-sidebar-content > h4:not(:last-child){margin-bottom: var(--gutter-sm);}
.stickers-sidebar-content p{font-size: var(--fs-sm);}
.stickers-list{border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
.stickers-list li:not(:last-child){border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
.stickers-list li a::before{width: 1.2rem; height: 1.2rem; content: ""; background-color: var(--light-grey);}
.stickers-list li a{min-height: 4rem; flex: 1; font-size: var(--font-size); font-weight: 600; color: var(--primary); display: flex; align-items: center; gap: 0 var(--gutter-sm); line-height: 1; padding: .5rem var(--gutter-sm);}
.stickers-list li a:hover::before{background-color: var(--primary);}
.stickers-list li a span{transition: var(--transition);}
.stickers-list li a:hover span{transform:translateX(.5rem);}
/* Stickers Sidebar End */

/* Image Article Start */
.image-article{background-color: white;}
.image-article figure{aspect-ratio: 2/1; overflow: hidden;}
.image-article figure img{object-fit:cover; width: 100%; height: 100%;}
.image-article-content{padding: var(--gutter);}
.image-article-content > h4:not(:last-child){margin-bottom: var(--gutter-sm);}
.image-article-content > :not(:last-child){margin-bottom: var(--gutter);}
@media(width > 767px){
    .image-article.image-article-horizontal{display: flex;}
    .image-article.image-article-horizontal > *{ width: 50%;}
}
/* Image Article End */

/* Article Quote Start */
.article-quote{background-color: var(--primary); min-height: 100%; display: flex; flex-direction: column;}
.article-quote-content{padding: var(--gutter); padding-left: 6rem; padding-top: 5rem; padding-right: 4rem; flex: 1; display: flex; align-items: center; position: relative;}
.article-quote-content::before, .article-quote-content::after{position: absolute; left: 0; top: 0; background-color: white; content: "";}
.article-quote-content::before{width: 3rem; height: 6rem;}
.article-quote-content::after{width: 6rem; height: 3rem;}
.article-quote-content h4{color: white; font-family: var(--font-regular); line-height: 1.4;}
.article-quote-content h4 a {color: var(--white)}
.article-quote-footer{display: flex;}
.article-quote-footer p{color: white;}
.article-quote-footer figure{width: 16rem; aspect-ratio: 1; overflow: hidden;} 
.article-quote-footer figure img{object-fit: cover; width: 100%; height: 100%;}
.article-quote-footer-content{flex: 1; padding-left: 4rem;}
@media(width < 992px){
    .article-quote-content{padding: var(--gutter); padding-left: 5rem; padding-top: 5rem;}
    .article-quote-footer-content{padding: 0 var(--gutter);}
    .article-quote-footer figure{width: 10rem;} 
    .article-quote-content h4{line-height: 1.2;}
}
@media(width < 768px){
    .article-quote-content::before{width: 2rem; height: 4rem;}
    .article-quote-content::after{width: 4rem; height: 2rem;}
}
@media(width < 481px){
    .article-quote-footer{flex-direction: column; gap: var(--gutter) 0;}
    .article-quote-footer figure{align-self: flex-end;}
}
/* Article Quote End */

/* Hero Section Start */
.hero{background-color: white; display: flex; justify-content: space-between; gap: var(--gutter);}
.hero-content{min-width: 30rem; max-width: 38rem; padding: 6rem 0 6rem var(--gutter);}
.hero-content h1{font-family: var(--font-semibold); color: var(--primary); position: relative;}
.hero-content h1::before{position: absolute; left: 0; top: 0; width: 1.6rem; aspect-ratio: 1; background-color: var(--primary); content: ""; transform:translate(-100%, -100%);}
.hero-content h1:not(:last-child){margin-bottom: var(--gutter-sm);}
.hero-content p{max-width: 32rem;}
.hero-content p:not(:last-child){margin-bottom: var(--gutter);}
.hero .hero-video-box{min-height: 100%;}
.hero-column{flex: 1;}
.hero-column .hero-video-box .hero-video{margin-left: auto;}
.hero-video-box{position: relative; isolation: isolate; padding: 0 calc(var(--video-box-padding) / 2) calc(var(--video-box-padding) / 2)  0;}
.hero-video-box::before{position: absolute; right: 0; bottom: 0; width: var(--video-box-padding); aspect-ratio: 1; background-color: var(--primary); content: ""; z-index: -1;}
.hero-video{width: 100%; max-width: 68rem; aspect-ratio:1.77/1; background: url('/img/layout/shopping/hero-video-bg.jpg') center center no-repeat; background-size: cover; position: relative;}
.hero-video .play-btn{position: absolute; left: 0; bottom: 0; z-index: 9;}
@media(width < 1200px){
    .hero{flex-direction: column;}
    .hero-content{padding: var(--gutter);}
    .hero-content, .hero-content p{max-width: 100%;}
    .hero-video{max-width: 100%;}
    .hero-content h1::before{width: 1rem;}
}

/* Main Features Start */
.main-features-wrap{padding: 1.5rem 0; display: flex; align-items: center; min-height: 6rem; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
.main-features-wrap::-webkit-scrollbar{width:0; height:0;}
.main-features-wrap::-webkit-scrollbar-thumb{background:transparent;}
.main-features-wrap::-webkit-scrollbar-track{background-color:transparent;}
.main-features{padding: 0 var(--gutter); flex-shrink: 0; display: flex; align-items: center; gap: 1rem var(--gutter); -webkit-overflow-scrolling: touch; margin: 0 auto;}
.main-feature{flex-shrink: 0; display: flex; align-items: center; gap: 0 .8rem; font-size: var(--font-size); font-weight: 500; line-height: 1;}
.main-feature i, .main-feature svg{color: var(--green);}
@media(width < 1200px){
    .main-features-wrap{min-height: 5rem;}   
}
/* Main Features End */

/* ===================== // Home Page End ===================== */

/* ===================== Order Page Start ===================== */

/* Page Hero Background */
.page-hero-bg{min-height: 22.6rem; background-repeat: no-repeat; background-position: center center; background-size: cover;}

/* Order Header */
.order-header{border-bottom: .4rem var(--bs-border-style) var(--primary);}
.order-content-header p a{color: var(--primary);}
.order-content-header p a:hover{text-decoration: underline;}

/* .order-header-content{display: grid; grid-template-columns: 1fr auto; gap: var(--gutter);} */
.order-header-content p{font-size: var(--fs-xs); display: flex; align-items: center; gap: 0 1rem; white-space: nowrap;}
.order-header-content p:not(:last-child){margin-bottom: .5rem;}
.order-header-content .btn{height: 100%; padding: 0 1.2rem;}
.order-footer .order-content-header p{max-width: 55rem;}

.order-tabs{display: flex; justify-content: space-between; border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color); background-color: white; overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none;}
.order-tabs li{flex: 1;}
.order-tabs li:not(:last-child){border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
.order-tabs li a{display: flex; align-items: center; justify-content: center; min-height: 6.4rem; font-size: var(--fs-sm); font-weight: 500; color: var(--text-color); padding: 1rem; white-space: nowrap;}
.order-tabs li a.active{background-color: #F5F5F5; font-weight: 600; color: var(--primary);}
@media(width < 1200px){
    .order-tabs li a {font-size: 1.3rem;}
    .order-tabs li a{min-height: 5rem;}
}
@media(width < 992px){
    .order-tabs{display: none !important;}
}

.quantity-number{width: calc(var(--xl) - 2rem); aspect-ratio: 1; background-color: var(--primary); position: absolute; left: 0; top: 0; color: white; display: grid; place-items: center;}
.order-content > .page-container > :not(:last-child){margin-bottom: var(--gutter);}
.order-content-header h5:not(:last-child){margin-bottom: 1rem;}
.order-content-header p{max-width: 66rem;}
.order-content-block p a{color: var(--primary);}
.order-content-block p a:hover{text-decoration: underline;}
.quantity-form{padding: var(--gutter); background-color: var(--primary-light);}
.quantity-form li:first-child select{max-width: 11.4rem;}
.quantity-form li:not(:last-child){margin-bottom: var(--gutter-sm);}
.quantity-form li{display: flex; align-items: center; gap: .5rem var(--gutter-sm);}
.quantity-form li div{flex: 1;}
.quantity-form li p{width: 8rem;}
.quantity-form select{border-radius: 0; border: 0; height: 3.2rem; padding: 0 .8rem; padding-right: 4rem; font-size: var(--fs-sm); width: 100%; background: url('/img/layout/shopping/quantity-select-arrow.png') calc(100% - 1.2rem) center no-repeat white; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.quantity-form select option span{color: var(--text-light-color);}
.box-arrow{width: 2.4rem; height: 100%; border: var(--bs-border-width) var(--bs-border-style) var(--primary); border-left: 0; margin-right: 2.4rem; position: relative;}
.box-arrow::after{position: absolute; left: 100%; top: 50%; transform:translateY(-50%); width: 100%; height: .2rem; background-color: var(--primary); content: "";}
.quantity-form{min-width: 43rem;}
.quantity-price-box{height: 50%; transform:translateY(-10px);}
@media(width < 1400px){
    .order-content{padding-left: calc(var(--xl) - var(--gutter));}
}
@media(width < 1200px){
    .quantity-form{min-width: auto;} 
}
@media(width < 768px){
    .quantity-price-box{height: auto; transform: none;}
    .quantity-form li{flex-direction: column; align-items: flex-start;}
    .quantity-form li div{width: 100%;}
    .order-content{padding-left: 0; padding-top: var(--xl);}
    .quantity-number h5{font-size: 1.8rem;}
}

.order-table-wrap{overflow-x: auto;}
table.order-table{width: 100%;}
table.order-table thead tr th:last-child, table.order-table tbody tr td:last-child{text-align: end;}
table.order-table thead tr th p{font-size: 1.4rem;}
table.order-table thead tr th, table.order-table tbody tr td{padding: 1rem var(--gutter-sm);}
table.order-table thead tr th p, table.order-table tbody tr td p{line-height: 1.2;}

table.order-table thead tr th{vertical-align: top;}
table.order-table thead tr th p{font-weight: 600; white-space: nowrap;}

table.order-table tbody{border: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
table.order-table tbody tr:not(:last-child){border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
table.order-table tbody tr td{vertical-align: middle;}
table.order-table tbody tr td p{font-size: var(--fs-sm);}
table.order-table tbody tr p span{font-size: 1.2rem; color: var(--text-light-color);}

.order-checkbox-box{background-color: var(--primary-light); padding: var(--gutter); max-width: 43rem;}
.order-checkbox-box.w-100{max-width: 100%;}
.order-checkbox-box li:not(:last-child){margin-bottom: var(--gutter-sm);}
.order-textarea-box{padding: var(--gutter); background-color: var(--primary-light);}
.order-textarea-box textarea{min-height: 24rem; width: 100%; border: 0; resize: none; padding: var(--gutter); font-size: var(--font-size); color: var(--text-color);}
.order-textarea-box textarea::placeholder{opacity: 1; color: var(--text-light-color);}
.order-textarea-box textarea:focus::placeholder{opacity: 0; color: transparent;}


.textarea-class{min-height: 24rem; width: 100%; border:var(--gutter) solid var(--primary-light); resize: none; padding: var(--gutter); font-size: var(--font-size); color: var(--text-color);}
.textarea-class::placeholder{opacity: 1; color: var(--text-light-color);}
.textarea-class:focus::placeholder{opacity: 0; color: transparent;}

.order-products .order-product{padding: var(--gutter) 0;}
.order-products .order-product:first-child{padding-top: 0;}
.order-products .order-product:last-child{padding-bottom: 0;}
.order-products .order-product:not(:last-child){border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);}
.order-product figure{width: 11.8rem;}
.order-product-content > :not(:last-child){margin-bottom: var(--gutter);}
.order-product-content > h6:not(:last-child){margin-bottom: var(--gutter-sm);}
.order-product-content-list li {display: flex; gap: .5rem var(--gutter-sm); font-size: var(--fs-sm);}
.order-product-content-list li p:first-child{white-space: nowarp; min-width: 19rem;}
.order-product-content-list li p{line-height: 1.2; font-size: var(--fs-sm);margin:0}
.order-product-content-list li:not(:last-child){margin-bottom: .5rem;}
.order-product-content-header{display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem var(--gutter-sm);}
.order-product-links{display: flex; align-items: center; flex-wrap: wrap; gap:var(--gutter-sm) var(--gutter);}
.order-product-links a{display: flex; align-items: center; gap: 0 .5rem; font-size: var(--fs-sm); color: var(--text-light-color); line-height: 1; position: relative;}
.order-product-links a:not(:last-child)::after{height: 2rem; position: absolute; right: calc((var(--gutter)/2) * -1); top: 50%; transform:translateY(-50%); width: var(--bs-border-width); background-color: var(--bs-border-color); content: "";}
@media(width < 576px){
    .order-product-content-list li{flex-direction: column;}
    .order-product-content-list li:not(:last-child){margin-bottom: var(--gutter-sm);}
    .order-product-content-list li p:first-child{min-width: auto;}
}

.order-summary ul li:not(:last-child){margin-bottom: 1rem;}
.order-summary ul li{display: flex; justify-content: space-between; gap: .5rem var(--gutter-sm);}
.order-summary ul li p{font-size: var(--fs-sm);margin:0}

.form .row{margin: -.5rem -1.2rem;}
.form .row > *{padding: .5rem 1.2rem;}
.form li .form-control{height: 4rem;}
.form li:not(:last-child){margin-bottom: .8rem;}
.form p.form-label{line-height: 1; font-size: var(--fs-sm);}

.video-container-wrap{max-width: 93.6rem; margin-inline: auto; position: relative; isolation: isolate;}
.video-container-wrap::before{position: absolute; right: 0; bottom: 0; width: 20%; aspect-ratio: 1; background-color: var(--primary); content: ""; transform:translate(50%, 50%); z-index: -1;}
.video-container{/*aspect-ratio: 1.7/1;*/ position: relative;overflow:hidden}
.video-container .play-btn{position: absolute; left: 0; bottom: 0; z-index: 9;}
@media(width < 992px){
    .video-container-wrap::before{width: 8rem;}
}

.page-testimonial-wrap{position: relative;}
.page-testimonial{position: relative;}
.page-testimonial-content h5, .page-testimonial-content p{color: white;}
.page-testimonial-content p a{color: white; text-decoration: underline;}
.page-testimonial-content p a:hover{text-decoration: none;}
.page-testimonial-content h5:not(:last-child){margin-bottom: var(--gutter);}
.page-testimonial-author{display: flex; align-items: center; gap: var(--gutter);}
.page-testimonial-author p{color: white;}
.page-testimonial{position: relative;}
.page-testimonial-footer{display: flex; justify-content: flex-end;}
.page-testimonial-author{transform:translateX(50%);}
.page-testimonial-author figure{position: relative; width: 12rem;}
.page-testimonial-author figure img{width: 100%; position: absolute; left: 0; top: 50%; transform:translateY(-50%);}
.page-testimonial-wrap::before, .page-testimonial-wrap::after{position: absolute; left: 0; top: 0; background-color: white; content: "";}
.page-testimonial-wrap::before{width: 3rem; height: 6rem;}
.page-testimonial-wrap::after{width: 6rem; height: 3rem;}
@media(width < 992px){
    .page-testimonial{padding-left: var(--xl);}
    .page-testimonial-footer{margin-top: var(--gutter-sm);}
    .page-testimonial-author{transform: none;}
    .page-testimonial-author figure{width: 8rem;}
    .page-testimonial-author figure img{position: static; transform: none;}
}
@media(width < 768px){
    .page-testimonial{padding-left: var(--gutter);}
    .page-testimonial-wrap::before{width: 2rem; height: 4rem;}
    .page-testimonial-wrap::after{width: 4rem; height: 2rem;}
}

.full-article{padding-top: var(--md); padding-bottom: var(--md);}
@media(width < 992px){
    .full-article{padding: var(--gutter);}
}

.article-row-wrap{max-width: 32rem;}
@media(width > 991px){
    .row.article-row{margin: calc(var(--gutter-sm) * -1) calc(var(--sm) * -1);}
    .row.article-row > *{padding: var(--gutter-sm) var(--sm);} 
}
@media(width < 768px){
    .article-row-wrap{padding: var(--gutter); max-width: 100%;}
}

.row.form-row{margin: -.8rem -.4rem;}
.row.form-row > *{padding: .8rem .4rem;} 



.dropdown-menu{background-color: white; box-shadow: 0 0 1.2rem rgba(0,0,0,40%);border:0;border-radius:0;padding:0 !important}
.dropdown-menu li:not(:last-child){border-bottom: .1rem solid var(--light-grey);}
.dropdown-menu li a{min-width: 20rem; display: flex; min-height: 4rem; display: flex; align-items: center; white-space: nowrap; background-color: white; font-size: var(--font-size); color: var(--text-color); padding: 1rem var(--gutter-sm);}
.dropdown-menu li a:hover{background-color: var(--primary-light);}

.primary-color {color: var(--primary);}



/* Custom tooltip styling */
.tooltip-inner {
  background-color: var(--primary);
  border-color: var(--primary);
  color: white;
  padding: 8px 10px; /* Padding */
  font-size: 14px; /* Font size */
  border-radius: 0px; /* Rounded corners */
}

.tooltip-arrow {
  color: var(--primary); /* Arrow color matches tooltip background */
}

.bottom-margin-list {margin-bottom:70px;}
.bottom-margin-list:last-child {margin-bottom:0;}

.table-striped>tbody>tr:nth-of-type(odd)>* {background-color: var(--light-grey); --bs-table-bg-type: var(--light-grey) !important;}
.table-striped .radio {padding-left:10px;padding-top:10px;}

ol.numbers li {list-style-type: number}

ul.checks {margin:0 0 20px 0}
ul.checks li {position:relative;padding:0 0 0 20px}
ul.checks li .fa-check { position:absolute;margin-left:-20px;margin-top:4px; color: var(--green);}


.round-profile {border-radius:50%}




/* in 4 stappen op typeplaatjes-op-afroep pagina */
.stepwizard-step p {    margin-top: 0px;    color:#000;}
.stepwizard-row {    display: table-row;}
.stepwizard {    display: table;    width: 100%;    position: relative;}
.stepwizard-row:before {    top: 14px;    bottom: 0;    position: absolute;    content:" ";    width: 100%;    height: 3px;    background-color: #e8edf0;    z-index: 0;}
.stepwizard-step {    display: table-cell;    text-align: center;    position: relative;}
.btn-circle {    width: 40px;    height: 40px;    text-align: center;    padding: 10px 0;    font-size: 14px;    line-height: 1.5;    border-radius: 20px;    background-color:#e8edf0;    display:inline-block;    color:#000;}