@import url('https://fonts.googleapis.com/css2?family=Montserrat&family=Poppins:wght@300;400;500&family=Roboto:wght@400;500&display=swap');

:root {
   --primary: #ffff;
   --secondary: #1a2041;
   --callToAction: #d21d1d;
   --primaryText: #181818;
   --secondaryText: #fff1ff;
   --yellow: #e1e50e;
   --grey1: #cccccc;
   --grey2: #797979;
   --grey3: #e3e3e3;
}
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
body,
html {
   font-family: Poppins;
   scroll-behavior: smooth;
}
a {
   text-decoration: none;
}

li {
   list-style: none;
}

.main-container {
   width: 100%;
   max-width: 1600px;
   margin: auto;
}

nav {
   background-color: var(--secondary);
   position: fixed;
   width: inherit;
   max-width: inherit;
   display: flex;
   justify-content: space-between;
   z-index: 1000;
   padding: 0.5rem 0;
}
.logo {
   color: var(--secondaryText);
   margin-left: 9rem;
   display: flex;
   align-items: center;
}
nav ul {
   margin-right: 9rem;
   display: flex;
   align-items: center;
}
nav ul li a {
   font-family: Montserrat;
   color: var(--secondaryText);
   font-size: 0.9rem;
   padding: 0.5rem 0.75rem;
   display: flex;
   align-items: center;
}
nav ul li a:hover {
   background-color: var(--callToAction);
   padding: 0.5rem 0.75rem;
   border-radius: 0.25rem;
}

.dropdown {
   position: relative;
   display: inline-block;
}
.dropdown-content {
   display: none;
   position: absolute;
   background-color: #fff;
   box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   z-index: 1;
   border-radius: 0.5rem;
   min-width: 17.5rem;
}
.dropdown-content a {
   color: var(--primaryText);
   padding: 0.5rem 1rem;
   text-decoration: none;
   display: block;
}

.dropdown-content a:hover {
   color: var(--secondaryText);
   background-color: var(--callToAction);
   border-radius: 0.25rem;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
   display: block;
}

.iconify {
   color: var(--secondaryText);
   font-size: 2rem;
   cursor: pointer;
}

.hidden {
   display: none;
}

.iconify-inline {
   cursor: auto;
   font-size: 3.5rem;
   color: var(--secondary);
}

header h2 {
   font-size: 1.6rem;
   color: var(--grey2);
   font-weight: 500;
}

header h1 {
   font-weight: 500;
   font-size: 2.55rem;
   color: var(--primaryText);
}
main {
   display: flex;
   width: 82.5%;
   margin: auto;
   padding: 6rem 0;
   gap: 10rem;
}
main > section {
   width: 40rem;
   padding: 1rem;
   margin: auto;
}

.section-p {
   padding: 1rem 0;
   line-height: 1.75rem;
}
.subHeader {
   color: var(--primaryText);
   padding-top: 1rem;
}
.img {
   width: 100%;
   box-shadow: rgba(0, 0, 0, 0.35) 1.95px 1.95px 2.6px;
}

/*///////////// FOOTER ///////////////////*/
footer {
   width: 100%;
   background-color: var(--secondary);
   display: flex;
   flex-direction: column;
   align-items: center;
   height: auto;
   padding: 0.5rem 0;
}
.footer-container {
   padding: 2rem 0;
   display: grid;
   justify-content: center;
   grid-template-columns: repeat(3, 180px);
   grid-template-areas: 'social-media footer-services footer-resources footer-contact footer-legal';
   gap: 1rem;
}
.footer-container > article h3 {
   font-weight: 500;
   color: var(--secondaryText);
}

.footer-container > article p {
   color: var(--grey1);
   font-weight: 400;
}
.social {
   color: var(--grey1);
}
.social-media {
   grid-area: social-media;
}
.footer-services {
   grid-area: footer-services;
}
.footer-resources {
   grid-area: footer-resources;
}
.footer-contact {
   grid-area: footer-contact;
}
.footer-legal {
   grid-area: footer-legal;
}
.copyrights {
   color: var(--secondaryText);
}

@media screen and (max-width: 1200px) {
   header h1 {
      font-size: 2.25rem;
   }
   header h3 {
      font-size: 1.15rem;
   }
   main {
      gap: 2.5rem;
   }
   main > section {
      margin-top: 2rem;
   }
}
@media screen and (max-width: 1024px) {
   .logo {
      margin-left: 6rem;
   }
   .hidden {
      display: inline-block;
      margin-right: 6rem;
   }
   .nav-list {
      position: fixed;
      left: 100%;
      top: 12vh;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      background-color: #fff;
      width: 100%;
      transition: 0.4s;
      height: 100vh;
      text-align: center;
   }
   .nav-list a {
      font-size: 1.5rem;
      line-height: 4rem;
      color: var(--secondary);
   }
   .nav-list a:hover {
      color: var(--secondaryText);
   }
   .nav-list.active {
      left: 0;
   }
   .dropdown-content {
      margin-top: 0;
      width: max-content;
   }
   .dropdown-content a {
      font-size: 1rem;
      line-height: inherit;
   }

   /* FOOTER */
   .footer-container {
      padding: 1rem;
      grid-template-areas:
         'social-media footer-services  footer-contact footer-resources'
         'social-media footer-services  footer-legal footer-resources';
   }
}

@media screen and (max-width: 768px) {
   .logo {
      margin: auto;
   }
   .iconify {
      margin: auto;
   }
   .nav-list {
      top: 8vh;
   }

   /*//// main ////*/
   main {
      width: 90%;
      flex-direction: column;
      gap: 0;
   }
   main > section {
      width: auto;
   }
   header h1 {
      font-size: 2.5rem;
   }
   header h2 {
      font-size: 1.5rem;
   }

   /*//// Footer //////*/
   .footer-container {
      margin: auto;
      width: max-content;
      grid-template-columns: repeat(2, 120px);

      grid-template-areas:
         'social-media  footer-services footer-resources  '
         'social-media footer-legal footer-contact ';
   }
   .social {
      font-size: 1.5rem;
   }
}

@media screen and (max-width: 480px) {
   .nav-list {
      top: 11vh;
   }
   main {
      text-align: center;
   }

   header h1 {
      font-size: 2.25rem;
   }
   /*Footer */
   .footer-container {
      grid-template-areas:
         'social-media  footer-contact'
         'footer-services footer-resources'
         'footer-services footer-legal';
   }
   .footer-container > article h3 {
      font-size: 1rem;
   }
}
@media screen and (max-width: 360px) {
   .nav-list {
      top: 12vh;
   }
   main {
      width: 100%;
   }
   header h2 {
      font-size: 1.15rem;
   }
   header h1 {
      font-size: 2rem;
   }
   .footer-container > article p {
      font-size: 0.7rem;
   }
   .copyrights {
      font-size: 0.7rem;
      padding: 0 0.5rem;
   }
}