:root{
  --color-accent-500:hsl(12, 60%, 45%);
  --color-accent-400:hsl(12, 88%, 59%);
  --color-accent-300:hsl(12, 88%, 75%);
  --color-accent-100:hsl(13, 100%, 96%);
 
  --color-primary-400:hsl(229, 38%, 23%);

  --color-neutral-900:hsl(233, 12%, 13%) ;
  --color-neutral-100:hsl(0, 0%, 100%) ;

  --font-family-primary:'Be Vietnam Pro', sans-serif;

  --font-family-body:var(--font-family-primary);
  --font-family-heading:var(--font-family-primary);

  --font-weight-regular:400;
  --font-weight-semi-bold:500;
  --font-weight-bold:700;

  --font-size-300:0.8125rem;
  --font-size-400:0.8750rem;
  --font-size-550:0.9375rem;
  --font-size-600:1rem;
  --font-size-700:1.875rem;
  --font-size-800:2.5rem;
  --font-size-900:3.5rem;

  --font-size-body:var(--font-size-400);
  --font-size-primary-heading:var(--font-size-800);
  --font-size-secondary-heading:var(--font-size-700);

  --font-size-nav:var(var(--font-size-500));
  --font-size-button:var(--font-size-300);

  --size-100: 0.25rem;
  --size-200: 0.5rem;
  --size-300: 0.75rem;
  --size-400: 1rem;
  --size-500: 1.5rem;
  --size-600: 2rem;
  --size-650: 2.5rem;
  --size-700: 3rem;
  --size-800: 4rem;
  --size-900: 5rem;
  
  
}

@media(min-width:50em){
  :root{
   
    --font-size-body:var(--font-size-500)
    --font-size-nav:var(--font-size-300)
    --font-size-primary-heading:var(--font-size-900);
    --font-size-secondary-heading:var(--font-size-800);
  }
}


/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin */
* {
  margin: 0;
  padding:0;
  font:inherit;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
html,
body {
  height: 100%;
 
}

body {
 
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture,
svg {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations, transitions and smooth scroll for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
   scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}



/* General Stylings */
body {
  font-size:var(--font-size-body);
  font-family:var(--font-family-body);
  color: var(--color-primary-400);

}
p:not([class]){
  opacity:0.7;
  max-width:32ch;
}

p[data-width="wide"]{
 max-width:42ch;
}


/* button */
.button{
  display:inline-flex;
  cursor:pointer;
  text-decoration:none;
  border:0;
  border-radius: 100vmax;
  padding : 1em 2.5em;
  font-weight:var(--font-weight-bold);
  font-size:var(--font-size-button);
  color:var(--color-neutral-100);
  background-color: var(--color-accent-400);
  box-shadow: 0 1.125em 1em -1em var(--color-accent-500)
  
  }
  .button[data-type="inverted"]{
    background-color:var(--color-neutral-100);
    color: var(--color-accent-400);

  }

  .button:hover,
  .button:focus-visible{
    background-color: var(--color-accent-300);


  }
  .button[data-type="inverted"]:hover,
  .button[data-type="inverted"]:focus-visible{
    background-color:var(--color-neutral-100);
    color: var(--color-accent-300);


  }
  .primary-header{
    padding-top:var(--size-700);
    display:flex;
  }
  .nav-wrapper{
    display:flex;
    justify-content: space-between;
    align-items:center;
   
  }

  .mobile-nav-toggle{
    display:none;
  }
  .nav-list{
    font-size:var(--font-size-nav);
    display:flex;
    gap:clamp(var(--size-400),5vw, var(--size-700));
    font-weight:var(--font-weight-semi-bold)

  }
  .nav-list a{
    text-decoration:none;
    color:var(--color-primary-400)

  }

  .nav-list a:hover,
  .nav-list a:focus {
    text-decoration:none;
    color:var(--color-accent-400);
  }



  @media (max-width:50em){
    .primary-navigation {
      padding:var(--size-600);
      display:none;
      position:absolute;
      z-index:2;
      inset:7rem var(--size-400) auto;
      background-color: var(--color-neutral-900);
      border-radius:var(--size-100);
      box-shadow: 0 0 0.75em rgb(0,0,0,0.05)

    }
    .primary-header[data-overlay]::before{
      content:'';
      position:fixed;
      inset:0;
      z-index:1;
      background-image:linear-gradient(rgb(0 0 0 /0), rgb(0 0 0 / 0.8));
    }
    .nav-list{
      display:grid;
      gap:var(--size-600);
      text-align: center;
      font-weight:var(--font-weight-bold)
     

    }
    .nav-list a{
      text-decoration:none;
      color:var(--color-accent-400)
  
    }
  
    .nav-list a:hover,
    .nav-list a:focus {
      text-decoration:none;
      color:var(--color-accent-300);
    }


    
    .primary-navigation[data-visible]{
      display:block;
      position:absolute;
    
    }
    .mobile-nav-toggle{
    position:absolute; 
    top:var(--size-650);
    right:var(--size-400);
    display:block;
    cursor:pointer;
    background: transparent;
    z-index: 1;
    border:0;
    padding:0.5em;
  }
  .mobile-nav-toggle .icon-close{
    display:none;

  }
  }

.opened{
  position:fixed;
  display:block;


}
/* numbered-item */
.numbered-items{
  width:fit-content;
  margin-inline:auto;
}
.numbered-items li{
counter-increment:count;
}

.numbered-items_body{
  grid-column:1 / -1;
}
.numbered-items div {
  display: grid;
  position:relative;
  align-items:center;
  column-gap:var(--size-400);
  grid-template-columns:min-content 1fr;
}






.numbered-items div::before{
  display:flex;
  align-items: center;
  content: "0" counter(count);
  background-color:var(--color-accent-400);
  color:var(--color-neutral-100);
  font-weight:var(--font-weight-bold);
  padding: 0 var(--size-500);
  border-radius:100vw;
  height:40px;
  grid-column:1 / 2;
  grid-row: 1 / 2;
  

}
.numbered-items div::before,
.numbered-items div::after{
  height:40px;

}

@media(max-width:30em){
.numbered-items div::after{
  content:'';
  z-index:-1;
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  background:var(--color-accent-100);
  display:block;
  
  width:100%;
   
}

}
.numbered-items_title {
  grid-row:1 / 2;
  grid-column:2 / 3;
  line-height: 1;
}
/* slider or corousel */
.padding-block-700{
  align-self: center;
  align-items: center;
  text-align: center;
}

.swiper{
  display: flex;
  justify-content: center;
  margin-top: var(--size-700);
  margin-bottom: var(--size-700);
  width: calc(100vw - 100px);
  /* overflow: hidden; */
  
}
.swiper-wrapper {

  gap: var(--size-300);
  list-style: none;
  padding-bottom: var(--size-700);
   display: flex;
  
}

.swiper-wrapper > * {
  position: relative;
  flex: 0 0 auto;
  width: 100%;
}
.swiper-slide > *{
  display:block;
  text-align: center;
  flex-direction: column;
  margin-inline:auto;
 
}




.swiper-pagination{
  margin-top: 30px;
}



/* footer navigation  */


.footer-nav{
  columns:2;

}
.primary-footer-wrapper{
  display:grid;
  gap:var(--size-700);
  grid-template-areas:
  "form"
  "nav"
  "logo-social"
  "copyright";

 }
 

 .primary-footer-logo-social{
  grid-area: logo-social;
  display:flex;
  flex-direction:column-reverse;
  align-items:centre;
  gap:var(--size-700);


 } 
 .primary-footer-logo-social > a {
  align-self: center;
  filter: invert(99%) sepia(55%) saturate(221%) hue-rotate(185deg) brightness(121%) contrast(100%);
}
 .primary-footer-nav{
  grid-area: nav;

 }
 .primary-footer-form{
  grid-area:form;
  display:grid;
  align-content:space-between;
  
 }
 .primary-footer form{
  display:flex;
  gap:var(--size-400)
 }

 input:where([type="text"], [type="email"], ) {
  border-radius: 100vw;
  border: 0;
  padding: var(--size-300) var(--size-300);
  opacity:0.75;
}

 .primary-footer-copyright{
  align-self:end;
  justify-content:space-between;

 }

.primary-footer-wrapper > *{
 margin-inline:auto;

}

.footer-nav a {
  color:var(--color-neutral-100);
  text-decoration:none;

}
.footer-nav a:is(:hover, :focus ) {
  color:var(--color-accent-400);
  text-decoration:none;

}


.social-list{
  display:flex;
  gap:var(--size-600);
}

.social-list a:hover,
.social-list a:focus{
  filter: invert(63%) sepia(42%) saturate(6855%) hue-rotate(336deg) brightness(96%) contrast(98%);
}
.social-icon{
  width:var(--size-600);

}

@media(max-width:50em){
 .primary-footer-wrapper > * {
    margin-inline:auto;
    
 }

}
@media (min-width:60em)  {
  .primary-footer-wrapper{
    position:relative;
    gap:var(--size-700);
    grid-template-areas:
    " logo-social nav form copyright ";
    
  
   }

   .primary-footer-logo-social{
    align-items:flex-start;
    
    justify-content:space-between;
    gap:var(--size-700);
    width:11rem;
  }
  .primary-footer-copyright{
    transform: translateX(-23rem);
    width:10rem;
    
  }
   
 }

@media(min-width:50em){
  .social-list{
    display:flex;
    gap:var(--size-300);
  }
  .social-icon{
    width:var(--size-500);
  }

}
/* cta */
.cta{
  position:relative;
  isolation:isolate;
  text-align: center;
  display:inline-flex;
}
@media(min-width:50em){
 .cta{
  text-align:left;

 }
}
.cta::before{
  content: "";
  position:absolute;
  z-index:-1;
  inset:0;
  background-image: url(
    "images/bg-tablet-pattern.svg"
  ),
   url(
    "images/bg-tablet-pattern.svg"
  )
  ;
  opacity:0.1;
  background-position:-15rem -5rem, 80rem -42rem;
  background-repeat:no-repeat;
  
}
/* utility classes */
.container{
  --max-width: 1110px;
  --container-padding:0rem;
  width: min(var(--max-width), 100% - (var(--container-padding) * 2));
  margin-inline: auto;
  grid-gap:0rem;
}
.even-columns{
  display:grid;
  gap:1rem;
  
}
.justify-self-end-md {
  justify-self: center;
  

}

@media (min-width: 50em) {
  .justify-self-end-md{ 
   justify-self:end ;
  }
}

.vertical-align-center{
  align-items:center;
}
.text-center{
  text-align:center;

}
@media(max-width:50em){
.text-center-sm-only{
 text-align:center;
}

}

.text-center p {
  margin-inline:auto;
}
@media(max-width:50em){
 .text-center-sm-only p {
  margin-inline:auto;
} 
}



:where(.flow :not(:first-child)) {
  margin-top: var(--flow-spacer, 3em);
}

@media (min-width:50em){
.even-columns{
  grid-auto-flow:column;
  grid-auto-columns:1.2fr;
}

}

.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}






.text-primary-400{
  color:var(--color-primary-400);
}
.text-accent-400{
  color:var(--color-accent-400);
}
.text-accent-100{
  color:var(--color-accent-100);
}
.text-neutral-100{
  color:var(--color-neutral-100);
}
.text-neutral-900{
  color:var(--color-neutral-900);
}

.background-primary-400{
  background-color:var(--color-primary-400);
}
.background-accent-400{
  background-color:var(--color-accent-400);
}
.background-accent-100{
  background-color:var(--color-accent-100);
}
.background-neutral-100{
  background-color:var(--color-neutral-100);
}
.background-neutral-900{
  background-color:var(--color-neutral-900);
}



.font-weight-bold{font-weight:var(--font-weight-bold);}
.font-weight-semi-bold{font-weight:var(--font-weight-semi-bold);}
.font-weight-regular{font-weight:var(--font-weight-regular);}

.font-size-primary-heading{
  font-size:var(--font-size-primary-heading);
  line-height: 1.1;
}
.font-size-secondary-heading{
  font-size:var(--font-size-secondary-heading);
  line-height:1.1;
}
.font-size-300{
  font-size:var(--font-size-300);
}
.font-size-400{
  font-size:var(--font-size-400);
}
.font-size-500{
  font-size:var(--font-size-500);
}
.font-size-600{
  font-size:var(--font-size-600);
}

.padding-block-900{
  padding:var(--size-900);
}
.padding-block-700{
  padding:var(--size-700);
}
.margin-bottom-700{
margin-block-end:var(--size-700);
}

.display-small-none {
  display:none;
}
@media (min-width:50em){
  .display-medium-inline-flex {
    display:inline-flex;

  }
}