:root {
        /* color vars */
    --clr-primary-900: hsl(0, 0%, 20%);

    --clr-neutral-400: hsl(309, 4%, 62%);
    --clr-neutral-500: hsl(312, 3%, 39%);
    --clr-neutral-100: hsl(0, 0%, 100%);

    --clr-accent-200: hsl(144, 100%, 53%);
    --clr-accent-300: hsl(144, 100%, 43%);
    --clr-accent-500: hsl(174, 84%, 19%);
    --clr-accent-600:hsl(174, 84%, 15%) ;

    /* fonts */
    --ff-primary: 'Roboto', sans-serif;

    --ff-body: var(--ff-primary);
    --ff-heading: var(--ff-primary);

    --fw-light: 300;
    --fw-regular: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;

    /* font sizes */
    --fs-450: 0.75rem; /* 12px*/
    --fs-500: 1rem;    /* 16px */
    --fs-525: 1.25rem;
    --fs-550: 1.5rem;  /* 24px */
    --fs-600: 2rem;    /* 32px */
    --fs-700: 2.5rem;  /* 40px */
    --fs-900: 4rem;  /* 56px*/

    /* for mobile screens */
    --fs-body: var(--fs-450);
    --fs-heading-1: var(--fs-700);
    --fs-heading-2: var(--fs-550);
    --fs-heading-3: var(--fs-525);
    --fs-nav: var(--fs-525);
    --fs-button: var(--fs-550);
    --fs-imp-number: var(--fs-550);
    --fs-form: var(--fs-500);
  
}

/* for bigger screens */
@media (min-width: 50em) {
  :root {
    --fs-body: var(--fs-500);
    --fs-heading-1: var(--fs-900);
    --fs-heading-2: var(--fs-700);
    --fs-heading-3: var(--fs-600);
    --fs-nav: var(--fs-525);
    --fs-button: var(--fs-550);
    --fs-imp-number: var(--fs-600);
    --fs-form: var(--fs-550);
  }
}


/* // https://piccalil.li/blog/a-modern-css-reset */

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

html,
body {
  height: 100%;
}

/* Set core body defaults */
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;
}

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

/* text color classes */

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

.text-neutral-400 {
  color: var(--clr-neutral-400);
}

.text-neutral-500 {
  color: var(--clr-neutral-500);
}

.text-neutral-100 {
  color: var(--clr-neutral-100);
}

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

/* bg color class*/

.bg-accent-200 {
  background-color: var(--clr-accent-200);
}

.bg-accent-300 {
  background-color: var(--clr-accent-300);
}

.bg-accent-500 {
  background-color: var(--clr-accent-500);
}

.bg-neutral-100 {
  background-color: var(--clr-neutral-100);
}

/* font weight class */
.fw-light {
  font-weight: var(--fw-light);
}

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

.fw-medium {
  font-weight: var(--fw-medium);
}

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

.fw-semibold {
  font-weight: var(--fw-semibold);
}

/* font size class*/

.fs-body {
  font-size: var(--fs-body);
}

.fs-heading-1 {
  font-size: var(--fs-heading-1);
}

.fs-heading-2 {
  font-size: var(--fs-heading-2);
}

.fs-heading-3 {
  font-size: var(--fs-heading-3);
}

.fs-nav {
  font-size: var(--fs-nav);
}

.fs-button {
  font-size: var(--fs-button);
}

.fs-imp-number {
  font-size: var(--fs-imp-number);
}

.fs-form {
  font-size: var(--fs-form);
}

/* other utiltity classes */

.container {
  max-width: calc(100% - 2rem);
  margin-inline: auto;
  /* border: 2px solid red; */
}

.green-wrapper {
  background-color: var(--clr-accent-500);
  padding: 5rem 0;
}

.even-columns {
  display: grid;
  grid-auto-flow: row;
  gap: 1rem;

}

.even-columns > div {
  align-items: center;
  width: 100%;
}



@media (min-width: 50em) {
  .grid-item-left {
    grid-area : leftColumn ;
  }
  
  .grid-item-right {
    grid-area: rightColumn;
  }
  
  .even-columns {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr; 
    grid-template-areas: 'leftColumn rightColumn';
  }
}



.flex-space-evenly {
  display: flex;
  justify-content: space-evenly;
}

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

.button {
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  border-radius: 5px;

}

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

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

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

.emphasized-text {
  color: var(--clr-accent-300);
}


/* general styling */

body {
  font-size: var(--fs-body);
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);
  color: var(--clr-primary-900);
}

/*========== header logo + navigation============ */

header {
  position: fixed;
  width: 100%;
  top:0;
  z-index: 100;
}
.nav-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
}

.logo{
  max-width: 10rem;

}

.nav-list a {
  text-decoration: none;
  color: inherit;
}

.nav-list a:hover,
.nav-list a:focus-visible {
  border-bottom: 2px solid var(--clr-accent-300);;
  
}

.nav-list {
  display: none;

}

@media (min-width: 50em) {
  .nav-list {
    display: flex;
    gap: 2rem;
    align-items: center;
  }
  
}

/* ======== hero section ======== */

.hero .container {
  margin-top: 184px;
  text-align: center;
}

.hero h1 {
  max-width: 32ch;
  margin-inline: auto;
}

/* Elevate animation  */

#elevate {
  position: relative;
  top: 0;
  text-shadow: 0 0 0 var(--clr-accent-300);
  animation: elevate 1s ease-out 0.5 forwards, textShadow 1s ease-out 0.5 forwards;
}

@keyframes elevate {
  from {
    top: 0;
  }
  to {
    top: -6rem;
  }
}

@keyframes textShadow {
  from {
    text-shadow: 0 0 0 var(--clr-accent-300);

  }
  to {
    text-shadow: 0 6rem 13px var(--clr-accent-300);
  }
}


/* Whatsapp word animation */

#whatsapp span {
  transition: color 0.5s ease;
   /* Initially no animation */
}

/* When .animate is added, letters change color with staggered delay */
#whatsapp.animate span {
  /* Target color */
  color: var(--clr-accent-300);
}

/* Use delay to stagger */
#whatsapp.animate span:nth-child(1) {
  transition-delay: 0s;
}
#whatsapp.animate span:nth-child(2) {
  transition-delay: 0.1s;
}
#whatsapp.animate span:nth-child(3) {
  transition-delay: 0.2s;
}
#whatsapp.animate span:nth-child(4) {
  transition-delay: 0.3s;
}
#whatsapp.animate span:nth-child(5) {
  transition-delay: 0.4s;
}
#whatsapp.animate span:nth-child(6) {
  transition-delay: 0.5s;
}
#whatsapp.animate span:nth-child(7) {
  transition-delay: 0.6s;
}
#whatsapp.animate span:nth-child(8) {
  transition-delay: 0.7s;
}



.hero p {
  margin-top: 0.5rem;
}

.hero button {
  margin-top: 5rem; 
}

.hero img {
  max-width: 100%;
  margin-inline: auto;
  margin-top: 120px;
}

/* =========== FEATURES section ========= */

/* broadcast section */
#features .container {
  margin-top: 80px;
}

/* .even-columns > div {
  border: 2px solid red;
} */

.feature-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: fit-content;
  margin-inline: auto;
  /* border: 2px dotted black; */
}

.feature-text > div {
  /* border: 1px solid blue; */
  max-width: fit-content;

}
.feature-text h3 {
  /* width: max-content; */
  text-align: center;
}

/* .feature-para {
  width: fit-content;
} */


.feature-text h3 {
  margin-bottom: 1rem;
}

.feature-text p {
  margin: 0.5rem 0;
}

@media (min-width: 50em) {
  .feature-text p {
    /* max-width: max-content; */
    margin-top: 1rem;
  }

  .feature-text h3 {
    text-align: left;
  }
}
/* .image-wrapper {
  border: 1px dotted blue;
} */

/* =========== WHY-WHATSAPP SECTION ========== */
#why-whatsapp .flex-space-evenly {
  margin-top: 5rem;
  margin-bottom: 5rem;
}

.numbers-wrapper {
  width: 6rem;
  height: 6rem;
  box-shadow: -1px 5px 4px var(--clr-accent-600);

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

#services .container h2,
#services .container p {
  margin-top: 2rem;
}
#services .image-wrapper {
  width: fit-content;
  margin-inline: auto;
  margin-top: 2rem;
}
@media (min-width: 50em) {
  .numbers-wrapper {
    width: 10.25rem;
    height: 10.25rem;
}
/* Services Watsel */
#services .container h2,
#services .container p {
  margin-top: 5rem;
}

}

/* contact section */

#contact {
  padding-bottom: 0;
}


#contact h2 {
  margin-bottom: 2rem;
}

/* #contact .even-columns {
  margin-top: 3rem;
  border: 1px solid white;
} */

@media (min-width: 50em) {
  #contact h2 {
    margin-bottom: 5rem;
  }
  #contact .even-columns {
    margin-top: 3rem;
   
  }
  
}


/* @media (min-width: 50em) {

  #contact .even-columns {
    grid-auto-flow: row;
    grid-auto-rows: 1fr;
  } 
} */
.grid-form {
  display: grid;
  max-width: 100%;
  /* margin-bottom: 2rem; */
  /* margin-top: 3rem; */
  
  /* grid-auto-flow: row; */
  grid-template-columns: 25% 70%;
  align-items: center;
  gap: 2rem;
  /* border: 2px dotted red; */
  padding-bottom: 3rem;

}


.grid-form label {
  text-align: right;
}

input {
  max-width: 90%;
  padding: 5px;
  border-radius: 8px;

}

.grid-form input[type=submit] {
  grid-column: 1/3;
  width: 30%;
  margin-inline: auto;
}

@media (min-width: 50em) {
  .grid-form {
    padding-bottom: 0;
  }
}


/*====== FOOTER SECTION ===========  */
footer a {
  text-decoration: none;
  color: inherit;
}

/* mail icon */
footer .flex-column img {
  display: inline;
  width: 24px;
  position: relative;
  top: 5px;
  margin-right: 4px;

}
footer {
  padding-top: 4rem;
  padding-bottom: 4rem;

}

@media (min-width: 50em) {
  footer {
    padding-top: 6rem;
    padding-bottom: 6rem;
  
  }
}

.footer-heading-margin {
  margin-bottom: 1rem;
}


.flex-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2rem;
}

.watsel-footer {
  flex-basis: 50%;
}

footer > p {
  margin: 80px  auto 0 auto;
}

@media (min-width: 50em) {

  .watsel-footer {
    flex-basis: 25%;
  }
  
}

/* Scroll based reveal animation for sections */
.hidden {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.8s ease-out;
}

.show {
  opacity: 1;
  transform: translateY(0);
}