@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Poppins:ital,wght@0,600;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Poppins:ital,wght@0,600;0,700;0,800;1,500;1,600;1,700;1,800&display=swap");
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
  overflow-x: hidden; }

@keyframes fromLeft {
  0% {
    transform: translateX(-50%);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

@keyframes fromRight {
  0% {
    transform: translateX(50%);
    opacity: 0; }
  100% {
    transform: translateX(0);
    opacity: 1; } }

.hero-text .btn-primary {
  background-color: #025064;
  border-radius: 3rem;
  border-style: none;
  width: 9rem;
  margin-inline: 0.5rem;
  height: 2.7rem; }

.hero-text .btn-secondary {
  background-color: #dd3333;
  border-radius: 3rem;
  border-style: none;
  width: 9rem;
  margin-inline: 0.5rem;
  height: 2.7rem; }

.hero-text a {
  text-decoration: none;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600; }

@media screen and (max-width: 55rem) {
  .button {
    display: flex; } }

@media screen and (max-width: 48rem) {
  .hero-text .btn-primary {
    background-color: #025064;
    border-radius: 3rem;
    border-style: none;
    width: 9rem;
    margin-inline: 0.5rem;
    height: 2.7rem; }
    .hero-text .btn-primary a {
      font-size: 1rem; }
  .hero-text .btn-secondary {
    background-color: #dd3333;
    border-radius: 3rem;
    border-style: none;
    width: 9rem;
    margin-inline: 0.5rem;
    height: 2.7rem; }
    .hero-text .btn-secondary a {
      font-size: 1rem; } }

.button-container {
  display: flex;
  justify-content: center;
  align-items: center; }
  .button-container .story-btn {
    margin-block: 4rem;
    text-align: center;
    width: 8rem;
    height: 2rem;
    border-style: none;
    background-color: transparent; }
    .button-container .story-btn__link {
      color: #025064;
      text-decoration: none;
      font-size: 1.4rem;
      border-bottom: 2px solid #025064; }
      .button-container .story-btn__link:hover {
        color: #fff;
        font-size: 1rem; }
    .button-container .story-btn:hover {
      background-color: #025064;
      width: 10rem;
      height: 2.5rem; }

@media screen and (max-width: 27rem) {
  .button-container .story-btn {
    background-color: #025064;
    width: 10rem;
    height: 2.5rem;
    transition: all .5s; }
    .button-container .story-btn:hover {
      transform: translateY(-1.8px);
      box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3); }
    .button-container .story-btn__link {
      color: #fff;
      font-size: 1rem; } }

.products {
  position: relative;
  max-width: 100%;
  margin-top: -6rem; }
  .products .shoes {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: rgba(245, 245, 245, 0.7); }
  .products .shirts {
    background-color: rgba(230, 230, 230, 0.99);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; }
  .products .products-heading {
    text-align: center;
    text-transform: uppercase;
    font-size: 2.5rem;
    font-family: "Lato", sans-serif;
    color: #025064;
    margin-top: -3rem; }
  .products .product-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 2rem;
    width: 33%; }
    .products .product-container h3 {
      margin-top: 0.3rem;
      font-size: 1.9rem;
      color: #025064; }
    .products .product-container button {
      text-align: center;
      background-color: #dabebe;
      width: 12rem;
      height: 3.5rem;
      border-style: none;
      transition: all .5s; }
      .products .product-container button a {
        text-decoration: none;
        font-size: 1.1rem;
        font-weight: 700;
        color: #025064; }
      .products .product-container button:hover {
        transform: translateY(-15%); }
    .products .product-container img {
      width: 100%;
      transition: all .5s; }
      .products .product-container img:hover {
        transform: scale(1.1); }

@media screen and (max-width: 65rem) {
  .products {
    overflow: hidden; }
    .products .products-heading {
      font-size: 2.5rem; } }

@media screen and (max-width: 55rem) {
  .products {
    overflow: hidden;
    width: 100%;
    position: relative; }
    .products .products-heading {
      position: absolute;
      top: 5rem;
      left: -50%;
      right: -50%;
      text-align: center;
      font-size: 2.1rem; } }

@media screen and (max-width: 40rem) {
  .products .products-heading {
    text-align: center;
    font-size: 1.4rem; }
  .products .shoes {
    margin-block: 12rem;
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; }
  .products .shirts {
    margin-block: 12rem;
    height: 120vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; } }

@media screen and (max-width: 50rem) {
  .products {
    margin-top: 5rem; } }

@media screen and (max-width: 27rem) {
  .products .products-heading {
    text-align: center;
    font-size: 1.1rem; } }

.more-products {
  margin-block: 4rem; }
  .more-products .more-container {
    width: 100%;
    display: grid;
    place-content: center;
    grid-template-columns: 35% 35%;
    gap: 2rem; }
    .more-products .more-container .more-image {
      width: 100%;
      height: 27rem;
      border-radius: 5px; }
      .more-products .more-container .more-image:hover {
        transform: scale(1.03); }

@media screen and (max-width: 60rem) {
  .more-products .more-container {
    grid-template-columns: 42% 42%;
    gap: 1.4rem; } }

@media screen and (max-width: 48rem) {
  .more-products {
    margin-bottom: 3rem; }
    .more-products .more-container {
      grid-template-columns: 45% 45%;
      gap: 1.2rem; }
      .more-products .more-container .more-image:hover {
        transform: scale(1.01); } }

@media screen and (max-width: 42rem) {
  .more-products {
    margin-top: -7rem; }
    .more-products .more-container {
      grid-template-columns: 44% 44%;
      gap: 1rem; }
      .more-products .more-container .more-image {
        height: 20rem; }
        .more-products .more-container .more-image:hover {
          transform: scale(1.015); } }

.stories {
  margin-block: 5rem; }
  .stories .story-heading {
    margin-bottom: 4rem;
    text-align: center;
    font-family: "Lato", sans-serif;
    font-size: 2.4rem;
    text-transform: uppercase;
    transition: transform .8s;
    background-image: linear-gradient(to right, #025064, #19af7b);
    background-clip: text;
    color: transparent; }
    .stories .story-heading:hover {
      transform: rotate(5deg) scale(1.1); }
  .stories .story-container {
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 6rem; }
    .stories .story-container .story {
      width: 70%;
      font-family: "Lato", sans-serif;
      color: #025064;
      padding: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 0.8rem;
      background-color: rgba(255, 255, 255, 0.6);
      border: 1px solid white;
      box-shadow: 0.8rem 0.9rem 1.3rem rgba(0, 0, 0, 0.4);
      transform: rotate(10deg) skewY(-10deg); }
      .stories .story-container .story .story-image {
        margin-left: 1rem; }
        .stories .story-container .story .story-image .story-lady-image {
          width: 10rem;
          height: 10rem;
          border-radius: 50%;
          transform: rotate(-10deg) skewY(10deg); }
      .stories .story-container .story .story-text {
        margin-right: 1rem;
        text-align: justify;
        transform: rotate(-10deg) skewY(10deg); }
        .stories .story-container .story .story-text h3 {
          font-size: 1.4rem; }
        .stories .story-container .story .story-text p {
          font-size: 1.15rem;
          line-height: 1.3; }
        .stories .story-container .story .story-text h2 {
          display: inline-block;
          text-transform: uppercase;
          font-size: 1.2rem;
          border-bottom: 2px solid #c20e0e;
          border-top-width: 7px; }
      .stories .story-container .story:hover {
        transform: rotate(11deg) skewY(-11deg) scale(1.01); }

@media screen and (max-width: 69rem) {
  .stories .story-heading {
    font-size: 2rem; }
  .stories .story-container .story {
    padding: 1rem; }
    .stories .story-container .story .story-image .story-lady-image {
      width: 9rem;
      height: 9rem; }
    .stories .story-container .story .story-text h3 {
      font-size: 1.4rem; }
    .stories .story-container .story .story-text p {
      font-size: 1.13rem;
      line-height: 1.2; } }

@media screen and (max-width: 57rem) {
  .stories .story-heading {
    font-size: 2rem; }
  .stories .story-container .story {
    padding: 1rem; }
    .stories .story-container .story .story-image .story-lady-image {
      width: 8.5rem;
      height: 8.5rem; }
    .stories .story-container .story .story-text h3 {
      font-size: 1.3rem; }
    .stories .story-container .story .story-text p {
      font-size: 1.12rem;
      line-height: 1.1; } }

@media screen and (max-width: 52rem) {
  .stories .story-heading {
    font-size: 1.7rem; }
  .stories .story-container .story {
    padding: .5rem;
    gap: 0.6rem; }
    .stories .story-container .story .story-text h3 {
      font-size: 1.4rem; }
    .stories .story-container .story .story-text p {
      font-size: 1.05rem;
      line-height: 1;
      margin-top: -0.4rem; }
    .stories .story-container .story .story-text h2 {
      margin-top: -0.4rem; }
    .stories .story-container .story .story-image {
      margin-left: .8rem; }
      .stories .story-container .story .story-image .story-lady-image {
        width: 8rem;
        height: 8rem; } }

@media screen and (max-width: 44rem) {
  .stories .story-heading {
    font-size: 1.5rem; }
  .stories .story-container {
    gap: 5rem; }
    .stories .story-container .story {
      width: 75%;
      padding: .3rem;
      gap: 0.6rem; }
      .stories .story-container .story .story-image {
        margin-left: .6rem; }
        .stories .story-container .story .story-image .story-lady-image {
          width: 7.2rem;
          height: 7.2rem; }
      .stories .story-container .story .story-text p {
        margin-top: -0.7rem;
        font-size: 1rem;
        line-height: 1; }
      .stories .story-container .story .story-text h2 {
        margin-top: -0.7rem; } }

@media screen and (max-width: 27rem) {
  .stories .story-container .story {
    flex-direction: column;
    transform: rotate(0deg) skewY(0deg); }
    .stories .story-container .story .story-image .story-lady-image {
      margin-top: .4rem;
      width: 11rem;
      height: 11rem;
      transform: rotate(0deg) skewY(0deg); }
    .stories .story-container .story .story-text {
      margin-inline: .5rem;
      transform: rotate(0deg) skewY(0deg);
      transition: all .8; }
      .stories .story-container .story .story-text h3 {
        margin-top: -.6rem; }
      .stories .story-container .story .story-text p {
        line-height: 1.3; }
    .stories .story-container .story:hover {
      transform: scale(1.015); } }

.form-section {
  font-family: "Lato", sans-serif;
  margin-top: 5rem;
  width: 100%;
  height: 100vh;
  background-image: linear-gradient(to right, #025064, #19af7b);
  color: #025064;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center; }
  .form-section .form-container {
    position: relative;
    text-align: center;
    display: inline-block;
    margin: 8rem 8rem;
    padding: 4rem 4rem;
    width: 50%;
    height: 30rem;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.9)), url("/images/business-couple.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 5px;
    box-shadow: 0 1rem 1.4rem rgba(0, 0, 0, 0.3);
    backface-visibility: hidden; }
    .form-section .form-container .form-heading {
      margin-bottom: 4rem;
      text-align: center;
      font-family: "Lato", sans-serif;
      font-size: 2rem;
      font-weight: 600;
      text-transform: uppercase;
      transition: all .8s;
      background-image: linear-gradient(to right, #025064, #19af7b);
      -webkit-background-clip: text;
      color: transparent; }
      .form-section .form-container .form-heading:hover {
        transform: rotate(5deg) scale(1.1); }
    .form-section .form-container label {
      display: block;
      margin: 1rem;
      font-size: 1.1rem;
      font-weight: 700;
      text-transform: uppercase; }
    .form-section .form-container textarea {
      width: 18rem;
      height: 6rem;
      border-style: none;
      border-radius: 5px;
      box-shadow: 0 1rem 1.4rem rgba(0, 0, 0, 0.3);
      font-size: 1.2rem;
      font-weight: 400;
      outline: none;
      resize: none;
      color: #4a4e67; }
      .form-section .form-container textarea:focus {
        border-style: none;
        border-bottom: 2px solid #dd3333; }
    .form-section .form-container input[type=email] {
      width: 18rem;
      height: 3rem;
      color: #4a4e67;
      background-color: #fff;
      box-shadow: 0 1rem 1.4rem rgba(0, 0, 0, 0.3);
      font-size: 1.2rem;
      font-weight: 400;
      outline: none;
      border-style: none;
      border-radius: 5px;
      resize: none; }
      .form-section .form-container input[type=email]:focus {
        border-style: none;
        border-bottom: 2px solid #dd3333; }
    .form-section .form-container .submit-btn {
      display: block;
      margin: 2rem 0;
      width: 18rem;
      height: 2.7rem;
      background-color: #19af7b;
      border-style: none;
      color: white;
      font-size: 1.1rem;
      border-radius: 3px;
      box-shadow: 0 1rem 1rem rgba(0, 0, 0, 0.3);
      position: absolute;
      left: 50%;
      transform: translate(-50%); }

@media screen and (max-width: 27rem) {
  .form-section .form-container {
    height: 28rem; }
    .form-section .form-container .form-heading {
      margin-bottom: 2rem;
      font-size: 1.6rem; }
    .form-section .form-container textarea {
      width: 16rem;
      height: 6rem;
      transform: translateX(-10%); }
    .form-section .form-container input[type=email] {
      width: 16rem;
      height: 3rem;
      transform: translateX(-10%); } }

.partners {
  margin-top: -1.7rem;
  position: relative;
  width: 100%;
  height: 24rem;
  background-color: white;
  clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); }
  .partners__heading {
    font-family: "Lato", sans-serif;
    padding-top: 3rem;
    text-align: center;
    font-size: 1.7rem;
    color: transparent;
    text-transform: uppercase;
    background-image: linear-gradient(to right, #025064, #19af7b);
    background-clip: text;
    transition: transform .4s; }
    .partners__heading:hover {
      transform: rotate(5deg) scale(1.1); }
  .partners__logos {
    display: flex;
    justify-content: center;
    align-items: center; }
    .partners__logos img {
      width: 13rem;
      aspect-ratio: 3/2;
      object-fit: contain; }

@media screen and (max-width: 59.5rem) {
  .partners {
    height: 30rem; }
    .partners__logos {
      display: grid;
      grid-template-columns: auto auto auto;
      gap: 1rem; }
      .partners__logos img {
        width: 12.5rem; } }

@media screen and (max-width: 27rem) {
  .partners__logos {
    display: grid;
    place-content: center;
    align-items: center;
    grid-template-columns: auto auto; }
    .partners__logos img {
      width: 10rem; } }

.checkbox {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 2rem;
  height: 1.5rem;
  opacity: 0;
  z-index: 1000; }

.small-screen-nav-links {
  opacity: 0;
  visibility: hidden; }

.small-screen-nav-links {
  width: 100%;
  height: 50vh;
  position: absolute;
  top: 5rem;
  right: 0;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #025064;
  z-index: 3000;
  transition: all .5s; }
  .small-screen-nav-links li {
    list-style: none;
    margin-top: 2rem;
    margin-left: -50%; }
    .small-screen-nav-links li a {
      text-decoration: none;
      font-size: 1.2rem;
      text-transform: uppercase;
      color: white;
      font-weight: 900; }

.container {
  width: 100%;
  height: 100vh; }
  .container .nav-bar {
    position: fixed;
    top: 0;
    font-family: "Lato", sans-serif;
    width: 100%;
    height: 5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-inline: 1rem;
    background-color: #feffff;
    border-bottom: 2px;
    box-shadow: 0 0 10px 1px rgba(15, 1, 1, 0.4);
    color: #025064;
    z-index: 3000; }
    .container .nav-bar .nav-links {
      margin-right: 6rem;
      display: flex;
      justify-content: space-between;
      gap: 4rem; }
      .container .nav-bar .nav-links li {
        list-style: none; }
        .container .nav-bar .nav-links li a {
          text-decoration: none;
          text-transform: uppercase;
          color: #025064;
          font-weight: 900; }
          .container .nav-bar .nav-links li a:hover {
            border-bottom: 4px solid #dd3333; }
    .container .nav-bar .logo {
      margin-left: 4rem;
      display: flex;
      justify-content: center;
      align-items: center; }
      .container .nav-bar .logo img {
        width: 3rem; }
      .container .nav-bar .logo h1 {
        font-size: 2rem;
        font-weight: 900;
        letter-spacing: 1.5px; }

@media screen and (max-width: 51rem) {
  .container .nav-bar .nav-links {
    gap: 3rem; } }

@media screen and (max-width: 55rem) {
  .logo {
    position: absolute;
    left: -1.8rem; }
  .button {
    display: flex; }
  .hero-image img {
    max-width: 23rem; } }

@media screen and (max-width: 47rem) {
  .nav-bar {
    display: flex;
    justify-content: space-around;
    align-items: center; }
    .nav-bar .logo {
      position: absolute;
      left: -2rem; }
    .nav-bar .nav-links li {
      display: none; }
    .nav-bar .small-screen-nav-links {
      opacity: 0;
      visibility: hidden; }
    .nav-bar .checkbox:checked ~ .small-screen-nav-links {
      background-color: #025064;
      opacity: 1;
      visibility: visible; }
  .hamburger {
    position: absolute;
    right: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer; }
    .hamburger .line {
      width: 2.2rem;
      height: 4px;
      background-color: #025064; }
  .checkbox {
    right: 4rem; } }

.button {
  display: flex;
  gap: 2rem; }

@media screen and (max-width: 50rem) {
  .small-screen-nav-links {
    height: 60vh; } }

.footer {
  margin-top: -6rem;
  font-family: "Lato", sans-serif;
  width: 100%;
  background-color: #025064;
  height: 60vh; }
  .footer .container {
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%; }
    .footer .container .footer-nav {
      width: 33%; }
      .footer .container .footer-nav ul {
        display: inline-block; }
        .footer .container .footer-nav ul li {
          list-style: none;
          padding: .7rem; }
          .footer .container .footer-nav ul li a {
            color: white;
            font-weight: 500;
            text-decoration: none;
            text-transform: uppercase;
            font-size: 1.1rem; }
    .footer .container .why-us {
      width: 33%; }
      .footer .container .why-us h3 {
        font-size: 1.5rem;
        font-weight: 500;
        text-transform: uppercase; }
      .footer .container .why-us p {
        font-size: 1.2;
        line-height: 1.5; }
    .footer .container .copyright {
      width: 33%;
      margin-left: 2rem; }
      .footer .container .copyright h3 {
        margin-top: -1rem;
        font-size: 1.7rem;
        font-weight: 600; }
      .footer .container .copyright p {
        font-size: 1.4rem; }

@media screen and (max-width: 27rem) {
  .footer {
    height: 70%;
    overflow: hidden; }
    .footer .container {
      padding-top: 4rem;
      width: 100%;
      display: grid;
      grid-template-columns: 50% 50%; }
      .footer .container .footer-nav {
        width: 100%; }
        .footer .container .footer-nav ul {
          display: inline-block; }
          .footer .container .footer-nav ul li {
            padding: .8rem; }
            .footer .container .footer-nav ul li a {
              color: white;
              font-weight: 500;
              text-decoration: none;
              text-transform: uppercase;
              font-size: 1rem; }
      .footer .container .why-us {
        width: 100%; }
        .footer .container .why-us p {
          text-align: left;
          font-size: 1.2;
          line-height: 1.5; }
      .footer .container .copyright {
        display: flex; }
        .footer .container .copyright h3 {
          transform: translate(40%, 50%); }
        .footer .container .copyright p {
          margin-left: 1rem; } }

@media screen and (max-width: 50rem) {
  .footer {
    height: 70%;
    overflow: hidden; }
    .footer .container {
      padding-top: 5rem; }
      .footer .container .footer-nav ul li {
        padding: .7rem; }
        .footer .container .footer-nav ul li a {
          font-size: .8rem; }
      .footer .container .why-us h3 {
        font-size: 1.2rem; }
      .footer .container .copyright h3 {
        margin-top: -1rem;
        font-size: 1.2rem;
        font-weight: 600; }
      .footer .container .copyright p {
        font-size: 1.5rem; } }

.hero-section {
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding-inline: 2rem; }
  .hero-section .hero-text {
    max-width: 50%;
    font-family: "Lato", sans-serif;
    animation: fromLeft 3s ease-out; }
    .hero-section .hero-text h1 {
      font-size: 3rem;
      font-weight: 600;
      color: #025064;
      word-spacing: 1.5px; }
    .hero-section .hero-text p {
      font-size: 1.4rem;
      line-height: 1.3;
      text-align: justify;
      margin-bottom: 2.5rem; }
    .hero-section .hero-text span {
      color: #dd3333; }
  .hero-section .hero-image {
    max-width: 50%;
    animation: fromRight 3s ease-out; }
    .hero-section .hero-image img {
      width: 31rem;
      height: 25rem; }

@media screen and (max-width: 55rem) {
  .button {
    display: flex; }
  .hero-section .hero-text .details {
    font-size: 1.2rem;
    line-height: 1.2;
    text-align: justify;
    margin-bottom: 2.5rem; }
  .hero-section .hero-text h1 {
    font-size: 2.4rem;
    font-weight: 600;
    word-spacing: 1.2px; }
  .hero-image img {
    max-width: 23rem; } }

@media screen and (max-width: 45.8rem) {
  .hero-image img {
    max-width: 24rem; }
  .hero-section {
    margin-left: 2rem;
    margin-top: 8rem;
    height: 80vh;
    display: grid;
    overflow: hidden; }
    .hero-section .hero-text {
      max-width: 100%;
      text-align: center; }
    .hero-section .button {
      display: flex;
      justify-content: center;
      align-items: center; } }

@media screen and (max-width: 28rem) {
  .hero-section {
    margin-right: -1rem;
    height: 110vh;
    display: grid;
    overflow: hidden; } }

@media screen and (max-width: 25rem) {
  .hero-section {
    margin-right: -3rem;
    height: 110vh;
    display: grid;
    overflow: hidden; } }

@media screen and (max-width: 50rem) {
  .hero-section {
    margin-top: 7rem; } }