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

/* --global-- */
:root {
   --color-1-primary: #F2A900;
   --color-1-primary-hover: #d59500;
   --color-2-secondary: #3E5CD2;
   --color-3: #FDF2D9;
   --color-4: #EDDBEF;
   --color-5: #FFC6B5;
   --color-6: #FFFFFF;
   --color-7: #000000;
   --color-8: #404040;
   --color-9: #E5E7EB;
   --color-10: #181818;
   --banner-bg-clr: #DDB864;
}
* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body {
   font-family: "Manrope", sans-serif;
}

h1 {
   font-size: 64px;
   font-weight: 500;
   line-height: 1.2;
}

h2 {
   font-size: 64px;
   font-weight: 500;
   line-height: 1.2;
}

h3 {
   font-size: 30px;
   font-weight: 500;
   line-height: 1.2;
}

p {
   font-size: 18px;
   font-weight: 500;
   line-height: 1.5;
}

p.small {
   font-size: 16px;
   font-weight: 500;
   line-height: 1.5;
}

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


ul {
   padding: 0;
   margin: 0;
   padding-left: 20px;
}

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

::selection {
   background-color: var(--color-1-primary);
   color: var(--color-7);
}

/* --container-- */

.container, section, .cover-container, footer {
   max-width: 1536px;
   margin: 0 auto;
   padding: 0 30px;
}

header {
   background-color: var(--color-6);
   padding-bottom: 1.5rem;
   padding-top: 1.5rem;
}

header .container {
   display: flex;
   justify-content: space-between;
   align-items: center;
}

header .logo {
   display: flex;
   align-items: center;
}

header .logo img {
   height: 3em;
}

header nav .list {
   gap: 0.75rem;
   display: flex;
   align-items: center;

   & svg {
      width: 2.5rem;
   }

   & .item {
      padding-left: 0.75rem;
      padding-right: 0.75rem;
   }

   & p {
      display: flex;
      background-image: linear-gradient(transparent calc(100% - 2px), #F2A900 2px), linear-gradient(transparent calc(100% - 2px), transparent 2px);
      background-repeat: no-repeat;
      background-size: 0 100%, 100% 100%;
      /* border-style: solid; */
      font-weight: 900;
      font-size: 1rem;
      line-height: 1.5rem;
      transition: background-size .3s cubic-bezier(.4, 0, 0.2, 1);

      &:hover {
         background-size: 100% 100%, 100% 100%;
      }

   }

}

.menu-toggle {
   border: none;
   background-color: transparent;
   cursor: pointer;
   display: none
}

.menu-toggle svg {
   width: 48px;
   height: 48px;
}

.cover-image {
   height: 360px;
   position: relative;
   background-image: url(../cover.png);
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

   /* background-color: blue; */


   & .cover-container {
      height: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 0 auto;
   }

   & .cover-container img {
      max-height: 208px;
      max-width: 260px;
      object-fit: contain;

   }
   
   & h1 {
      color: var(--color-6);
      margin-bottom: 20px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
   }
}



section.form-information {
   gap: 20px;
   margin-top: 50px;
   margin-bottom: 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;


   

   & .form-content {
      display: flex;
      flex-direction: column;
      gap: 25px;
      max-width: 377px;
   }
   
   & h2 {
      color: var(--color-7, #000);
      font-family: Manrope;
      font-size: 40px;
      font-style: normal;
      line-height: normal;
      font-weight: 600;
      padding-top: 35px;
      padding-bottom: 35px;
   }

   .label {
      color: var(--color-7);
      font-family: Inter;
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
   }


   & .buttons {
      display: flex;
      justify-content: space-between;
      align-items: top;
      gap: 10px;
   }

   & .privacy {
      max-width: 150px;
      color: var(--color-2-secondary, #3E5CD2);
      text-align: center;
      font-family: Manrope;
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      text-decoration-line: underline;
   
   }

   & input {
      width: 100%;
      height: 50px;
      border: none;
      padding: 0 20px;
      margin-bottom: 20px;

      color: var(--color-7);
      font-family: Manrope;
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      height: 77px;
   }

   /* placeholder color */

   & input::placeholder {
      color: var(--color-7);
      font-family: Manrope;
      font-size: 18px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
   }

   /* submit */

   & input[type="submit"] {
      max-width: 361px;
      background-color: var(--color-1-primary);
      color: var(--color-7);
      font-family: Manrope;
      font-size: 24px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      border: none;
      cursor: pointer;

      &:hover {
         background-color: var(--color-1-primary-hover);
      
      }
   }
}

.form-container {
   padding: 10px 38px;
   background-color: var(--color-3);
   max-width: 680px;
}

fieldset {
   border: none;
   padding: 0;
   margin: 0;
}





.section-overlay-color-2 {
   padding: 112px 0;
   background-color: var(--color-4);
}

.section-2 {
   /* grid takes 2/3 of the grid */
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 20px;

   & .main-content {
      padding: 30px;
      background-color: var(--color-6);
      /* takes 2/3th */
      grid-column: 1 / 2;
      height: 732px;
      
   }

   & .right-tabs {
      /* takes 1/3th */
      grid-column: 2 / 3;
      display: flex;
      flex-direction: column;
      gap: 20px;
   }

   & .right-tabs .tab {
      background-color: var(--color-6);
      padding: 20px;
      display: flex;
      flex-direction: column;
      gap: 20px;

      /* first tab */

      & h4 {
         font-size: 30px;
         font-weight: 500;
      }

      &:hover .tab-link {
         background-color: var(--color-1-primary-hover);
      }
      

      &.tab-1 {
         background-color: var(--color-5);
      }

      &.tab-2 {
         color: var(--color-6);
         background-color: var(--color-2-secondary);
      }

      & .buttons {
         display: flex;
         justify-content: flex-end;
         gap: 20px;
      }

      & .tab-link {
         
         display: grid;
         place-items: center;
         width: 50px;
         height: 50px;
         
         background-color: var(--color-1-primary);

         
      }
   }
}

.section-2 ul , footer ul {
   padding-top: 18px;
   padding-left: 20px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   /* add dots */
   list-style: disc;
   /* make dots primary color */


}






.section-overlay-color-3 {
   background-color: var(--color-8);
   color: var(--color-6);
}

footer ul {
   list-style-type: none;
 }

footer ul li::before {
   list-style-type: none;
   content: "\2022";  /* Add content: \2022 is the CSS Code/unicode for a bullet */
   color: var(--color-1-primary); /* Change the color */
   font-weight: bold; /* If you want it to be bold */
   display: inline-block; /* Needed to add space between the bullet and the text */
   width: 2em; /* Also needed for space (tweak if needed) */
   margin-left: -1em; /* Also needed for space (tweak if needed) */
 }

footer {
   padding: 50px 15px;
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 20px;
}

footer .logo {
   padding-bottom: 20px;
}

footer .footer-main-content p {
   padding-bottom: 20px;
}

.footer-tab h3 {
   font-size: 24px;
   font-style: normal;
   font-weight: 700;
   line-height: normal;
}

li {
   display: flex;
}

li a {
   color: var(--color-6);
}

li a p {
   width: fit-content;
   display: flex;
   background-image: linear-gradient(transparent calc(100% - 2px), #F2A900 2px), linear-gradient(transparent calc(100% - 2px), transparent 2px);
   background-repeat: no-repeat;
   background-size: 0 100%, 100% 100%;
   font-weight: 700;
   font-size: 1rem;
   line-height: 1.5rem;
   transition: background-size .3s cubic-bezier(.4, 0, 0.2, 1);

   &:hover {
      background-size: 100% 100%, 100% 100%;
   }

}

.techmore-button {
   color: var(--color-7);
   display: flex;
   align-items: center;
   width: fit-content;
   background-color: var(--color-1-primary);
   font-size: 18px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
   border: none;
   cursor: pointer;
   padding: 10px 20px;
   height: 50px;
   margin-bottom: 10px;

   &:hover {
      background-color: var(--color-1-primary-hover);
   }
}

.socials {
   display: flex;
   gap: 10px;

   & a {
      display: grid;
      place-items: center;
      width: 50px;
      height: 50px;
      background-color: var(--color-1-primary);

      &:hover {
         background-color: var(--color-1-primary-hover);
      }
   }
}


@media screen and (max-width: 925px) {
   h1 {
      font-size: 48px;
   }
   header nav {
      display: none;
   }

   .menu-toggle{
      display: flex;
   }

   .cover-image {
      height: 242px;
   }
   .cover-container img {
      display: none;

   }

   .form-information:after {
      position: absolute;
      top: 0;
      z-index: -1;
      content: "";
      display: block;
      width: 100%;
      height: 400px;
      background-color: var(--color-9);
      padding-top: 20px;
      margin-bottom: 20px;
   }


   .form-information {
      
      margin-top: 0 !important;
      position: relative;
      flex-direction: column;
      padding-top: 20px;
      padding-bottom: 50px;
      gap: 20px;
      & .form-content {
         max-width: 100% !important;
      }

      & .form-container {
         max-width: 100% !important;
         width: 100% !important;
      }
   }
   fieldset.form-devider {
      flex-direction: column;
      gap: 0 !important;
   }

   fieldset.buttons {
      flex-direction: column;
      gap: 0 !important;
   }

   input {
      height: 65px !important;

      &.privacy[type="submit"] {
         height: 50px !important;
      }
   }

   /* tabs */

   .section-2 {
      /* grid layer */
      display: flex;
      flex-direction: column;
      gap: 20px;

   }

   .main-content {
      height: fit-content !important;
   }

   h2 {
      font-size: 30px;
   }

   footer {
      grid-template-columns: 1fr;
   }
}