@layer utilities {
  @import "./utility.css";
}
  @import "./tailwind.css";
@layer components {
  @import "./styles.css";
}
/* Theme styles */
/* breakpoints 750px and 950px */


:root {
/* @link https://utopia.fyi/type/calculator?c=360,15,1.2,1900,19,1.25,5,1,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */
/* Font sizes*/
  --fs-050: clamp(0.7813rem, 0.7418rem + 0.1753vw, 0.95rem);
  --fs-100: clamp(0.9375rem, 0.8791rem + 0.2597vw, 1.1875rem);
  --fs-200: clamp(1.125rem, 1.041rem + 0.3734vw, 1.4844rem);
  --fs-300: clamp(1.35rem, 1.2318rem + 0.5252vw, 1.8555rem);
  --fs-400: clamp(1.62rem, 1.4565rem + 0.7266vw, 2.3193rem);
  --fs-500: clamp(1.944rem, 1.7207rem + 0.9924vw, 2.8992rem);
  --fs-600: clamp(2.3328rem, 2.031rem + 1.3415vw, 3.624rem);
  
/*Font Styles*/
  --ff-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ;
  --ff-titles: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" ;
  
/*Spacings*/
  --space-3xs: clamp(0.2rem, 0.25rem + 0.111vw, 0.3rem);
  --space-2xs: clamp(0.5rem, 0.4777rem + 0.119vw, 0.5625rem);
  --space-xs: clamp(0.6875rem, 0.6429rem + 0.2381vw, 0.8125rem);
  --space-s: clamp(0.9375rem, 0.8929rem + 0.2381vw, 1.0625rem);
  --space-m: clamp(1.4375rem, 1.3705rem + 0.3571vw, 1.625rem);
  --space-l: clamp(1.875rem, 1.7857rem + 0.4762vw, 2.125rem);
  --space-xl: clamp(2.8125rem, 2.6786rem + 0.7143vw, 3.1875rem);
  --space-2xl: clamp(3.75rem, 3.5714rem + 0.9524vw, 4.25rem);
  --space-3xl: clamp(5.625rem, 5.3571rem + 1.4286vw, 6.375rem);
/* section spacings */
  --space-sect--ver: var(--space-xl);
  --space-sect--hor: var(--space-xs);
/*Grid styles*/
  --grid-col-s: repeat(auto-fit, minmax( min(14rem, 100%) , 1fr));
  --grid-col: repeat(auto-fit, minmax( min(17rem, 100%) , 1fr));
  --grid-col-l: repeat(auto-fit, minmax( min(20rem, 100%) , 1fr));
/* Colours */
  --col-dark: hsl(240, 4%, 10%);            /* #19191b */
  --col-80:   hsl(240, 4%, 20%);    
  --col-70:   hsl(240, 4%, 30%);     
  --col-60:   hsl(240, 4%, 40%);      
  --col-50:   hsl(240, 4%, 50%);    
  --col-40:   hsl(240, 4%, 60%);        
  --col-30:   hsl(240, 4%, 70%);    
  --col-20:   hsl(240, 4%, 80%);      
  --col-10:   hsl(240, 4%, 90%);          
  --col-light:hsl(240, 4%, 95%);            

  --col-primary: hsl(213, 94%, 67%); /* #60A5FA */
  --col-secondary: hsl(45, 97%, 60%);  /* #FBBF24 */
  --col--bg: var(--col-dark);
  --col--txt: var(--col-light);
  /*Transparent Overlay Colours*/
  --col-light-trans-50: hsl(0, 0%, 97.3%, .5) ;
  --col-dark-trans-10: hsl(240, 4%, 10%, .1);
  --col-dark-trans-50: hsl(240, 4%, 10%, .5); 
  /*button*/
  --btn-padding:  var(--space-xs) var(--space-xl) ;
  --btn-radius: .2em;
  }
@layer components {
body{
    font-family:var(--ff-body);
    font-size: var(--fs-100);
    color: var(--col--txt);
    background: var(--col--bg);
  }
  /* Header styles */
header { 
  position: fixed;
  top:0;
  width:100%;
  z-index: 100;
  backdrop-filter: blur(10px);
  background: linear-gradient( to bottom, var(--col-dark), transparent);
  transition: .4s ease-in-out;
}
.shrink .logo{
  font-size: var(--fs-300)
}
.shrink .menu__btn {
  transform: scale(.7);
  margin: 0;
  }
  .menu__ul  {
  background: var(--col--bg);
}
  /* Dark/Light Theme */
.dark{
  color: var(--col-light); 
  background: var(--col-dark);
}
.light {
  background-color: var(--col-light); 
  color: var(--col-dark)
}

/* Footer */
footer{
  border-top: 1px solid var(--col-dark-50);
}
  h1, h2, h3, h4, h5, h6 { 
    font-family: var(--ff-titles);
    line-height: 1.2;
  }
  h1, .fs-600 { 
    font-size: var(--fs-600);
  }
  h2, .fs-500 { 
    font-size: var(--fs-500);
  }
  h3, .fs-400 { 
    font-size: var(--fs-400);
  }
  h4, .fs-300 { 
    font-size: var(--fs-300);
  }
  h5, .fs-200 { 
    font-size: var(--fs-300);
  }
  h6, .fs-100 { 
    font-size: var(--fs-300);
  }
  .fs-050 {
    font-size: var(--fs-050);
  }

/* contact element */
    .contact{ 
        display: flex;
        flex-wrap: wrap;
        gap: var(--space-xs);
        justify-content: center; 
      
      }
        .contact__item{ 
          display: flex;
          flex-shrink: 0;
          padding: var(--space-s);
        }
          .contact__txt{
            font-weight: 700;
            font-size:1.1em;
          }


/*hover effects*/
.card\:hover-up{
  transition: .4s ease-in-out;
}
.card\:hover-up{
  transform: translateY(-5px);
  box-shadow:  0 0 0px 2px var(--col-light);
}
  .service-card__content  {
    display: flex;
    flex-direction: column;
    padding: var(--space-m);
    gap: var(--space-s)
  }

/*Link styles*/
a {
  color: var(--col-primary);
}
/* Form styles */
.form {
  --light-border: solid var(--col-30);
  --dark-border: solid var(--col-70);
  --light-input: solid var(--col-30);
  --dark-input: solid var(--col-70);
  --light-placeholder: solid var(--col-30);
  --dark-placeholder: solid var(--col-70);
  padding: var(--space-m);
}
  .f__label:has(:not([type="checkbox"]):not([type="radio"]))  {
    color: transparent;
  }
    .f__input{
      background: none;
      border: solid var(--col-dark);
      border-width: 0 0 1px 0;
      color: var(--col--txt);
    }
    .light .f__input{
      color: var(--dark-input);
    }
    .dark .f__input{
      color: var(--light-input);
    }
    .f__input::placeholder{
      color: var(--col-50);
    }
    .form input.btn{
      margin-right: 0;
      margin-top: var(--space-s)
    }
/*button styles*/
.btn{
  border: 1px solid var(--col-light);
  background-color: transparent;
  padding: var(--btn-padding);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;

}
.btn--light{
  background: var(--col-light);
}
.btn--dark{
  background: var(--col-dark);
}
.cta {
  text-transform: capitalize;
  font-weight: 700;
  transition: .4s ease-in-out;
  background: transparent;
  border: none;
}
button.cta{ 
  padding:0;/*Remove user agent padding*/
}
.cta--dark{
  color: var(--col-dark);
}

  .cta--dark svg path{
    fill: var(--col-dark);
    stroke: var(--col-dark);
  }
    .cta svg{
    margin : 0 5px 1px 4px;
    transform: translateY(1px);
    transition: .4s ease-in-out;
  } 
  .cta:hover svg{
    margin:  0  10px -1px 10px;
    transform: rotate(45deg);
  }
/* Animation */
.animate  {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity .7s ease-in-out, transform .7s ease-in-out;
  will-change: transform, opacity;
}
/* When the element is in view */
.animate.in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Background Image */
.img-bg{
  position:relative;
}
  .bg-img__content{
    z-index: 1;
    position: relative;
  }
  .img-bg__img-wrap{
    position: absolute;
    inset:0;
  }  
    .img-bg__img{
      height: 100%;
      width: 100%;
      object-fit: cover;
      object-position: center;
    }


/* Hero section */
.hero::before{
  inset: 0;
  content:'';
  position: absolute;
  z-index: 1;
  background: linear-gradient(to top, var(--col-light), transparent);
}

/* check list */
.check-list{
  font-size: var(--fs-200);

  gap: var(--space-l);
  display: flex;
  flex-direction: column;
}
  .check-list li{
    display: flex;
    align-items: center;      
    gap: var(--space-s);
    position: relative; /*To allow pseudo element/seperator*/
  }
  .check-list li:not(:last-of-type)::after{ /*Seperator*/
    position: absolute;
    content:'';
    bottom:0;
    left:50%;
    height: 1px;
    width: 90%;
    max-width: 100%;
    transform: translateY(calc((var(--space-l) + 1px) /2 )) /*ul gap + seperator widht divided by 2*/
               translateX(-50%);
    background: var(--col-50);
  }

    .check-list span { /*SVG Wrapper*/
      display: flex;
      justify-content: center;
      align-items: center;
    }
      .check-list svg{
        height: var(--fs-200);
        width: var(--fs-200);
      }
      /* checklist image */
      .columns:has(.check-list) >div:has(img){
        position: relative;
      }
      .columns:has(.check-list) img{
        position:absolute;
        height:100%;
        width: 100%;
        object-fit: cover;
        object-position: center;
      }
}/* End components layer Do not remove */