@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap");

:root{

    --soft-blue: hsl(231, 69%, 60%);
    --soft-red: hsl(0, 94%, 66%);
    --grayish-blue: hsl(229, 8%, 60%);
    --dark-blue: hsl(229, 31%, 21%);
    --white: #fff;

    --xsm: clamp(0.8331rem, 0.7751rem + 0.1856vw, 0.9375rem);
    --sm: clamp(1rem, 0.9306rem + 0.2222vw, 1.125rem);
    --md:  clamp(1.35rem, 1.3083rem + 0.1333vw, 1.425rem);
    --lg: clamp(1.7281rem, 1.6083rem + 0.3833vw, 1.9438rem);
    --xl: clamp(2.0738rem, 1.93rem + 0.46vw, 2.3325rem);
    --xxl: clamp(2.4881rem, 2.3152rem + 0.5533vw, 2.7994rem);

    --font-400: 400;
    --font-500: 500;

    --font-rubric: "Rubik", sans-serif;
}

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

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-rubric);
  font-size: 18px;
  overflow-x: hidden;
}

img,
picture{
  display: block;
  max-width: 100%;
}

input,
button{
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

ul{
    list-style: none;
}

a{
    text-decoration: none;
}


/* ---------------- */
/* UTILITY CLASSES */
/* -------------- */

/* Typography */
.text-xxl{
  font-size: var(--xxl);
  font-weight: var(--font-500);
}
.text-xl{
  font-size: var(--xl);
  font-weight: var(--font-500);
}
.text-lg{
  font-size: var(--lg);
  font-weight: var(--font-500);
}
.text-md{
  font-size: var(--md);
}
.text-sm{
  font-size: var(--sm);
}
.text-xsm{
  font-size: var(--xsm);
}

.text-normal{
  font-weight: var(--font-400);
}
.text-bold{
  font-weight: var(--font-500);
}

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

/* Display */
.d-none{
  display: none;
}

.d-flex{
  display: flex;
}

.d-block{
  display: block;
}

.justify-center{
  justify-content: center;
}

.justify-between{
  justify-content: space-between;
}

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

/* colors */
.text-dark{
  color: var(--dark-blue);
}

.text-light-grey{
  color: hsl(226, 6%, 45%);
}

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

.bg-soft-blue{
  background-color: var(--soft-blue);
}

.bg-dark-blue{
  background-color: var(--dark-blue);
}

/* Buttons */
.btn-soft-blue{
  background-color: var(--soft-blue);
  color: var(--white);
  border: none;
  padding: 0.7rem 1rem;
  font-weight: var(--font-500);
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  border: 2px solid var(--soft-blue);
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
}

.btn-soft-blue:hover,
.btn-soft-blue:focus{
  background-color: transparent;
  color: var(--soft-blue);
}

.btn-light{
  background-color: hsl(0, 20%, 97%);
  color: var(--dark-blue);
  border: 2px solid hsl(0, 20%, 97%);
  padding: 0.8rem 1rem;
  font-weight: var(--font-500);
  font-size: 1rem;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 2px 3px 4px 1px rgba(193, 193, 193, 0.4);
}

.btn-light:hover,
.btn-light:focus{
  background-color: transparent;
  border: 2px solid var(--dark-blue);
}

.icon-btn{
  background-color: transparent;
  border: none;
}

/* Container */
.container{
  max-width: 1200px;
  padding-inline: 1.8rem;
  margin-inline: auto;
}

/* MARGING & PADDING */
.py-big{
  padding-block: 4rem;
}

.mt-small{
  margin-top: 0.2rem;
}
.mt-1{
  margin-top: clamp(1.6875rem, 1.6181rem + 0.2222vw, 1.8125rem);
}
.mt-2{
  margin-top: clamp(2.25rem, 2.1806rem + 0.2222vw, 2.375rem);
}
.mt-3{
  margin-top: clamp(3.375rem, 3.2708rem + 0.3333vw, 3.5625rem);
}

.ml-small{
  margin-left: 0.8rem;
}
.ml-1{
  margin-left: 1rem;
}

/* Positioning */
.relative{
  position: relative;
}


/* ------------ */
/* CSS styling */
/* ---------- */

/* HEADER */
.header{
  height: 5.6rem;
  background-color: transparent;
  /* border: 2px solid blue; */
}

.header .container{
  height: 100%;
}

.header .container .container-box{
  height: 100%;
}

.navigation-mobile.hidden{
  visibility: hidden;
}

.navigation-mobile{
  position: absolute;
  background-color: rgb(36, 41, 70, .93);
  top: 0;
  left: 0;
  min-height: 100%;
  width: 98%;
  display: flex;
  flex-direction: column;
  padding: 3rem;
  text-align: center;
  border: 2px solid #fff;
  z-index: 100;
}

.navigation-mobile .content-top{
  display: flex;
  justify-content: space-between;
}

.navigation-mobile .content-middle{
  display: flex;
  flex-direction: column;
}

.navigation-mobile .content-middle .nav-list-mobile li{
  border-bottom: 1px solid var(--grayish-blue);
  padding: 1rem;
}

.navigation-mobile .content-middle .nav-list-mobile li a:hover,
.navigation-mobile .content-middle .nav-list-mobile li a:focus{
  color: var(--soft-red);
}

.navigation-mobile .content-middle .log-in-btn-mobile{
  background-color: transparent;
  color: var(--white);
  border: 2px solid var(--white);
  padding: 0.5rem 1rem;
  border-radius: 5px;
  text-transform: uppercase;
  font-weight: 500;
}

.navigation-mobile .content-bottom{
  display: flex;
  gap: 2.4rem;
  justify-content: center;
  margin-top: 66%;
}

.navigation-mobile .content-bottom img:hover,
.navigation-mobile .content-bottom img:focus{
  color: var(--soft-red);
}

.navigation-mobile .content-middle .nav-list-mobile li a{
  color: #fff;
}

.bookmark-light{
  fill: #fff;
  width: 160px;
}

.toggle-btn img{
  width: 20px;
}

/* HERO SECTION */
.hero-illustration{
  width: 100%;
}

.background-shape-left {
  position: absolute;
  left: 134px;
  bottom: 0;
  height: 80%;
  width: 86%;
  background-color: var(--soft-blue);
  z-index: -1;
  border-radius: 200px 0 0 200px;
}

.hero-text{
  padding: 0.6rem;
  text-align: center;
  margin-top: 2rem;
}

/* Common max-width */
.feature-heading-text,
.download-heading,
.faq-heading{
  max-width: 40rem;
  margin: auto;
}

/* FEATURE SECTION */
.feature-section .container{
  text-align: center;
}

.feature-img{
  width: 90%;
  margin-inline: auto;
}

.feature-btn-div{
  max-width: 300px; 
  margin-inline: auto; 
  background-color: transparent;
  border-inline: none;
  border-bottom: 1px solid var(--grayish-blue);
}

.feature-text-container{
  margin-top: 5rem;
}

.feature-tab-btn{
  padding-block: 1.4rem;
  display: block;
  width: 100%;
  background-color: transparent;
  border: none;
  border-bottom: 4px solid transparent;
}

.feature-tab-btn:hover{
  color: var(--soft-red);
}

.feature-tab-btn.active{
  border-bottom: 4px solid var(--soft-red);
} 

.feature-tab-btn.active:hover{
  color: var(--dark-blue);
}

.feature-tab-content{
  display: none;
}

.feature-tab-content.active{
  display: block;
}

.background-shape-right {
  position: absolute;
  right: 112px;
  bottom: -50px;
  height: 97%;
  width: 98%;
  background-color: var(--soft-blue);
  z-index: -1;
  border-radius: 0 200px 200px 0 ;
}

/* DOWNLOARD SECTION */
.download-section .container .download-heading {
  text-align: center;
}
 
.download-section .container .download-cards{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rem;
}

.download-card{
  background-color: hsl(0, 0%, 99%);
  margin-inline: auto;
  border-radius: 8px;
  width: 300px;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
  padding: 2rem;
  text-align: center;
}

.browser-img{
  width: 140px;
  margin-inline: auto;
}

.card-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.download-btn{
  background-color: var(--soft-blue);
  color: var(--white);
  padding: 0.8rem;
  border: 2px solid var(--soft-blue);
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
}
.download-btn:hover{
  background-color: transparent;
  color: var(--soft-blue);
}

/* FAQ SECTION */
.faq-section .container .faq-heading{
  text-align: center;
}

.faq-section .container .faq-btn{
  display: block;
  margin-inline: auto;
}

.faq-section .container{
  max-width: 40rem;
  margin-inline: auto;
}

.faq-questions-content .question-content{
  padding-block: 1.2rem;
  border-bottom: 1px solid var(--grayish-blue);
  font-size: 1rem;
}

.faq-questions-content .question-content:hover .question .text-dark{
  color: var(--soft-red);
}

.faq-questions-content .question{
  display: flex;
  justify-content: space-between;
}

.faq-questions-content .answer{
  display: none;
  padding-top: 1.6rem;
}

.question-content.show-answer .answer{
  display: block;
}

.question-content.show-answer .question .icon-btn svg{
  transform: rotate(180deg);
}
.question-content.show-answer .question .icon-btn svg path{
  stroke: var(--soft-red);
}

/* STAY-UP-TO-DATE SECTION */
.stay-up-to-date-section{
  background-color: var(--soft-blue);
}
.stay-up-to-date-section .container{
  color: var(--white);
  text-align: center;
  max-width: 34rem;
  padding-block: 4rem;
}

.email-input-container{
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.email-input-container .input-error {
  width: 100%;
  padding: 0.2rem;
  background: var(--soft-red);
  border-radius: 5px;
  text-align: left;
}

.email-input-container .input-error .error{
  display: block;
  padding: 0.2rem 0.6rem;
  font-size: 0.95rem;
}

.email-input-container input{
  width: 100%;
  border-radius: 5px;
  padding: 0.8rem 1rem;
  border: none;
  outline: none;
}

.email-input-container .contact-us-btn{
  padding: 0.8rem 1rem;
  border: 2px solid var(--soft-red);
  background-color: var(--soft-red);
  color: var(--white);
  font-weight: 500;
  border-radius: 5px;
}

.email-input-container .contact-us-btn:hover{
  background-color: var(--white);
  color: var(--soft-red);
}

/* FOOTER SECTION */
.footer{
  background-color: rgb(36, 41, 70);
  color: var(--white);
}

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

.logo-light{
  color: #fff;
}

.footer{
  padding-block: 4rem;
}

.footer .container .content-left ul{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  margin-top: 2rem;
}

.footer .container .content-left ul li a{
  color: var(--white);
  text-transform: uppercase;
  font-weight: var(--font-400);
  font-size: 1rem;
}

.footer .container .content-left ul li a:hover{
  color: var(--soft-red);
}

.footer .container .social-icons{
  margin-top: 2rem;
  display: flex;
  gap: 2rem;
}

.footer .container .content-right svg path:hover{
  fill: var(--soft-red);
}


@media (min-width: 56rem){

  /* positioning */
  .position-top-3rem{
    position: relative;
    top: 3rem;
  }
  .position-top-6rem{
    position: relative;
    top: 6rem;
  }

  .py-big{
    padding-block: 8rem;
  }

  body{
    font-size: 19px;
  }

  /* HEADER SECTION */
  .header{
    height: 8rem;
  }

  .header .container .toggle-btn{
    display: none;
  }

  .header .container {
    display: flex;
    justify-content: space-between;
  }

  .header .container .navigation{
    display: flex;
    align-items: center;
    gap: 4rem;
  }

  .navigation-mobile{
    display: none;
  }

  .background-shape-left {
    left: 168px;
    width: 105%; 
  }

  .log-in-btn{
      padding: 0.4em 1.7rem;
      font-size: 1.1rem;
      border: none;
      color: var(--white);
      background-color: var(--soft-red);
      border-radius: 4px;
      box-shadow: 2px 3px 4px 1px rgba(193, 193, 193, 0.4);
      border: 2px solid var(--soft-red);
  }

  .log-in-btn:hover{
    background-color: transparent;
    color: var(--soft-red);
  }

  .header .container .navigation .nav-list{
    display: flex;
    gap: 2.9rem;
  }

  .header .container .navigation .nav-list li a{
    color: rgba(36, 41, 70, 0.5);
    text-transform: uppercase;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 1px;
  }

  .header .container .navigation .nav-list li a:hover{
    color: var(--soft-red);
  }

  /* HERO SECTION */
  .hero-section .container .row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4%;
    /* border: 2px solid blue; */
  }
  
  
  .hero-section .container .row .hero-text{
    /* border: 2px solid red; */
    order: 1;
    text-align: left;
    align-items: center;
    width: 46%;
    margin-top: 0;
  }

  .hero-section .container .row .hero-img{
    order: 2;
    width: 50%;
  }

  /* FEATURE SECTION */
  .feature-tab-heading .row{
    display: flex;
    justify-content: center;
  }

  .feature-btn-div{
    margin-inline:0;
    width: 100%;
  }

  .feature-tab .feature-tab-contents .feature-tab-content .row{
    display: flex;
    gap: 6%;
    text-align: left;
  }

  .feature-tab .feature-tab-contents .feature-tab-content .row .feature-img-container{
    width: 54%;
  }

  .feature-tab .feature-tab-contents .feature-tab-content .row .feature-text-container{
    width: 40%;
    margin-top: 0;
  }

  .background-shape-right {
    right: 112px;
    bottom: -50px;
    width: 116%; 
  }
  
  /* DOWNLOARD SECTION */
  .download-section .container .download-cards{
    flex-direction: row;
    gap: clamp(2.25rem, 2.1806rem + 0.2222vw, 2.375rem);
  }

  .download-section .container .download-cards .download-card{
    margin-inline: 0;
  }

  /* STAY-UP-TO-DATE SECTION */
  .stay-up-to-date-section .container{
    padding-block: 6rem;
  }

  .email-input-container .error-input-container{
    width: 70%;
  }

  .email-input-container{
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 1.3rem;
  }

  .email-input-container input{
    width: 100%;
  }

  .email-input-container input:focus{
    outline: 1px solid var(--dark-blue);
  }

  .email-input-container button{
    width: 30%;
  }

  /* FOOTER */
  .footer{
    padding-block: 2.6rem;
  }

  .logo-light{
    margin-right: 3rem;
  }

  .footer .container{
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  
  .footer .container .content-left{
    display: flex;
    flex-direction: row;
  }

  .footer .container .content-left ul{
    flex-direction: row;
    gap: 2rem;
  }

  .footer .container .content-left ul,
  .footer .container .content-right{
    margin-top: 0;
  }
 

}

@media (max-width: 420px){
  
  .btn-light{
    margin-top: 1rem;
  } 

  .ml-small{
    margin-left: 0;
  }

  .container{
    padding-inline: 1rem;
  }

}