* {
  border: none;
  font-family: "Inter", sans-serif;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Background Color */
body{
  background: linear-gradient(180deg, #219EBC 8%, #7AD5E6 16%, #B0E7F1 20%, #D5F3F8 24%, #F8FBFC 28%);
}
.home{
  background: linear-gradient(180deg, #219EBC 6%, #7AD5E6 12%, #B0E7F1 15%, #D5F3F8 18%, #F8FBFC 21%);
}
.policy{
  background: linear-gradient(180deg, #219EBC 8%, #7AD5E6 20%, #B0E7F1 24%, #D5F3F8 30%, #F8FBFC 35%);
}
.about{
  background-color: #1E7E9C;
  color: #ffffff;
}
.about .section-heading{
  color: #ffffff;
  align-self: center;
}

/* ------------------------------------------------------- */

/* Sections */
footer {
  background-color: #0b526b;
}

/* ------------------------------------------------------- */

/* Section Containers */
.intro-container, .stakeholders-container, .about-container, .contact-container, .footer-container, .banner-container, .welcome-container, .features-container, .cta-container, .doctors-banner-container, .doctors-welcome-container, .job-openings-container, .data-security-container {
  display: flex;
  justify-content: space-between;
  margin: auto;
  max-width: 1320px;
  padding: 3.5rem 0 7rem;
}
.intro-container {
  align-items: center;
  padding-bottom: 10.5rem;
}
.stakeholders-container, .features-container, .job-openings-container {
  align-items: center;
  flex-direction: column;
  gap: 4rem;
}
.about-container {
  padding: 0;
}
.banner-container, .doctors-banner-container{
  align-items: center;
  padding: 0;
  width: fit-content;
}
.cta-container{
  justify-content: center;
  text-align: center;
  width: 80%;
}
.doctors-banner-container{
  padding: 3.5rem 0;
}
.doctors-welcome-container{
  align-items: center;
}
.job-openings-container{
  align-items: flex-start;
  padding: 0 0 7rem;
}

/* ------------------------------------------------------- */

/* Text Containers */
.intro-text-container, .about-text-container, .contact-text-container, .welcome-text-container, .footer-text-container, .careers-intro-text-container, .description-container, .data-security-text-container {
  display:flex;
  flex-direction: column;
}
.intro-text-container, .about-text-container, .welcome-text-container, .careers-intro-text-container, .data-security-text-container {
  align-items: flex-start;
  gap: 2.5rem;
  width: 49%;
}
.about-text-container {
  margin: auto;
  padding: 3.5rem 0 7rem;
  width: 80%;
}
.contact-text-container {
  gap: 0.5rem;
}
.contact-form-container, .data-security-text-container{
  box-sizing: border-box;
  padding: 1.5rem 0;
  width: 49%;
}
.footer-text-container {
  gap: 1.5rem;
}
.welcome-illustration-container{
  align-items: flex-start;
  display: flex;
  gap: 0.5rem;
}
.careers-intro-text-container{
  width: 95%;
}
.description-container{
  gap: 2rem;
  width: 90%;
}

/* ------------------------------------------------------- */

/* Wrappers */
.card-wrapper, .input-wrapper{
  display: flex; 
  justify-content: space-between;
}
.footer-link-wrapper, .social-media-icon-wrapper{
  display: flex; 
  gap: 0.5rem;
}
.footer-link-wrapper {
  flex-direction: column;
}

/* ------------------------------------------------------- */

/* Heading Styles */
h1, h2, h4, .highlight {
  font-family: "Oswald", sans-serif;
}
.page-heading {
  color: white;
  font-size: 4rem;
}
.section-heading {
  color: #1e7e9c;
  font-size: 3.5rem;
}
.subheading {
  font-size: 1.25rem;
}
.card-heading {
  color: #023047;
  font-size: 2rem;
  font-weight: 500;
}
.footer-heading {
  color: white;
  font-size: 1.5rem;
}

/* ------------------------------------------------------- */

/* Text Styles */
.description-text {
  color: white;
  font-size: 1.5rem;
  line-height: 1.4;
}
.paragraph-text{
  font-size: 1.5rem;
}
.footer-text{
  color: white;
  font-size: 1.25rem;
}
.card-text {
  font-size: 1.25rem;
}
.product-slogan{
  color:white;
  font-size: 5rem;
}

/* ------------------------------------------------------- */

/* Specific Text Roles */
.input-name {
  width: 45%;
}
.copyright {
  color: #f1f1f1;
  text-align: center;
  padding-bottom: 1.5rem;
}
.highlight {
  color:#FFD56D;
}
.hidden {
  display : none;
}

/* ------------------------------------------------------- */

/* Cards */
.stakeholder-card, .feature-card, .job{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 32%;
}
.feature-card{
  align-items: center;
  background-color: #ffffff;
  border-radius: 2rem;
  box-shadow: 0 0.25rem 0.5rem 0 rgba(33, 158, 188, 0.2),
    0 -0.25rem 0.5rem 0 rgba(33, 158, 188, 0.2);
    box-sizing: border-box;
  padding: 0 1rem 2.5rem 1rem;
  text-align: center;
}
.job{
  align-items: flex-start;
  gap: 2rem;
  width: fit-content;
}
.job-requirements{
  line-height: 200%;
}

/* ------------------------------------------------------- */

/* Links */
.nav-link {
  color: #f1f1f1;
  padding: 0.5rem 1rem 0;
}
.card-link {
  color: #0067b8;
  font-size: 1.25rem;
  text-decoration: underline;
}
.footer-link {
  color: white;
  font-size: 1.25rem;
}

/* ------------------------------------------------------- */

/* Buttons */
.form-button {
  background-color: #ffd56d;
  border-radius: 0.5rem;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.5rem 1.5rem;
  width: fit-content;
}
/* ------------------------------------------------------- */

/* Nav Bar */
nav {
  align-items: center;
  background-color: rgba(2, 48, 71, 0.7);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  width: 100%;
}
.nav-bar{
  display: flex;
}
.nav-link-container{
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.nav-link-container:hover .nav-link{
  background: linear-gradient(180deg, #FF9F0A 42.19%, #FFE8A5 83.33%);
  background-clip: text;
  color: transparent;
  font-weight: 700;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.indicator {
  background: linear-gradient(180deg, #FF9F0A 42.19%, #FFE8A5 83.33%);
  background-clip: text;
  border-radius: 0.5rem;
  height: 2px;
  visibility: hidden;
  width: 30%;
}
.nav-link-container:hover .indicator{
  visibility: visible;
}
.menu {
  display: none;
}
.mobile-nav{
  background-color: rgba(2, 48, 71, 0.7);
  display: flex;
  flex-direction: column;
  padding:  0 1.5rem 2rem;
}
.hide-mobile-nav{
  display: none;
}

/* ------------------------------------------------------- */

/* Form */
form {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  margin: 4rem 0;
}
input, textarea {
  background-color: #f8fbfc;
  border-bottom: 0.0625rem solid black;
  color: #989898;
  font-size: 1.25rem;
  padding: 0 0.5rem 0.5rem;
}

/* ------------------------------------------------------- */

/* Mockups */
.patients-app-mockup-banner {
  max-width: 360px;
  width: 25vw;
}
.patients-app-mockup-welcome {
  max-width: 300px;
  width: 25vw;
}
.add-medicine-screen{
  max-width: 260px;
  width: 20vw;
}
.doctors-app-mockup-banner{
  max-width: 680px;
  width: 50vw;
}
.doctors-app-mockup-welcome{
  max-width: 620px;
  width: 43vw;
}

/* ------------------------------------------------------- */

/* Icons & Images */
.card-img {
  width: 100%;
}
.illustration {
  width: 49%;
}
.card-icon {
  width: 256px;
}

/* ------------------------------------------------------- */
/* ------------------------------------------------------- */
/* ------------------------------------------------------- */

/* Media Queries */

@media screen and (max-width: 1360px) {
  /* Section Containers */
  .intro-container, .stakeholders-container, .about-container, .contact-container, .footer-container, .welcome-container, .features-container, .doctors-welcome-container, .job-openings-container, .data-security-container {
    margin-left: 3rem;
    margin-right: 3rem;
  }

  /* Mockups */
  .patients-app-mockup {
    height: 268px;
  }
  .doctors-app-mockup {
    height: 316px;
  }

  /* Icons */
  .card-icon{
    width: 200px;
  }
}

@media screen and (max-width: 1296px) {
  /* Text Containers */
  .about-text-container, .data-security-text-container {
    gap: 2rem;
  }

  /* Text Styles */
  .product-slogan {
    font-size: 4.5rem;
  }
  
  /* Mockups */
  .patients-app-mockup {
    display: none;
  }
  .doctors-app-mockup {
    height: 360px;
  }  
}

@media screen and (max-width: 1144px){
  /* Section Containers */
  .welcome-container, .doctors-welcome-container {
    align-items: center;
  }
  /* Text Styles */
  .product-slogan{
    font-size: 4rem;
  }
  /* Mockups */
  .doctors-app-mockup-welcome{
    width: 45vw;
  }
}

@media screen and (max-width: 1080px) {
  /* Background Color */
  .home, .patients, .doctors, .labs {
    background: linear-gradient(180deg, #219EBC 6%, #7AD5E6 10%, #B0E7F1 13%, #D5F3F8 15%, #F8FBFC 18%);
  }

  /* Section Containers */
  .intro-container, .stakeholders-container, .about-container, .contact-container, .welcome-container, .features-container, .doctors-welcome-container, .job-openings-container, .data-security-container {
    margin-left: 2rem;
    margin-right: 2rem;
  }
  .intro-container, .welcome-container, .doctors-welcome-container {
    align-items: center;
    flex-direction: column;
    gap: 4rem;
    padding-bottom: 7rem;
  }
  .data-security-text-container {
    padding: 0;
  }
  .footer-container {
    flex-direction: column;
    gap: 2.5rem;
    margin: auto;
    width: 80%;
  }
  .banner-container, .doctors-banner-container{
    align-items: flex-start;
    justify-content: space-between;
    width: 90%;
  }
  .doctors-banner-container{
    padding: 2.5rem 0;
  }
  
  /* Text Containers */
  .intro-text-container {
    align-items: center;
    text-align: center;
    width: 100%;
  }
  .about-text-container, .contact-form-container, .welcome-text-container, .data-security-text-container {
    gap: 2.5rem;
    margin: auto;
    width: 80%;
  }
  .footer-text-container {
    gap: 1rem;
  }
  .welcome-text-container{
    gap: 2rem;
  }

  /* Wrappers */
  .card-wrapper {
    align-items: center;
    flex-direction: column;
    gap: 4rem;
  }
  .product-slogan-wrapper{
    padding: 3.5rem 0;
  }

  /* Heading Styles */
  .page-heading {
    font-size: 3.5rem;
  }

  /* Text Styles */
  .product-slogan{
    font-size: 4.5rem;
  } 
  .hidden{
    display: inline;
  }
  .to-be-hidden{
    display: none;
  }

  /* Cards*/
  .stakeholder-card, .feature-card{
    width: 80%;
  }

  /* Nav Bar */
  .logo {
    height: 48px;
  }
  nav {
    padding: 1.5rem 2rem;
  }


  /* Mockups */
  .patients-app-mockup {
    display: inline;
  }
  .doctors-app-mockup-banner{
    width: 55vw;
  }

  /* Images & Icons */
  .illustration {
    display: none;
  }
  .social-media-icon {
    width: 48px;
  }
  .patients-app-mockup-welcome, .add-medicine-screen{
    width: 40vw;
  }
  .doctors-app-mockup-welcome{
    width: 60vw;
  }
}

@media screen and (max-width: 996px) {
  /* Heading Styles */
  .page-heading, .section-heading {
    font-size: 3rem;
  }

  /* Text Styles */
  .product-slogan{
    font-size: 4rem;
  }

  /* Mockups */
  .doctors-app-mockup {
    height: 316px;
  }
}

@media screen and (max-width: 768px) {
  /* Background Color */
  .patients {
    background: linear-gradient(180deg, #219EBC 8%, #7AD5E6 16%, #B0E7F1 20%, #D5F3F8 24%, #F8FBFC 28%);
  }
  .doctors, .labs {
    background: linear-gradient(180deg, #219EBC 6%, #7AD5E6 12%, #B0E7F1 15%, #D5F3F8 18%, #F8FBFC 21%);
  }
  
  /* Section Containers */
  .intro-container, .stakeholders-container, .about-container, .contact-container, .features-container, .data-security-container {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .banner-container, .doctors-banner-container {
    align-items: center;
    flex-direction: column;
  }
  .doctors-banner-container{
    padding: 0;
  }
  
  /* Wrappers */
  .product-slogan-wrapper{
    text-align: center;
  }
  
  /* Text Styles*/
  .subheading {
    width: 90%;
  }
  .input-name {
    width: 42%;
  }
  .paragraph-text{
    font-size: 1.25rem;
  }

  /* Nav Bar */
  .nav-bar{
    display: none;
  }
  .menu{
    display: inline;
  }
  .nav-link{
    padding-bottom: 0.5rem;
  }

  /* Mockups */
  .patients-app-mockup {
    display: none;
  }
  .patients-app-mockup-banner{
    width: 50vw;
  }
  .doctors-app-mockup-banner{
    width: 90vw;
  }
}

@media screen and (max-width: 480px) {
  /* Background Color */
  .careers{
    background: linear-gradient(180deg, #219EBC 8%, #7AD5E6 16%, #B0E7F1 24%, #D5F3F8 28%, #F8FBFC 32%);
  }

  /* Text Containers */
  .welcome-text-container{
    width: 100%;
  }

  /* Headings */
  .section-heading {
    font-size: 2.5rem;
  }
  .footer-heading {
    font-size: 1.25rem;
  }
  .card-heading {
    font-size: 1.5rem;
  }

  /* Text Styles*/  /*Links*/
  .subheading, input, textarea, .footer-text, .footer-link, .card-text{
    font-size: 1rem;
  }
  .copyright {
    font-size: 0.625rem;
  }
  .product-slogan {
    font-size: 3.5rem;
  }

  /* Cards */
  .stakeholder-card, .feature-card{
    width: 90%;
  }
  .feature-card {
    padding: 0 0.5rem 1.5rem 0.5rem;
  }

  /* Mockups */
  .patients-app-mockup {
    display: inline;
    height: 480px;
  }
  .doctors-app-mockup, .add-medicine-screen {
    display: none;
  }
  .patients-app-mockup-welcome {
    width: 60vw;
  }
  .doctors-app-mockup-welcome {
    width:80vw;
  }

  /* Icons */
  .card-icon{
    width: 156px;
  }
}