:root{
  --fs-100: 1rem;
  --fs-200: 1.25rem;
  --fs-300: 1.5rem;
  --fs-400: 2rem;
  --fs-500: 2.5rem;
  --fs-600: 3rem;
  --fs-700: 4rem;
  --fs-800: 6rem;
  --fs-900: 8rem;


  --ff-primary: 'Barlow', serif;
  --ff-secondary: 'Rubik' , sans-serif;

  --fw-light: 300;
  --fw-normal: 400;
  --fw-semi-bold: 700;
  --fw-bold: 900;

  --clr-neutral-300: #d2d9ff;
  --clr-neutral-400: #fff;
  --clr-secondary-400: #000;

  --size-200: 1rem;
  --size-300: 1.5rem;
  --size-400: 2rem;
  --size-500: 2.5rem;
  --size-600: 3rem;
  --size-700: 4rem;
  --size-800: 5rem;
  --size-900: 10rem;

}

/*---CSS STARTER---*/
/* 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'],
li {
  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.2;
}

a {
  text-decoration: none;
  color: var(--clr-neutral-400);
  transition: color .75s;
}

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

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


/* UTILITY CLASSES */
.margin-sm{
    margin-block: var(--size-400);
}

.margin-sm-primary{
  margin-block: var(--size-400);
}
.margin-sm-secondary{ 
  margin-block: var(--size-500);
}

.d-lg-in_block{
  display: none;
}



/* Styles */

body{
  text-align: center;
  background-color: #3858ff;
  color: var(--clr-neutral-400);
}

h1{
  font-size: var(--fs-600);
  font-weight: var(--fw-bold);
  font-family: var(--ff-primary);
}

h2{
  font-size: var(--fs-400);
  font-weight: var(--fw-semi-bold);
  font-family: var(--ff-primary);
  margin-block-end: var(--size-400);
}

p{
  font-size: var(--fs-200);
  font-weight: var(--fw-normal);
  font-family: var(--ff-secondary);
}

li{
  font-size: var(--fs-200);
  font-family: var(--ff-secondary);
  font-weight: var(--fw-light);
}

hr{
  margin-block: var(--size-500);
  margin-inline: auto;
  width: 15%;
  border: 9px dotted #6d85ff;
  border-top: none;
}

a:hover{
  color: var(--clr-neutral-300);
}
.land-page-p{
  font-size: var(--fs-300);
  font-weight: var(--fw-normal);
  font-family: var(--ff-secondary);
  color: var(--clr-neutral-300);
}

.container{
  margin: 0 auto var(--size-900);
  width: min(1400px, 80%);
}

.contact-us{
  margin: 0 auto var(--size-400);
  width: min(1400px, 80%);
}

.logo-container{
  max-width: min(150px, 50% );
  text-align: left;
}

/* GRID */
.even-col{
  display: grid;
}

.contact-us-grid{
  display: grid;
}
/* --- */

.arrow-container{
  padding: 3rem 0;
}

.arrow{
  width: 45px;
  animation: 3s ease-in-out 1s infinite updown;
}

@keyframes updown {
  0%{
    transform: translateX(0px);
  }
  50%{
    transform: translateY(-20px);
  }
  100%{
    transform: translateY(0px);
  }
}

.big-img{
  max-width: 60%;
}

.middle-img{
  max-width: 50%;
}

.sm-img{
  max-width: 40%;
}

.btn-img{
  max-width: 50%;
}

.flex{
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 1rem;
}

.social-icon{
  width: 80%;
  transition: .5s;
}

.flex p{
  flex-basis: 80%;
}

.social-icon-mail{
  width: 100%;
  flex-basis: 20%;
  transition: .5s;
}

.social-icon:hover{
  transform: scale(1.3);
  z-index: 2;
}

.social-icon-mail:hover{
  transform: scale(1.1);
  z-index: 2;
}

.bg-cont{
  width: 100%;
  padding: 10px 20px;
  margin-block: var(--size-300);
  margin-inline: auto;
  background-color: rgba(70, 100, 255, 1);
  border-radius: 20px;
}



/* Media Query */

@media (min-width: 50em){

  h1{
    font-size: var(--fs-900);
  }
  
  h2{
    font-size: var(--fs-600);
    margin-block-end: var(--size-600);
  }

  .contact-us{
    width: min(1400px, 70%);
  }

  .big-img{
  max-width: 100%;
  }

  .middle-img{
    max-width: 100%;
  }

  .sm-img{
    max-width: 70%;
  }

  /* GRID */
  .even-col{
    grid-auto-flow: column;
    gap: 1rem;
    grid-auto-columns: 1fr;
    align-items: center;
  }

  .row{
    display: grid;
    grid-auto-flow: column;
    gap: 1rem;
    grid-auto-columns: 1fr .2fr;
    justify-content: start;
  }

  .contact-us-grid{
    grid-auto-flow: column;
    gap: 1rem;
    grid-auto-columns: 1fr 2fr;
    align-items: center;
    justify-content: center;
  }

  .grid-align-start{
    align-items: start;
  }

  .padding-r-lg-none{
    padding-right: 0;
  }

  .flex{
    justify-content: start;
  }
  /* --- */

  .even-col:nth-child(even) .columns:last-child {
    order:-1;
  }

  .ta-lg-left{
    text-align: left;
  }

  .d-lg-in_block{
    display: inline-block;
  }

  .d-lg-none{
    display: none;
  }
}