/* Base HTML Styles */
@import url("https://fonts.googleapis.com/css2?family=Inter&family=Rubik:ital,wght@0,400;0,700;1,400&display=swap");

:root {
  --brand: #009688;
  --brand1: #8246af;
--action: #ffa300;
 --white: #ffffff;
--base-light: #cdb5df;
--base-dark: #0d0711;
--black: #111111;}


/* CSS Reset */
html {
   box-sizing: border-box;
   font-size: 16px;
   font-family: "Inter", sans-serif;
   color: var(--black);
   scroll-behavior: smooth;
 }

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

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
   font-family: "Rubik", 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: 4px;
   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 .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;
   }
 }
 
 /* .logo */
 .logo {
   height: 100px;
 }
  @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; 
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px; /* Optional: space between the divs */
 }
 
 .hero h1 {
   font-size: 2rem;
   margin-bottom: 24px;
   color: var(--white);
 }
 
 .hero .hero-accent {
   color: var(--action);
 }

 .hero-text {
  flex: 1;
}

.profile_text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #2e2c2c;
  font-family:Arial, Helvetica, sans-serif
}

.hero-image {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px; /* space between button and image */
}

.hero-image img {
  order: 2;
  max-width: 450px;
  height: auto;
}

  @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 {
   padding: 32px 16px;
   background-color: var(--base-light);
   border-radius: 10px;
   margin: 5px 10px;
   transition: all 0.3s ease;
 }

 .hero_footer {
   background-color: var(--brand);
   border-radius: 10px;
   margin: 5px 10px;
   display: flex;
   align-items: center;
 }

article:nth-child(2) {
  background-color: #eed8b3;
}

@media (min-width: 768px) {
   article {
       padding: 56px;
   }
 }
 
 article:hover {
   /*filter: contrast(150%);*/
   background-color:#a2dbd5;
 }
 
  article .article-heading {
   display: flex;
   justify-content: flex-start;
 }

 article .icon {
   width: 60px;
   height: 60px;
   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:#009688;
 }
 
 .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(--base-dark);
   margin-bottom: 16px;
 }
 
 .contact-form input[type="submit"] {
   background-color: var(--action);
   border: 0;
   margin-top: 8px;
   cursor: pointer;
 }

  /* footer */
 footer {
   padding: 16px;
   text-align: center;
 }
 
 .socials-icon {
   width: 40px;
   height: 40px;
 }