* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

textarea {
  resize: none;
}

:root {

  --primary-red: #CD0000;
  --white-font: #FFFFFF;
  --dark-font: #333333;
  --lighter-background: #E8E8E8;
  --lightest-background: #F7F7F7;
  --logo-padding: clamp(0.5rem, 0.5rem + 0.667vw, 1rem);
  --nav-height: clamp((2rem, 1.999rem + 1.334vw, 3rem)) - var(--logo-padding);
  --visible-images: 5;
  --shadow-color: rgba(51,51,51,0.8);

}

button {

  background-color: #CD0000;
  border-radius: 0;
  padding: 1rem 2rem;
  width: CALC(50% - 4rem);
  height: auto;
  color: #FFFFFF;
  font-weight: 700;
  letter-spacing: 0.0875rem;
  border: 0;
  box-shadow: 0.15rem 0.15rem rgba(51,51,51, 0.25);
}



.button-container {
  display: flex;
  flex-direction: column; 
   justify-content: center; 
   align-content: center;
   align-items: flex-start;
   z-index: 1;

 }



button a {
  color: #FFFFFF;
  text-decoration: none;

} 

h1, h2, h3, nav, button, button a {
  font-family: "Montserrat", sans-serif;
}

h4, h5, h6, p, span {

  font-family: "Open Sans", sans-serif;

}

  /* Fluid typography */
  body {
    line-height: clamp(1.3, 1.5 + 0.2vw, 1.8);
    letter-spacing: clamp(0.02em, 0.05vw, 0.1em);
    word-spacing: clamp(0.05em, 0.1vw, 0.2em);
  }

h1 {
font-size: 1.875rem;
font-size: clamp(1.875rem, 1.7019230769230769rem + 0.8653846153846154vw, 3rem);
    line-height: clamp(1em, 2.5vw + 1em, 1.25em);
  }

 h2 {
font-size: 1.25rem;
font-size: clamp(1.25rem, 0.9807692307692307rem + 1.3461538461538463vw, 3rem);
}

  h3 {
    font-size: clamp(1rem, -0.24593rem + 5.246vw, 2.5rem);
    letter-spacing: 0.15rem;
    line-height: clamp(1em, 2.5vw + 1em, 1.25em);
  }


    h4 {
    font-size: clamp(1rem, -0.24593rem + 5.246vw, 2rem);
    line-height: clamp(1em, 2.5vw + 1em, 1.25em);
  }


    h5 {
    font-size: clamp(1rem, -0.24593rem + 5.246vw, 2.5rem);
    line-height: clamp(1em, 2.5vw + 1em, 1.25em);
  }


        h6 {
   font-size: clamp(0.9rem, -0.24593rem + 4.746vw, 2.3rem);
  line-height: clamp(1em, 2.5vw + 1em, 1.25em);
}

p, span, button, button a {

font-size: 1rem;
font-size: clamp(0.85rem, 0.78rem + 0.294vw, 1.25rem);
    line-height: clamp(1.5em, 2.5vw + 1em, 1.75em);

  }

  /* .home {
    height: 100vh;
    overflow: hidden;
  } */


.container-main {
  height: 100vh;
  overflow: hidden;
}

.hero {
  width: CALC(50% - 6rem);
  height: 100vh;
  display: grid;
  justify-content: center;
  /* justify-items: center; */
  align-content: center;
  /* align-items: center; */
  /* grid-template-columns: calc(50% - 1rem); */
  grid-template-areas: 
                   "logo"
                   "intro-msg"
                   "intro-msg"
                   "teaser-text"
                   "button"
                   "companies"
                   "companies";
  grid-template-rows: max-content max-content max-content max-content max-content max-content max-content;
  padding: 1rem;
  grid-gap: 1rem;
 
 
}

.logo img, .intro-msg h2, .intro-msg-p p, .button {

margin: 0 0 0 3rem;

}


.logo img {
justify-self: normal;
width: 20vw;
height: auto;

}

.hero h2 {

font-weight: 700;


}



.hero-bg {
 
    background-image: url('../images/hero.jpg');
    background-color: #FFFFFF;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 50vw auto;
    z-index: 1;
 
  }

  /* Infinite Scroll */

  .yt {
    --shadow-color: 282deg 10% 10%;
    font-family: system-ui;
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    z-index: 100;
    text-decoration: none;
    color: hsl(282 80% 20%);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.75em 1.25em;
    background-image: linear-gradient(to right, red, purple, blue 50%, white 50%);
    background-size: 200% 100%;
    background-position: right;
    transition: background-position 350ms;
    box-shadow: 0.3px 0.5px 0.8px hsl(var(--shadow-color) / 0.05),
      -1.5px 2.2px 3.8px -0.1px hsl(var(--shadow-color) / 0.19),
      -3.1px 4.5px 7.9px -0.3px hsl(var(--shadow-color) / 0.33),
      -6.4px 9.5px 16.5px -0.4px hsl(var(--shadow-color) / 0.47);
  }
  
  .yt:hover,
  .yt:focus {
    color: white;
    background-position: left;
  }

  .scroller {
    max-width: CALC(50vw - 6em);
  }
  
  .scroller__inner {
    padding-block: 1rem;
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 3rem;

  }

  .scroller img {
    width: 60%;
    max-width: 6rem;
    height: 60%;
  }
  
  .scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      white 20%,
      white 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
  }
  
  .scroller[data-animated="true"] .scroller__inner {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    flex-wrap: nowrap;
    -webkit-animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
            animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
  }
  
  
  
  .scroller[data-direction="right"] {
    --_animation-direction: reverse;
  }
  
  .scroller[data-direction="left"] {
    --_animation-direction: forwards;
  }
  
  .scroller[data-speed="fast"] {
    --_animation-duration: 20s;
  }
  
  .scroller[data-speed="slow"] {
    --_animation-duration: 60s;
  }
  
  @-webkit-keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }
  
  @keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
  }


.process-fit {
height: 100%;
height: fit-content;
overflow: hidden;


}

/* hero section */


.e-font-icon-svg {
  width: 2rem;
  min-width: 2rem;
  height: 2rem;
  min-height: 2rem;
 
}

.icon-container {

  height: 3rem;
  width: 100%;

  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}


.icon {
  font-weight: 500;
    font-style: normal;
    font-size: 2rem;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    color: var(--primary-red);
 
  
  
}

.first-icon {

  color: var(--lightest-background);
  margin: 0 2rem;
}


#first-box {
  color: var(--lightest-background);
  
  text-align: center;
  line-height: 1.75rem;
}

#first-box h3 {

  font-weight: 900;


}




/* Now lets do a Grid-based layout */



  /* article {
    margin: 0;
    background-color: var(--color);
    width: repeat(3, 33.33%);
  } */

  .process:nth-child(1) { --color: var(--primary-red); }
  .process:nth-child(2) { --color: var(--lighter-background); }
  .process:nth-child(3) { --color: var(--white-font); }
  .process:nth-child(4) { --color: var(--lighter-background); }
  .process:nth-child(5) { --color: var(--white-font);  }
  .process:nth-child(6) { --color: var(--lighter-background); }


  .process-main {
    display: grid; 
    justify-content: initial;
    justify-items: center;
    align-content: center;
    align-items: center;
    grid-template-columns: repeat(3, calc(33.33% - 1rem));
    grid-template-areas: 
                     "process process process"
                     "process process process";
    grid-template-rows: max-content max-content;
    padding: 2rem 1rem 2rem 1rem;
    grid-gap: 1rem;

/* height: (100% - 11rem); */

 
  }


.process h3 {

font-size: 1.5rem;
font-weight: 900;
font-size: clamp(1rem, 1.0578rem + 0.283vw, 1.5rem);

width: 100%;
display: flex;
justify-content: center;
align-items: center;

margin: 1rem 0;


}



.process p {
  font-weight: 700;
  font-size: clamp(0.85rem, 0.78rem + 0.294vw, 1.25rem);
  margin: 0 0 1rem 0;
}

.process {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  height: (100% - 8rem);
  height: calc(50vh - 8rem);
  padding: 0 1.5rem 0 1.5rem;
  overflow: hidden;
  background-color: var(--color);
  box-shadow: 0.15rem 0.15rem rgba(51,51,51, 0.25);
  border-top: 0.15rem solid rgba(51,51,51, 0.25);
  border-left: 0.15rem solid rgba(51,51,51, 0.25);
}

.process-box-one { 

  box-shadow: 0.15rem 0.15rem rgba(51,51,51, 0);
  border-top: 0 !important;
  border-left: 0 !important;
  border: 0.15 solid #cd0000 !important;


}

.page-heading {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
  height: 5rem;
  width: 100vw;
  margin: 1rem 3rem;

}


.red-nav {

  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background-color: var(--primary-red);
  height: 5rem;
  top: 0;
  position: sticky;
  
}

.eyebrow span {
font-weight: 300;
font-family: "Montserrat", sans-serif;
color: var(--primary-red);
letter-spacing: 0.15rem;

}

img.mobile-menu {max-height: 3rem;  margin: 0 0 0 3rem;}

nav {
  position: absolute;
  right: 0;
  flex: 1;
  text-align: left;
  justify-content: flex-end;
  margin: 0 3rem 0 0;
  font-size: 1rem;
  font-size: clamp(1rem, 0.9552rem + 0.1887vw, 1.25rem);
 
  
}

nav a {
  padding: 0.5rem 1rem;
  margin-left: 1rem;
  text-decoration: none;
  color: var(--lightest-background);
  font-weight: 700;
  letter-spacing: 0.15rem;
  
}



/* Founder */
.founder-main {
  
  height: CALC(100vh-5vh);
  width: 100%;
  display: grid;
 
  justify-content: center; 
 justify-items: left; 
  align-content: center; 
align-items: center;
  grid-template-areas: 
                   "founder-main-h2"
                   "founder-main-p1"
                   "founder-main-p2"
                   "founder-main-p3"
                   "founder-main-img"
                   "founder-main-p4"
                  ;
  grid-template-rows: max-content max-content max-content max-content max-content max-content ;
  padding: 1rem;
  grid-gap: 1rem;
  /* margin: 3rem; */
  z-index: 999; 
}

.founder-main-h2 h2 {

  font-weight: 700;

  
  }

  .founder-main h2, .founder-main-p1, .founder-main-p2, .founder-main-p3 { 

    margin: 0 3rem 1.75rem 3rem !important;
    width: 50%;
  }
 
.founder-main-p4 { 

    margin: 1.75rem 3rem 0 3rem !important;
    width: 50%;
  }




.founder-main-img img { 
  height: auto;
  width: 100%;
  max-width: 350px;
overflow: hidden;  
margin: 0;
  
}
  
  .founder-main {
   
      background-image: url('../images/founder.jpg'); 
      /* background-color: #FFFFFF; */
      background-position: center right;
      background-repeat: no-repeat;
      background-size: contain;
   height: 100vh;
   width: auto;
 
   
    }

/* Form */

.appointment-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
  height: auto;
  overflow: hidden;
}

.appointment-container h2 {
  text-align: center;
  font-size: clamp(1.5rem, 1.25rem + 0.25vw, 2rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #333333;
}

#appointmentForm {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  overflow: hidden;
  width: 100%;
  padding: 20px;
}

.form-group {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.form-group input {
  padding: 0.75rem;
  border: 1px solid rgba(51, 51, 51, 0.8);
  border-radius: 0;
  font-size: clamp(0.85rem, 0.78rem + 0.294vw, 1.25rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #333333;
}

.form-group input:focus {
  border-color: #CD0000;
}



#submitButton {
  background-color: #CD0000;
  border: 0;
  color: #FFFFFF;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: clamp(0.85rem, 0.78rem + 0.294vw, 1.25rem);
  font-family: 'Montserrat', sans-serif;
}

#submitButton:hover {
  background-color: #333333;
}

#confirmation {
  text-align: center;
  font-size: clamp(1.5rem, 1.25rem + 0.25vw, 2rem);
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: #333333;
  padding: 20px;
}

.appointment-calendar {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(51, 51, 51, 0.8);
  border-radius: 4px;
  overflow: hidden;
}

.appointment-calendar .time-slot {
  flex: 1;
  text-align: center;
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  color: #333333;
}

.appointment-calendar .available-time-slot {
  background-color: #FFFFFF;
}

.appointment-calendar .unavailable-time-slot {
  background-color: #CD0000;
}

.appointment-calendar .time {
  font-size: 1rem;
  font-weight: 700;
}

.appointment-calendar input[type='datetime-local'] {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
}

.appointment-calendar input[type='datetime-local'] {
  width: 100%;
  border: none;
  outline: none;
  background-color: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 400;
  color: #333333;
}

.appointment-calendar .g-recaptcha {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 15px;
}

  


@media only screen and (max-width: 1200px) { 
  .hero-bg {
    width: 100%;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 100vh;
    width: 100%;
  }
  
.hero {
  display: flex !important; 
  flex-direction: column !important;
  justify-content: center;
align-items: center; 
 width: 100%;
  height: 100%;
  margin: 0 !important;
  padding: 0 !important;

}


.hero-bg-mobile::before {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255,255,255,0.6);
  z-index: 0; 
} 

.founder-main h1, .founder-main h2, .founder-main h3, .founder-main h4, .founder-main h5, .founder-main h6, .founder-main p, .founder-main span, .hero img, .hero h2, .hero p, .hero button, .intro-msg, .intro-msg-p, .logo, .teaser-text, .companies, .companies img, .companies h3, .companies p, .companies button, .companies button a, .companies button a:hover, .companies button a:focus, .companies button a:active, .companies button:hover, .companies button:focus, .companies button:active, .companies button, .companies button a, .companies button a:hover, .companies button a:focus, .companies button a:active, .companies button:hover, .companies button:focus, .companies button:active, .companies button, .companies button a, .companies button a:hover, .companies button a:focus, .companies button a:active, .companies button:hover, .companies button:focus, .companies button:active, .companies button, .companies button a, .companies button a:hover, .companies button a:focus, .companies button a:active, .companies button:hover, .companies button:focus, .companies button:active {

  z-index: 1;

}

.companies {
 display: flex;
 flex-direction: column;
 width: 100%;
 justify-content: center;
 align-items: center;
}

.scroller {
  /* width: CALC(100% - 6rem);  */
  /* width: 100vw !important; */
  margin: 0 !important;
  padding: 0 !important;
}

.scroller__inner {
  padding-block: 1rem;
  align-items: center;
  display: flex;
  flex-wrap: nowrap; 
  gap: 3rem;

}

.scroller img {
  width: 100%;
  max-width: 6rem;
  height: 100%;
}



.process-main {
  display: grid; 
  justify-content: initial;
  justify-items: center;
  align-content: center;
  align-items: center;
  grid-template-columns: 1fr;  
  grid-template-areas: 
                   "process"
                   "process"
                   "process"
                   "process"
                   "process"
                   "process";
  grid-template-rows: max-content max-content;
  padding: 2rem 1rem 2rem 1rem;
  grid-gap: 1rem;
  margin: 0 2rem;

/* height: (100% - 11rem); */


}

.intro-msg h2, .intro-msg-p {
margin: 0 3rem;
text-align: center;    
  justify-content: center !important;
  align-items: center !important; 
  align-content: center !important;
line-height: 1; 

}

.logo {
  width: CALC(100vw - 2rem) !important; 
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

  .logo img {
width: 100%;
max-width: 50% !important; 
    height: auto;
    z-index: 1;

    margin: 0; 
    
 
  }

  .process .first-line h3 {
    white-space: normal !important; 
    text-align: center;
  }

  .process p,  .process span  {
    font-size: clamp(1rem, 0.9552rem + 0.1887vw, 1.25rem) !important;
  }

  p, span {
    font-size: 0.85rem !important;
  }

.second-line   {margin: 0 5rem 3rem 5rem !important;}
  
 


  .founder-main {
    display: flex !important; 
    flex-direction: column !important;
    justify-content: center;
  align-items: center; 
   width: 100%;
    height: CALC(100vh - 5rem);

  
  }
  
  
  .founder-main::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.6);
    z-index: 1; 
  } 

 
  .founder-main h2, .founder-main-p1, .founder-main-p2, .founder-main-p3, .founder-main-p4 { 

   
    width: 50%;
  }
 


.founder-main h2, .founder-main p, .founder-main button {


width: 80% !important; 

}

.founder-main-img {

  width: 100%; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: flex-start !important;
  justify-items: flex-start !important;
  margin: 0 0 0 3rem !important;
padding: 0 !important; 
}



  .founder-main-h2 {margin: 45rem 0 0 0 !important;}

  .founder-main p {
    padding: 0 3rem 0 0 !important; 
   } 

  .founder-bg-mobile {
   
    
    background-position: top center;
    background-size: cover;

 
  }
 
  .founder-main-img img { 
    height: auto;
    width: 100%;
    max-width: 350px;
  overflow: hidden;  
  margin: 0;
    
  }

  .founder-button {

    height: 1rem;
    width: auto;
    background: #CD0000;
  }
 
 

  .button-container {
   display: flex;
   flex-direction: column; 
    justify-content: center;
    align-content: center;
    align-items: center;
    z-index: 1;

  }

.button {

  width: 100%; 
  justify-content: center;
  align-content: center;
  align-items: center;
}


}


.dialog {
  padding: 20px;
  border: 0;
  background: transparent;
}

.dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(4px);
}

.dialog__wrapper {
  padding: 20px;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.dialog__close {
  border: 0;
  padding: 0;
  width: 24px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  background: #000;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  --webkit-appearance:none;
  appearance: none;
}