/*
Theme Name: UW Collective
Description: Custom theme for UW Collective
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: uwc-theme
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

:root {
    --primary: #260A33;
    --primary-two:#AB6BFF;
    --primary-three:#FFAB33;
    --primary-four:#80B0FF;
    --secondary:#F0EEE8;
    --secondary-two:#2E4756;
    --white:#fff;
    --btn-text:#260A33;
   
  }
  html {
    scroll-behavior: smooth;
    overflow-x: hidden;
  }
  
  .primary-two {background:var(--primary-two)}
  .primary-text {color:var(--primary-two)}
  .primary {background:var(--primary)}
  
  body {
       font-family: 'Source Sans 3';
       font-size:19px;
       line-height:1.625rem;
       padding:0;  
       margin:0;
  }
  h1,h2,h3,h4,h5,h6,.btn-primary {
       font-family: 'Funnel Display';
  }
  h2 {
      font-size:2.625rem
  }
  h6, .page-id-179 .subpage-heading {
      position:relative
  }
  .subpage-heading {color: var(--secondary-two) !important; text-transform: uppercase; font-size: 1.188rem !important; margin-bottom: 15px !important;}
  .primary-subheading, .primary-subheading strong {
    color: var(--btn-text) !important;
    line-height: 3.438rem !important;
    font-weight: 500 !important;
    font-size: 2.625rem !important;
    margin-bottom: 2.1rem !important;
  }
  h6 span, .page-id-179 .subpage-heading span {background:var(--white); z-index:1; position:relative; padding-right:10px; }
  h6:after, .page-id-179 .subpage-heading:after{
          content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background: #FFF;
      background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 12%, rgba(171, 107, 255, 1) 24%, rgba(38, 10, 51, 1) 50%, rgba(171, 107, 255, 1) 76%, rgba(255, 255, 255, 1) 88%);
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
      margin: auto;
      z-index:0;
  }
  .sub-heading {
      position:relative;
    color:var(--white);
  }
  .sub-heading span { z-index:1;  background:var(--primary); position:relative; font-weight: 600; padding-right:10px;}
  .sub-heading:after {
          content: '';
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 3px;
      background:var(--white);
      display: flex;
      align-items: center;
      justify-content: center;
      top: 0;
      margin: auto;
      z-index:0;
  }
  .primary-bg {background:var(--primary)}
  .secondary-bg {background:var(--secondary)}
  .container-inner { max-width:1184px; width:100%; margin:0 auto}
  .menu {display:flex}
  .menu li { padding:0 50px}
  .menu li a { color:var(--white);font-size:1.125rem;  font-family: 'Funnel Display'; font-weight:500; text-transform:uppercase;display:inline-block; 
  padding:41px 0 41px; position:relative; transition-property: all;transition-duration: 300ms;transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  .menu li.phoneIcon-menu a:before { content:''; position:relative; width:17px; height:17px; display: inline-block; margin-right: 7px;vertical-align: middle; top: -2px;
  background:url(./assets/images/phone.svg) no-repeat; background-size:100%;}
  .menu li a:after {content:''; position:absolute; width:0; height:3px; bottom:0; left:0; right:0; background:var(--primary-two); opacity:0; 
  transition-property: all;transition-duration: 300ms;transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
  .menu li a:hover:after, #menu-main-menu li.active a:after {opacity:1; width:100%}
  .menu li a:hover, #menu-main-menu li.active a {color:var(--primary-two);}
  .hero-section {background:url(./assets/images/hero-bg.svg) no-repeat; background-position:bottom right;
  background-size:cover}
  .btn-primary { 
  display:inline-block;
  padding:5px 39px;
  background: #FFB447;
  background: linear-gradient(45deg,rgba(255, 194, 107, 1) 0%, rgba(255, 190, 98, 1) 33%, rgba(255, 181, 76, 1) 66%, rgba(255, 171, 51, 1) 100%);
  color:var(--btn-text);;
  text-align: center;
  font-family: "Funnel Display";
  font-size: 1.5rem;
  font-style: normal;
  line-height:2.18;
  font-weight: 600;
  text-transform:uppercase;
  transition-property: all;transition-duration: 300ms;transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  background-size: 100% 100%;
  position: relative;
  overflow: hidden;
  }
  .btn-primary:hover {
      /*background-size5: 180% 100%;
      background-image5: linear-gradient(3360deg, rgba(255, 181, 76, 1) 25%, rgba(255, 181, 76, 1) 27%, rgba(255, 172, 51, 1) 30%);*/
  
  } 
  .btn-primary span { position: relative; z-index: 2;}
  .btn-primary:before {
    content: '';
    clip-path: polygon(0 0, 67% 0, 55% 100%, 0% 100%);
    position: absolute;
    top: 0;
    left: 0;
    width: 86%;
    height: 100%;
    z-index: 1;
    background:#FFAB33;
    transition-property: all;transition-duration: 300ms;transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  .btn-primary:hover:before {margin-left:-87%}
  .bg-bottom-left{background-position: bottom left;}
  .bg-bottom-right{background-position: bottom right;}
  .traiangle-border {
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 30px solid var(--primary-two);
    position: absolute;
    left: -26px;
    top: -11px;
    transform: rotate(-45deg);
    z-index: 1;
  }
  .traiangle-border-bottom {
    content: '';
    width: 0;
    height: 0;
    border-left: 23px solid transparent;
    border-right: 23px solid transparent;
    border-bottom: 23px solid var(--primary);
    position: absolute;
    left: -13px;
    top: -2px;
    transform: rotate(-45deg);
    z-index: 0;
  }
  .scrollbar-custom { overflow-y: auto;}
  .scrollbar-custom::-webkit-scrollbar {
    width: 10px;
  }
  
  /* Track */
  .scrollbar-custom::-webkit-scrollbar-track {
    background: var(--primary-two); 
  }
   
  /* Handle */
  .scrollbar-custom::-webkit-scrollbar-thumb {
    background:var(--primary);
    border-left:0px solid var(--primary-two);
    border-right:5px solid var(--primary-two);
  }
  .host-grotesk {
  font-family: 'Host Grotesk';
  }
  .nav-icon { display: none;}
  .site-header {position: fixed; top:0; left:0; width: 100%; height: 109px; display: flex; align-items: center;}
  .site { padding-top: 77px;}
  .scrollbar-custom p { padding-top: 10px; font-size: 16px;}
  .listview-sec { 
    list-style: nu;
      list-style-position: inside;
  }
  .regulatory-sub {
    list-style: disc;
    padding: 10px 30px 0 50px;
  }
  .page-id-179 .entry-header{ padding-top: 90px;}
  .page-id-179 .entry-header h1{ display: none;}
  .page-id-179 .ptext, .listview-sec li, .regulatory-sub li{color:#2E4756; font-size:1.188rem; line-height:1.625rem}
  .page-id-179 .entry-title {font-size:1.188rem; line-height:1.625rem;font-family: 'Funnel Display'; }
  .page-id-179 .ptext {margin-bottom: 1.9rem;}
  .listview-sec li, .regulatory-sub li { margin-bottom: 12px;}
  @media only screen and (max-width:1150px) {
    .container-inner { padding-left: 30px; padding-right:30px;}
    .site { padding-top: 20px;}
  }
  @media only screen and (max-width:1023px) {
    .nav-icon { display: block;}
   .menu { flex-direction: column;}
   .site-header  { padding: 20px 0;height: 66px; }
   .main-navigation {
    top: 109px;
    top:66px;
    position: absolute;
    width:300px;
    height: 100vh;
    background: var(--primary);
    right: -310px;
    transition: all ease-in 0.4s;   
    padding-top:18px;
  }
    .main-navigation.menu-open { display: block; right:0}
    .menu li a { margin:0 0 15px; padding: 0;}
    .menu li:last-child a:before { display: none;}
    .menu li {padding: 0 30px;}
    .menu li a:hover, #menu-main-menu li.active a {color: var(--white);}
    
  }
  @media only screen and (max-width:767px) {
  .btn-primary {padding: 2px 24px;}
  .menu li a {color: var(--white);}
  .menu li a:hover, #menu-main-menu li.active a {color: var(--white);}
  .site { padding-top: 100px; padding-top: 20px;}
  .hero-section {
    background: url(./assets/images/herobanner-mobile-two.png) no-repeat;
    background-position: 0 0;
    background-size: cover;
}
  }
  
  .nav-icon {
    width: 45px;
    width: 40px;
    height: 45px;
    position: relative;
    /* margin: 50px auto; */
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
    margin-top: 17px;
  }
  
  .nav-icon span {
    display: block;
    position: absolute;
    height: 5px;
    width: 100%;
    background:var(--primary-two);
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
  }
  
  
  
  .nav-icon span:nth-child(1) {
    top: 0px;
  }
  
  .nav-icon span:nth-child(2),#nav-icon3 span:nth-child(3) {
    top: 13px;
  }
  
  .nav-icon span:nth-child(4) {
    top: 25px;
  }
  
  .nav-icon.open span:nth-child(1) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  
  .nav-icon.open span:nth-child(2) {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top:16px;
  }
  
  .nav-icon.open span:nth-child(3) {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top:16px
  }
  
  .nav-icon.open span:nth-child(4) {
    top: 18px;
    width: 0%;
    left: 50%;
  }
  #topBtn {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 42px;
    height: 42px;
    border-radius: 99%;
    background:var(--primary);
    color: #fff;
    border: none;
    cursor: pointer;
    border: 2px solid #fff;
    display: none; 
  }
  #topBtn svg{ margin: 0 auto;}
  
   div div > i.fa-circle:after {
    box-shadow: 0 0 0px 0 rgba(255, 202, 110, 1);
    border-radius: 100px;
    content: '';
    position: absolute;
    left: -1px;
    top: -2px;
    width: 13px;
    height: 13px;
    transition: all 0.5s ease-in-out;
    opacity: 0;
    transform: scale(0);
  }
  div div > i.fa-circle:hover:after {
    opacity: 1;
    box-shadow: 0 0 0px 2px rgba(255, 202, 110, 1);
    transform: scale(1);
    transition: all 0.8s ease-in-out;
  }
  .imh-6310-drag i:before {
    font-size: 0.92em !important;
  }
  .imh-6310-template-01-hover-content {
    border:2px solid #AB6BFF;
    background:#ffffff !important;
    width:140px !important;
    height:154px !important;
    color: #3C2347 !important;
    text-align:center !important
    }
    .imh-6310-template-01-hover-content p { 
    color: #3C2347;
    font-family: "Source Sans 3";
    font-size: 13px;
    font-style: normal;
    font-weight: 500 !important;
    margin-bottom: 5px !important;
    line-height: 17px;
    }
    .imh-6310-template-01-hover-content .btm-button {
    position:relative;
    color: #3C2347;
    font-family: "Source Sans 3";
    font-size: 13px;
    font-style: normal;
    font-weight: 600;
    line-height: 10px;
    }
    .imh-6310-template-01-hover-content strong {
    color: #FFF;
    margin-bottom:9px;
        text-align: center;
        font-family: "Source Sans 3";
        font-size: 13px;
        font-style: normal;
        font-weight: 600;
        line-height: 15px;
        background: #AB6BFF;
        height: 33px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .imh-6310-template-01-hover-content .btm-button:before{
        content: "";
        position: absolute;
        left: 0;
        bottom: -19px;
        margin: 0 auto;
        right: 0;
        background: #fff;
        width: 15px;
        height: 15px;
        border: 2px solid #AB6BFF;
        -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
        border-top-color: #fff;
        border-left-color: #fff;
    }
  .page-template-default .entry-content p a{
    text-decoration: underline;
  }
  
  .page-template-default .entry-content ul li{
    list-style-type: disc;
    margin-left: 50px;
  }

  #loader-overlay {
 
    position: fixed;
 
    top: 0;
 
    left: 0;
 
    width: 100%;
 
    height: 100%;
 
    background-color: #ffffff; /* Change to any color */
 
    z-index: 9999; /* Ensures it stays on top */
 
    display: flex;
 
    justify-content: center;
 
    align-items: center;
 
}
 
 
 
/* A simple CSS spinner */
 
.loader-spinner {
 
    border: 5px solid #f3f3f3;
 
    border-top: 5px solid #3498db;
 
    border-radius: 50%;
 
    width: 50px;
 
    height: 50px;
 
    animation: spin 1s linear infinite;
 
}
 
 
 
@keyframes spin {
 
    0% { transform: rotate(0deg); }
 
    100% { transform: rotate(360deg); }
 
}