/*
================================================================================================
CSS-RESET
================================================================================================
*/

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


/* 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 */
body {
  min-height: 100vh;
  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;
  }
}


 /*
  ---------------------------------------------------------------------------------
  ROOT
  ----------------------------------------------------------------------------------
  */


:root{

  /*
  ------------------------------------------
  COLORS
  ------------------------------------------
  */


  /*Primitive Colors*/

  --neutral-50: hsl(0,0%,93%);;
  --neutral-100: hsl(0,0%,85%);
  --neutral-200: hsl(0,0%,80%);
  --neutral-600: hsl(0,0%,36%);
  --white: hsl(0, 0%, 100%);
  --black: hsl(0, 0%, 0%);

  --green-200: hsl(87,96%,80%);
  --green-600: hsl(75,55%,37%);
  --green-700: hsl(83,79%,32%);
  --green-900: hsl(72,79%,15%);

  /*Text Colors*/

  --text-primary: var(--black);
  --text-secondary:var(--neutral-600);
  --text-subheading:var(--neutral-200);
  --text-heading:var(--green-900);
  --text-white: var(--white);

  /*Background colors*/

  --background-primary:var(--white);
  --background-secondary: var(--green-900);
  --background-teritary:var(--neutral-50);

  /*Accent colors*/

  --accent-primary:var(--green-200);
  --accent-secondary:var(--green-600);

  --accent-primary-hover:var(--green-600);
  --accent-secondary-hover:var(--green-200);


   /*
  ------------------------------------------
  Typography
  ------------------------------------------
  */

  --ff-body: "Manrope", "sans-serif";
  --ff-heading: "Manrope", sans-serif;

  /*Primitive*/

  --fs-300: 0.7rem;
  --fs-400: 1rem;
  --fs-500: 1.25rem;
  --fs-700: 1.75rem;


  --text-heading-primary: var(--fs-700);
  --text-heading-secondary:var(--fs-700);
  --text-heading-teritary:var(--fs-500);
  --text-body:var(--fs-400);
  --text-captions:var(--fs-300);
  --text-link: var(--fs-300);


  /*
  ------------------------------------------
  Spacing
  ------------------------------------------
  */


  --size-100: 0.5rem;
  --size-150: 0.625rem;
  --size-200: 1rem;
  --size-300: 1.25rem;
  --size-400: 1.5rem;
  --size-500: 1.75rem;
  --size-600: 2rem;
  --size-650: 2.5rem;
  --size-700: 3rem;
  --size-750: 3.75rem;
  --size-800: 5rem;
  --size-900: 6.25rem;

  }

  /*Tablet font sizes*/

  @media (min-width:50em){
    :root{
      --fs-300: 0.72rem;
      --fs-500: 1.75rem;
      --fs-700: 2.25rem;
    }
    
  }

  /*Desktop font sizes*/

  @media (min-width:80em){
    :root{
      --fs-300: 0.8rem;
      --fs-500: 2rem;
      --fs-700: 2.625rem;
    }

  }

   /*
  ------------------------------------------
  General Styling
  ------------------------------------------
  */

  @media (min-width: 150em) {
  html {
    font-size: 125%; 
  }
}


  a{
    text-decoration: none;
    color: inherit;
  }

  h1,h2,h3{
    font-weight: normal;
    line-height: 109%;
  }

  h1{
    font-size: var(--text-heading-primary);
  }

  h2{
    font-size: var(--text-heading-secondary);
    color: var(--text-heading-secondary);
  }

  h3{
    font-size: var(--text-heading-teritary);
  }


  body{
    font-family: 'manrope', 'arial', Courier, monospace;
    color: var(--text-primary);
    font-size: var(--text-body);

  }
   .grid-wrapper-left{
    background-color: var(--background-secondary);
    padding: var(--size-400);
  }

  .grid-wrapper-right{
    display: flex;
    flex-direction: column;
    padding-inline: var(--size-300);
    margin-inline: auto;

  }

  @media (min-width:50em){
    .grid-wrapper-right{
      padding-inline: var(--size-650);
      max-width: 1200px;
    }
  }

  @media (min-width:150em){
    .grid-wrapper-right{
      max-width: 1500px;
    }
  }


  @media (min-width:80em){
    .grid-wrapper-left{
        padding-inline: var(--size-700);
    }

  }

  @media (min-width:80em){
     .grid-wrapper{
    display: grid;
    grid-template-columns: 1fr 2fr;

  }


  }

  html, body {
  height: 100%;
  margin: 0;
}

  /*
  ------------------------------------------
  Buttons
  ------------------------------------------
  */



  .offering-buttons{
    display: flex;
    gap: var(--size-100);
    margin-block-start: var(--size-200);
  }

  .offering-buttons li{
    display: flex;
    flex: 1
  }

  .offering-button{
  display: flex;
  flex: 1;
  flex-direction: column;
  background-color: var(--accent-secondary);
  padding-block: var(--size-200);
  color: var(--black);
  text-align: center;
  border-radius: var(--size-100);
  justify-content: center;
  }

  .offering-button:hover{
    background-color: var(--accent-secondary-hover);
  }

  
  @media(min-width: 80em){
    .offering-buttons li{
      max-width: 7.5rem;
    }
  }
  .content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-100);
}


/*cta button*/

.cta-button{
  background-color: var(--accent-primary);
  padding-block: var(--size-100);
  padding-inline: var(--size-100);
  border-radius: 2px;
}

.cta-button:hover{
  background-color: var(--accent-primary-hover);
}


/*
  ------------------------------------------
  Header
  ------------------------------------------
*/

.main-navigation{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media(min-width:80em){
  .main-navigation{
    max-width: 900px;
  }
}

.sidebar-footer li:hover{
  text-decoration:underline;
}

/*
  ------------------------------------------
  Hero
  ------------------------------------------
*/


.hero-img{
  margin-block-start: var(--size-750);
}

.hero h2{
  margin-block: var(--size-400);
}

@media(min-width:50em){
  .hero h2{
    margin-block: var(--size-700);
  }
}

/*
  ------------------------------------------
  Trustworthy logos
  ------------------------------------------
*/


.logo-wall{
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  padding-block: var(--size-600);
}

@media (min-width:50em){
  .logo-wall{
    justify-content: space-evenly;
  }
}

.trust-logo-img{
    min-width: 6rem
}


/*
  ------------------------------------------
  Get More
  ------------------------------------------
*/

@media (max-width: 50em) {
.bento-container{
  max-width: 500px;
  place-self: center;
}
}


.bento-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding-block: var(--size-600);
  padding-inline: var(--size-600);
  min-height: 250px;
  gap: var(--size-500);
}




/*
  ------------------------------------------
  Image Container
  ------------------------------------------
*/



.background-img{
  width: 100%;
  min-height: 500px;
  background-image: url('images/main/reliable-app.jpg');
  background-size: cover;
  background-position: center 20%;
  background-repeat: no-repeat;
  margin-block: var(--size-750);
}

@media(min-width:50em){
  .background-img{
    aspect-ratio: 16 / 9;
    margin-block: var(--size-900);

}
}

/*
  ------------------------------------------
  first-class
  ------------------------------------------
*/

.first-class{
  padding-block-start: var(--size-700);
  padding-block-end: var(--size-800);
}

.first-class__icons{
  display: flex;
  align-items: center;
  text-align: center;
}


.first-class__icons img{
  transition: transform 0.5s ease-in-out ;
}

.first-class__icons img:hover{
  transform: translateY(-10px);
}


  @media (min-width:50em){
    .icons li{
    display: flex;
    flex: 1;
    text-align: center;  

  }
    .icon-information{
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  }

  /*
  ------------------------------------------
  cta
  ------------------------------------------
  */

  /*Background-img*/

  .cta{
    display: grid;
    
    aspect-ratio: 16/9;
    place-content:end start;
    background-image: url(images/main/download-phone.jpg);
    background-position: center;
    background-size: cover;
    padding-inline: var(--size-650);
    padding-block-start: var(--size-750);
    padding-block-end: var(--size-600);
    padding-inline: var(--size-300);
    border-radius: var(--size-100);
    margin-block-end: var(--size-900);
  }

  @media(min-width:50em){
    .cta{
      padding-inline: var(--size-650);
      margin-block-start: var(--size-700);
    }
  }

  .cta h2{
    margin-bottom: var(--size-300);
  }

  /*
  ------------------------------------------
  Footer
  ------------------------------------------
  */

  .trustworthy-footer{
    display: flex;
    justify-content: space-between;
    padding-inline: var(--size-600);
    width: 100%;
  }

  .terms-conditions a:hover{
    opacity: 50%;
  }

  .contact-links a:hover{
    opacity: 50%;
  }

  .leftside-footer{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
   .leftside-footer h2{
      font-weight: bold;
    }

  .rightside-footer{
    display: flex;
    flex-direction: column;
    gap: var(--size-600);
    font-size: var(--text-captions)
    
  }


  /*
  ------------------------------------------
  Utility Classes
  ------------------------------------------
  */

   .block{
    display: block;
  }

  .flex{
    display: flex;
  }

  .flex-col{
      flex-direction: column;
  }

  @media (min-width:50em){
    .md-flex-row{
      flex-direction: row;
    }

  }
  

  .grid{
    display: grid;
  }

  .single-col{
    grid-template-columns: 1fr;
  }


  @media (min-width:50em){
     .even-col{
    grid-template-columns: 1fr 1fr;
  }
  }

   .grid-image{
    aspect-ratio: 4 / 3;
    object-fit: cover;
  }


  .gap-100{
    gap: var(--size-100);
  }

   .gap-200{
    gap: var(--size-200);
  }

   .gap-300{
    gap: var(--size-300);
  }

   .gap-400{
    gap: var(--size-400);
  }

   .gap-500{
    gap: var(--size-500);
  }

  .gap-700{
    gap: var(--size-700);
  }

  @media(min-width:50em){
      .gap-700-md{
        gap: var(--size-700);
      }
  }

  .gap-800{
    gap: var(--size-800);
  }

  .gap-900{
    gap: var(--size-900);
  }

  /*Spacing Utilities*/

  .padding-block-600{
    padding-block: var(--size-600)
  }

  .padding-block-750{
    padding-block: var(--size-750);
  }
  
  .padding-block-800{
    padding-block: var(--size-800);
  }

  @media(min-width:50em){
      .md\:padding-block-800{
        padding-block: var(--size-800);
  }
  }

  @media(min-width:50em){
      .md\:padding-block-900{
        padding-block: var(--size-900);
  }
  }

  .margin-end-300{
    margin-block-end: var(--size-300);
  }

  .margin-end-600{
    margin-block-end: var(--size-600);
  }

  .background-primary{
    background-color: var(--background-primary);
  }

  .background-secondary{
    background-color: var(--background-secondary);
  }

  .background-tertiary{
    background-color: var(--background-teritary);
  }

  .text-white{
    color: var(--text-white);
  }

  .text-primary{
    color: var(--text-primary);
  }

  .text-heading{
    color: var(--text-heading);
  }

  .accent-primary-text{
    color: var(--accent-primary);
  }

  .accent-primary-background{
    background-color: var(--accent-primary);
  }

  .text-secondary{
    color: var(--text-secondary);
  }

  .text-subheading{
    color: var(--text-subheading);
  }

  .text-teritary-font{
    font-size:var(--text-heading-teritary);
  }

  .text-link-font{
    font-size: var(--text-link);
  }
  .text-captions-font{
    font-size: var(--text-captions);
  }

  .text-bold-600{
    font-weight: 600;
  }

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

  .border-radius-150{
    border-radius: var(--size-150);
  }

  .border-radius-300{
    border-radius: var(--size-300);
  }