/* Base HTML Styles */
 @import url("https://fonts.google.com/specimen/Manrope")
 ;

 :root {
     --brand: #fb83ad;
     --action: #d2e177;
     --white: #e25800;
     --base-light: #f0b285;
     --base-dark: #f08592;
     --black: #111111;
 }

 /* CSS Reset */

html {
    box-sizing: border-box;
    font-size: 18px;
    font-family: "Manrope", sans-serif;
    color: var(--black);
    scroll-behavior: smooth;
}

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

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-family: "Manrope", sans-serif;
 }

 body,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 p,
 ol,
 ul {
     margin: 0;
     padding: 0;
 }

 ol,
 ul {
     list-style: none;
 }

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

 input,
 button,
 textarea,
 select {
     font: inherit;
 }

 /* Utilities */

 .display-none {
     display: none;
 }

 /* Components */

 /* btn-primary */
 .btn-primary {
     padding: 12px 16px;
     display: inline-block;
     text-decoration: none;
     color: var(--black);
     border-radius: 50px;
     background-color: var(--action);
     transition: all 0.3s ease;
 }

 .btn-primary:hover {
     box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
     transform: translateY(-4px);
 }

 /* header */
 header-image {
    width: 100%;
    height: auto;
    display: block;
 }
 header {
    text-align: center;
     border-bottom: 2px;;
     margin-bottom: 10px;
    }
 header .mobile-header {
     padding: 16px;
     display: flex;
     align-items: center;
     justify-content: space-between;
 }

 header button {
     all: unset;
 }

 @media (min-width: 768px) {
     header {
        display: flex;
        justify-content: space-between;
        align-items: center;
     }
     header nav ul {
         display: flex;
        gap: 24px;
    margin-right: 16px;
}
     header .mobile-header .hamburger-icon {
         display: none;
         width: 30px;
         height: 30px;
        }
    }

 /* .logo */
 .logo {
     height: 50px;
 }

 @media (min-width: 768px) {
    .logo {
        height: 100px;
    }
}

 /* .mobile-nav */
 .mobile-nav a {
     text-decoration: none;
     color: var(--black);
     display: block;
     padding: 4px 16px;
 }

 /* .desktop-nav */
 .desktop-nav {
     display: none;
 }

    @media (min-width: 768px) {
        .desktop-nav a {
            text-decoration: none;
            font-size: larger;
            color: var(--black);
        }

        .desktop-nav {
        display: inline-block;
    }
}
 /* .hamburger-icon  */
 .hamburger-icon {
     height: 50px;
 }

 /* .hero */
 .hero {
     background-color: var(--brand);
     padding: 56px 16px;
     border-radius: 10px;
     margin: 5px 10px;
 }

 .profile-image {
    width: 30%;
    max-width: 400px;
    height: auto;
    border-radius: 20px;
}

 .hero h1 {
     font-size: 2rem;
     margin-bottom: 24px;
     color: var(--white);
 }

 .hero .hero-accent {
     color: var(--action);
 }

 @media (min-width: 768px) {
    .hero {
        padding: 120px 56px;
    }
    .hero h1 {
        font-size: 3.5rem;
        max-width: 70%;
    }
}
/* .articles-container */
@media (min-width: 768px) {
    .articles-container {
        display: flex;
}
    }
/* article */
 article {
     padding: 32px 16px;
     background-color: var(--base-light);
     border-radius: 10px;
     margin: 5px 10px;
     transition: all 0.3s ease;
 }
@media (min-width: 768px) {
    article {
        padding: 56px;
    }
}
 article:hover {
     filter: contrast(150%);
 }

article .article-heading {
        display: flex;
        justify-content: flex-start;
    }

 article .icon {
     height: 24px;
     width: 24px;
     margin-left: 10px;
     margin-right: 10px;
 }

 article .article-heading h2 {
     margin-bottom: 16px;
     color: var(--base-dark);
 }

 article p {
     margin-bottom: 16px;
 }

 /* .contact-form */
 .contact-form {
     padding: 48px 16px;
     border-radius: 10px;
     margin: 5px 10px;
     background-color: var(--brand)
 }

 .contact-form input,
 .contact-form select {
     display: block;
     width: 100%;
     padding: 8px;
     margin-bottom: 16px;
 }

 .contact-form textarea {
     display: block;
     width: 100%;
     padding: 8px;
 }

 .contact-form label {
     display: block;
     width: 100%;
 }

 .contact-form h2 {
     color: var(--dark);
     margin-bottom: 16px;
 }

 .contact-form input[type="submit"] { 
    background-color: var(--action);
     border: 0;
     margin-top: 16px;
     color: var(--black);
     padding: 12px 16px;
     border-radius: 50px;
     font-weight: bold;
     cursor: pointer;
     transition: all 0.3s ease;
 }

 .contact-form input[type="submit"]:hover {
     box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.2);
     transform: translateY(-4px);
     border-radius: 50px;
     background-color: var(--action);
     transition: all 0.3s ease;
 }

 @media (min-width: 768px) {
    .contact-form h2 {
        text-align: center;
        font-size: 2.5rem;
        background-color: var(--brand)
    }

    .contact-form form {
        max-width: 60%;
        margin: 40px auto;
        background-color: var(--brand)
    }
}

 /* footer */
 footer {
    background-color: var(--base-light);
     padding: 16px;
     text-align: center;
     display: flex;
     justify-content:space-around;
 }

 footer a {
     text-decoration: none;
 color: var(--fb83ad);
}

 .socials-icon {
     width: 40px;
     height: 40px;
     margin: 0 10px;
     color: #25800;
     transition: all 0.3s ease;
 }

.socials-icon:hover {
    color: var(--action); 
}

 @media (min-width: 768px) {
    footer {
        justify-content: center;
    }

    footer .socials-icon {
        margin-left: 20px;
        margin-right: 20px;     
    }


}