:root {
  --primary-color: #0a215f;

  --secondary-color-b: #559dd1;

  --secondary-color-w: white;

  --primary-button-color: #1342ba;

  --button-radius: 4px;

  ---h1-font-size: clamp(32px, 60px, 65px);
  --h2-font-size: clamp(24px, 48px, 50px);
  --h3-font-size: clamp(20px, 32px, 36px);
  --h4-font-size: clamp(18px, 24px, 26px);
  --p-font-size: clamp(14px, 17px, 18px);
}

@font-face {
  font-family: secondary-font-b;
  src: url("../fonts/SVN-GilroyBold.ttf");
}

@font-face {
  font-family: secondary-font;
  src: url("../fonts/SVN-GilroyLight.ttf");
}

@font-face {
  font-family: primary-font;
  src: url("../fonts/sf-pro-text-light.ttf");
}

* {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0;
}
body {
  background: var(--secondary-color-w);
  color: var(--primary-color);
}
h1 {
  font-size: var(---h1-font-size);
}

h2 {
  font-size: var(--h2-font-size);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

p {
  font-size: var(--p-font-size);
}

h1,
h2,
h3,
h4 {
  font-family: primary-font;
}

p {
  font-family: secondary-font;
}

a {
  text-decoration: none;
  font-family: secondary-font;
  color: inherit;
  cursor: pointer;
}

a:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);;
}

img {
  max-width: 100%;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
}

.header-wrapper {
  padding: 0;
  margin: 0 auto;
  margin-top: 36px;
}
.container-header {
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
  margin: 0;
}

.nav-container {
  display: flex;
  justify-content: flex-start;
  gap: 20px;
  display: flex;
  flex-grow: 1;
  justify-content: space-between;
}

.nav-bar ul {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.nav-bar li {
  list-style-type: none;
  font-family: secondary-font;
}
.logo {
  min-width: 100px;
  order: 0;
}
.hamburger-menu {
  display: none;
}

.login-buttons-container {
  display: flex;
}

.login-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5px 7px;
  gap: 10px;
  border: none;
  border-radius: var(--button-radius);
  max-width: 90px;
  max-height: 36px;
}

.sign-in {
  background: none;
  color: var(--secondary-color-b);
}

.sign-up {
  background: var(--primary-button-color);
  color: var(--secondary-color-w);
}

.banner {
  display: flex;
  flex-basis: 1;
  margin-top: 108px;
  justify-content: space-between;
  margin-left: 10%;
  z-index: 0;
}

.banner-text {
  max-width: 31.75rem;
  padding: 0.5rem;
  min-height: 400px;
}

.banner-text h1 {
  font-family: primary-font;
  /* font-size: var(---h1-font-size); */
}

.banner-img {
  max-width: 50%;
  align-self: flex-end;
}

.triangle {
  position: absolute;
  margin-left: 39%;
  margin-top: -55px;
  z-index: 0;
  background-color: rgba(250, 235, 215, 0);
}

.banner-button-container {
  margin-top: 38px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  min-width: 250px;
  flex-wrap: wrap;
}

.trip-button {
  padding: 0 8px 0 0;
  display: flex; 
  align-items: center;
}

.trip-button img {
  padding: 0 10px 0 0;
}

.banner-button, .get-started-button,
.use-buttons {
  border-radius: var(--button-radius);
  background: var(--primary-button-color);
  color: var(--secondary-color-w);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 24px;
  gap: 8px;
  cursor: pointer;
}

.banner-button:hover,
.get-started-button:hover,
.use-buttons:hover,
.support-button:hover,
.footer-sign-up-button:hover {
  background-color: var(--secondary-color-b);
  color: var(--secondary-color-w);
}

.sign-up:hover {
  color: var(--secondary-color-w);
  background: var(--secondary-color-b);
}

.sign-in:hover {
  color: var(--secondary-color-w);
  background: var(--secondary-color-b);
}

.background-wave img {
  position: absolute;
  background-color: rgba(250, 235, 215, 0);
  background-size: cover;
  z-index: 1;
  bottom: 0;
  width: 100%;
  margin-right: 0;
  padding: 0;
  left:0;
}

/* Website container */
/* Why choose us: CSS */
.choose-container {
  text-align: center;
  margin: 0 auto;
  margin-top: 30px;
}

.choose-container h2,
.choose-container p {
  margin: 0 auto;
  max-width: 544px;
  padding-top: 16px;
}

.choose-flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  align-content: center;
  flex-wrap: wrap;
  margin-top: 50px;
  gap: 30px;
}

.choose-item-card h3 {
  font-size: var(--h4-font-size);
}

.choose-item-card img {
  max-width: 200px;
}
.choose-item-card {
  display: flex;
  flex-direction: column;
  max-width: 288px;
  flex-shrink: 1;
  align-items: center;
  gap: 10px;
}

/* End of choose container CSS */

/* Start-container */
.start-container,
.use-container {
  display: flex;
  flex-wrap: wrap;
  margin-top: 100px;
  justify-content: space-between;
  align-items: center;
}

.girl-img,
.use-img {
  max-width: 40%;
  align-self: flex-start;
  margin: 0 auto;
}

.start-text-flex,
.use-text-logo {
  text-align: left;
  max-width: 525px;
  align-self: flex-end;
  margin: 0 auto;
  margin-bottom: 20px;
}

.start-flex-container {
  margin-top: 20px;
}
.steps-flex {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  align-items: center;
}

.steps {
  padding-bottom: 20px;
}

.step-icon img {
  background-color: var(--secondary-color-b);
  border-radius: 50%;
  max-width: 60px;
  max-height: 60px;
  padding: 16px;
}

.steps {
  align-self: center;
}

/* End of start container */

/* Start of Use Peyme CSS  */

.use-buttons-flex {
  display: flex;
  gap: 20px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.buttons-white {
  background-color: var(--secondary-color-w);
  color: var(--secondary-color-b);
  border: 2px solid var(--secondary-color-b);
}
.use-text-logo {
  align-self: center;
  padding-bottom: 20px;
}

.buttons-white:hover {
  background-color: var(--secondary-color-b);
  color: var(--secondary-color-w);
}

/* End of USe Peyme CSS */
/* Features Card Container Css */
.features-container {
  text-align: center;
}

.features-container > h2 {
  margin: 0 auto;
  max-width: 665px;
  margin-top: 49px;
}

.features-container > p {
  margin: 0 auto;
  margin-top: 16px;
  max-width: 554px;
}

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 56px;
}
.card-flex {
  display: flex;
  max-width: 544px;
  align-items: center;
  margin-top: 30px;
  background: linear-gradient(
      0deg,
      rgba(137, 186, 214, 0.04),
      rgba(137, 186, 214, 0.04)
    ),
    #ffffff;
  border-radius: 16px;
}

.card-img {
  max-width: 50%;
}

.card-text {
  text-align: left;
  max-width: 308px;
}
/* End of Feature card CSS */

/* Support Container Css */

.support-container {
  display: flex;
  min-width: 300px;
  justify-content: space-evenly;
  align-items: center;
  margin-top: 95px;
}

.support-arrow-img {
  display: flex;
}
.support-img {
  display: flex;
  order: 0;
}
.support-text {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 393px;
  align-self: flex-start;
  justify-content: flex-start;
  align-items: flex-start;
  text-align: left;
}



.right-arrow {
  position: absolute;
  bottom: -63px;
  align-self: end;
  left: 253px;
}
.support-button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 24px;
  gap: 10px;
  max-width: 150px;
  max-height: 36px;
  color: var(--secondary-color-w);
  background-color: var(--primary-button-color);
  border-radius: var(--button-radius);
  margin-top: 10px;
}

.arrow-container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.support-img img {
  max-width: 60%;
}

/* End of Support Container CSS */

/* Partner Container Css */
.partners-containers {
  background: linear-gradient(
    270deg,
    #ffffff 0%,
    rgba(255, 255, 255, 0) 11.46%,
    rgba(255, 255, 255, 0) 45.83%,
    rgba(255, 255, 255, 0) 88.02%,
    #ffffff 100%
  );
  margin: 0 auto;
  text-align: center;
  margin-top: 100px;
  max-width: 1200px;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.partners-containers h2 {
  padding-bottom: 16px;
}

.partners-containers p,
.partners-containers h2,
hr {
  max-width: 422px;
  margin: 0 auto;
}
.partners-containers .p-secondary {
  color: var(--primary-button-color);
}
hr {
  border: 0.5px solid #cccccc;
  margin: 30px auto;
}

.partners-logos img {
  max-height: 62px;
}
.partners-logos {
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  max-height: 62px;
}

/* Footer */
footer {
  margin-top: 20px;
}

.footer-container {
  background: var(--primary-color);
  color: var(--secondary-color-w);
  margin: 0 auto;
  padding: 46px 108px;
  align-items: flex-start;
}

.product-box,
.support-box,
.company-box {
  min-width: 200px;
}

.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  padding-bottom: 25px;
}
.footer-container li,
.subscribe-box p {
  list-style: none;
  font-family: secondary-font;
  padding-bottom: 8px;
  margin-top: 16px;
}

.subscribe-box {
  max-width: 300px;
}

.footer-sign-up-button {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 24px;
  border: none;
  border-radius: var(--button-radius);
  width: 180px;
  height: 36px;
  background: var(--secondary-color-w);
  font-family: secondary-font;
  color: var(--primary-color);
}

.footer-connect {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.logo-copy {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 25px;
}

.logo-copy p {
  min-width: 450px;
  order: 2;
}

.logo-footer {
  min-width: 200px;
  order: -1;
}

.verticle-bar {
  border-right: 1px solid var(--secondary-color-w);
  order: 1;
}

.social-media {
  display: flex;
  justify-content: space-between;
  min-width: 392px;
}

.social-icon {
  min-width: 26px;
}

/* ***********************MEDIA QUERY***********************/

/* ***********************Laptop***********************/

@media screen and (max-width: 1136px) and (min-width: 800px) {
  /* .background-wave img {
    top: 122px;
  } */

  .banner {
    margin-top: 0px;
  }

  .banner-text {
    min-width: 365px;
  }
  .banner h1 {
    font-size: 30px;
  }

  .banner-button-container {
    margin-top: 10px;
  }

  .card-container {
    justify-content: space-evenly;
  }
}

/* ***********************TABLET***********************/

@media screen and (max-width: 799px) and (min-width: 508px) {
  /* p{
    font-size:14px
  }

  h1{
    font-size:20;
  } */

  .container {
    margin: 0 6px 0 6px;
  }
  .header-wrapper {
    padding: 2px;
    margin: 0 auto;
    margin-top: 26px;
  }
  .nav-bar {
    display: none;
  }
  .nav-container {
    justify-content: space-between;
    padding: 10px;
  }
  .hamburger-menu {
    display: inline;
    order: 0;
  }
  .logo {
    align-self: center;
    order: 1;
  }

  .login-buttons-container {
    order: 2;
  }
  .banner {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
    min-width: 451px;
    align-self: center;
  }

  .banner h1 {
    font-size: 24px;
  }
  .banner-img {
    align-self: center;
  }
  .banner-text {
    min-height: 126px;
  }

  .triangle {
    display: none;
  }

  .big-triangle {
    display: none;
  }

  .banner-button-container .get-started-button {
    padding: 4px 14px;
  }

  .start-text-flex > h3,
  .start-text-flex > p {
    text-align: center;
  }

  .use-buttons-flex {
    justify-content: center;
  }

  .buttons-white {
    background-color: var(--secondary-color-w);
    color: var(--secondary-color-b);
    border: 2px solid var(--secondary-color-b);
  }
  .use-text-logo {
    text-align: center;
    order: 1;
    padding-bottom: 20px;
  }

  .card-container {
    justify-content: space-evenly;
  }

  .logo-copy p {
    min-width: 220px;
  }

  .support-container {
    text-align: center;
    margin: 0 auto;
    flex-wrap: wrap;
  }
}
/* ***********************Mobile***********************/

@media screen and (max-width: 507px) {
  .container {
    margin: 0 6px 0 6px;
  }
  h1 {
    font-size: var(--h4-font-size);
  }
  .container-header {
    margin: 0px 2px 0px 2px;
  }
  .nav-bar {
    display: none;
  }
  .nav-container {
    justify-content: space-between;
    padding: 0px;
  }
  .hamburger-menu {
    display: inline;
    order: 0;
  }
  .logo {
    align-self: center;
    order: 1;
  }

  .login-buttons-container {
    order: 2;
    gap: 2px;
    padding: 0;
  }

  .login-button {
    max-height: 34px;
    font-size: 12px;
    max-width: 55px;
    padding: 2px 2px;
    text-align: center;
  }

  .banner {
    display: flex;
    margin-top: 20px;
    flex-wrap: wrap;
  }

  .banner-text {
    text-align: center;
    min-height: 200px;
  }

  .banner-button-container {
    margin-top: 22px;
    max-width: 25px;
  }

  .triangle {
    display: none;
  }

  .start-text-flex > h3,
  .start-text-flex > p {
    text-align: center;
  }

  .use-container {
    margin-top: 20px;
  }

  .use-buttons-flex {
    justify-content: center;
  }

  .buttons-white {
    background-color: var(--secondary-color-w);
    color: var(--secondary-color-b);
    border: 2px solid var(--secondary-color-b);
  }
  .use-text-logo {
    text-align: center;
  }

  .card-container {
    justify-content: space-evenly;
  }

  .support-container {
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .support-text {
    text-align: center;
    align-items: center;
  }

  /* Footer CSS */
  .footer-container {
    padding: 26px 50px;
  }

  .footer-info {
    justify-content: center;
    text-align: center;
  }

  .logo-copy p {
    order: 2;
    min-width: 220px;
  }

  .social-media {
    display: flex;
    justify-content: space-between;
    min-width: 200px;
  }

  .logo-copy p {
    min-width: 220px;
  }
}