:root { --app-white: #fff; --app-blue: #004dc1; --app-indigo: #5f1dbd; --app-purple: #7074e5; --app-cyan: #1bc2e5; --app-theme-cream: #00bad7; --app-green: #1CC283; --app-lime: #5bbf21; --app-red: #D91E47; --app-gold: #ffd229; --app-light: #FEF2F0; --app-theme-pink: #FC4C4B; --app-theme-rose: #F37B94; --app-100: 100; --app-200: 200; --app-300: 300; --app-400: 400; --app-500: 500; --app-600: 600; --app-700: 700; --app-800: 800; --app-900: 900; --app-montserrat: 'Montserrat', sans-serif; --app-marcellus: 'Marcellus', serif; --app-raleway: 'Raleway', sans-serif; --app-noto: 'Noto Serif', serif; --app-aspect-ratio-1: 50%; --app-aspect-ratio-1-1: 100%; --app-aspect-ratio-16-9: 56.25%; --td: 150ms; --te: cubic-bezier(0.215, 0.61, 0.355, 1);}

/*f7f8fa*/
/*padding-bottom:34.0625%*/
/*padding-bottom: 36.53333333333333%;*/
/* === ASPECTS === */
/*padding-bottom:34.0625%*/
/*padding-bottom: 36.53333333333333%;*/
/*padding-top: 56.25%;*/

body{ font-family: 'Exo', sans-serif; background: #f9f4f1; color: #282d27;}

.h1, .h2, .h3, h1, h2, h3{}
.h4, .h5, .h6, h4, h5, h6{}

h1{ font-size: 50px;}
h2{ }
h3{ }

a { color: #8ea2a9; font-size: 13px; font-weight: 500; text-decoration: none; margin: 15px 0; }
small{font-weight: 500; color: #8ea2a9; }


.t-sm{font-size: 17px !important;}
.t-lg{font-size: 24px !important;}

.t-100{font-weight: var(--app-100) !important;}
.t-200{font-weight: var(--app-200) !important;}
.t-300{font-weight: var(--app-300) !important;}
.t-400{font-weight: var(--app-400) !important;}
.t-500{font-weight: var(--app-500) !important;}
.t-600{font-weight: var(--app-600) !important;}
.t-700{font-weight: var(--app-700) !important;}
.t-800{font-weight: var(--app-800) !important;}
.t-900{font-weight: var(--app-900) !important;}

.text-muted{color: #9DA3AC !important;}
.text-dark{color: #363a41 !important;}
.text-success{color: #45BD62 !important;}
.text-danger{color: #F03051 !important;}
.text-primary{ color: var(--app-theme-cream) !important;}
.text-info{ color: #25b9d7 !important;}

.bg-default{ background-color: #e1eaee !important;}
.bg-success{ background-color: #45BD62 !important;}
.bg-danger{ background-color: #F03051 !important;}
.bg-primary{ background-color: var(--app-theme-cream) !important;}
.bg-info{ background-color: #25b9d7 !important;}

.bg-light{background-color: #f7f8fa !important;}
.bg-gray{background-color: #F7F7F7 !important;}
.bg-light-cream{background-color: var(--app-light) !important;}

.b1{border:1px solid red;}
.b2{border:1px solid green;}
.b3{border:1px solid orange;}
.container-wrapper{max-width: 1366px; margin: auto;}


button { border-radius: 25px;  border: 2px solid #7074e5; background-color: #7074e5; color: var(--app-white); font-size: 12px; font-weight: 500; padding: 12px 45px;  letter-spacing: 1px; text-transform: uppercase; transition: transform 80ms ease-in; }
button:active { transform: scale(0.95);}
button:focus { outline: none;}
button.outline {  background-color: transparent; border-color: var(--app-white);}

.section-top{padding: 181px 0 0;}
section {padding: 6.5rem 0;}
footer {padding: 6.5rem 0 .8rem;}
@media (max-width: 785px) {
  section{padding: 5rem 0;}
}
@media (max-width: 720px) {
  .section-top{padding: 120px 0 0;}
}
@media (max-width: 580px) {
  section{padding: 3rem 0;}
}
/* =========
  CONFIG BTN 
========= */
.btn { padding: 11px 15px; border:none; box-shadow:none; outline: none; border-radius: 2px; text-transform:uppercase; font-family: var(--app-raleway); font-weight: 500; font-size: 13px;}
.btn:focus, .btn:active:focus{box-shadow: none;}
.btn-primary{ background-color: var(--app-theme-cream); }
.btn-primary:hover {border-color: #017CD8;}

.btn-check:checked + .btn-primary, .btn-check:active + .btn-primary, .btn-primary:active, .btn-primary.active, .show > .btn-primary.dropdown-toggle { background-color: #017CD8; border-color: var(--app-theme-cream);}
.btn-check:focus + .btn-primary, .btn-primary:focus{ background-color: #017CD8; border-color: var(--app-theme-cream); box-shadow: none;}

.btn-default{background-color: #EBEEF3;}
.btn-success{background-color: #1ab56f;}
.btn-sm{padding: 8px;}
.spinner-border{width: 1rem; height: 1rem; }

.btn-outline-primary{ color: var(--app-theme-cream); border:1px solid var(--app-theme-cream); background: #f4ede7;}
.btn-outline-primary:active,
.btn-outline-primary:hover{ background-color: var(--app-theme-cream); border-color: var(--app-theme-cream);}

.btn-check:checked + .btn-outline-primary, .btn-check:active + .btn-outline-primary, .btn-outline-primary:active, .btn-outline-primary.active, .btn-outline-primary.dropdown-toggle.show{background-color: var(--app-theme-cream); border-color: var(--app-theme-cream);}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus { box-shadow: none; }
.btn-check:checked + .btn-outline-primary:focus, .btn-check:active + .btn-outline-primary:focus, .btn-outline-primary:active:focus, .btn-outline-primary.active:focus, .btn-outline-primary.dropdown-toggle.show:focus { box-shadow: none; }

.btn-radius{border-radius: 500px;}

/* =========
  CONFIG HEADER
========= */
header { position: fixed; width: 100%; text-align: center; background: #fff; padding: 1rem .5rem; z-index: 999; box-shadow: rgba(27, 31, 35, 0.04) 0px 1px 0px, rgba(255, 255, 255, 0.25) 0px 1px 0px inset;}

.container-menu { position:relative; width: 100%; list-style: none; margin: auto; padding: 0;}
.container-menu ul{ list-style:none; margin: 0;  padding: 0;}
.container-menu > li {  display: inline-block;}
.container-menu > li > a{position: relative; font-family: 'Montserrat', sans-serif; color: #2B2929; text-decoration: none; margin: 0; padding: 1rem 1rem .5rem; display: block; z-index: 5;}

.container-menu li a::after { position: absolute;  content: "";  top: 100%;  left: 0;  width: 100%;  height: 2px;  background: #F8D7C4;  -webkit-transform: scaleX(0);  -moz-transform: scaleX(0);  transform: scaleX(0);  transform-origin: right;  -webkit-transition: transform 0.5s;  -moz-transition: transform 0.5s;  transition: transform 0.5s;}
.container-menu li a.active::after{ background: #DFA585;}
.container-menu li a.active::after,
.container-menu li a:hover::after { transform-origin: left; transform: scaleX(1); -webkit-transform: scaleX(1); -moz-transform: scaleX(1);}
.container-submenu{position: absolute; max-width: 720px; padding: 2rem 1rem 2rem 20rem; left: 0; right: 0; margin: auto; min-height: 100%; background: #FFFFFF; box-shadow: -1px 10px 80px -15px rgb(0 0 0 / 10%); background-image: url('../../uploads/corporate/bg-eye.png'); background-repeat: no-repeat; background-position: center left; visibility: hidden;  opacity: 0; -webkit-transition: visibility .3s, opacity 0.3s linear;-moz-transition: visibility .3s, opacity 0.3s linear;transition: visibility .3s, opacity 0.3s linear;
}
.container-submenu:hover,
[role="submenu"] a:hover + .container-submenu{ visibility: visible;
  opacity: 1;}

.items-submenu li{position: relative; font-family: 'Marcellus', serif;  text-align: left;}
.items-submenu li a{display: block; font-size: 18px; margin: 0 0 .25rem; color: #727374; -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s;}
.items-submenu li a:hover {color: #DFA585;}

@media (max-width: 520px) {
.container-submenu{padding-left: 10px; padding-right: 10px;}
.items-submenu{background: rgba(255, 255, 255, .95); padding: 1rem !important;}
}


/* =========
  CONFIG NAVBAR
========= */
.btn-ham {background: var(--app-theme-dark); width: 40px; height: 40px; display: none; position: fixed; top: 35px; left: 10px; border-radius: .125rem; cursor: pointer;}
.btn-ham:hover {background: var(--app-theme-dark) }
.btn-ham::before, .btn-ham::after { background: #fff; width: 20px; height: 2px; left: 10px; display: block; position: absolute; content: ""; -webkit-transition: .25s cubic-bezier(0.89, 0.03, 0.06, 1); transition: .25s cubic-bezier(0.89, 0.03, 0.06, 1);}
.btn-ham::before { top: 16px; }
.btn-ham::after { bottom: 16px; }

.ui-header.active .btn-ham::before { transform: rotate(45deg) translate(2px, 2px);}
.ui-header.active .btn-ham::after { transform: rotate(-45deg) translate(2px, -2px);}

@media (max-width: 720px) {
  .btn-ham  {display: block;}
  .navbar-side{position: fixed;height: 100%;left: 0;top: 0;right: 0;border: 5px solid #f4ede7;background: rgba(255, 255, 255, .95);transform: scale(0);-webkit-transform: scale(0);-moz-transform: scale(0); -ms-transform: scale(0);-webkit-transition: all 0.35s cubic-bezier(0.18, 1.25, 0.4, 1);-moz-transition: all 0.35s cubic-bezier(0.18, 1.25, 0.4, 1);transition: all 0.35s cubic-bezier(0.18, 1.25, 0.4, 1);}
  .ui-header.active .navbar-side{transform: scale(1);-webkit-transform: scale(1);-moz-transform: scale(1); -ms-transform: scale(1);}
}

/* =========
  CONFIG THEME
========= */
.swiper-wrapper .swiper-slide { position: relative; overflow: hidden;  padding-top: 36.53333333333333%;}
.swiper-wrapper .swiper-slide img{ position: absolute; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%);  -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); }
.swiper-pagination-bullet{background: #F8D7C4;}

.imageOverlay {position: relative; overflow: hidden; padding-top: 100%;}
.imageOverlay a{position: absolute; width: 100%; height: 100%; margin: 0; top: 0;}
.imageOverlay a:after{position: absolute; content: ''; left: 10px; right: 10px;top: 10px; bottom: 10px; border: 1px solid #fff;}

.imageOverlay img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s;}
.imageOverlay:hover img{-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}

.item-category {position: relative; padding: .5rem .5rem 1rem;}
.item-category h4{position: absolute; bottom: -5px; left: 25px; right: 25px; background: #f4ede7; padding: .4rem .5rem; text-align: center; font-size: 20px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.content-image { position: relative; z-index: 1; }
.content-image figure { position: absolute; width: 100%; height: auto; top: 0; bottom: 0; left: 0; right: 0; margin: auto; display: block; z-index: -1;}
.content-image figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; /*z-index: -1;*/}



.product-item{background: #fff; padding: .4rem; margin-bottom: 1rem; cursor: pointer;}
.product-image{ position: relative; display: block; padding-top: 100%; overflow: hidden;}
.product-image img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; display: block;}

.product-item .product-info{position: relative; overflow: hidden;}
.product-item .product-info h4{margin-bottom: 0; font-size: 18px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center; padding: 1rem .5rem .2rem;}
.product-item .product-info h5{font-size: 14px; font-weight: 500; color: #8ea2a9; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; text-align: center;}
.product-item .product-info .product-price{font-family: 'Montserrat', sans-serif; font-size: 24px; font-weight: 500; text-align: center; color: #DFA585; margin-bottom: .5rem;}
.product-item .product-info .product-actions{ display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;  -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  -webkit-box-pack: center;  -webkit-justify-content: center;  -ms-flex-pack: center;  justify-content: center;  -webkit-transition: all .5s ease 0s;  -o-transition: all .5s ease 0s;  transition: all .5s ease 0s;  position: absolute;  left: 0;  right: 0;  height: 100%;  top: 125%;  background-color: rgba(255,255,255,.85);
/*margin: 1rem 0 .5rem;*/}
.product-item .product-info .product-actions a{ width: 40px; height: 40px; margin: 0 5px; text-align: center; color: #fff; border-radius: 50%; background-color: #2B2929; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-transition: all .5s ease 0s; -o-transition: all .5s ease 0s; transition: all .5s ease 0s;}
.product-item:hover .product-info .product-actions{top: 0;}


[data-cover] .item {
  background: var(--app-app-light);
  padding-top: var(--app-aspect-ratio-1-1);
}
[data-thumbs] .item {
  background: var(--app-app-light);
  padding-top: var(--app-aspect-ratio-1-1);
  overflow: hidden;
  position: relative;
}
[data-cover] .item img, [data-thumbs] .item img{position: absolute; left: 0; top: 0; width: 100%; height: 100%; display:  block; object-fit: contain;}

[data-cover].owl-theme {  position: relative;}
[data-cover] .owl-dots{margin: 10px 0;}
[data-thumbs] .owl-item{ transition: opacity 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);}
[data-thumbs] .owl-item.active.current{ opacity: 0.3;}

.product-single-images {padding: 0 0 30px;}
.product-single-content h3 {color: var(--app-theme-cream);}
.product-single-description,.product-single-info{font-family: var(--app-montserrat);}
.product-single-info p{margin-bottom: 0;}
.product-single-actions{padding: 1rem 0;}

.product-quanty{max-width: 150px;}
.product-quanty .form-control{font-family: var(--app-montserrat); padding: 5px 15px; font-size: 20px; border: 1px solid var(--app-theme-cream)}

@media (max-width: 576px) {
   .product-quanty{margin: auto; max-width: 100%;}
}



.inner-title-page { padding: 100px 0;  text-align: center;}
.inner-title-page p{    color: #333333; font-family: var(--app-raleway); font-size: 16px;}
@media (max-width: 780px) {
   .inner-title-page { padding: 60px 0;}
}
@media (max-width: 580px) {
   .inner-title-page { padding: 40px 0;}
}

.breadcrumb-item,
.breadcrumb-item.active {font-family: var(--app-raleway); font-size: 16px; font-weight: var(--app-400);}
.breadcrumb-item.active {color: var(--app-theme-cream);}
.breadcrumb-item a {color: var(--app-theme-dark); font-family: var(--app-raleway); font-size: 16px; font-weight: var(--app-400);}
.breadcrumb-item a:hover{color: var(--app-theme-cream);}




/* =========
  CONFIG FOOTER
========= */
.footer-social{margin-top: 1rem; margin-bottom: 50px;}
.widget-social { display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-flex-wrap: wrap;  -ms-flex-wrap: wrap;  flex-wrap: wrap;  margin: 0 -10px;  padding-left: 0;  list-style: none;}
.widget-social li { margin: 0 12px;}
.widget-social li a { display: block;  padding: 0 5px;  color: #2B2929; -webkit-transition: all .3s ease 0s; -o-transition: all .3s ease 0s; transition: all .3s ease 0s;}
.widget-social li a:hover {color: #DFA585;}
.widget-social li a i { font-size: 28px;}

.copyright { font-size: 15px; margin-bottom: 0; text-align: center;}



.card{border:0;}
/* =========
  CONFIG DROPDOWN
========= */
.dropdown-menu {margin: .125rem 0 0; font-size: 14px; color: #8ea2a9; border: 0; border-radius: .35rem; box-shadow: 0 .15rem 1.75rem 0 rgba(58,59,69,.15)!important;}
.dropdown-item {color: #8ea2a9; font-weight: 500;}
.dropdown-item:hover, .dropdown-item:focus{ color: #363a41; background-color: rgba(0,0,0,.03); }

.dropdown-menu{
  -webkit-animation-name: growOut;
  animation-name: growOut;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}
.dropdown-menu.show{
  -webkit-animation-name: growIn;
  animation-name: growIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

/* ================
  FORM 
================= */
label{font-weight: 500; color: #8ea2a9; padding-bottom: .2rem; font-size: 15px;}
.form-group{ position: relative;}

.form-control, .form-select{ background-color: var(--app-white); border: solid 1px #e6e6e6; color: #8ea2a9; border-radius: 0; box-shadow:none; outline:none; padding: 10px 15px; font-size: 18px;}
.form-control:focus, .form-select:focus { color: #5a7680; outline: 0; border: 1px solid var(--app-theme-cream); box-shadow: none;}
.form-control:disabled { background-color: #f8f9fa;}

.modal{z-index: 9999;}
.modal-header{border-bottom: 1px solid #e1eaee;}
.modal-footer{border-top: 1px solid #e1eaee;}

@media (max-width: 992px) {
  .modal-lg{max-width: 800px !important;}
}


.alert{font-size: 15px;}
.swal2-container{z-index: 9999 !important;}
h2.swal2-title {font-size: 1.2em !important;}

/* === AVATAR CONFIG === */
figure.avatar{margin-bottom: 0; overflow: hidden;}
figure.avatar img{width: 100%; height: 100%; object-fit: cover;}
figure.avatar.wide{width: 80px; height: auto;}

/* === TABS ADMIN === */
.ui-tabs{border:0;}
.ui-tabs .nav-link {margin: 0; padding: .6rem 1.5rem; font-size: 15px; font-weight: 500; border-radius: 0; background-color: #fff; color: #9da3ac; border: 0;}
.ui-tabs .nav-item.show .nav-link, 
.ui-tabs .nav-link.active {  color: #363a41; background-color: #f7fbfc; border-bottom: 2px solid var(--app-theme-cream) !important;}
.ui-tabs .nav-link:focus, .ui-tabs .nav-link:hover { color: #3367D6; }


@-webkit-keyframes growIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes growIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
