@import url('https://fonts.googleapis.com/css2?family=K2D:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300&family=Fredoka:wght@300&family=Montserrat:wght@100&family=Playfair+Display&family=Poppins:wght@100&family=Rouge+Script&family=Rubik:wght@300&family=Space+Mono&family=Syne&display=swap');
.font-1{font-family:'K2D',sans-serif!important}
.font-2{font-family:'Comfortaa',sans-serif!important}
.font-3{font-family:'Fredoka',sans-serif!important}
.font-4{font-family:'Quicksand',sans-serif!important}
.font-5{font-family:'Montserrat',sans-serif!important}
.font-6{font-family:'Poppins',sans-serif!important}
.font-7{font-family:'Kanit',sans-serif!important}
.font-8{font-family:'Playfair Display',serif!important}
.font-9{font-family:'Rubik',sans-serif!important}
.font-10{font-family:'Space Mono',monospace!important}
.font-11{font-family:'Syne',sans-serif!important}
a { color: inherit !important; text-decoration: none !important; }
a:focus text, a:hover { text-decoration: none !important; }
.text-brand { color:var(--brand-color) !important; }
.text-modal { color:var(--card-modal-color) !important; }
.text-bg { color:var(--main-bg-color) !important; }
.bg-bg { background:var(--main-bg-color) !important; }
.bg-modal { background:var(--card-modal-color) !important; }
.bg-brand { background:var(--brand-color) !important; }

input, textarea { outline: none; border: none; }
input::placeholder,
textarea::placeholder {
    color: rgb(88, 90, 87) !important;
    opacity: 1;
}
.tooltip { font-size: 0.64rem; }
/* MAIN PAGE */
body { transition: 0.5s; }
body.night { background: #000; }
@media only screen and (min-width: 992px){ .carousel-img{ height: 100%; -webkit-clip-path: polygon(0 0, 96% 0, 100% 100%, 0% 100%); clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%)} .taa{ width:960px}}
@media only screen and (max-width:600px){ .center-sm{ text-align: center !important} .carousel-img{ height: 200px} .taa{ width:350px}}
.taa2{ width:470px}
#myCarousel{ margin-top: -33px !important; position: relative; z-index: 1; background-size: cover;}
.play_bg{ background-image: linear-gradient(rgba(70, 130, 180, .8), rgba(80, 43, 43, 0.8)), url(imgs/plays.gif); background-size: cover; background-position: center}
#myCarousel .carousel-item .mask{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-attachment: fixed}
#myCarousel h4{ font-size: 50px; margin-bottom: 15px; color: #FFF; line-height: 100%; letter-spacing: 0.5px; font-weight: 600}
#myCarousel p{ font-size: 18px; margin-bottom: 15px; color: #d5d5d5}
#myCarousel .carousel-item a{ background: #F47735; font-size: 14px; color: #FFF; padding: 13px 32px; display: inline-block}
#myCarousel .carousel-item h4{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft}
#myCarousel .carousel-item p{ -webkit-animation-name: slideInRight; animation-name: slideInRight}
#myCarousel .carousel-item a{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp}
#myCarousel .carousel-item .mask img{ -webkit-animation-name: slideInRight; animation-name: slideInRight; display: block; height: auto; max-width: 100%}
#myCarousel h4,
#myCarousel p,
#myCarousel a,
#myCarousel .carousel-item .mask img{ -webkit-animation-duration: 1s; animation-duration: 1.2s; -webkit-animation-fill-mode: both; animation-fill-mode: both}
#myCarousel .container{ max-width: 1430px}
#myCarousel .carousel-item{ min-height: 550px; }
.carousel-control-next,
.carousel-control-prev{ height: 34px; width: 34px; padding: 8px; top: 50%; margin-top: 7px; bottom: auto; transform: translateY(-50%); background-color: #f47735}
.carousel-item{ position: relative; display: none; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; transition: -webkit-transform .6s ease; transition: transform .6s ease; transition: transform .6s ease, -webkit-transform .6s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-perspective: 1000px; perspective: 1000px}
.carousel-fade .carousel-item{ opacity: 0; -webkit-transition-duration: .6s; transition-duration: .6s; -webkit-transition-property: opacity; transition-property: opacity}
.carousel-fade .carousel-item-next.carousel-item-left,
.carousel-fade .carousel-item-prev.carousel-item-right,
.carousel-fade .carousel-item.active{ opacity: 1}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-right.active{ opacity: 0}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active{ -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0)}
@supports (transform-style:preserve-3d){ .carousel-fade .carousel-item-left.active, .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item-prev.active, .carousel-fade .carousel-item.active{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
.carousel-fade .carousel-item-left.active,
.carousel-fade .carousel-item-next,
.carousel-fade .carousel-item-prev,
.carousel-fade .carousel-item-prev.active,
.carousel-fade .carousel-item.active{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}
@-webkit-keyframes fadeInLeft{ from{ opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0)} to{ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
@keyframes fadeInLeft{ from{ opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0)} to{ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
.fadeInLeft{ -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft}
@-webkit-keyframes fadeInUp{ from{ opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0)} to{ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
@keyframes fadeInUp{ from{ opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0)} to{ opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
.fadeInUp{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp}
@-webkit-keyframes slideInRight{ from{ -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible} to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
@keyframes slideInRight{ from{ -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); visibility: visible} to{ -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0)}}
.slideInRight{ -webkit-animation-name: slideInRight; animation-name: slideInRight}
@media only screen and (min-width: 992px){ .img_wd{ height: 370px} .shif1{ margin-left: -77px}}
@media only screen and (max-width: 600px){ .shif2{ padding-left: 14px; font-size: xx-large !important} .psm{ width: 257px; margin-top: 4px !important} .picspace{ padding-left: 34px; padding-right: 34px} .h1-head{ font-size: xx-large !important} .img_wd{ height: 220px} .smallspacebottom{ padding-bottom: 7px !important} .mb-sm-3{ margin-bottom: 9px} .shift_small{ font-size: xx-large; margin-right: 17px !important} .mt-sm{ margin-top: 37px !important}}
/* SMALL CAROUSEL AT P */
#MiCarousel{margin-top:30px;margin-bottom:30px;-webkit-box-shadow:10px 10px 38px -13px rgba(0,0,0,.75);-moz-box-shadow:10px 10px 38px -13px rgba(0,0,0,.75);box-shadow:10px 10px 38px -13px rgba(0,0,0,.75)}.carousel-img{background-color:#000;color:#fff;background-position:center;background-repeat:no-repeat;background-size:cover;width:100%;opacity:.8}.div-r{padding:40px}.carousel-title{font-size:80px;font-weight:bold;margin-left:20px;margin-top:20px}.carousel-pagination{background-color:#000!important;width:7px!important;height:7px!important;border-radius:100%;position:relative;bottom:-61px;opacity:.5}.carousel-pagination.active{opacity:1}.carousel-controls{display:none}.product_view .modal-dialog{max-width:800px;width:100%}.pre-cost{text-decoration:line-through;color:#a5a5a5}.space-ten{padding:10px 0}.post{overflow:hidden!important}.post img{width:100%;height:140px}
/* OOS PRODUCTS */
[aria-expanded="true"] .collapse-icon{transform:rotate(180deg);transition:transform .3s ease}.collapse-icon{transition:transform .3s ease}.summary-wrapper:hover p{opacity:.8}.summary-wrapper p::-webkit-scrollbar{width:4px}.summary-wrapper p::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}
.post{animation:fadeIn .6s ease-out}@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.load-more{transition:all .3s ease;border:1px solid #eee;font-weight:bold}.load-more:hover{color:#fff!important;background-color:#313248!important}

/* products list */
.product_view .product_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 400px; /* Ensures the image side is tall enough */
}

/* Custom Scrollbar for the description */
.product_view p::-webkit-scrollbar {
    width: 4px;
}
.product_view p::-webkit-scrollbar-thumb {
    background: #eee;
    border-radius: 10px;
}
/* Container styling */
.modal-zoom-container {
    background-color: #f0f0f0; /* Light grey for empty space if image is thin */
    cursor: zoom-in;
}

/* Target the image inside your $modal_media variable */
.modal-zoom-container img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    /* Use contain to ensure the full image is always visible */
    object-fit: contain; 
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* The Zoom Effect: Shows full height/width by scaling up within the box */
.modal-zoom-container:hover img {
    transform: scale(1.5); 
}

/* If the image is in a link or wrapper, ensure it doesn't block centering */
.modal-zoom-container a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}
/* ends */
.post .post-title{ position: relative}
.post .post-title b{ display: inline-block; margin-bottom: 4px; color: #FFF; padding: 5px 10px; margin-top: 4px}
.why-edit-box{ padding: 7px; box-shadow: 0 0 2px 0 #ddd; margin-bottom: 20px}
.why-edit-box h3::after{ position: absolute; content: ''; height: 7px; margin: 0 auto; left: 0; top: 3%; width: 50%; background: #313248}
.why-edit-box p{ margin-top: 20px; padding-left: 17px}
.why-edit .row .col-md-4{ margin-bottom: 20px}
.portfolio{ padding-top: -20px; text-align: center}
.heading{ background: #fff; padding: 1%; text-align: left; box-shadow: 0px 0px 4px 0px #545b62}
.heading img{ width: 10%}
.bio-info{ padding: 5%; box-shadow: 0px 0px 4px 0px #b0b3b7}
.name{ font-weight: 600}
.bio-image{ text-align: center}
.bio-image img{ border-radius: 50%}
.bio-content{ text-align: left}
.bio-content p{ font-weight: 600; font-size: 30px}
.btn-sm{ font-size: x-small !important; font-weight: bolder !important}
.btn-yoo:focus,
.btn-yoo:active,
.btn-yoo.active,
.open .dropdown-toggle.btn-yoo{ color: #fff; background-color: #183c60; border-color: rgba(0, 0, 0, 0.2)}
.btn-yoo:active,
.btn-yoo.active,
.open .dropdown-toggle.btn-yoo{ background-image: none}
.btn-yoo.disabled,
.btn-yoo[disabled],
fieldset[disabled] .btn-yoo,
fieldset[disabled],
.btn-yoo.disabled:focus,
.btn-yoo[disabled]:focus,
fieldset[disabled] .btn-yoo:focus,
.btn-yoo.disabled:active,
.btn-yoo[disabled]:active,
fieldset[disabled] .btn-yoo:active,
.btn-yoo.disabled.active,
.btn-yoo[disabled].active,
fieldset[disabled] 
.product-dtl p{ font-size: 14px; line-height: 24px; color: #7a7a7a} textarea::-webkit-scrollbar{ width: 0.2em;}
textarea::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,0.3);}
textarea::-webkit-scrollbar-thumb{ background-color: #e29b9b; outline: 1px solid slategrey;}
.cmcolo {
    background-color: var(--card-modal-color) !important;
}

.tooltip .tooltip-inner {
    padding: 2px 6px;
    max-width: 160px;
    color: #000 !important;
    background-color: var(--card-modal-color) !important;
    border: 1px solid #fff !important;
}

.text-brand { color: var(--brand-color) !important; }



.custom-tooltip {
    --bs-tooltip-bg: var(--card-modal-color) !important;
    --bs-tooltip-color: var(--brand-color) !important;
}

.btn-yoo {
    background-color: var(--brand-color);
    color: #fff;
    border-color: rgba(0, 0, 0, 0.2);
}

.btn-yoo:active,
.btn-yoo.active {
    background-color: var(--brand-color);
}
.banner-sec {
    position: relative;
    overflow: hidden;
    min-height: 300px;
}
    .signupoverlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; 
    opacity: 0.9;
}
.banner {
    position: relative;
    z-index: 2;
}
.carousel-item {
    transition: opacity .6s ease-in-out;
}
.login_sec{ padding: 0px; background-color: #f8fafb} .login_sec img{ margin: 24px auto} .carousel-fade .carousel-item{ opacity: 0; transition-duration: .6s; transition-property: opacity} .carousel-fade .carousel-item.active, .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right{ opacity: 1} .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-right{ opacity: 0} .carousel-fade .carousel-item-next, .carousel-fade .carousel-item-prev, .carousel-fade .carousel-item.active, .carousel-fade .active.carousel-item-left, .carousel-fade .active.carousel-item-prev{ transform: translateX(0); transform: translate3d(0, 0, 0)} .carousel-inner{ border-radius: 0 10px 10px 0} .carousel-caption{ text-align: left; left: 5%} .login-sec{ padding: 50px 30px; position: relative;} .login-sec .copy-text{ position: absolute; width: 70%; bottom: 20px; font-size: 13px; text-align: center} .login-sec .copy-text a { color: #fff} .login-sec h2{ margin-bottom: 30px; font-weight: 800; font-size: 30px;} .login-sec h2:after{ content: ' '; width: 100px; height: 5px; background: #f8d7da; display: block; margin-top: 8px; border-radius: 3px; margin-left: auto; margin-right: auto} .banner-text{ width: 70%; position: absolute; bottom: 40px; padding-left: 20px} .banner-text h2:after{ content: ' '; width: 100px; height: 5px; background: #FFF; display: block; margin-top: 20px; border-radius: 3px} .banner-text p{ color: #fff} .container-login100-form-btn{ margin: 0 auto; display: block; text-align: center; padding-top: 1%; padding-bottom: 2%} .login100-form{ width: 100%} .validate-input{ position: relative} .wrap-input100{ width: 100%; position: relative; border-bottom: 2px solid #d9d9d9; margin-bottom: 5%} .label-input100{ font-size: 14px; color: #333333; line-height: 1.5; padding-left: 7px} textarea:focus, input:focus{ border-color: transparent !important} .input100:focus+.focus-input100::before{ width: 100%} .input100{ font-size: 12px; color: #333333; line-height: 1.2; display: block; width: 100%; height: 30px; background: transparent; padding: 0 7px 0 7px} .focus-input100{ position: absolute; display: block; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none} .focus-input100::before{ content: ''; display: block; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: #FFA500; -webkit-transition: all 0.4s; -o-transition: all 0.4s; -moz-transition: all 0.4s; transition: all 0.4s} .focus-input100::after{ content: ''; color: #adadad; font-size: 22px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: absolute; height: calc(100% - 20px); bottom: 0; left: 0; padding-left: 13px; padding-top: 3px} .focus-input100.password::after{ content: ''; color: #adadad; font-size: 22px; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; align-items: center; justify-content: center; position: absolute; height: calc(100% - 20px); bottom: 0; left: 0; padding-left: 13px; padding-top: 3px} input{ outline: none; border: none} .flex-c-m{ display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; -ms-align-items: center; align-items: center} .login100-social-item{ font-size: 12px; color: #fff; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; border-radius: 50%; margin: 5px}
 .form-check-input { accent-color: #313248; }
@media only screen and (min-width: 992px) {
 .inside_form { height:570px; width: 100%; border: 0; }
 .form_hspace1 { margin-top:-218px }
 .form_hspace2 { height:210px; z-index:2; position:relative; margin-top:-50px; padding:50px 10px 20px 20px }
}
@media only screen and (max-width:600px) {
 .inside_form { height:630px; width: 100%; border: 0; }
 .form_hspace1 { margin-top:-239px  } .vv {margin-top:-69px !important;}
 .form_hspace2 { height:280px; z-index:2; position:relative; padding:120px 10px 20px 20px }
}
/* Scrollbars */
textarea::-webkit-scrollbar { width: 0.2em; }
textarea::-webkit-scrollbar-track { box-shadow: inset 0 0 4px rgba(0,0,0,.3); }
textarea::-webkit-scrollbar-thumb {
    background: #e29b9b;
    outline: 1px solid slategrey;
}
.ov-hidden { overflow:hidden; }
/* BUTTONS */
.btn-sm {
    font-size: x-small !important;
    font-weight: bolder !important;
}

.btn-yoo.active { border-color: rgba(0,0,0,0.2)!important; }

.btn-yoo:focus,
.btn-yoo:active,
.btn-yoo.active {
    color:#fff;
    background:#183c60;
}

/* ===============================
   ANIMATIONS
================================ */
@keyframes fadeInLeft {
    from { opacity:0; transform:translate3d(-100%,0,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes fadeInUp {
    from { opacity:0; transform:translate3d(0,100%,0); }
    to { opacity:1; transform:translate3d(0,0,0); }
}
@keyframes slideInRight {
    from { transform:translate3d(100%,0,0); }
    to { transform:translate3d(0,0,0); }
}

/* ===============================
   VIDEO BACKGROUND
================================ */
video {
    position:absolute;
    top:50%; left:50%;
    min-width:100%; min-height:100%;
    transform:translate(-50%,-50%);
    background:url(facade.jpg) no-repeat;
    background-size:cover;
    transition:1s opacity;
    z-index:0;
}

.bg-overlay {
    background: rgba(0,0,0,.7);
    position:absolute;
    top:-60px; bottom:-100px;
    left:0; right:0;
    z-index:0;
}

/* ===============================
   CARDS (CARD2 SYSTEM)
================================ */
.card2 {
    font-size:1em;
    overflow:hidden;
    border:none;
    border-radius:.285rem;
    box-shadow:0 1px 3px #d4d4d5;
    transition:.3s;
}

.card2:hover {
    transform:scale(1.04);
}

.card2-top {
    height:25%;
    background:#d6a291;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===============================
   FORMS
================================ */
.wrap-input100 {
    border-bottom:2px solid #d9d9d9;
    margin-bottom:5%;
}

.input100 {
    width:100%;
    height:30px;
    font-size:12px;
    background:transparent;
}

.focus-input100::before {
    content:'';
    position:absolute;
    bottom:-2px;
    height:2px;
    width:0;
    background:#FFA500;
    transition:.4s;
}

.input100:focus + .focus-input100::before {
    width:100%;
}
/* ===============================
   SEARCH
================================ */
.searchbar {
    height:30px;
    background:#353b48;
    border-radius:10px;
}

.search_input {
    width:0;
    transition:.4s;
}

.searchbar:hover .search_input {
    width:257px;
}

/* ===============================
   MEDIA QUERIES
================================ */
@media (min-width:992px){
    .carousel-img{
        height:100%;
        clip-path: polygon(0 0, 90% 0, 100% 100%, 0% 100%);
    }
    .taa{ width:960px }
}

@media (max-width:600px){
    .carousel-img{ height:200px }
    .taa{ width:350px }
    .center-sm{ text-align:center!important }
}