/* ----------------------------------------------------
  THEME CUSTOMIZATION STYLES 
---------------------------------------------------- */

/* ----------------------------------------------------
    COLORS
    ------
    BLUE      : 31c8d1
    PINK      : ec7fb4
    DK GRAY   : 333132
    DK GRAY 2 : 212529
    LT GRAY   : 9b9b9b
---------------------------------------------------- */


 
/* ----------------------------------------------------
    JAVASCRIPT CHECK IF TABLET OR MOBILE
---------------------------------------------------- */

.hc-tablet-check {
    display: none;
    visibility: hidden;
}

.hc-mobile-check {
    display: none;
    visibility: hidden;
}    

/* TABLET */
@media (max-width: 1024px) { /* set tablet size here (see: elementor settings) */
    .hc-tablet-check {
        visibility: visible;
    }
}

/* MOBILE */
@media (max-width: 767px) { /* set mobile size here (see: elementor settings) */
    .hc-tablet-check {
        visibility: hidden;
    }

    .hc-mobile-check {
       visibility: visible;
    }    
}



/* ----------------------------------------------------
    ELEMENTOR WIDGETS
---------------------------------------------------- */

.elementor-default .elementor-widget-image a img[src$=".svg"] {
  width: unset; 
}



/* ----------------------------------------------------
    STICKY HEADER
---------------------------------------------------- */

#ost-header {
  position: relative;
  top: 0;
  background-color: #fff;
  padding: 0;
  z-index: 1000; /* ensures it stays above other content */
  transition: all 0.5s ease;
}
#ost-header.sticky-header {
  position: fixed;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3); 
}
body #content {
    padding-top: 0px;
}
body.ost-sticky-header #content {
    padding-top: 125px;
}
body.ost-sticky-header.admin-bar #content {
    padding-top: 95px;
}
#ost-header .header__btn > a,
#ost-header .header__btn > .hfe-has-submenu-container > a {
    border: solid 2px #31c8d1;
    background: #31c8d1;
    color: #fff!important;
    border-radius: 2.5rem;
    font-weight: bold!important;
    padding: 1rem 1.5rem !important;
}
#ost-header .header__btn > a:hover, 
#ost-header .header__btn > .hfe-has-submenu-container > a:hover {
    border: solid 2px #31c8d1;
    background: #fff;
    color: #31c8d1!important;
}
#ost-header .header__btn > .sub-menu {
    margin-top: 10px!important;
}
#ost-header.sticky-header .header__btn a {
    margin-top: 0px!important;
    margin-bottom: 0px!important;
}
#ost-header .header__btn--outlined a {
    background: none!important;
}
#ost-header .header__btn--outlined a:hover {
    background: #31c8d1!important;
    color: #fff!important;
}
@media (max-width:1025px) {
    /* disable sticky header on mobile */
    #ost-header.sticky-header {
      position: relative;   
    }
    #ost-header .header__btn a, 
    #ost-header.sticky-header .header__btn a {
        margin: 16px 8px!important;
    }
    #ost-header .header__btn .sub-menu a, 
    #ost-header.sticky-header .header__btn .sub-menu a {
        margin: 0px!important;
    }
    #ost-header .header__btn--outlined a {
        color: #212529!important;
        width: auto !important;
        display: inline-block;
    }    
    body.ost-sticky-header #content,
    body.ost-sticky-header.admin-bar #content {
        padding-top: 0px;
    }    
}

/* needed for timber theme */
#content {
    margin-top: 0px;
}



/* ----------------------------------------------------
    HEADER MENU 
---------------------------------------------------- */

#ost-header .hfe-nav-menu__layout-horizontal {
    width: auto!important;
}
#ost-header .hfe-nav-menu__layout-horizontal .hfe-nav-menu { 
    align-items: center;
}
#ost-header .hfe-nav-menu > li:last-of-type a.hfe-menu-item {
    padding-right: 0;
}
#ost-header .hfe-nav-menu > li:last-of-type a.hfe-menu-item .sub-arrow {
    width: 10px;
}



/* ----------------------------------------------------
    TABLES
---------------------------------------------------- */

.size-guide th:nth-of-type(1) {
    width: 20%;
}
.size-guide th:nth-of-type(2) {
    width: 28%;
}
.size-guide th:nth-of-type(3) {
    width: 19%;
}
.size-guide th:nth-of-type(4) {
    width: 15%;    
}
.size-guide th:nth-of-type(5) {
    width: 18%;
}

@media (max-width: 768px) {
    .size-guide th, 
    .size-guide td {
        font-size: 12px!important;
    }
}
@media (max-width: 400px) {
    .size-guide th, 
    .size-guide td {
        font-size: 10px!important;
    }
}


#content .ost-order-now-button-1 .elementor-button {
    width: 175px!important;
}


/* -----------------------------------------------------------------
// TESTIMONIALS SLIDER
// -------------------------------------------------------------- */

.ost_testimonial-slider {
  overflow: hidden;
  width: 100%;
  padding: 20px;
}

.ost_testimonial-track {
  display: flex;
  gap: 20px;
  transition: transform 0.5s ease;
}

.ost_testimonial {
  flex: 0 0 24%; /* 4 columns on desktop */
  background: #f9f9f9;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.ost_testimonial.blue {
    background: #31c8d1;
    background: linear-gradient(180deg, #31c8d1 0, #196469 100%);
}
.ost_testimonial.pink {
    background: #ec7fb4;
    background: linear-gradient(180deg, #ec7fb4 0, #76405a 100%);
}

.ost_testimonial hr {
    border: none;
    height: 1px;
    background-color: #fff;
    margin-top: 15px;
    margin-bottom: 15px;
}

.ost_testimonial h4 {
  margin-bottom: 10px;
  font-size: 1rem;
  color: #fff;
}

.ost_testimonial p {
  font-size: 0.95rem;
  color: #fff;
}

.ost_testimonial p strong {
  font-weight: bold!important;
  color: #fff!important;
}

/* Tablet: 2 columns */
@media (max-width: 768px) {
  .ost_testimonial {
    flex: 0 0 48%;
  }
}

/* Mobile: 1 column */
@media (max-width: 480px) {
  .ost_testimonial {
    flex: 0 0 100%;
  }
}

.ost_testimonial-nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.ost_testimonial-nav button {
  padding: 10px 20px;
  font-size: 1.2rem;
  background-color: #31c8d1;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.ost_testimonial-nav button:hover {
  background-color: #ec7fb4;
}