/* Base styles */

:root {
      --container-width: 1200px;
      --primary-color: #1364CF;
      --secondary-color: #9BC43D;
      --third-color: #F0F7FF;
      --lines-color: #E9E9E9;
      --text-color-black: #181A20;
      --text-color-white: #fff;
      --gradient: linear-gradient(90deg, rgba(155, 196, 61, 1) 0%, rgba(19, 100, 207, 1) 100%);
      --gradient-hover: linear-gradient(90deg, rgb(106, 152, 0) 0%, rgb(0, 63, 145) 100%);
      --background-color: #ffffff;
}

/* HTML */
html {
      scroll-behavior: smooth;
      overflow-x: hidden;
}


[id] {
      scroll-margin-top: 110px;
}


/* Body */
body {
      font-family: "Poppins", "Roboto Mono", sans-serif;
      font-size: 16px;
      color: var(--text-color-black);
      background-color: var(--background-color);
      overflow-x: hidden;
}

/* Container */
.container {
      width: min(1200px, 100%);
      margin-inline: auto;
      padding-inline: 20px;
}


/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
      font-weight: 600;
      line-height: 1.2;
}

/* Paragraph */
p {
      line-height: 1.6;
}

/* Links */
a {
      transition: opacity 0.2s ease;
      cursor: pointer;
}

/* Img */
img {
      max-width: 100%;
      height: auto;
      display: block;
}

/* Sections */
section {
      padding: 80px 0;
      scroll-margin-top: 90px;
}

/* Main */

main {
      padding-top: 80px;
}

@media (max-width: 576px) {
      main {
            padding-top: 72px;
      }
}


/* Elements */

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