@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@600&family=Open+Sans:wght@400;700&family=Raleway:wght@400;700&display=swap');

:root{
    --clr-hero-bg: hsl(219, 30%, 18%);
    --clr-main-bg: hsl(218, 28%, 13%);
    --clr-footer-bg: hsl(216, 53%, 9%);
    --clr-testimonials-bg: hsl(219, 30%, 18%);
    --clr-neutral: hsl(0, 0%, 100%);
    --clr-neutral-opacity: hsl(0, 0%, 100%, .7);
    --clr-button-gradient-right: hsl(198, 60%, 50%);
    --clr-button-gradient-left: hsl(176, 68%, 64%);

    --ff-body: 'Open Sans', sans-serif;
    --ff-headings-cta-headernav: 'Raleway', sans-serif;

    --fw-400: 400;
    --fw-700: 700;

    --fsize-paragraphs: 0.875rem;
    --fsize-headings-200: 2rem;
    --fsize-headings-300: 3rem;
}
/* reset */

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

body{
    background-color: var(--clr-main-bg);
    font-family: var(--ff-body);
}

/* General Styles Start */
a, p{
    font-size: var(--fsize-paragraphs);
    color: var(--clr-neutral-opacity);
    font-weight: var(--fw-400);
    text-decoration: none;
}
h1, h2, h3, h4, h5, h6{
    color: var(--clr-neutral);
    font-family: var(--ff-headings-cta-headernav);
    font-weight: var(--fw-700);
}
h1, h2{
    font-size: var(--fsize-headings-200);
}
ul{
    list-style: none;
}
button, input{
    padding: .75rem 3.75rem;
    background-image: linear-gradient(to right, var(--clr-button-gradient-left), var(--clr-button-gradient-right));
    font-weight: var(--fw-700);
    border-radius: 1.25rem;
    border: none;
    color: white;
}
button:hover, input[type="submit"]:hover{
    cursor: pointer;
    filter: brightness(120%);
}
a:hover{
    color: var(--clr-neutral);
    text-decoration: underline;
}
/* General Styles End */


/* Header Start */

/* Nav Start */
header{
    background-color: var(--clr-hero-bg);
    background-image: url(/images/bg-curvy-desktop.svg);
    background-repeat: repeat-x;
    background-size: 100%;
    background-position: bottom;
    padding: clamp(1rem, 5%, 4rem);
}
.nav-container{
    display: flex;
    padding-bottom: 2rem;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}
.fylo-logo{
    width: clamp(76px, 20%, 120px);
    margin-right: auto;
}

nav ul li{
    display: inline-block;
    margin-right: min(10rem, 3vw);
}

/* Nav End */
/* Section Start */
.hero-section{
    text-align: center;
    width: min(100%, 420px);
    margin: 0 auto 15rem auto;
}
.hero-image{
    width: 100%;
}
.hero-section p{
    padding: 1.5rem 2.75rem;
    max-width: 394px;
}
.hero-section h1{
    padding-top: 1.5rem;
}
/* Section End */

/* Header End */
/* Main Start */

/* Features Start */
main{
    background-color: hsl(219, 30%, 18%);
    background-color: var(--clr-main-bg);
}

.grid-container{
    margin: 0 auto;
    padding-top: 1.75rem;
    text-align: center;
    align-items: center;
    justify-content: center;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 4rem 8rem;
    width: min(100%, 600px);
    position: relative;
    top: -10rem;
}

.grid-item{
    padding: 1rem;
}

/* Features End */
/* About Us Start */
.about-us{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    gap: 2rem;
    padding: 0 min(10%, 5rem);
}

.productivity, .desc{
    flex: 1;
    min-width: 200px;
    width: 50%;
}

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

.desc h1{
    max-width: 275px;
}
.desc p{
    max-width: 376px;
}
.wrapper{
    display: flex;
    gap: .25rem;
}
.wrapper a{
    color: var(--clr-button-gradient-left);
    text-decoration: underline;
}

/* About Us End */
/* Testimonials Start */
.card-1::before{
    content: url(/images/bg-quotes.png);
    position: absolute;
    top: -3rem;
    left: -2rem;
    z-index: 0;
}
.testimonials{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    width: 100%;
    margin: 20% 0 30rem 0;
}
.testimonials-card{
    position: relative;
    width: clamp(200px, 20%, 500px);
    background-color: var(--clr-testimonials-bg);
    border-radius: .25rem;
    padding: 1.5rem;
}
.testimonials article img{
    float: left;
    margin-right: .75rem;
    border-radius: 100%;
    width: min(15%, 30px);
    align-items: center;
}
.testimonials p{
    padding: 1rem 0;
}
.testimonials h4{
    padding-bottom: .25rem;
}
.testimonials h6{
    font-weight: var(--fw-400);
    font-size: var(--fsize-paragraphs);
    color: var(--clr-neutral-opacity);
}
.profile-info-wrapper{
    display: flex;
    flex-direction: column;
}
/* Testimonials End */
/* Main End */

/* Footer Start */
footer{
    background-color: var(--clr-footer-bg);
    padding: 10rem 5rem 5rem 5rem;
    position: relative;
}

.register-form{
    position: absolute;
    bottom: 70%;
    left: 25%;
    width: max(50%, 295px);
    margin: 0 auto;
    background-color: var(--clr-hero-bg);
    padding: 3rem;
    text-align: center;
    border-radius: .25rem; 
}

.register-form input{
}
.register-form p{
    padding: 2rem 0;
}

.register-form input[type="text"]{
    background-image: none;
    color: black;
    margin-bottom: 1rem;
}

.parent-container-footer{
    display: flex;
    gap: 4rem;
}
/* .parent-container-footer .footer-wrapper{
    background-color: red;
} */
.footer-logo{
    width: min(50%, 150px);
}

.footer-wrapper{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.footer-wrapper p{
    max-width: 250px;
    margin-top: .25rem;
}

.footer-container{
    display: flex;
    justify-content: center;
    align-items: top;
    gap: 5rem;
}

.contacts{
    margin-right: 2rem;
}
.contacts img{
    margin-right: 1rem;
    align-items: center;
    position: relative;
    top: .4rem;
}

.contacts li, .link-pages li, .link-pages-2 li{
    padding-bottom: .75rem;
}
.footer-container a{
    text-decoration: none;
}
.socialmedia-links a{
    margin-right: 1rem;
    border: solid var(--clr-neutral) 1px;
    padding: .5rem .75rem;
    border-radius: 1rem;
}
/* Footer End */
@media screen and (max-width: 640px) {
    .grid-container{
        display: flex;
        flex-direction: column;
    }
}