@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: "Comfortaa", sans-serif;
  font-size: 1.1vw;
  position: relative;
}

li {
  list-style: none;
}

a {
  text-decoration: none;
  color: inherit;
}

img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.title {
  font-size: 2vw;
}

.sub-title {
  color: #A40000;
  text-transform: uppercase;
}

.btn {
  padding: 2vh 3vw;
  width: -moz-fit-content;
  width: fit-content;
  border: 1px solid transparent;
  border-radius: 10px;
}

.primary-btn {
  background-color: white;
  color: #3A5CAA;
}

.container {
  max-width: 80vw;
  margin: auto;
}

.navigation {
  height: 12vh;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: white;
}
.navigation .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.3vh 0;
}
.navigation .container .branding .logo {
  max-width: 100px;
}
.navigation .container .mobile-menu-actions {
  display: none;
  cursor: pointer;
}
.navigation .container .social-media-icons {
  display: none;
}
.navigation .container .menu {
  display: flex;
  align-items: center;
  gap: 2vw;
}
.navigation .container .menu .contact-btn {
  background-color: #3A5CAA;
  color: #FFFFFF;
  padding: 12px;
  border-radius: 10px;
}

.hero-section {
  position: relative;
  background: url("/static/img/index/allcare pharmacy and gifts.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 88vh;
  display: flex;
  align-items: center;
}
.hero-section .overlay {
  background: linear-gradient(90deg, rgb(58, 92, 170) 4%, rgba(255, 255, 255, 0) 100%);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1;
}
.hero-section .container {
  position: relative;
  display: grid;
  align-content: center;
  gap: 3vh;
  color: white;
  z-index: 2;
}
.hero-section .container .title,
.hero-section .container p {
  max-width: 47%;
}

.about-us {
  background-color: #F1F5FF;
  padding: 8vh 0;
}
.about-us .container .about-us-cards {
  display: grid;
  grid-template-columns: 48% 48%;
  gap: 3vh;
}
.about-us .container .about-us-cards .card {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 2vh;
}
.about-us .container .about-us-cards .card .offer {
  margin-top: 4vh;
}
.about-us .container .about-us-cards .card .about-text {
  display: grid;
  gap: 3vh;
}
.about-us .container .about-us-cards .card .about-text li {
  display: flex;
  align-items: center;
  gap: 1vw;
}
.about-us .container .about-us-cards .card .about-text li .dot {
  width: 1vw;
  height: 1vw;
  background-color: #A40000;
  border-radius: 100vw;
}
.about-us .container .about-us-cards .img img {
  height: 50vh;
  border-radius: 10px;
}

.contact-us {
  padding: 8vh 0;
}
.contact-us .container .row {
  display: flex;
  justify-content: space-between;
  gap: 50px;
}
.contact-us .container .row .col {
  display: flex;
  flex-direction: column;
  gap: 48px;
}
.contact-us .container .row .col .sub-title, .contact-us .container .row .col .form-title {
  font-size: 18px;
}
.contact-us .container .row .col .row-col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.contact-us .container .row .col .row-col .col-row {
  display: flex;
  gap: 8px;
}
.contact-us .container .row .col .row-col .col-row .icon {
  background-color: #F1F5FF;
}
.contact-us .container .row .col .row-col .col-row .icon i {
  font-size: 14px;
  color: #7F84FF;
}
.contact-us .container .row .col .row-col .col-row .card-one {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.contact-us .container .row .col .row-col .col-row .card-one h3 {
  font-size: 18px;
}
.contact-us .container .row .col .row-col .col-row .card-one p {
  color: #6F6F6F;
  font-size: 14px;
}
.contact-us .container .row .col .row-col .col-row .card-one a {
  color: #6F6F6F;
  font-size: 14px;
}
.contact-us .container .row .col .map iframe {
  width: 100%;
}
.contact-us .container .row .col form {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.contact-us .container .row .col form .input-container {
  display: flex;
  gap: 10px;
}
.contact-us .container .row .col form input, .contact-us .container .row .col form textarea {
  border: transparent;
  border-radius: 10px;
  padding: 12px;
  font-family: inherit;
  background-color: rgb(248, 248, 248);
  color: #444444;
  font-size: 14px;
}
.contact-us .container .row .col form textarea {
  resize: none;
  padding-bottom: 90px;
}
.contact-us .container .row .col form .submit-form-btn {
  background-color: #3A5CAA;
  padding: 12px;
  border: transparent;
  border-radius: 10px;
  color: #FFFFFF;
  font-family: inherit;
}

footer {
  padding: 8vh 0;
  background-color: #3A5CAA;
  color: white;
  display: grid;
  gap: 5vh;
}
footer .container {
  display: grid;
  grid-template-columns: 65% 35%;
  gap: 2vw;
}
footer .container .company {
  display: grid;
  gap: 3vh;
}
footer .container .company .logo img {
  max-width: 120px;
}
footer .container .company .company-description {
  font-weight: lighter;
  font-size: 16px;
  line-height: 1.5;
}
footer .container .contacts {
  display: grid;
  gap: 3vh;
  height: -moz-fit-content;
  height: fit-content;
}
footer .container .contacts h2 {
  font-weight: 400;
  font-size: 18px;
}
footer .container .contacts .contact-cards {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
footer .container .contacts .contact-cards .card .contact {
  display: flex;
  gap: 2vw;
}
footer .container .contacts .contact-cards .card .contact .contact-content {
  display: grid;
  gap: 1vh;
}
footer .container .contacts .contact-cards .card .contact .contact-content .contact-title {
  font-size: 18px;
  font-weight: 400;
}
footer .container .contacts .contact-cards .card .contact .contact-content .description {
  font-size: 15px;
  font-weight: lighter;
}
footer .copy {
  width: 100%;
  padding-top: 5vh;
  border-top: 1px solid #7F84FF;
}

.divider {
  position: relative;
  display: grid;
  gap: 2vh;
}
.divider .light,
.divider .dark {
  height: 5px;
  width: 30%;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-radius: 10px;
}
.divider .dark {
  background-color: white;
  left: 0;
}
.divider .light {
  background-color: #5573b9;
  left: 20%;
}

.icon {
  height: 2vw;
  width: 2vw;
  border-radius: 100vw;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid white;
}

@media screen and (max-width: 760px) {
  body {
    font-size: 16px;
  }
  .title {
    font-size: 32px;
  }
  .btn {
    padding: 12px 25px;
  }
  .container {
    max-width: 100vw;
    padding: 0 24px;
  }
  .navigation {
    height: 100px;
  }
  .navigation .container {
    padding: 24px;
  }
  .navigation .container .branding .logo {
    max-width: 70px;
  }
  .navigation .container .menu {
    display: none;
  }
  .navigation .container .mobile-menu-actions {
    display: block;
  }
  .navigation .container .mobile-menu-actions #closeMenuIcon,
  .navigation .container .mobile-menu-actions #meniIsMenuIcon {
    display: none;
    max-width: 22px;
  }
  .navigation .menu-is-open {
    padding-top: 48px;
  }
  .navigation .menu-is-open .branding {
    display: none;
  }
  .navigation .menu-is-open .mobile-menu-actions {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .navigation .menu-is-open .mobile-menu-actions #openMenuIcon {
    display: none;
  }
  .navigation .menu-is-open .mobile-menu-actions #closeMenuIcon,
  .navigation .menu-is-open .mobile-menu-actions #meniIsMenuIcon {
    display: block;
  }
  .navigation .menu-is-open .social-media-icons {
    display: block;
  }
  .navigation .menu-is-open .menu {
    transition: all ease-in 0.3S;
    position: absolute;
    top: 100px;
    left: 0;
    right: 0;
    height: 100vh;
    padding: 24px;
    background-color: white;
    flex-direction: column;
    gap: 24px;
    display: flex;
    height: -moz-fit-content;
    height: fit-content;
  }
  .navigation .menu-is-open .menu .social-media-icons {
    padding: 3vh;
  }
  .navigation .menu-is-open .menu .social-media-icons .icon {
    background-color: #F1F5FF;
    color: #3A5CAA;
  }
  .hero-section .overlay {
    background: linear-gradient(90deg, rgba(58, 92, 170, 0.719) 50%, rgba(255, 255, 255, 0) 100%);
  }
  .hero-section .container .title,
  .hero-section .container p {
    max-width: 100%;
  }
  .about-us .container .about-us-cards {
    grid-template-columns: 100%;
  }
  .about-us .container .about-us-cards .card .about-text li .dot {
    width: 5vw;
    height: 3vw;
  }
  .about-us .container .about-us-cards .img img {
    height: 30vh;
  }
  .contact-us .container {
    flex-direction: column;
    gap: 8vh;
  }
  .contact-us .container .col-left {
    width: 100%;
  }
  .contact-us .container .col-left .contact-cards {
    gap: 32px;
  }
  .contact-us .container .col-left .contact-cards .card {
    width: 100%;
  }
  .contact-us .container .col-left .contact-cards .card .contact {
    gap: 12px;
  }
  .contact-us .container .col-left .contact-cards .card .contact .icon {
    width: 50px;
    height: 50px;
  }
  .contact-us .container .col-right {
    width: 100%;
  }
  .contact-us .container .col-right iframe {
    height: 300px !important;
  }
  .icon {
    width: 50px;
    height: 50px;
  }
  footer .container {
    grid-template-columns: 100%;
  }
}
@media screen and (max-width: 918px) {
  .contact-us .container .row {
    flex-direction: column;
  }
  .contact-us .container .row .col form .input-container {
    flex-direction: column;
    gap: 24px;
  }
}
@media screen and (max-width: 540px) {
  .contact-us .container .row .col .row-col {
    grid-template-columns: repeat(1, 1fr);
    gap: 48px;
  }
}/*# sourceMappingURL=index.css.map */