/* ============= Poppins font ============= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

/* ==================== Variable CSS ================ */

:root{
    --header-height: 3.5rem; /*56px*/

    /* ===============  Colors ================*/
    /* ========= Color mode HSL (Hue, Saturation and lightness) ========*/
    --hue: 152;
    --first-color:hsl(var(--hue), 24%, 32%) ;
    --first-color-alt:hsl(var(--hue), 24%, 28%);
    --first-color-light:hsl(var(--hue), 24%, 66%) ;
    --first-color-lighten:hsl(var(--hue), 24%, 92%) ;
    --title-color:hsl(var(--hue), 4%, 15%) ;
    --text-color:hsl(var(--hue), 4%, 35%) ;
    --text-color-light:hsl(var(--hue), 4%, 55%) ;
    --body-color:hsl(var(--hue), 0%, 100%);
    --container-color: #fff;
    --box-shadow: -2px 0 4px hsla(var(--hue), 24%, 15%, .1);
    --transition: .3s ;

    /* ================ font and typography ============ */
    /* 0.5rem = 8px | 1rem = 16px*/
    --body-font: 'Poppins', sans-seriff;
    --big-font-size: 2rem ;
    --h1-font-size: 1.5rem ;
    --h2-font-size: 1.25rem ;
    --h3-font-size: 1rem;
    --normal-font-size: .938rem;
    --small-font-size: .813rem;
    --smaller-font-size: .75rem;

    /* ================== font weight ===================*/
    --font-medium: 500;
    --font-semi-bold: 600;

    /* ================== margin botto ================ */
    /* 0.5rem = 8px | 1rem = 16px*/
    --mb-0-5: .5rem;
    --mb-0-75: .75rem;
    --mb-1: 1rem;
    --mb-1-5: 1.5rem;
    --mb-2: 2rem;
    --mb-2-5: 2.5rem;

    /*====================== Z index ================= */
    --z-tooltip: 10 ;
    --z-fixed: 100;

}

/* =================== responsive typography ============= */
@media screen and (min-width: 968px) {
    :root{
        --big-font-size: 3.5rem ;
        --h1-font-size: 2.25rem ;
        --h2-font-size: 1.5rem ;
        --h3-font-size: 1.25rem;
        --normal-font-size: 1rem;
        --small-font-size: .875rem;
        --smaller-font-size: .813rem;
    }
}

/* ===================== Base =================== */
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html{
    scroll-behavior: smooth;
}

body,
button,
textarea,
input{
    font-family: var(--body-font);
    font-size: var(--normal-font-size);     
}

body{
    margin: var(--header-height)0 0 0;
    background-color: var(--body-color);
    color: var(--text-color);
}

button{
    cursor: pointer;
    border: none;
    outline: none;
}

h1,h2,h3{
    color: var(--title-color);
    font-weight: var(--font-semi-bold);
}

a{
    text-decoration: none;
}

ul{
    list-style: none;
}

img{
    max-width: 100%;
    height: auto;
}


/* ========================== Resuable CSS classes ================= */

.section{
    padding: 4.5rem 0 1.5rem;
}

.section_title,
.section_title-center{
    font-size: var(--h2-font-size);
    margin-bottom: var(--mb-2);
    line-height: 140%;
}

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

.container{
    max-width: 1200px;
    margin-left: var(--mb-2-5);
    margin-right: var(--mb-1-5);
}

.grid{
    display: grid;
}

.main{
    overflow: hidden; /*for animation*/
}

/* ===================== header =============================*/
.header{
    width: 100%;
    background-color: var(--body-color);
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-fixed);
}

/*========================== Nav =========================== */
.nav{
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav_logo,
.nav_toggle,
.nav_close{
    color: var(--title-color);
}

.nav_logo{
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: inline-flex;
    align-items: center;
    column-gap: .5rem;
    transition: .3s;
    font-size: 1.25rem;
}

.nav_logo-icon{
    font-size: 1.15rem;
    color: var(--first-color);
}

.nav_logo:hover{
    color: var(--first-color);
}

.nav_toggle{
    display: inline-flex;
    font-size: 1.25rem;
    cursor: pointer;
}

@media screen and (max-width: 767px){
    .nav_menu{
        position: fixed;
        background-color: var(--container-color);
        width: 65%;
        top: 0;
        right: -100%;
        box-shadow: var(--box-shadow);
        height: 100%;
        padding: 4rem 0 0 3rem;
        border-radius: 1rem 0 0 1rem;
        transition: var(--transition);
        z-index: var(--z-fixed);
    }
}
    
    .nav_close{
        position: absolute;
        top: 1rem;
        right: 1.25rem;
        font-size: 1.5rem;
        cursor: pointer;
    }

    .nav_list{
        display: flex;
        flex-direction: column;
        row-gap: 1.5rem;
    }

    .nav_link{
        color: var(--title-color);
        font-weight:var(--font-medium);
        transition: var(--transition);
    }

    .nav_link_sign_up{
        background-color: var(--first-color);
        color: var(--container-color);
        padding: 0.5rem 0.7rem;
        border-radius: .4rem;
    }

    .nav_link_sign_up:hover{
      background-color: var(--container-color);
      border:1px solid var(--first-color)
    }

    .nav_link_log_in{
      background-color: var(--first-color);
      color: var(--container-color);
      padding: 0.5rem 0.7rem;
      border-radius: .4rem;
  }

  .nav_link_log_in:hover{
    background-color: var(--container-color);
    border:1px solid var(--first-color)

  }


    .nav_link:hover{
        color: var(--first-color);
    }

    /*================= show menu ================ */
    .show-menu{
        right: 0;
    }

    /* =============== chnage background header =========== */
    .scroll-header{
        box-shadow: 0 1px 4px hsla(var(--hue), 14%, 15%, .2);
    }


    /*================ Active link ==============*/
    .active-link{
        position: relative;
        color: var(--first-color);
    }

    .active-link::after{
        content: ' ';
        position: absolute;
        bottom: -.5rem;
        left: 0;
        width: 50%;
        height: 2px;
        background-color: var(--first-color);
    }


    /*============= Home Page====================*/
    .home{
        padding: 3.5rem 0 2rem;
    }

    .home_container{
        position: relative;
        row-gap: 2rem;
    }

    .home_img{
        justify-self: center;
        width: 400px;
    }

    .home_title{
        font-size: var(--big-font-size);
        line-height: 140%;
        margin-bottom: var(--mb-1);
    }

    .home_description{
        margin-bottom: var(--mb-2-5);
    }

    /* ========================= Buttons ===================== */
    .button{
        display: inline-block;
        background-color: var(--first-color);
        color: var(--container-color);
        padding: 1rem 1.75rem;
        border-radius: .4rem;
        font-weight: var(--font-medium);
        transition: var(--transition);
    }

    .button1{
        border: 1px solid var(--first-color);
        display: inline-block;
        color: var(--first-color);
        padding: 1rem 1.75rem;
        border-radius: .4rem;
        font-weight: var(--font-medium);
        transition: var(--transition);
        background-color: transparent;
    }

    .button1:hover{
        color: var(--container-color);
        background-color: var(--first-color);
        border: none;
    }

    .button:hover{
        background-color: transparent;
        border: 1px solid var(--first-color);
        color: var(--first-color);
        transform: translateX(.1.5em);
    }

    .button_icon{
        transition: var(--transition);
    }

    .button:hover .button_icon{
        transform: translateX(.25rem);
    }

    .button--flex{
        display: inline-flex;
        align-items: center;
        column-gap: .5rem;
    }

     /* ========================= About page ===================== */
     .about_container{
        row-gap: 2rem;
     }

     .about_img{
        width: 300px;
        justify-self: center;
     }

     .about_title{
        margin-bottom: var(--mb-1);
     }

     .about_description{
        margin-bottom: var(--mb-1-5);
     }

     .about_details{
        row-gap: 1rem;
        display: grid;
        margin-bottom: var(--mb-2);
     }

     .about_details-description{
        display: inline-flex;
        font-size: var(--small-font-size);
        column-gap: .5rem;
     }

     .about_details-icon{
        font-size: 1rem;
        color: var(--first-color);
        margin-top: .15rem;
     }

      /* ========================= How it works ===================== */
      .steps_bg{
        background-color: var(--first-color);
        padding: 2.5rem 2rem 2rem;
        border-radius: 1rem;
      }

      .steps_container{
        gap: 2rem;
        padding-top: 1rem;
      }

      .steps_title{
        color: var(--container-color);
        font-size: 1.5rem;
      }

      .steps_card{
        background-color: var(--container-color);
        padding: 2.5rem 3rem 2rem 1.5rem;
        border-radius: 1rem;
      }

      .steps_card-number{
        display: inline-block;
        background-color: var(--first-color-alt);
        color: var(--container-color);
        padding: .5rem .75rem;
        border-radius: .25rem;
        font-size: var(--h2-font-size);
        margin-bottom: var(--mb-1-5);
        transition: var(--transition);
      }

      .steps_card-title{
        font-size: var(--h3-font-size);
        margin-bottom: var(--mb-0-5);
      }

      .steps_card-description{
        font-size: var(--small-font-size);
        line-height: 1.3rem;
      }

      .steps_card:hover .steps_card-number{
        transform: translateY(-.25rem);
      }

      /* ========================= FAQs Section ===================== */
      .questions{
        background-color: var(--first-color-lighten);
        margin-top: 4.3rem;
        margin-bottom: 2rem;
      }

       .questions_container{
        gap: 1.5rem;
        padding:1.5rem 0;
      }

      .questions_group{
        display: grid;
        row-gap: 1.5rem;
      }

      .questions_item{
        background-color: var(--container-color);
        border-radius: .25rem;
        font-weight: var(--font-medium);
      }

      .questions_icon{
        color: var(--title-color);
        font-size: 1.25rem;
      }

       .questions_description{
        font-size: var(--smaller-font-size);
        padding: 0 1.25rem 1.25rem 2.5rem;
      }

      .questions_header{
        display: flex;
        align-items: center;
       column-gap: .5rem;
        padding: .75rem .5rem;
        cursor: pointer;
      }

      .questions_content{
        overflow: hidden;
        height: 0;
      }

      .questions_item,
      .questions_header,
      .questions_item-title,
      .questions_icon,
      .questions_description,
      .questions_content{
        transition: var(--transition);
      }

      .questions_item:hover{
        box-shadow: 0 2px 8px hsla(var(--hue), 14%, 15%, .15);
      } 

      /* Rotate icon, change colors of titles and backgrounds*/

      .accordion-open .questions_icon{
        transform: rotate(45deg);
      } 


      /* =========================== CONTACT SECTION ========================*/
      .contact_container{
        row-gap: 3rem;
      }

      .contact_data{
        display: grid;
        row-gap: 1.5rem;
      }

      .contact_subtitle{
        font-size: var(--normal-font-size);
        font-weight: var(--font-medium);
        margin-bottom: var(--mb-0-5);
      }

      .contact_description{
        display: inline-flex;
        align-items: center;
        column-gap: .5rem;
        color: var(--title-color);
        font-weight: var(--font-medium);
      }

      .contact_icon{
        font-size: 1.25rem;
      }

      .contact_inputs{
        display: grid;
        row-gap: 1.5rem;
        margin-bottom: var(--mb-2-5);
      }

      .contact_content{
        position: relative;
        height: 3rem;
        border-bottom: 1px solid var(--text-color-light);
      }

      .contact_input{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        padding: 1rem 1rem 1rem 0;
        background: none;
        border: none;
        outline: none;
        z-index: 1;
      }

      .contact_label{
        position: absolute;
        top: .75rem;
        width: 100%;
        font-size: var(--small-font-size);
        color: var(--text-color-light);
        transition: var(--transition);
      }

      .contact_area{
        height: 7rem;
      }

      .contact_area textarea{
        resize: none;
      }

      /* input focus to move up label*/
      .contact_input:focus + .contact_label{
        top: -.75rem;
        left: 0;
        font-size: var(--smaller-font-size);
        z-index: 10;
      }

      /* input focus sticky top label */
      .contact_input:not(:placeholder-shown).contact_input:not(:focus) + .contact_label{
        top: -.75rem;
        font-size: var(--smaller-font-size);
        z-index: 10;
      }


      /* ============================ Footer Section ===========================*/
      .footer_container{
        row-gap: 2.5rem;
      }

      .footer_logo{
        display: inline-flex;
        align-items: center;
        column-gap: .5rem;
        color: var(--title-color);
        text-transform: uppercase;
        font-weight: 700;
        letter-spacing: -0.5px;
        margin-bottom: var(--mb-2-5);
        transition: var(--transition);
      }

      .footer_logo-icon{
        font-size: 1.15rem;
        color: var(--first-color);
      }

      .footer_logo:hover{
        color: var(--first-color);
      }

      .footer_title{
        font-size: var(--h3-font-size);
        margin-bottom: var(--mb-1);
      }

      .footer_subscribe{
        background-color: var(--first-color-lighten);
        padding: .75rem;
        display: flex;
        justify-content: space-between;
        border-radius: .5rem;
      }

      .footer_input{
        width: 70%;
        padding: 0 .5rem;
        background: none;
        border: none;
        outline: none;
      }

      .footer_button{
        padding: 1rem;
      }

      .footer_information{
        font-size: var(--small-font-size);
      }

      .footer_social{
        display: inline-flex;
        column-gap: .75rem;
      }

      .footer_social-link{
        color: var(--text-color);
        font-size: 1rem;
        transition: var(--transition);
      }

      .footer_social-link:hover{
        transform: translateY(.25rem);
      }

      .footer_copy{
        text-align: center;
        font-size: var(--smaller-font-size);
        color: var(--text-color-light);
        margin: 5rem 0 1rem;
      }


      /* ============================== SCROLL UP ========================= */
      .scrollup{
        position: fixed;
        background-color: var(--first-color);
        right: 1rem;
        bottom: -30%;
        display: inline-flex;
        padding: .5rem;
        border-radius: .25rem;
        z-index: var(--z-tooltip);
        opacity: .8;
        transition: .4s;

      }

      .scroll_up-icon{
        font-size: 1rem;
        color: #fff;
      }

      .scrollup:hover{
        background-color: var(--first-color-alt);
        opacity: 1;
      }

      .show-scroll{
        bottom: 3rem;
      }



      /* ========================= Scroll bar ============== */
      ::-webkit-scrollbar{
        width: .5rem;
        background: hsl(var(--hue), 4%, 53%);
      }

      ::-webkit-scrollbar-thumb{
        background: hsl(var(--hue), 4%, 29%);
        border-radius: .3rem;
      }


      /* ========================================== BREAKPOINTS ====================== */
      @media screen and (max-width: 320px){
        .container{
            padding: 2rem;
            margin-left: var(--mb-1);
            margin-right: var(--mb-1);
        }

        .home_img{
            width: 230px;
        }

        .home_title{
            font-size: var(--h1-font-size);
        }

        .steps_bg{
            padding: 2rem 1rem;
        }

        .steps_card{
            padding: 1.5rem;
        }
      }


      /* =================== FOR MEDIUM DEVICES ================= */
      @media screen and (min-width: 576px){
        .steps_container{
            grid-template-columns: repeat(2, 1fr);
          }
    
          .footer_subscribe{
            width: 400px;
          }


      }
      
      @media screen and (min-width: 767px){
        body{
            margin: 0;
        }

        .nav{
            height: calc(var(--header-height) + 1.5rem);
            column-gap: 3rem;

        }

        .nav_toggle,
        .nav_close{
            display: none;
        }

        .nav_list{
            flex-direction: row;
            column-gap: 3rem;
        }

        .home_container,
        .about_container,
        .questions_container,
        .contact_container,
        .footer_container{
            grid-template-columns: repeat(2, 1fr);
        }

        .home{
            padding: 9rem 0 4rem;
        }

        .home_title{
            text-align: left;
        }

        .home_container{
            align-items: center;
        }

        .home_img{
            width: 400px;
            order: 1;
            margin-bottom: 3rem;
            margin-left: 2.5rem;
        }

        .about_img{
            width: 400px;
        }

        .questions_container{
            align-items: flex-start;
        }

        .footer_container{
            column-gap: 3rem;
        }

        .footer_subscribe{
            width: initial;
        }
      }

      /* FOR LARGE DEVICES*/
      @media screen and (min-width: 992px){
        .container{
            padding: 1.3rem;
            margin-left: auto;
            margin-right: auto;
        }

        .section{
            padding: 8rem 0 1rem;
        }

        .home_title{
          line-height: 4.5rem;
        }

        .section_title,
        .section_title-center{
            font-size: var(--h1-font-size);
        }


        .home{
            padding: 13rem 0 5rem;
        }

        .home_img{
            width: 400px;
            margin-right: 2rem;
        }

        .home_description{
            padding-right: 7rem;
        }

        .about_img{
            width: 80%;
        } 

        .steps_container{
            grid-template-columns: repeat(3, 1fr); 
        }

        .steps_bg{
            padding: 3.5rem 2.5rem;
        }

        .steps_card-title{
            font-size: var(--normal-font-size);
        }

        .questions_container{
            padding: 1rem 0 4rem;
        }

        .questions_group{
            row-gap: 2rem;
        }

        .questions_header{
            padding: 1rem;
        }

        .questions_description{
            padding: 0 3rem 2.25rem 2.75rem;
        }

        .footer_logo{
            font-size: var(--h3-font-size);
        }

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

        .footer_copy{
            margin: 7rem 0 2rem;
        }

      }

      @media screen and (min-width: 1200px){
        .about_container{
            column-gap: 7rem;
        }

        .scrollup{
            right: 3rem;
        }
        
      }