@font-face{font-family:ibm plex sans condensed;font-style:normal;font-weight:400;src:local('IBM Plex Sans Condensed'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-Regular.woff) format('woff')}@font-face{font-family:ibm plex sans condensed;font-style:italic;font-weight:400;src:local('IBM Plex Sans Condensed'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-Italic.woff) format('woff')}@font-face{font-family:ibm plex sans condensed;font-style:normal;font-weight:700;src:local('IBM Plex Sans Condensed'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-Bold.woff) format('woff')}@font-face{font-family:ibm plex sans condensed;font-style:italic;font-weight:700;src:local('IBM Plex Sans Condensed'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-BoldItalic.woff) format('woff')}@font-face{font-family:ibm plex sans condensed thin;font-style:normal;font-weight:100;src:local('IBM Plex Sans Condensed Thin'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-Thin.woff) format('woff')}@font-face{font-family:ibm plex sans condensed extralight;font-style:normal;font-weight:200;src:local('IBM Plex Sans Condensed ExtraLight'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-ExtraLight.woff) format('woff')}@font-face{font-family:ibm plex sans condensed light;font-style:normal;font-weight:300;src:local('IBM Plex Sans Condensed Light'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-Light.woff) format('woff')}@font-face{font-family:ibm plex sans condensed medium;font-style:normal;font-weight:500;src:local('IBM Plex Sans Condensed Medium'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-Medium.woff) format('woff')}@font-face{font-family:ibm plex sans condensed semibold;font-style:normal;font-weight:600;src:local('IBM Plex Sans Condensed SemiBold'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-SemiBold.woff) format('woff')}@font-face{font-family:ibm plex sans condensed thin;font-style:italic;font-weight:100;src:local('IBM Plex Sans Condensed Thin'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-ThinItalic.woff) format('woff')}@font-face{font-family:ibm plex sans condensed extralight;font-style:italic;font-weight:200;src:local('IBM Plex Sans Condensed ExtraLight'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-ExtraLightItalic.woff) format('woff')}@font-face{font-family:ibm plex sans condensed light;font-style:italic;font-weight:300;src:local('IBM Plex Sans Condensed Light'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-LightItalic.woff) format('woff')}@font-face{font-family:ibm plex sans condensed medium;font-style:italic;font-weight:500;src:local('IBM Plex Sans Condensed Medium'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-MediumItalic.woff) format('woff')}@font-face{font-family:ibm plex sans condensed semibold;font-style:italic;font-weight:600;src:local('IBM Plex Sans Condensed SemiBold'),url(https://fonts.cdnfonts.com/s/17852/IBMPlexSansCondensed-SemiBoldItalic.woff) format('woff')}
@font-face{font-family:ibm plex sans;font-style:normal;font-weight:400;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-Regular.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:400;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-Italic.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:100;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-Thin.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:100;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-ThinItalic.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:200;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-ExtraLight.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:200;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-ExtraLightItalic.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:300;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-Light.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:300;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-LightItalic.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:500;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-Medium.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:500;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-MediumItalic.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:600;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-SemiBold.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:600;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-SemiBoldItalic.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:normal;font-weight:700;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-Bold.woff) format('woff')}@font-face{font-family:ibm plex sans;font-style:italic;font-weight:700;src:local('IBM Plex Sans'),url(https://fonts.cdnfonts.com/s/15449/IBMPlexSans-BoldItalic.woff) format('woff')}


:root {
  --primary: #6b59d3;
  --secondary: #bfc0c0;
  --white: #fff;
  --text-clr: #5b6475;
  --header-clr: #25273d;
  --next-btn-hover: #8577d2;
  --back-btn-hover: #8b8c8c;
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

h1,
h2,
h3,
h4 {
  font-family: "ibm plex sans condensed";
}

h1 {
  font-size: 62px;
  line-height: 4rem;
}

h2 {
  font-size: 32px;
}

h3 {
  font-size: 26px;
}

h4 {
  font-size: 24px;
}

ul,
a {
  text-decoration: none;
  list-style: none;
}

p {
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: bold;
  color: #001f45;
  line-height: 1.8;
}

span {
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: bold;
  color: #001f45;
  line-height: 1.8;
}

.header-button {
  font-family: "ibm plex sans";
  font-size: 18px;
  font-weight: bold;
  text-transform: uppercase;
  padding: 1rem 1rem;
  border: none;
  border-radius: 4px;
  background-color: #ffd200;
  color: #001f45;
  margin-top: 2rem;
  cursor: pointer;
}

.content-button {
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
  border: none;
  border-radius: 4px;
  background-color: #001f45;
  color: white;
  margin-top: 2rem;
  cursor: pointer;
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  h1 {
    font-size: 52px;
    line-height: 3.5rem;
  }

  h2 {
    font-size: 32px;
  }

  h3 {
    font-size: 24px;
  }

  h4 {
    font-size: 22px;
  }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
  h1 {
    font-size: 40px;
    line-height: 2.8rem;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 18px;
  }
  .header-button {
    font-size: 14px;
  }

  .content-button {
    font-size: 12px;
  }

  p {
    font-size: 12px;
  }

  span {
    font-size: 12px;
  }
}

@media screen and (max-width: 500px) {
  h1 {
    font-size: 40px;
    line-height: 2.8rem;
  }

  h2 {
    font-size: 26px;
  }

  h3 {
    font-size: 22px;
  }

  h4 {
    font-size: 18px;
  }
  .header-button {
    font-size: 12px;
  }

  .content-button {
    font-size: 12px;
  }

  p {
    font-size: 12px;
  }

  span {
    font-size: 12px;
  }
}

/* ----------------------------------------------------- */
/* Header Section */

.header-mobile {
  display: none;
}
.top-mobile {
  display: none;
}

header {
  width: 100%;
  height: 100vh;
  display: flex;
}

header .aside-section {
  width: 10%;
  height: 100%;
  background: #001f45;
  padding: 2rem 1rem;
  text-align: center;
  position: fixed;
}

.aside-section ul {
  height: 80%;
}

.aside-section ul li {
  font-family: "ibm plex sans";
  font-size: 18px;
  font-weight: bold;
  color: white;
  transition: all 0.3s ease-in-out;
}

.aside-section ul li:not(.last-child) {
  padding-bottom: 55%;
}

.aside-section ul .child-1 {
  color: #ffd200;
}

.aside-section ul li:hover {
  color: #ffd200;
  transition: all 0.3s ease-in-out;
}

.contact-icon {
  padding-top: 25%;
}

.contact-icon p {
  font-family: "ibm plex sans";
  font-size: 18px;
  font-weight: bold;
  line-height: 1.2;
  color: white;
}

header .right-header {
  width: 90%;
  height: 100%;
  background: url(img/Header-1.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  text-align: center;
  position: relative;
  margin-left: 10%;
}

.right-header nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav img {
  width: 200px;
}

nav p {
  color: #001f45;
  font-family: "ibm plex sans";
  font-size: 16px;
  font-weight: bold;
  background: #ffd200;
  padding: 0.8rem 1.7rem;
  border-radius: 50px;
  cursor: pointer;
}

.right-header .header-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3rem;
}

.header-content h4 {
  color: white;
}

.header-content h1 {
  color: #ffd200;
  margin: 2rem 0;
}

@media screen and (min-width: 1101px) and (max-width: 1400px) {
  .top-mobile {
    display: none;
  }
  .aside-section ul li {
    font-size: 14px;
  }
  .contact-icon p {
    font-size: 14px;
  }

  .contact-icon img {
    width: 50px;
  }
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  header {
    display: none;
  }
  .top-mobile {
    display: none;
  }
  .header-mobile {
    width: 100%;
    height: 100vh;
    display: block;
  }
  .header-mobile .top-header {
    width: 100%;
    height: 90%;
    background: url(img/Header-1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-header nav img {
    width: 200px;
  }

  .top-header nav p {
    color: #001f45;
    font-family: "ibm plex sans";
    font-size: 16px;
    font-weight: bold;
    background: #ffd200;
    padding: 0.8rem 1.7rem;
    border-radius: 50px;
    cursor: pointer;
  }

  .top-header .header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 3rem;
  }

  .top-header .header-content h4 {
    color: white;
  }

  .top-header .header-content h1 {
    color: #ffd200;
    margin: 2rem 0;
  }

  .aside-section-mobile {
    width: 100%;
    height: 10%;
    display: flex;
    color: white;
    align-items: center;
    background: #001f45;
    padding: 0 1rem;
    text-align: center;
  }

  .aside-section-mobile ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
  }

  .aside-section-mobile ul li {
    font-family: "ibm plex sans";
    font-size: 16px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease-in-out;
  }

  .aside-section-mobile ul .child-1 {
    color: #ffd200;
  }

  .aside-section-mobile ul li:hover {
    color: #ffd200;
    transition: all 0.3s ease-in-out;
  }

  .contact-icon-mobile p {
    font-family: "ibm plex sans";
    font-size: 16px;
    font-weight: bold;
    line-height: 0;
    color: white;
  }
  .header-mobile .header-content h1 {
    color: #ffd200;
    margin: 1rem 0;
  }
}

@media screen and (min-width: 451px) and (max-width: 700px) {
  header {
    display: none;
  }
  .header-mobile {
    display: none;
  }

  .top-mobile {
    display: block;
  }
  .topnav {
    display: block;
    overflow: hidden;
    background-color: #001f45;
    padding: 2rem;
    position: relative;
  }

  .topnav #myLinks {
    display: none;
  }

  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    text-align: center;
  }

  .topnav ul li {
    font-family: "ibm plex sans";
    font-size: 18px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease-in-out;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }

  .topnav #myLinks a:hover {
    background-color: #001f45;
  }

  .topnav ul .child-1 {
    color: #ffd200;
  }

  .topnav ul li:hover {
    color: #ffd200;
    transition: all 0.3s ease-in-out;
  }

  .top-header-mobile {
    width: 100%;
    height: 100%;
    background: url(img/Header-1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .topnav p {
    color: #001f45;
    font-family: "ibm plex sans";
    font-size: 18px;
    font-weight: bold;
    background: #ffd200;
    padding: 0.8rem 1.7rem;
    border-radius: 50px;
    cursor: pointer;
  }

  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 2rem;
    top: 1.9rem;
    font-size: 24px;
  }

  .topnav img {
    width: 200px;
  }
}

@media screen and (max-width: 450px) {
  header {
    display: none;
  }
  .header-mobile {
    display: none;
  }

  .top-mobile {
    display: block;
  }
  .topnav {
    display: block;
    overflow: hidden;
    background-color: #001f45;
    padding: 2rem;
    position: relative;
  }

  .topnav #myLinks {
    display: none;
  }

  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    text-align: center;
  }

  .topnav ul li {
    font-family: "ibm plex sans";
    font-size: 16px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease-in-out;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }

  .topnav #myLinks a:hover {
    background-color: #001f45;
  }

  .topnav ul .child-1 {
    color: #ffd200;
  }

  .topnav ul li:hover {
    color: #ffd200;
    transition: all 0.3s ease-in-out;
  }

  .top-header-mobile {
    width: 100%;
    height: 100%;
    background: url(img/Header-1.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .topnav p {
    color: #001f45;
    font-family: "ibm plex sans";
    font-size: 16px;
    font-weight: bold;
    background: #ffd200;
    padding: 0.6rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
  }

  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 2rem;
    top: 1.8rem;
    font-size: 22px;
  }

  .topnav img {
    width: 170px;
  }
}

/* Section 1: section form */

#section-1 {
  background: white;
  margin-left: 10%;
  padding: 3rem;
  text-align: center;
}

#section-1 h2 {
  margin-bottom: 2%;
}

#section-1 h2:after {
  display: inline-block;
  margin: 0 0 10px 15px;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: #ffd200;
  width: 8%;
  border-radius: 50px;
}
#section-1 h2:before {
  display: inline-block;
  margin: 0 15px 10px 0;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: #ffd200;
  width: 8%;
  border-radius: 50px;
}

#section-1 .first-para {
  margin-bottom: 2rem;
}

.wrapper {
  width: 85%;
  max-width: 100%;
  background: #f0f9ff;
  margin: 0 auto;
  padding: 3rem;
  border-radius: 20px;
}

.form-container {
  display: flex;
  margin-bottom: 2%;
  gap: 2%;
}

.form-container input {
  color: #001f45;
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 55px;
  padding-left: 1rem;
}

.form-container select {
  color: #001f45;
  background: white;
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 55px;
  padding-left: 1rem;
}

.form-container select:focus {
  background: white;
  outline: none;
  border: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    to bottom right,
    #52acff 0%,
    #ffe32c 100%
  );
}

.checkbox {
  text-align: left;
  color: #001f45;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

.checkbox-active {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.checkbox-active p{
  margin-top: -0.35rem;
}

.Check-form {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  margin-bottom: 0.5rem;
}

.Check-form p{
  margin-top: -0.35rem;
}

.form-section {
  padding-bottom: 1rem;
}

.wrapper .header {
  margin-bottom: 35px;
  display: flex;
  justify-content: center;
}

.wrapper .header ul {
  display: flex;
}

.wrapper .header ul li {
  margin-right: 50px;
  position: relative;
}

.wrapper .header ul li:last-child {
  margin-right: 0;
}

.wrapper .header ul li:before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 55px;
  width: 100%;
  height: 2px;
  background: var(--secondary);
}

.wrapper .header ul li:last-child:before {
  display: none;
}

.wrapper .header ul li div {
  padding: 5px;
  border-radius: 50%;
}

.wrapper .header ul li p {
  width: 50px;
  height: 50px;
  background: var(--secondary);
  color: var(--white);
  text-align: center;
  line-height: 50px;
  border-radius: 50%;
}

.wrapper .header ul li.active:before {
  background: #001f45;
}

.wrapper .header ul li.active p {
  background: #001f45;
}

.wrapper .form_wrap h3 {
  color: #001f45;
  text-align: center;
  margin-bottom: 2rem;
}

.wrapper .btns_wrap {
  width: 350px;
  max-width: 100%;
  margin: 0 auto;
}

.form_container .form_1_btns button {
  border: 0;
  padding: 12px 15px;
  background: #001f45;
  color: var(--white);
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: 0.5s ease;
  cursor: pointer;
  margin: auto;
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
}

.form_container .form_1_btns button:hover {
  background: #003a81;
}

.wrapper .btns_wrap .common_btns {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

.wrapper .btns_wrap .common_btns .form_2_btns {
  justify-content: center;
}

.wrapper .btns_wrap .common_btns button {
  border: 0;
  padding: 12px 15px;
  background: #001f45;
  color: var(--white);
  justify-content: center;
  display: flex;
  align-items: center;
  border-radius: 4px;
  transition: 0.5s ease;
  cursor: pointer;
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  padding: 0.8rem 1.8rem;
}

.wrapper .btns_wrap .common_btns button.btn_back {
  background: var(--secondary);
}

.wrapper .btns_wrap .common_btns button.btn_next .icon {
  display: flex;
  margin-left: 10px;
}

.wrapper .btns_wrap .common_btns button.btn_back .icon {
  display: flex;
  margin-right: 10px;
}

.wrapper .btns_wrap .common_btns button.btn_next:hover,
.wrapper .btns_wrap .common_btns button.btn_done:hover {
  background: #003a81;
}

.wrapper .btns_wrap .common_btns button.btn_back:hover {
  background: var(--back-btn-hover);
}

.modal_wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.modal_wrapper .shadow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  opacity: 0;
  transition: 0.2s ease;
}

.modal_wrapper .success_wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -800px);
  background: var(--white);
  padding: 50px;
  display: flex;
  align-items: center;
  border-radius: 5px;
  transition: 0.5s ease;
}

.modal_wrapper .success_wrap .modal_icon {
  font-size: 50px;
  color: #001f45;
  display: flex;
  padding-right: 1.5rem;
}

.modal_wrapper.active {
  visibility: visible;
}

.modal_wrapper.active .shadow {
  opacity: 1;
}

.modal_wrapper.active .success_wrap {
  transform: translate(-50%, -50%);
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  #section-1 {
    background: white;
    margin-left: 0;
    padding: 3rem;
    text-align: center;
  }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
  #section-1 {
    background: white;
    margin-left: 0;
    padding: 3rem;
    text-align: center;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  #section-1 input {
    margin-bottom: 2%;
  }

  #section-1 select {
    margin-bottom: 2%;
  }
  .wrapper {
    width: 95%;
  }

  .form_container .form_1_btns button {
    font-size: 12px;
  }

  .wrapper .btns_wrap .common_btns button {
    font-size: 12px;
  }
}

@media screen and (max-width: 500px) {
  #section-1 {
    background: white;
    margin-left: 0;
    padding: 3rem 1rem;
    text-align: center;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

  #section-1 input {
    margin-bottom: 2%;
  }

  #section-1 select {
    margin-bottom: 2%;
  }
  .wrapper {
    width: 95%;
    padding: 3rem 1rem;
  }

  .form_container .form_1_btns button {
    font-size: 12px;
  }

  .wrapper .btns_wrap .common_btns button {
    font-size: 12px;
  }
}

/* FAQ section */

#Section-2 {
  background: #f0f9ff;
  margin-left: 10%;
  padding: 3rem;
  color: #001f45;
}

#Section-2 .boxes {
  width: 85%;
  display: flex;
  gap: 1rem;
  text-align: center;
  margin: 0 auto;
}

.boxes h3 {
  margin-bottom: 2rem;
}

.boxes p {
  text-align: justify;
}

.box-2-3 {
  width: 40%;
}

.box-1 {
  width: 60%;
  height: 100%;
  background: white;
  padding: 2rem;
  border-radius: 20px;
}

.box-2 {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  margin-bottom: 1rem;
}

.box-3 {
  background: white;
  padding: 2rem;
  border-radius: 20px;
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  #Section-2 {
    background: #f0f9ff;
    margin-left: 0;
    padding: 3rem;
    color: #001f45;
  }

  #Section-2 .boxes {
    width: 85%;
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  .box-2-3 {
    width: 100%;
  }

  .box-1 {
    width: 100%;
    margin-bottom: 1rem;
  }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
  #Section-2 {
    background: #f0f9ff;
    margin-left: 0;
    padding: 3rem;
    color: #001f45;
  }

  #Section-2 .boxes {
    width: 95%;
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  .box-2-3 {
    width: 100%;
  }

  .box-1 {
    width: 100%;
    margin-bottom: 1rem;
  }
}

@media screen and (max-width: 500px) {
  #Section-2 {
    background: #f0f9ff;
    margin-left: 0;
    padding: 3rem 1rem;
    color: #001f45;
  }

  #Section-2 .boxes {
    width: 95%;
    display: block;
    text-align: center;
    margin: 0 auto;
  }
  .box-2-3 {
    width: 100%;
  }

  .box-1 {
    width: 100%;
    margin-bottom: 1rem;
  }
}

/* VOIR TOUTES LES ACTUALITÉS */

#Section-3 {
  background: url(img/steps-BG.jpg);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin-left: 10%;
  padding: 3rem;
  text-align: center;
  color: #001f45;
}

#Section-3 h2 {
  color: white;
  margin-bottom: 4%;
}

#Section-3 h2:after {
  display: inline-block;
  margin: 0 0 10px 15px;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: white;
  width: 8%;
  border-radius: 50px;
}
#Section-3 h2:before {
  display: inline-block;
  margin: 0 15px 10px 0;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: white;
  width: 8%;
  border-radius: 50px;
}

.wrap {
  width: 85%;
  height: 100%;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  padding: 2rem 0 3.5rem 0;
  overflow: hidden;
}

.slider {
  display: flex;
  height: 100%;
  position: relative;
  top: 0;
  right: 0;
}

.slide {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 10px;
}

.slide h3 {
  margin-bottom: 3rem;
}

.act-para {
  width: 100%;
  height: 100%;
  padding: 0 2rem;
  font-family: "ibm plex sans";
  font-size: 16px;
  font-weight: bold;
  text-align: justify;
  position: relative;
}

.act-para .fa-quote-left {
  font-size: 32px;
  position: absolute;
  top: -1.8rem;
  left: 2rem;
  color: #ffd200;
}

.act-para .fa-quote-right {
  font-size: 32px;
  position: absolute;
  right: 2rem;
  color: #ffd200;
}

@keyframes slide-art {
  0% {
    right: 0;
  }
  14% {
    right: 0;
  }
  17% {
    right: 100%;
  }
  25% {
    right: 100%;
  }
  28% {
    right: 200%;
  }
  36% {
    right: 200%;
  }
  39% {
    right: 300%;
  }
  47% {
    right: 300%;
  }
  50% {
    right: 400%;
  }
  58% {
    right: 400%;
  }
  61% {
    right: 500%;
  }
  69% {
    right: 500%;
  }
  72% {
    right: 600%;
  }
  80% {
    right: 600%;
  }
  100% {
    right: 0;
  }
}
.slider {
  animation: slide-art linear 30s infinite;
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  #Section-3 {
    margin-left: 0;
  }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
  #Section-3 {
    margin-left: 0;
  }
  .wrap {
    width: 95%;
  }
}
@media screen and (max-width: 500px) {
  #Section-3 {
    margin-left: 0;
    padding: 3rem 1rem;
  }
  #Section-3 h2 {
    color: white;
    margin-bottom: 6%;
  }
  .wrap {
    width: 95%;
  }
}

/* contact */

#Section-4 {
  background: white;
  margin-left: 10%;
  padding: 3rem;
  color: #001f45;
}

#Section-4 h2 {
  margin-bottom: 4%;
  text-align: center;
}

#Section-4 h2:after {
  display: inline-block;
  margin: 0 0 10px 15px;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: #ffd200;
  width: 8%;
  border-radius: 50px;
}
#Section-4 h2:before {
  display: inline-block;
  margin: 0 15px 10px 0;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: #ffd200;
  width: 8%;
  border-radius: 50px;
}

.contact {
  width: 85%;
  height: 100%;
  display: flex;
  margin: 0 auto;
  background: white;
  border-radius: 20px;
  box-shadow: rgba(0, 0, 0, 0.1) 3px 3px 20px;
}

.left-contact {
  width: 40%;
  background: url(img/Contact-BG.png);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  padding: 2rem;
  border-radius: 0 20px 20px 0;
}

.left-contact h4 {
  margin-bottom: 1rem;
}

.left-contact p {
  margin-bottom: 1rem;
}

.left-contact .contact-1 {
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.contact-1 img {
  width: 3rem;
}

.contact-1 p {
  font-family: "ibm plex sans";
  font-size: 16px;
  font-weight: bold;
  padding-top: 0.5rem;
}

.left-contact .contact-2 {
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.contact-2 img {
  width: 3rem;
}

.contact-2 p {
  font-family: "ibm plex sans";
  font-size: 16px;
  font-weight: bold;
  padding-top: 0.5rem;
}

.contact-2 span {
  font-family: "ibm plex sans";
  font-size: 16px;
  font-weight: bold;
  padding-top: 0.5rem;
}

.right-contact {
  width: 60%;
  padding: 2rem;
  text-align: center;
}

.form-container {
  display: flex;
  gap: 2%;
}

.right-contact .form-container input {
  color: #001f45;
  font-family: "ibm plex sans";
  background: #f0f9ff;
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 55px;
  padding-left: 1rem;
}

textarea {
  color: #001f45;
  background: #f0f9ff;
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: 400;
  border: none;
  border-radius: 4px;
  width: 100%;
  height: 250px;
  padding: 1rem 1rem;
  resize: none;
}

.form-container input:focus {
  background: white;
  outline: none;
  border: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    to bottom right,
    #52acff 0%,
    #ffe32c 100%
  );
}

textarea:focus {
  background: white;
  outline: none;
  border: 3px solid;
  border-image-slice: 1;
  border-image-source: linear-gradient(
    to bottom right,
    #52acff 0%,
    #ffe32c 100%
  );
}

@media screen and (min-width: 1101px) and (max-width: 1300px) {
  .contact {
    display: block;
  }
  .left-contact {
    width: 100%;
    height: 500px;
    text-align: center;
    border-radius: 0 0 20px 20px;
  }
  .right-contact {
    width: 100%;
  }
  .left-contact .contact-1 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
  .left-contact .contact-2 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  #Section-4 {
    background: white;
    margin-left: 0;
    padding: 3rem;
    color: #001f45;
  }
  .contact {
    display: block;
  }
  .left-contact {
    width: 100%;
    height: 500px;
    text-align: center;
    border-radius: 0 0 20px 20px;
  }
  .right-contact {
    width: 100%;
  }
  .left-contact .contact-1 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
  .left-contact .contact-2 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
}

@media screen and (min-width: 501px) and (max-width: 700px) {
  #Section-4 {
    background: white;
    margin-left: 0;
    padding: 3rem;
    color: #001f45;
  }
  .contact {
    display: block;
    width: 95%;
  }
  .left-contact {
    width: 100%;
    height: 550px;
    text-align: center;
    border-radius: 0 0 20px 20px;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

input {
    margin-bottom: 2%;
  }

  .right-contact {
    width: 100%;
  }
  .left-contact .contact-1 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
  .left-contact .contact-2 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
}

@media screen and (max-width: 500px) {
  #Section-4 {
    background: white;
    margin-left: 0;
    padding: 3rem 1rem;
    color: #001f45;
  }
  .contact {
    display: block;
    width: 95%;
  }
  .form-container {
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
  }

 input {
    margin-bottom: 2%;
  }

  .left-contact {
    width: 100%;
    height: 580px;
    text-align: center;
    border-radius: 0 0 20px 20px;
  }
  .right-contact {
    width: 100%;
    padding: 1.5rem 1rem;
  }
  .left-contact .contact-1 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
  .left-contact .contact-2 {
    width: 100%;
    margin-bottom: 1.5rem;
    display: block;
    gap: 1.5rem;
  }
}

/* Footer */

footer {
  background: #00295a;
  margin-left: 10%;
  padding: 3rem;
  color: white;
}

footer h4 {
  margin-bottom: 0.5rem;
}

footer p {
  color: white;
  margin-bottom: 1.5rem;
}

footer .logo {
  width: 10rem;
  margin-bottom: 1.5rem;
}

.footer-section {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-gap: 2rem;
  justify-items: center;
  margin-bottom: 4rem;
}

footer span {
  color: white;
}

.footer-section-1 svg {
  font-size: 36px;
  color: white;
  transition: all 0.3s ease-in-out;
}

.footer-section-1 svg:hover {
  color: #ffe32c;
  transition: all 0.3s ease-in-out;
}

.footer-section-1 svg:not(.fa-facebook-f) {
  padding-left: 0.5rem;
}

.footer-icon-1 {
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-icon-1 span {
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: bold;
}

.footer-icon-2 {
  width: 100%;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.footer-icon-2 span {
  font-family: "ibm plex sans";
  font-size: 14px;
  font-weight: bold;
}

.info {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.info a {
  width: 100%;
  color: white;
  font-family: "ibm plex sans";
  font-size: 16px;
  font-weight: normal;
}

.copyright {
  text-align: center;
  font-weight: normal;
  font-size: 16px;
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  footer {
    margin-left: 0;
  }
}

@media screen and (max-width: 700px) {
  footer {
    margin-left: 0;
  }
  .footer-section {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-gap: 0;
    justify-items: flex-start;
    align-items: center;
  }

  .footer-section-2 {
    margin-bottom: -6rem;
  }

  .footer-section-3 {
    margin-bottom: -6rem;
  }
  .copyright {
    font-size: 14px;
  }
}

/* --------------------------------------------------- */
/* Assurance-dommage-ouvrages */

header .right-header-2 {
  width: 90%;
  height: 100%;
  background: url(img/Header-2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  text-align: center;
  position: relative;
  margin-left: 10%;
}

.right-header-2 nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right-header-2 .header-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3rem;
}

/* -------------------------------------------------------- */
/* Assurance-responsabilité-civile-pro */

header .right-header-3 {
  width: 90%;
  height: 100%;
  background: url(img/Header-3.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  text-align: center;
  position: relative;
  margin-left: 10%;
}

.right-header-3 nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right-header-3 .header-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3rem;
}

/* --------------------------------------------- */
/*  Assurance construction */

header .right-header-4 {
  width: 90%;
  height: 100%;
  background: url(img/Header-4.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  text-align: center;
  position: relative;
  margin-left: 10%;
}

.right-header-4 nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right-header-4 .header-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3rem;
}

/* ------------------------------------------- */
/*  Assurance décennale */

header .right-header-5 {
  width: 90%;
  height: 100%;
  background: url(img/Header-5.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  text-align: center;
  position: relative;
  margin-left: 10%;
}

.right-header-5 nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.right-header-5 .header-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3rem;
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  /* --------------------------------------------------- */
  /* Assurance-dommage-ouvrages */

  .top-header-2 {
    width: 100%;
    height: 90%;
    background: url(img/Header-2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-2 nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-header-2 .header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 3rem;
  }

  /* -------------------------------------------------------- */
  /* Assurance-responsabilité-civile-pro */

  .top-header-3 {
    width: 100%;
    height: 90%;
    background: url(img/Header-3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-3 nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-header-3 .header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 3rem;
  }

  /* --------------------------------------------- */
  /*  Assurance construction */

  .top-header-4 {
    width: 100%;
    height: 90%;
    background: url(img/Header-4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-4 nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-header-4 .header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 3rem;
  }

  /* ------------------------------------------- */
  /*  Assurance décennale */

  .top-header-5 {
    width: 100%;
    height: 90%;
    background: url(img/Header-5.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-5 nav {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .top-header-5 .header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 3rem;
  }
}

@media screen and (max-width: 700px) {
  /* --------------------------------------------------- */
  /* Assurance-dommage-ouvrages */

  .top-mobile .top-header-mobile-2 {
    width: 100%;
    height: 100%;
    background: url(img/Header-2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  /* -------------------------------------------------------- */
  /* Assurance-responsabilité-civile-pro */

  .top-mobile .top-header-mobile-3 {
    width: 100%;
    height: 100%;
    background: url(img/Header-3.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  /* --------------------------------------------- */
  /*  Assurance construction */

  .top-mobile .top-header-mobile-4 {
    width: 100%;
    height: 100%;
    background: url(img/Header-4.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  /* ------------------------------------------- */
  /*  Assurance décennale */

  .top-mobile .top-header-mobile-5 {
    width: 100%;
    height: 100%;
    background: url(img/Header-5.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }
}

/* ----------------------------------------------- */
/* confirmation */

header .confirmation {
  width: 90%;
  height: 100%;
  background: white;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem;
  text-align: center;
  position: relative;
  margin-left: 10%;
}

.confirmation .header-content {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 0 3rem;
}

.confirmation h2 {
  margin-bottom: 3%;
}

.confirmation h2:after {
  display: inline-block;
  margin: 0 0 10px 15px;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: #ffd200;
  width: 8%;
  border-radius: 50px;
}
.confirmation h2:before {
  display: inline-block;
  margin: 0 15px 10px 0;
  height: 3px;
  content: " ";
  text-shadow: none;
  background-color: #ffd200;
  width: 8%;
  border-radius: 50px;
}

.confirmation img{
  width: 160px;
  margin-bottom: 2rem;
}

.confirmation p{
  font-size: 24px;
  margin-bottom: 1rem;
}

@media screen and (min-width: 701px) and (max-width: 1100px) {
  header {
    display: none;
  }
  .top-mobile {
    display: none;
  }
  .header-mobile {
    width: 100%;
    height: 100vh;
    display: block;
  }
  .header-mobile .top-header-confirmation {
    width: 100%;
    height: 90%;
    background: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-confirmation .header-content {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0 3rem;
  }

  .top-header-confirmation h2 {
    margin-bottom: 3%;
  }
  
  .top-header-confirmation h2:after {
    display: inline-block;
    margin: 0 0 10px 15px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #ffd200;
    width: 8%;
    border-radius: 50px;
  }
  .top-header-confirmation h2:before {
    display: inline-block;
    margin: 0 15px 10px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #ffd200;
    width: 8%;
    border-radius: 50px;
  }

  .top-header-confirmation img{
    width: 150px;
    margin-bottom: 1rem;
  }
}


@media screen and (min-width: 451px) and (max-width: 700px) {
  header {
    display: none;
  }
  .header-mobile {
    display: none;
  }

  .top-mobile {
    display: block;
  }
  .topnav {
    display: block;
    overflow: hidden;
    background-color: #001f45;
    padding: 2rem;
    position: relative;
  }

  .topnav #myLinks {
    display: none;
  }

  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 18px;
    display: block;
    text-align: center;
  }

  .topnav ul li {
    font-family: "ibm plex sans";
    font-size: 18px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease-in-out;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }

  .topnav #myLinks a:hover {
    background-color: #001f45;
  }

  .topnav ul .child-1 {
    color: #ffd200;
  }

  .topnav ul li:hover {
    color: #ffd200;
    transition: all 0.3s ease-in-out;
  }

  .top-header-mobile-confirmation {
    width: 100%;
    height: 100%;
    background: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-mobile-confirmation img{
    width: 120px;
    margin-bottom: 1rem;
  }

  .top-header-mobile-confirmation h2 {
    margin-bottom: 3%;
  }
  
  .top-header-mobile-confirmation h2:after {
    display: inline-block;
    margin: 0 0 10px 15px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #ffd200;
    width: 8%;
    border-radius: 50px;
  }
  .top-header-mobile-confirmation h2:before {
    display: inline-block;
    margin: 0 15px 10px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #ffd200;
    width: 8%;
    border-radius: 50px;
  }

  .topnav p {
    color: #001f45;
    font-family: "ibm plex sans";
    font-size: 18px;
    font-weight: bold;
    background: #ffd200;
    padding: 0.8rem 1.7rem;
    border-radius: 50px;
    cursor: pointer;
  }

  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 2rem;
    top: 2.8rem;
    font-size: 24px;
  }

  .topnav img {
    width: 200px;
  }


}

@media screen and (max-width: 450px) {
  header {
    display: none;
  }
  .header-mobile {
    display: none;
  }

  .top-mobile {
    display: block;
  }
  .topnav {
    display: block;
    overflow: hidden;
    background-color: #001f45;
    padding: 1.5rem 2rem;
    position: relative;
  }

  .topnav #myLinks {
    display: none;
  }

  .topnav a {
    color: white;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 16px;
    display: block;
    text-align: center;
  }

  .topnav ul li {
    font-family: "ibm plex sans";
    font-size: 16px;
    font-weight: bold;
    color: white;
    transition: all 0.3s ease-in-out;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }
  .topnav #myLinks {
    margin-top: 2rem;
  }

  .topnav #myLinks a:hover {
    background-color: #001f45;
  }

  .topnav ul .child-1 {
    color: #ffd200;
  }

  .topnav ul li:hover {
    color: #ffd200;
    transition: all 0.3s ease-in-out;
  }

  .top-header-mobile-confirmation {
    width: 100%;
    height: 100%;
    background: white;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3rem;
    text-align: center;
    position: relative;
    margin-left: 0;
  }

  .top-header-mobile-confirmation img{
    width: 100px;
    margin-bottom: 1rem;
  }

  .topnav a.icon {
    background: black;
    display: block;
    position: absolute;
    right: 2rem;
    top: 2.2rem;
    font-size: 18px;
  }

  .top-header-mobile-confirmation h2 {
    margin-bottom: 3%;
  }
  
  .top-header-mobile-confirmation h2:after {
    display: inline-block;
    margin: 0 0 10px 15px;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #ffd200;
    width: 8%;
    border-radius: 50px;
  }
  .top-header-mobile-confirmation h2:before {
    display: inline-block;
    margin: 0 15px 10px 0;
    height: 3px;
    content: " ";
    text-shadow: none;
    background-color: #ffd200;
    width: 8%;
    border-radius: 50px;
  }
}


 
 
/* Mark input boxes that gets an error on validation: */
input.invalid {
  background-color: #ffdddd;
}

/* Hide all steps by default: */
.tab {
  display: none;
}

#prevBtn {
  background-color: #bbbbbb;
}