/*------------------------------------*\
  #Root
\*------------------------------------*/
:root{
  --Primary-color:#00A8E0;
  --Secondary-color:#D1C5B4;
  --Tertiary-color:  #def2fb;
  --Text-color:#000;
  --Text-light-color:#9a9a9a;
  
  /* Button */
  --Main-button-color: #DEf2fb;
  --Admin-button-color: #3c3937;
  --Link-button-color: var(--Primary-color);

  /* Neutral */
  --White-color: #fff;
  --Black-color: #000;
  --Warning-color: #E71313;
  --Warning-hover-color: #db1212;

  /* Rgba */
  --Primary-color-opacity:rgba(0, 168, 224, .8);
  --Primary-Midlight-color-opacity: rgba(83, 169, 209, 0.85);
  --Primary-Light-color-opacity: rgba(222, 242, 251, .8);
  --Tertiary-Light-color: #f0f5f7;

  /* Border */
  --Border-default: 1px solid #9a9a9a6b;
  --Border-hover-default-color: #DEf2fb;
  --Border-primary: 1px solid var(--Primary-color); 
}
/*------------------------------------*\
  #BASE
\*------------------------------------*/
/* Buttons */
.catfish-button,
.button,
a{
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
}

/* Typhography */
.title{
  color: var(--Primary-color);
  text-transform: uppercase;
}

h2.title{
  text-transform: capitalize;
}

p:not(.back-link) > a{
  transition: all .3s;
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -o-transition: all .3s;
  color: inherit;
  font-weight: 700;

  &:hover{
    text-decoration: underline;
  }
}

section:not(.breadcrumb-section) ul:not(.has-list-style-none) li > a {
  color:inherit;
  text-decoration: underline;

  &:hover{
    text-decoration: underline;
    color: var(--Primary-color);
  }
}

/* List */
.ict-wysiwyg.content ul{
  margin-left: 2em;
}

/* Accordion */
.ict-accordion {

  .button{
    background: transparent;
    color: var(--Text-color);
    margin: 0 !important;
  }

  .button i{
    color: var(--Text-color) !important;
  }
}

.ict-accordion .accordion-item.is-active .accordion-content{
  padding-left: 2rem;
  padding-right: 2rem;
}

.ict-accordion .accordion-item.is-active .button:focus{
  box-shadow: none;
}

.ict-accordion .accordion-item.is-active .accordion-content .link{
  display: flex;
  align-items: baseline;
  color: var(--Text-color);

  &:hover{
    text-decoration: underline;
    color: var(--Primary-color);
  }
}

@media screen and (max-width: 1087px) {
  .ict-wysiwyg.content ul{
    margin-left: 0em;
  }
}
/*------------------------------------*\
  #UTILITIES
\*------------------------------------*/
/* Elements*/

/* Sections */
.overlay-50-right{
  position: relative;
}

.overlay-50-right::before{
  content: '';
  width: 50%;
  height: 100%;
  background: rgba(0, 0, 0, .8);
  position: absolute;
  top: 0;
  right: 0;
}

/* Button */
.button.has-style-custom-1{
  background-color: var(--Main-button-color);
  color: var(--Text-color);
  border: none;

  &:hover{
    background-color: var(--Primary-color);
    color: var(--White-color);
  }
}

.button.has-style-custom-2{
  background-color: var(--White-color);
  color: var(--Primary-color);
  border: none;

  &:hover{
    background-color: var(--Primary-color);
    color: var(--White-color);
  }
}

.button.has-style-custom-3{
  background-color: var(--White-color);
  color: var(--Primary-color);
  border: 2px solid transparent;

  &:hover{
    background-color: var(--Primary-color);
    color: var(--White-color);
    border: 2px solid var(--White-color);
  }
}

/* List */
ul.list-style-circle-check{
  list-style: none;

  li{
    position: relative;
    padding-left: 1.5rem;

    &::before{
      content: '\f058';
      font-family: "Font Awesome 5 Pro";
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      color: var(--Primary-color);
    }
    
    a{
      color: var(--Primary-color) !important;
      text-decoration: none !important;

      &:hover{
        text-decoration: underline !important;
      }
    }
  }

  li:hover a{
    text-decoration: underline;
  }
}

ul.list-style-circle-check-black{
  list-style: none;

  li{
    position: relative;
    padding-left: 1.5rem;
    
    &::before{
      content: '\f058';
      font-family: "Font Awesome 5 Pro";
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      color: var(--Black);
    }

    a{
      color: var(--Text-color);
      text-decoration: none !important;

      &:hover{
        text-decoration: underline !important;
        color: inherit !important;
      }
    }
  }

  li:hover a{
    text-decoration: underline;
  }
}

ul.list-style-check-large{
  list-style: none;

  li{
    position: relative;
    padding-left: 2rem;
    font-size: 1.7rem;
    
    &::before{
      content: '\f00c';
      font-family: "Font Awesome 5 Pro";
      position: absolute;
      left: 0;
      top: 0;
      display: inline-block;
      color: var(--Black);
    }
  }

  li:hover a{
    text-decoration: underline;
  }
}

/* Style */
.has-background-width-50{
  background-size: 50% auto;
}

.has-background-custom-3{
  background-color: var(--Main-button-color);
}

.has-background-custom-2,
.has-background-custom-1,
.has-background-custom1,
.has-background-custom2{
  position: relative;
}

.has-background-image-angle-card{
  background-image: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/2/Group 135.png');
  background-size: 100% 90%;
  background-repeat: no-repeat;
}

.has-background-custom-1::before,
.has-background-custom1::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(209,197,180);
  background: linear-gradient(0deg, rgba(209,197,180,1) 0%, rgba(209,197,180,0.9) 30%);
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
}

.has-background-custom-1.reverse::before,
.has-background-custom1.reverse::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(209,197,180);
  background: linear-gradient(0deg, rgba(209,197,180,1) 0%, rgba(209,197,180,0.9) 30%);
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
}

.has-background-custom-2::before,
.has-background-custom2::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(255,255,255);
  background: linear-gradient(24deg, rgba(255,255,255,1) 0%, rgba(0,168,224,1) 40%); 
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 70%, 0% 100%);
}

.has-background-custom-2.reverse::before,
.has-background-custom2.reverse::before{
  content: '';
  width: 100%;
  height: 100%;
  background: rgb(209,197,180);
  background: linear-gradient(320deg, rgba(255,255,255,1) 0%, rgba(0,168,224,1) 40%); 
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 80%);
}

.has-border-bottom .container > .columns{
  border-bottom: 2px solid;

}

.has-border-bottom-blue .container > .columns{
  border-bottom: 2px solid var(--Main-button-color);
  padding-bottom: 1.5rem;
}


@media screen and (max-width: 1087px){
  .is-flex-direction-columns-reverse-touch .columns{
    flex-direction: column-reverse !important;
  }
}

@media screen and (max-width: 767px) {
  .has-text-center-mobile{
    text-align: center;
  }

  .overlay-50-right::before{
    width: 100%;
  }
}
/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/
/* BreadCrumb Sections */
.page-topic-topicdetails .breadcrumb-section .breadcrumb-back-button {
  background-color: transparent;
  border-color:#dbdbdb;
  color: #000;
  margin-right: 2em;

  &:hover{
    background-color: #F5F9FB;
    color: #000;
  }
}

.page-topic-topicdetails .breadcrumb-section{
  ul{
    margin: 0;
  }

  li + li{
    margin-top: 0;
  }
}

@media screen and (max-width: 767px) {
  .arone-category-page .breadcrumb-section .breadcrumb-back-button,
  .page-topic-topicdetails .breadcrumb-section .breadcrumb-back-button{
    margin-bottom: 1rem;
  }  
}

/* Angle Cards */
.angled-card {
  padding-bottom: 4rem !important;
  padding-right: 4rem !important;

  .angled-content{
    transform: skewY(-1deg);
  }
}

@media screen and (min-width: 1088px){
  .angled-card.column{
    width: 30%;
  }
}

@media screen and (max-width: 1087px){
  .angled-card:first-of-type{
    margin-right: 0 !important;
  }

  .angle-card-section .columns{
    justify-content: center !important;
    gap: 2rem;
  }

  .angle-card-section .column{
    width: 45%;
  }
}

@media screen and (max-width: 500px) {
  .angled-card.column{
    width: 100%;
  }
}

/* Service icons */
.service-icon {
  transition: transform 0.3s ease-in-out;
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}

.service-icon:hover {
  transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -ms-transform: scale(1.1);
  -o-transform: scale(1.1);
}

/* Product Card */
.homeFeaturedCategoriesWrapper .listWrapper .listItem{
  @media screen and (min-width: 767px) {
    width: 33.333333%;
  } 

  .small-product-item{
    border-top: unset;

    .category-item{
      display: flex;
      flex-direction: column-reverse;

      .product-title{
        font-size: 1.25rem;
        background: transparent;
        position: unset;
        transform: translateY(0%);
      }
    }

    .category-item:hover .product-title{
      background-color: transparent;
    }
  }
}

/* Category */
.is-custom-category .homePageCategories{

  .listWrapper .listItem{
    width: 25%;
  }
}

/*------------------------------------*\
  #LAYOUTS
\*------------------------------------*/
/* Header */
.navbar{

  .navbar-end .button{
    background-color: var(--Primary-color);
    padding-left: 1.5rem;
    padding-right: 1.5rem;

    .icon{
      width: 2rem;
    }

    i{
      color: var(--White-color);
      font-size: 1rem;
      font-weight: 700;
    }
  }

  @media screen and (max-width: 1330px) and (min-width: 1088px) {
    a.navbar-item, a.navbar-link {
      padding: .5rem 1rem;
      font-size: .9rem;
    }

      .navbar-link:not(.is-arrowless) {
      padding-right: 2em;
    }

    .navbar-end .navbar-item:has(.button){
      padding: .5rem;
    }

    .navbar-end .button{
      background-color: var(--Primary-color);
      padding-left: 1rem;
      padding-right: 1rem;
    }

    .navbar-end .button.is-small{
      padding-left: 1rem;
      padding-right: 1rem;
    }
  }
}

/* Footer */
.ict-dedicated-footer.arone-footer{

  .columns{
    color: var(--Primary-color);
  }

  .image.is-128x128{
    height: auto;
  }

  .social-links{
    gap: .75rem;
  }

  .social-links li a .icon.is-medium{
    height: 3rem;
    width: 3rem;
    background: #f2f2f2;
    border-radius:4px;
    -webkit-border-radius:4px;
    -moz-border-radius:4px;
    -ms-border-radius:4px;
    -o-border-radius:4px;
    transition: .3s;
    -webkit-transition: .3s;
    -moz-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
  }

  .social-links li:hover a .icon.is-medium{
    background-color: var(--Link-button-color);

    i{
      color: var(--White-color);
    }
  }

  @media screen and (min-width: 1088px) {
    .column{
      width: 15%;
    }
  }
}

/*------------------------------------*\
  #ADMIN PAGES
\*------------------------------------*/
/* Homepage */
@media screen and (max-width: 900px) and (min-width: 768px) {
  .homebanners .banners1 .section:first-child .column{
    width: 100%;
    text-align: center;
  }
}

.slides h2.title{
  line-height: 1.2;
}

/* Product Landing */

/* Related Products */
.related-products-section{
  background-color: var(--Secondary-color) !important;
  
  .title{
    text-align: center;
    margin-bottom: 3;
  }
}

/* Category Page */
.arone-category-page .category-hero-section{
  background-color: var(--Main-button-color);

  h1.title{
    color: var(--Primary-color);
  }
}
/*------------------------------------*\
 #CHECKOUT STEPS
\*------------------------------------*/
/* Delivery Methods */
.one-page-checkout #opc-shipping_method .shipping-options {
  background: transparent;
}

.one-page-checkout #opc-shipping_method .shipping-options .shipping-options__list .shipping-option-item input:checked + label span{
  color: var(--Primary-color);
}

.one-page-checkout #opc-shipping_method .shipping-options .shipping-options__list .shipping-option-item label {
  border: 2px solid var(--Text-light-color);
  color: var(--Text-color);
}
/*------------------------------------*\
 #MY ACCOUNT PAGES
\*------------------------------------*/

/*------------------------------------*\
    #TOPIC PAGES
\*------------------------------------*/
/* General */
@media screen and (max-width: 600px) {
  .hero.is-halfheight{
    min-height: 30vh;
  }
}


@media screen and (max-width: 600px) {
  .hero.is-halfheight{
    min-height: 25vh;
  }
}