:root{
      --color-primary:#1e5afa;
      --color-primary-variant: rgba (0,0,240,0.2);
      --color-white: #fff;
      --color-light: #f4f4f4;
      --color-black: #000f37;
      --color-dark: #575757;

      --bottom-section-padding: 12rem;
      --bottom-section-padding-mobile: 8rem;

      --transition: all 400ms ease;

      --container-width: 84%;
      --container-width-table: 90%;
      --container-width-phone: 94%;
}

* {
      margin: 0;
      padding: 0;
      outline: 0;
      border: 0;
      box-sizing: border-box;
      text-decoration: none;
      list-style: none;
}

html{
      scroll-behavior: smooth;
}

body{
      font-family: "Poppins", sans-serif;
      /* color: var(--color-dark); */
      line-height: 1.7;
      background-color: var(--color-white);
}

.container{
      width: var(--container-width);
      margin: 0 auto;
}

h1{
      font-size: 5.6rem;
      line-height: 1;
      color: var(--color-black);
}

h2{
      font-size: 3rem;
      font-weight: 500;
      line-height: 1;  
}

h3{
      font-size: 2rem;
      font-weight: 600;
}

.lead{
      width: 63%;
      font-size: 1.1rem;
      font-weight: 400;
      line-height: 1.5;
      margin: 1.5rem auto 3rem;
}

a{
      color: var(--color-white);
      font-weight: 300;
}

img{
      width: 100%;
}

.btn {
      display: inline-block;
      padding: 1rem 2.3rem;
      background: var(--color-white);
      color: var(--color-black);
      font-weight: 500;
      border: 1px solid transparent;
      border-radius: 0.4rem;
      
}

.btn-primary {
      background: var(--color-black);
      color: var(--color-white);
      transition: all 300ms ease;
}

.btn-primary:hover {
      background: var(--color-white);
      color: var(--color-black);
      border-color: var(--color-black);
}

.avatar {
      width: 2.2rem;
      height: 2.2rem;
      border-radius: 50%;
      overflow: hidden;
}

section {
      max-width: 100vw;
      padding-bottom: var(--bottom-section-padding);
}

/*==============WHATSAPP ==============*/

.whatsapp_logo {
      position: fixed;
      bottom: 40px;
      right: 20px;
      text-align: right;
      z-index: 10;
}

.whatsapp_img {
      width: 10%;
}

/*==============NAV BAR ==============*/

nav {
      width: 100vw;
      height: 6rem;
      display: grid;
      place-items: center;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      /* background: var(--color-primary); */
}

.window-scroll {
      background: var(--color-primary);
      border-bottom: 1px solid var(--color-white);
      box-shadow: 0 1rem 1rem var(--color-primary-variant);
}

.nav_container {
      display: flex;
      justify-content: flex-end;
      align-items: center;
}

nav button{
      display: none;
}

.nav_items {
      display: flex;
      gap: 3rem;
      /* position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(150%, -50%); */
      
}

.nav_items li a {
      font-size: medium;
      font-weight: 500;
      color: #000000;

}

.nav_logo {
      position: absolute;
      left: 5rem;
      font-size: large;
      font-weight: 500;
      color: #000;
      display: flex;
      align-items: center;
      gap: 1.5rem
      ;
      /* top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); */
}

.nav_logo img {
      width: 40px; 
      height: 40px; 
      border-radius: 50%;   
}

.nav_logo h3 {
      font-size: 1.2rem;
}

/*============== HEADER ==============*/

header {
      /* background: url("./images/untitleddesign.png") no-repeat top center/100vw; */
      max-width: 100vw;
      text-align: center;
      padding: var(--bottom-section-padding);
      /* background: rgb(226, 233, 245); */
      /* background: linear-gradient(70deg, rgb(82, 162, 253) 0%, rgb(178, 243, 176) 90%); */
      /* background: linear-gradient(90deg, rgba(170,217,241,1) 0%, rgba(244,193,91,1) 40%, rgba(205,237,156,1) 81%); */
}

.header_title {
      padding-top: 12px;
      color: var(--color-white);
}

.header_container h1 {
      text-align: center;
}


.header_container h2 {
      text-align: center;
      padding: 10px 0;
}

.header_container h3 {
      font-size: 1.5rem;
      margin-top: 0;
      text-align: center;
      /* padding: 10px 0; */
}

.header_container p {
      margin-top: 10%;
      margin-bottom: 10%;
      font-size: 1.8rem;
}

.header p {
      color: rgba(255, 255, 255, 0.8);
      margin-bottom: 0;
}

.header_image {
      width: 90%;
      margin: 0 auto;
}

.cta {
      display: flex;
      justify-content: center;
      gap: 3rem;
      margin-top: 3%;
}

.cta a {
      display: flex;
      align-items: center;
      gap: 1rem;
      text-align: left;
      font-weight: 400;
      background: #000;
      border-radius: 0.7rem;
      padding: 0.8rem 1.6rem;
}

.cta a:hover {
      background: var(--color-black);
      color: var(--color-white);
}

.cta .logo {
      width: 2rem;
}

.cta a h4 {
      font-weight: 500;
      font-size: 1rem;
}

.header_socials {
      /* background: black; */
      position: absolute;
      left: 3rem;
      top: 38%;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      font-size: 1.5rem;
      
}

.header_decorator_1 {
      position: absolute;
}

.header_decorator_2 {
      position: absolute;
      right: 0;
      margin-top: 24rem;
}

/*============== ABOUT US ==============*/


.about_title {
      text-align: center;
      margin-bottom: 5rem;
      padding-top: 5rem;
}

.about_article {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 5rem;
      align-items: center;
      margin-top: 3rem;
}

.about_article-title {
      color: var(--color-black);
      margin-bottom: 1.5rem;
}

.about_article .btn {
      margin-top: 2.4rem;
}

.about_article p{
      font-size: 1.5rem;
}

/*============== TESTIMONIALS ==============*/


#testimonials h1 {
      text-align: center;
      padding-top: 5rem;
}

#testimonials .lead {
      text-align: center;
      padding-top: 1rem;
      font-size: 2rem;
      font-weight: bold;
}

.testimonials_container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1.2rem;
}

.testimonials {
      display: flex;
      flex-direction: column;
      gap: 1.4rem;
      background: var(--color-light);
      padding: 3rem;
      font-size: 0.88rem;
      border: 1px solid transparent;
      transition: all 300ms ease;
}

.testimonials p {
      font-size: 1.2rem;
}

.testimonials:hover {
      background: var(--color-white);
      border-color: var(--color-primary);
      color: var(--color-primary);
      box-shadow: 0 2rem 2rem var(--color-primary-variant);
      z-index: 1;
}

.testimonials_client{
      display: flex;
      flex-direction: column; 
      gap: 1rem;
} 

.testimonial_client .avatar {
      width: 50px; /* Adjust width as needed */
      height: 50px; /* Maintain aspect ratio */
}

.testimonial_work p {
      margin-top: 1rem;
}

/*============== FAQs ==============*/


#faqs h1 {
      text-align: center;
      margin-bottom: 4rem;
      padding-top: 5rem;
}

.faq_container {
      width: 44%;
      display: flex;
      flex-direction: column;
      gap: 1rem;
}


.faq {
      background: var(--color-light);
      padding: 2rem;
      display: flex;
      gap: 1rem;
      border: 1px solid #ddd;
      cursor: pointer;
}

.faq:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
}

.faq_icon i {
      font-size: 1.4rem;
      font-weight: 200;
}

.faq_questions {
      font-size: 1.2rem;
      font-weight: 500;
}

.faq_answers {
      margin-top: 1rem;
      display: none;
}

.faq_answers a {
      margin-top: 1rem;
      color: #000;
      font-weight: 500;
}

.faq.open {
      border-color:  var(--color-primary);
      color: var(--color-primary);
      box-shadow: 0 2rem 2rem var(--color-primary-variant);
      z-index: 1;
}

.faq.open .faq_answers {
      display: block;
}

/*============== DOWNLOAD NOW ==============*/



#download_app h1 {
      padding-top: 5rem;
}

#download_app p {
      font-size: 2rem;
      text-align: center;
}

.download_app-container {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: center;
}

.download_app-content {
      display: flex;
      flex-direction: column;
      gap: 2rem;
}

#download_app.cta {
      justify-content: start;
      margin-top: 2rem;
}

/*============== FOOTER ==============*/

footer {
      background: var(--color-primary);
      padding-top: 5rem;
      font-size: 0.9rem;
      color: rgba(250, 250, 250, 0.8);
}

.footer_container {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      justify-content: space-between;
      gap: 5rem;
}

.footer_container > div h4 {
      margin-bottom: 1.6rem;
      color: var(--color-white);
}

.footer_logo h3 {
      font-size: 1.7rem;
      margin-bottom: 0;
}


.footer_1 p {
      font-weight: 600;
      /* margin: 1rem 0 2rem; */
      width: 20rem;
}

footer ul li {
      margin-bottom: 1rem;
}

footer ul li a:hover {
      color: var(--color-white);
      text-decoration: underline;
}

.footer_4 p {
      margin-bottom: 1.6rem;
}

.footer_socials {
      display: flex;
      gap: 1rem;
      font-size: 1.4rem;
}

.copyright {
      text-align: center;
      margin-top: 4rem;
      padding: 1.2rem;
      color: var(--color-white);
      border-top: 1px solid var(--color-light);
}

/*============== MEDIA QUERIES (TABLETS) ==============*/

@media screen and (max-width: 1024px) {
      .container{
            width: var(--container-width-table);
      }

      h1 {
            font-size: 4.2rem;
      }

      h2{
            font-size: 2rem;
      }

      h3 {
            font-size: 1.9rem;
      }

      .lead {
            width: 72%;
            margin-bottom: 3rem;
      }

      section {
            padding-bottom: var(--bottom-section-padding-mobile);
      }

      /*==============WHATSAPP ==============*/

      .whatsapp_logo {
            position: fixed;
            bottom: 40px;
            right: 20px;
            text-align: right;
            z-index: 10;
      }

      .whatsapp_img {
            width: 10%;
      }


      /* ==============NAVBAR=========== */
      

      .nav_container {
            position: relative;
            width: 100vw;
      }

      .nav_logo {
            margin-left: 2rem;
            position: absolute;    
            left: 2rem;
            transform: translate(0);
      }

      .nav_items {
            position: fixed;
            top: 6rem;
            right: 0;
            background: var(--color-white);
            height: max-content;
            width: 18rem;
            box-shadow: -2rem 2 rem 3 rem rgba(0, 0, 0, 0.2);
            flex-direction: column;
            gap: 0;
            z-index: 3;
            display: none;
      }

      .nav_items li {
            width: 100%;
            height: 6rem;
      }

      .nav_items li a {
            color: var(--color-black);
            width: 100%;
            height: 100%;
            display: block;
            padding-left: 3rem;
            display: flex;
            align-items: center;
            transition: all 400ms ease
      }

      .nav_items li a:hover {
            background: var(--color-primary);
            color: var(--color-white);
      }

      nav button {
            display: inline-block;
            margin-right: 1.4rem;
            background: transparent;
            color: var(--color-black);
            cursor: pointer;
      }

      nav button#close-btn {
            display: none;
      }

      nav button i {
            font-size: 2.4rem;
      }

       /* ==============HEADER=========== */

      header {
            padding-bottom: var(--bottom-section-padding-mobile);
            /* background: var(--color-primary); */
      }

      .header_title {
            margin-bottom: 1.5rem;
      }

      .header_image {
            display:flex;
            width: 90%;
            margin: 0 auto;
            align-items: center;
      }

      .cta {
            display: grid;
            align-items: center;
            gap: 1rem;
            margin-top: 2rem;
      }

      .cta a h4{
            font-size: 1rem;
      }

      .header_socials {
            top: 24%;
            gap: 1rem;
            font-size: 1rem;
      }

      .header_decorator_2 {
            display: none;
      }

 /* ==============ABOUT=========== */

      #about {
            margin-top: 7rem;
      }

      .about_article {
            margin: 0 auto;
      }

      /* ==============TESTIMONIALS=========== */

      .testimonials_container {
            grid-template-columns: 1fr;
            gap: 1rem;
      }

       /* ==============DOWNLOAD APP=========== */

      #download_app {
            text-align: center;
      }

      #download_app .cta {
            flex-direction: column;
            gap: 1rem;
            margin: 0 auto;
      }

      /* ==============FOOTER=========== */

      .footer_container {
            grid-template-columns: 1fr 1fr;
      }

}



/*=================== MEDIA QUERIES (MOBILE) ====================*/

@media screen and (max-width: 600px) {
      html {
            font-size: 14px;
      }
      
      h1 {
            font-size: 3rem;
      }

      h2{
            font-size: 1.8rem;
      }

      h3 {
            font-size: 1.4rem;
      }

      .lead {
            width:var(--container-width-phone);
      }

      /*==============WHATSAPP ==============*/

      .whatsapp_logo {
            position: fixed;
            bottom: 40px;
            right: 20px;
            text-align: right;
            z-index: 10;
      }

      .whatsapp_img {
            width: 10%;
      }


      /* ==============NAVBAR=========== */
      
      .nav_logo {
            margin-left: 1rem;
      }

      .nav_logo h3 {
            font-size: 1rem;
      }

      /* .nav_logo img {
            width: 30px; 
            height: 30px; 
            border-radius: 50%;      
      } */

      .nav_items li a {
            justify-content: center;
            padding: 0;
      }

      nav button {
            
            display: inline-block;
            margin-right: 1.4rem;
            background: transparent;
            color: var(--color-black);
            cursor: pointer;
      }

       /* ==============HEADER=========== */

      .header_title {
            margin-bottom: 11rem;
      }

      .header_image {
            display:flex;
            width: 90%;
            margin: 0 auto;
            align-items: center;
      }

      .header_container {
            /* text-align: center; */
            display: grid;
            justify-content:center;
            align-items: center;
            
      }

      /* .header_container h1 {
            text-align: center;     
      } */

      .header_container h2 {
            /* text-align: center; */
            font-weight: bold;     
      }


      .header_container h3 {
            font-size: 17px;
            font-weight: 700;
            padding: 10px 0;
            /* text-align: center; */
            /* display: flex; */
            /* flex-direction: row; */
      }

      .header_container p {
            font-size: 15px;
            font-weight: 500;
            padding: 10px 0;
            /* display: flex; */
            /* flex-direction: row; */
      }


      .cta {
            display: grid;
            align-items: center;
            gap: 1rem;
      }

      .cta a h4{
            font-size: 1rem;
      }

      .header_socials {
            display: none;
      }


 /* ==============ABOUT=========== */

      .about_article {
            grid-template-columns: 1fr;
            margin-top: 5rem;
            text-align: center;
            gap: 0;
      }

      .about_article:nth-child(2) .about_image {
            grid-row: 1;
      }

      /* ==============TESTIMONIALS=========== */

      .testimonials {
            padding: 1.4rem;
      }

      /* =============Download APP ============= */

      .download_app-container {
            display: flex;
            flex-direction: column;
            align-items: center;
      }
      

      /* ==============FOOTER=========== */

      .footer_container {
            grid-template-columns: 1fr;
            text-align: center;
            gap: 2rem;
      }

      .footer_1 {
            width: var(--container-width-phone);
      }

      .footer_1  p{
            width: var(--container-width-phone);
            margin: 0 auto 3rem;
      }

      .footer_socials {
            justify-content: center;
      }


}