@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");
@import url("https://fonts.googleapis.com/css?family=Inter:400,700,500,600|Plus+Jakarta+Sans:700");
@import url("https://fonts.googleapis.com/css?family=Inter:400,700,500,600|Plus+Jakarta+Sans:700");

/*  new with zoom in 100% */

/* TYPOGRAPHY SYSTEM

Line Heights
Default: 1

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128


- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Font weights
Default: 400
Medium: 500
Semi-bold: 600
Bold: 700

- Line heights
Default: 1
Small: 1.05
Medium: 1.2
Paragraph default: 1.6
Large: 1.8

- Letter spacing
-0.5px
0.75px

:root { 
  --black: #000000;
  --general-color2: #12141d;
  --general-color4: #fafafa;
  --white: #ffffff;
 
 
  --font-family-inter: "Inter", Helvetica;
  --font-family-plus_jakarta_sans: "Plus Jakarta Sans", Helvetica;
}
.bold16px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0;
}

.semi-bold16px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.regular18px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs2);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.inter-normal-vulcan-18px {
  color: var(--general-color2);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs2);
  font-style: normal;
  font-weight: 400;



  

====================Reponsive Design Ingredients==================
1)Fluid Layout 

-allow the webpage to adapt to the current viewport width or height.
-use % or vh or vw instead of px that should adapt to the current viewport width or height.
-use max-width instead of width
2)Responsive Units
-use rem instead of px
-to make it easy scale entire layout down or up automatically
-------Helpul trick setting 1 rem to 10px for easy calculations

3)Flexible Images
-By default images dont scale automatically as we change the viewport so we need to fix that
-always use % for image dimension together with max width property to make it responsive

4)Media Queries
To change styles on certain viewport width which are breakpoints
}



=====1 Rem is equalt to 16px by default==========
====Rem is used to scale the entire layout down or up automatically====


*/
/* Global reset */
/* * {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
} */
*,
*::before,
*::after {
  /* padding: 0;
  margin: 0; */
  box-sizing: border-box;
}
/* ************************************************************************************************ */
/* ================From our grid layout template ===================*/
/* ************************************************************************************************ */
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-family: var(--ff-secondary);
}

/* 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;
}

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

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

/* 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;
  }
} */

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

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

/* ************************************************************************************************ */
/* ================From our grid layout template ===================*/
/* ************************************************************************************************ */

/* this will make the calculations easy */
/* so 1rem would be  exactly 10px */
/* we set it to 62.5% so if someone wants to change the font on their browser they can */
/* Percentage of users browser font size setting */
/* But still equals 10 px */
html {
  /* font-size: 10px; */
  font-size: 62.5%;
  overflow-x: hidden !important;
}

body {
  font-family: sans-serif;
  line-height: 1;
  font-weight: 400;
  /* from our grid layout template */
  min-height: 100vh;
  text-rendering: optimizeSpeed;
}


.full-page-wrapper {
  max-width: 130rem;
  /* min-width:130rem; */
  margin: 0 auto;
   border: 2px solid var(--white-lilac-2);
  /* border: .5rem solid green; */
  
}

/* How to prevent horizontal scrolling on responsive webpage/
/* found on stack overflow */
/* .container {
    max-width: 100% !important;
    overflow-x: hidden !important;
} */

/* @media screen and (max-width: 667px) {
    body {
        overflow-x: hidden !important;
    }
    .container {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
} */

/* img {
    max-width: NNNpx;
} */
/* How to prevent horizontal scrolling on responsive webpage/

/* ==============STYLEGUIDE======================== */
:root {
  --black: #000000;
  --orange:#ff5f2d;
  --blue: #2b59ff;
  --general-color2: #12141d;
  --general-color4: #fafafa;
  --general-color6: #ffc947;
  --lightning-yellow: #fabb18;
  --mountain-meadow: #13b081;
  --ocean-blue-pearl: #4732b9;
  --white: #ffffff;
  --white-lilac-2: #f7f8fb;
  --eerie-black-22: #18181b;
  --eerie-black-3: #201f22;
  --trout: #52525b;
  --storm-gray: #64748b;

  --font-size-l: 7.2rem;

  --font-size-xxs2: 1.44rem;
  --font-size-xxxs: 1.28rem;
  --font-size-xxxs2: 1.1rem;
  --font-size-xxxxl: 3.9rem;
  --font-size-xxl2: 1.6rem;
  --font-family-inter: "Inter", Helvetica;
  --font-family-plus_jakarta_sans: "Plus Jakarta Sans", Helvetica;
}
.bold16px {
  font-family: var(--font-family-inter);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0rem;
}

.semi-bold16px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0rem;
}

.regular13px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.regular16px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}

.regular18px {
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs2);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.plusjakartasans-bold-vulcan-21px {
  color: var(--general-color2);
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: var(--font-size-l);
  font-style: normal;
  font-weight: 700;
}
/* changed the xxxxl font size from 4.8 to 3.8 and font weight from 700 to 500 */
.plusjakartasans-bold-vulcan-48px {
  color: var(--general-color2);
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 600;
}

.plusjakartasans-bold-white-48px {
  color: var(--white);
  font-family: var(--font-family-plus_jakarta_sans);
  font-size: var(--font-size-xxxxl);
  font-style: normal;
  font-weight: 700;
}
.inter-normal-vulcan-18px {
  color: var(--general-color2);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxs2);
  font-style: normal;
  font-weight: 400;
}

.inter-bold-alabaster-20px {
  color: var(--general-color4);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxl2);
  font-style: normal;
  font-weight: 700;
}

.inter-bold-ocean-blue-pearl-20px {
  color: var(--ocean-blue-pearl);
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxl2);
  font-style: normal;
  font-weight: 700;
}

/* =========Global Style=========== */
/* align item or text to center */
.valign-text-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
/* =========Global style============*/
/* ==============STYLEGUIDE======================== */

/****************************************************************************/
/* **************************GENERAL REUSABLE COMPONENTS****************************/
/*****************************************************************************/
/* reusable container */

/* general container to center our content */
.container {
  /* also 11.4 rem is used as a convection as well */
  max-width: 130rem;
  padding: 0 3.2rem;

  border: .5rem;
}

/* want it around 1216 px */
.inside-content-container {
  max-width: 120rem;
  margin: 0 auto;
  /* border: .5rem blue solid; */
  border: .5rem;
}


/* HELPER/SETTINGS CLASSES */
.margin-right-sm {
  margin-right: 1.6rem !important;
}

.margin-bottom-md {
  margin-bottom: 4.8rem !important;
}

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

.padding-top {
  padding-top: 2rem;
}
.padding-bottom {
  padding-bottom: 8rem !important;
}

strong {
  font-weight: 500;
}

/* reusable container */

/****************************************************************************/
/* **************************REUSABLE GRID ****************************/
/*****************************************************************************/
/* Creating a reusable Grid */
/* .features {
  padding: 9.6rem 0;
  background-color: orangered;
} */

/* ********************************FEATURES DEMO FOR REUSABLE GRID  *************************************
    <!-- so secction class feautures will be a grid, with a container, with 2 columns all at the same time -->
    <!-- Origonal layout to show how to target specific grid nth childs -->
    <!-- <section class="features container grid grid--2cols">
      <div>Test 1</div>
      <div>Test 2</div>
      <div>Test 3</div>
      <div>Test 4</div>
    </section>

       <section class="features container grid grid--3cols">
      <div>Test 1</div>
      <div>Test 2</div>
      <div>Test 3</div>
      <div>Test 4</div>
    </section> --> 
       //////////////2ND DEMO//////////////////////////////////////////////
    <section class="features">
      <div class="container grid grid--2cols">
      <div>Test 1</div>
      <div>Test 2</div>
      <div>Test 3</div>
      <div>Test 4</div>
      </div>
    </section>

       <section class="features">
      <div class="container grid grid--3cols">
      <div>Test 1</div>
      <div>Test 2</div>
      <div>Test 3</div>
      <div>Test 4</div>
      </div>
    </section>
    ********************************FEATURES DEMO FOR REUSABLE GRID  END*************************************
    */

.grid--center-v {
  align-items: center;
}

/* reusable grid  */

.grid {
  display: grid;
  gap: 2.6rem;
  /* grid-template-rows: 1fr 1fr; */
  /* margin-top: 1.6rem;
  margin-bottom: 1.6rem; */
}

.test-grid {
  display: grid;
  gap: 9.6rem;
  /* auto-fit minmax for the smallest screen size*/
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.grid--2cols {
  /* setting up a 2X2 grid */
  /* so columns go up and down so it would be like a pillar in front of a building(so 2 pillars in front of bldg in this ex)  */
  /* grid-template columns:(1fr,1fr)  same as writing repeat(2, 1fr);*/
  grid-template-columns: repeat(2, 1fr);
}
.grid--3cols {
  /* Setting up a 3X3 grid */
  /* so 3 pillars in front of bldg in this ex */
  grid-template-columns: repeat(3, 1fr);
}

.grid--4cols {
  /* Setting up a 4X4 grid */
  /* so 4 pillars in front of bldg in this ex */
  grid-template-columns: repeat(4, 1fr);
}

.grid--5cols {
  /* Setting up a 5X5 grid */
  /* so 5 pillars in front of bldg in this ex */
  grid-template-columns: repeat(5, 1fr);
}

/* .features (we're targeting the div that is the child of the div, of the section features) */

/* Shift option and arrow key down lets you copy and edit multiple lines */
/* Origonal styling to show how to target specific grid childs  */
/* .features div:nth-child(1) {
  background-color: aqua;
}
.features div:nth-child(2) {
  background-color: blue;
}
.features div:nth-child(3) {
  background-color: violet;
}
.features div:nth-child(4) {
  background-color: yellow;
} */

/* <section class="features container grid grid--2cols">
      <div>Test 1</div>    <--we would be targeting these divs .features div div
      <div>Test 2</div>    <--we would be targeting these divs .features div div
      <div>Test 3</div>    <--we would be targeting these divs .features div div
      <div>Test 4</div>    <--we would be targeting these divs .features div div
    </section> */
/* .features div div { */
/* padding adn font size was demonstration purposes */
/* padding: 100px;
  font-size: 50px; */
/* background-color: #333; */
/* } */

/* Creating a reusable Grid */

/****************************************************************************/
/* **************************REUSABLE GRID ****************************/
/*****************************************************************************/

/****************************************************************************/
/* **************************GENERAL REUSABLE COMPONENTS****************************/
/*****************************************************************************/

/* semi-bold16px
font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0rem; */
/* Reusable General Purpose Main Buttons */

.btn:link,
.btn:visited {
  /* add padding only if its going to be an inline block */
  /* display: inline-block; */

  display: flex;
  /* align-items: flex-start; */
  justify-content: center;
  align-items: center;
  background-color: #ff5f2d;
  color: var(--white);
  text-decoration: none;

  border-radius: 0.24rem;
  padding: 1.16rem 2.04rem;
  height: 4.4rem;
  margin-top: 3.04rem;
  max-width: 14.24rem;
  /* this is all basically semi-bold16px var that you created */
  font-family: var(--font-family-inter);
  font-size: var(--font-size-xxxs);
  font-style: normal;

  font-weight: 600;
  /* always put the transition on origonal space */
  transition: all 0.4s;
  letter-spacing: 0rem;
}

.btn:hover,
.btn:active {
  box-shadow: inset 0 0 0 1px black;
  /* transition: all 0.4s; */
}

.btn--wider:link,
.btn--wider:visited {
  max-width: 16.4rem;
}

.btn--rounded:link,
.btn--rounded:visited {
  position: relative;
  border-radius: 7.6rem;
  height: 4rem;
  margin-bottom: 3.1rem;
  margin-left: 10.8rem;
  max-width: 13.36rem;
  margin-right: 1.64rem;
  /* height: 19.2px; */
  line-height: 19.2px;
  /* min-width: 101.6px; */
  text-align: center;
  white-space: nowrap;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4rem;
  /* padding-left: 4rem; */
}

/* .main-nav-link:link,
.main-nav-link:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: black;
  font-weight: 600;
  font-size: 1.4rem;
  transition: all 0.3s;

}

.main-nav-link:hover,
.main-nav-link:active {
  color: black;
} */

.btn--outline:link,
.btn--outline:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* border: 1px solid #ff5f2d; */
  font-size: 1.4rem;
  transition: all 0.4s;
  background-color: transparent;
  color: #201f22;
  font-style: normal;
  font-weight: 540;
  height: 100%;
  left: 0rem;
  line-height: 2.4rem;
  mix-blend-mode: normal;

  text-align: center;
  top: 0rem;
  white-space: nowrap;
  width: 99.52%;
  padding: 2px 8px;
  border-radius: 0.24rem;
  /* underline */
  text-decoration: underline 0.15em transparent;
  text-underline-offset: 0.2em;
  transition: text-decoration-color 300ms, text-underline-offset 300ms;
}

/* Shadow Pusle */
@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.2);
  }
  100% {
    box-shadow: 0 0 0 0.5px #12141d;
  }
}

@keyframes shadow-pulse-big {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 70px rgba(0, 0, 0, 0);
  }
}
/* animation: shadow-pulse 1s 3; */

.btn--outline:hover,
.btn--outline:active {
  color: #201f22;
  font-weight: 700;
  /* border: 3px solid #201f22; */
  /* Trick to add border inside */
  /* took off the box shadow for now */
  /* box-shadow: inset 0 0 0 1px white; */
  transition: all 0.4s;
  background-color: transparent;
  /* animation: shadow-pulse .8s 3; */
  /* underline */
  text-decoration-color: #12141d;
  text-underline-offset: 0.4em;
  /* transform: translate makes it go up and down */
  transform: translateY(-0.2rem);
}

/* Reusable Buttons */

/* reusable image box */

/* .img-box {
  display: flex;
  align-items: flex-start;
  max-height: 29rem;
} */

/*==================== TEST ========================*/
/* .features (we're targeting the div that is the child of the div, of the section features) */

/* Shift option and arrow key down lets you copy and edit multiple lines */
/* Origonal styling to show how to target specific grid childs  */

/* <!-- ========================TEST1==================== -->
    <section class="content-2">
      <div class="container grid grid--2cols">
      <div>Test 1</div>  
      <div>Test 2</div>  
      <div>Test 3</div>  
      </div>
    </section>  */

.grid--center-v {
  align-items: center;
}

/* reusable grid  */

.content-2 {
  padding: 9.6rem 2rem;
  background-color: orangered;
}
.content-2 div div {
  padding: 10rem 1rem;
  font-size: 0.5rem;
  background-color: #333;
}

/* .content-2 div:nth-child(1) {
  background-color: aqua;
  min-width: 50rem;
  min-height: 50rem;
}
.content-2 div:nth-child(2) {
  background-color: blue;
  width: 50rem;
  height: 50rem;
}
.content-2 div:nth-child(3) {
  background-color: violet;
  width: 50rem;
  height: 50rem;
}
.content-2 div:nth-child(4) {
  background-color: yellow;
  width: 50rem;
  height: 50rem;
} */

/* <section class="features container grid grid--2cols">
      <div>Test 1</div>    <--we would be targeting these divs .features div div
      <div>Test 2</div>    <--we would be targeting these divs .features div div
      <div>Test 3</div>    <--we would be targeting these divs .features div div
      <div>Test 4</div>    <--we would be targeting these divs .features div div
    </section> */
/* .content-2 div div {
  padding: 10rem;
  font-size: 10rem;
  background-color: rgb(138, 24, 24);
} */

/* .content-2{
  background-color: var(--white-lilac-2);
  
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 58rem;
} */

/*======================= TEST 2 JUST USING FLEXBOX================ */

.some-page-wrapper {
  margin: 1.5rem;
  background-color: red;
}

/* Helper going to use to add margin to the top of the rows */
/* Putting these with the other helper classes */
/* .margin-top{
  margin-top: 8.4rem;
}
.margin-bottom{
  margin-top: 8.4rem;
} */

/* valign-text-middle {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
} */

/* **************************FLEXBOX LAYOUT***************************************** */

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  align-items: flex-start;
  padding-top: 1.8rem;
  /* margin-top:40rem; */
}

.row--center {
  align-items: center;
  justify-content: center;
}
/* the same as column-demo have to */
.column {
  display: flex;
  flex-direction: column;
  flex-basis: auto;
  flex: 1;
}
.column--row {
  display: flex;
  flex-direction: row;
  flex-basis: auto;
  align-items: none;
  flex: 1;
}
.column--center {
  align-items: center;
  justify-content: center;
}

/* duplicate have it in general and styles css */
/* .column--services{
  max-width:39rem;
  min-width: 37.5rem;
} */

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

.orange-column {
  background-color: orange;
  height: 100px;
}