/* 
0-600px;   Phone
600-900px;   tablet
900-1200px;   tablet landscape
1200-1800px;   normal;
1800px : big desktop


*/
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
  scroll-behavior: smooth;
  scroll-padding-top: 2rem;
}

a {
  color: inherit;
}

html {
  font-size: 62.5%;
}
@media (max-width: 75em) {
  html {
    font-size: 56.25%;
  }
}
@media (max-width: 56.25em) {
  html {
    font-size: 50%;
  }
}
body {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #003459;
}

.heading-primary {
  transition: all 0.3s;
  color: transparent;
  backface-visibility: hidden;
  background-image: linear-gradient(to right bottom, rgba(86, 67, 250, 0.8), #2998ff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.heading-primary:hover {
  transform: scale(1.03);
  transition: all 0.3s;
}

.heading-secondary {
  text-transform: uppercase;
  font-size: 5rem;
  letter-spacing: 2rem;
  justify-content: center;
  display: inline-block;
  color: transparent;
  background-image: linear-gradient(to right, #42C2FF, #85F4FF);
  transition: all 0.2s;
  -webkit-background-clip: text;
  background-clip: text;
}
@media (max-width: 37.5em) {
  .heading-secondary {
    font-size: 4rem;
    letter-spacing: 0.8rem;
  }
}
.heading-secondary:hover {
  transform: scale(1.04);
  transition: all 0.2s;
}

.heading-2 {
  font-size: 5rem;
  color: #003459;
  transition: all 0.3s;
  letter-spacing: 0.7rem;
}
.heading-2:hover {
  transform: scale(1.1);
  transition: all 0.3s;
}

.t_0 {
  transition: none !important;
  min-width: 25rem !important;
}

.u-padding-bottom-7 {
  padding-bottom: 7rem;
}

.u-padding-top-small {
  padding-top: 2rem;
}

.u-padding-top-medium4 {
  padding-top: 4rem;
}

.u-padding-top-medium {
  padding-top: 6rem;
}

.u-padding-top-large {
  padding-top: 8rem;
}

.u-padding-top-larger {
  padding-top: 10rem;
}

.u-margin-top-small {
  margin-top: 2rem;
}

.u-margin-top-medium {
  margin-top: 6rem;
}

.u-margin-top-large {
  margin-top: 8rem;
}

.u-margin-bottom-1 {
  margin-bottom: 0.5rem;
}

.u-margin-bottom-small {
  margin-bottom: 2rem;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem;
}

.u-margin-bottom-large {
  margin-bottom: 6rem;
}

.u-margin-bottom-7 {
  margin-bottom: 7rem;
}

.u-margin-bottom-8 {
  margin-bottom: 8rem;
}

.u-margin-bottom-9 {
  margin-bottom: 9rem;
}

.u-margin-bottom-10 {
  margin-bottom: 10rem;
}

.u-margin-top-10 {
  margin-top: 13rem !important;
}

.underline_1::after {
  content: "";
  position: absolute;
  left: 28px;
  /* right: 50px; */
  /* top: 20px; */
  display: inline-block;
  height: 2rem;
  width: 7.5em;
  border-bottom: 5rem solid;
  margin-top: 10px;
  transition: opacity 0.35s, transform 0.35s;
  transform: scale(0, 1);
}

.underline_1:hover::after {
  opacity: 1;
  transform: scale(1);
}

.u-center-text {
  text-align: center;
}

.u-center-item {
  display: flex;
  justify-content: center;
}

.u-padding-top-5 {
  padding-top: 5rem;
}

.underline {
  height: 0.3rem;
  margin-bottom: 1.4rem;
  background-color: rgb(52, 75, 75);
  margin-left: auto;
  margin-right: auto;
}

.underline_2 {
  content: "";
  width: 24rem;
  height: 0.3rem;
  margin-bottom: 1.4rem;
  background-image: linear-gradient(to right, #42C2FF, #85F4FF);
  transition: all 0.2s;
  transition: opacity 0.35s, transform 0.35s;
  transform: scale(0.0001);
  margin-left: auto;
  margin-right: auto;
}

.heading-secondary:hover + .underline_2 {
  opacity: 1;
  transform: scale(1.3) translate(-0.8rem);
}

.btn, .btn:link, .btn:visited {
  padding: 1.2rem 2.5rem;
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.15s;
  text-decoration: none;
  letter-spacing: 0.4rem;
  display: inline-block;
  background-color: #ffffff;
}
@media (max-width: 75em) {
  .btn, .btn:link, .btn:visited {
    font-size: 2rem;
    padding: 1.5rem 6.5rem;
    font-size: 1.7rem;
    border-radius: 15rem;
  }
}
.btn-r {
  border-radius: 4rem;
  padding-left: 5rem !important;
  padding-right: 5rem !important;
}
.btn_color-blue {
  background-color: rgba(12, 13, 88, 0.9921568627) !important;
  color: #ffffff;
}
.btn:hover {
  transform: translateY(-0.2rem);
  box-shadow: 0 1rem 2rem;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.2);
}
.btn:hover::after {
  transform: scale(2.8);
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
  background-color: #777;
}
.btn:active {
  transform: translateY(0.1rem);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
}
.btn-i {
  transform: skew(-25deg);
}
.btn-i span {
  display: inline-block;
  transform: skew(25deg);
}
.btn-i:hover {
  transform: translateY(-0.2rem) skew(-25deg);
}
.btn-i:hover::after {
  transform: scale(2.8);
  transform: scaleX(1.4) scaleY(1.6);
  opacity: 0;
  background-color: #777;
}
.btn-i:active {
  transform: translateY(0.1rem) skew(-25deg);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
  color: #eb0606;
}

.nav-btn {
  margin-left: 20px;
  padding: 9px 25px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s ease 0s;
  color: #243763;
}
@media (max-width: 37.5em) {
  .nav-btn {
    display: none;
  }
}
.nav-btn:hover {
  background-color: #03045e;
  color: #caf0f8;
  transition: all 0.3s ease 0s;
}
.nav-btn:active {
  top: -1rem;
}

.card {
  perspective: 150rem;
  -moz-perspective: 150rem;
  -webkit-perspective: 150rem;
  position: relative;
  height: 41rem;
  width: 41rem;
}
.card__side {
  height: 41rem;
  font-size: 2rem;
  border-radius: 50%;
  transition: all 0.6s ease;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  backface-visibility: hidden;
  overflow: hidden;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
}
.card__side--front {
  background-color: #fff;
}
.card__side--back {
  transform: rotateY(180deg);
}
.card__side--back-1 {
  background-image: linear-gradient(to right bottom, #ffb900, #ff7730);
}
.card__side--back-2 {
  background-image: linear-gradient(to right bottom, #85F4FF, #42C2FF);
}
.card__side--back-3 {
  background-image: linear-gradient(to right bottom, #85F4FF, #ff783093);
}
.card:hover .card__side--front {
  transform: rotateY(-180deg);
}
.card:hover .card__side--back {
  transform: rotateY(0);
}
.card__cta {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  text-align: center;
  padding-top: 5rem;
}
.card__cta_text-1 {
  color: #fff;
}
.card__cta_text-2 {
  color: rgb(255, 255, 255);
}
.card__cta_btn {
  margin-top: 20%;
}

.card2 {
  width: 28.5rem;
  height: 30rem;
  background-color: #fff;
  padding: 2rem 1rem;
  border-radius: 1.2rem;
  transition: all 0.3s;
  box-shadow: 0rem 1rem 3rem rgba(0, 0, 0, 0.15);
}
@media (max-width: 37.5em) {
  .card2 {
    transform: scale(1.12);
    padding: 1.2rem 1.2rem 3.8rem 1.2rem;
  }
}
.card2__content_1 {
  cursor: pointer;
  overflow: hidden;
  background-color: aliceblue;
  position: relative;
  transition: all 0.3s;
  border-radius: 1.2rem;
  height: 18rem;
}
.card2__content_1-img {
  border-radius: 1rem;
  height: inherit;
  transition: all 5s ease-in-out;
}
.card2__content_1-img img {
  position: center bottom;
  width: 28.5rem;
  height: 16.6rem;
  transform: scale(1.1) translate(2%, 4.5%);
  border-radius: 1rem;
  transition: all 0.5s;
}
.card2__content_1-text {
  display: grid;
  opacity: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 25%);
  transition: 0.5s;
}
.card2__content_1-text a {
  font-size: 1.7rem;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  background-color: rgba(143, 198, 226, 0.8);
  color: rgba(253, 253, 253, 0.9647058824);
  background-color: rgba(150, 150, 137, 0.582);
  padding: 0rem 0.8rem;
  transition: 0.3s;
  border-radius: 0.6rem;
}
.card2__content_1-text a:not(:last-child) {
  margin-bottom: 1.8rem;
}
.card2__content_1-text a:hover {
  background-color: #999;
}
.card2__content_1:hover img {
  filter: blur(1.5px);
  transform: scale(1.25) translate(2%, 4.5%);
  transition: all 0.5s;
}
.card2__content_1:hover .card2__content_1-text {
  opacity: 1;
  transform: translate(-50%, -20%);
  transition: all 0.5s;
}
.card2__content_2 {
  margin-top: 4rem;
  margin-top: 4.5rem;
}
.card2__content_2-heading {
  font-size: 2.2rem;
  letter-spacing: 0.18rem;
  display: inline-block;
}
.card2__content_2-tech {
  display: flex;
  text-transform: uppercase;
  font-size: 2rem;
  padding-top: 1rem;
}
.card2__content_2-tech h5 {
  padding: 0rem 0.6rem;
  border-radius: 0.6rem;
  line-height: normal;
  background-color: rgba(203, 213, 225, 0.8);
  transition: all 0.2s;
  display: inline-block;
}
.card2__content_2-tech h5:not(:last-child) {
  margin-right: 1rem;
}
.card2:hover {
  box-shadow: 0rem 1rem 3rem rgba(0, 0, 0, 0.3);
}

.disable {
  pointer-events: none !important;
  opacity: 0.2;
  transition: 0.3s;
  cursor: none !important;
}

.education {
  width: 75%;
  min-width: 1rem;
  margin: 0 auto;
  box-shadow: 0rem 3rem 6rem rgba(0, 0, 0, 0.2);
  background-color: rgba(255, 255, 255, 0.6);
  border-radius: 3px;
  padding: 4rem 5rem 4rem 9rem;
  font-size: 1.6rem;
  transform: skewX(12deg);
  display: flex;
  gap: 3%;
  padding: auto;
  padding: auto;
  padding: auto;
  padding: auto;
}
.education > * {
  transform: skewX(-12deg);
}
.education__shape {
  width: 15rem;
  position: relative;
  transform: skewX(-12deg);
  border-radius: 15rem;
}
.education__img {
  transition: all 0.5s;
  transform: translateX(-0.2rem) scale(1.2);
}
.education__text {
  height: 85%;
  margin: auto 0;
  transform: skewX(-12deg);
}
.education__caption {
  width: 10rem;
  border-radius: 0.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 170%);
  background-color: rgba(143, 143, 123, 0.356);
  color: rgba(253, 253, 253, 0.8823529412);
  font-weight: 900;
  backface-visibility: hidden;
  opacity: hidden;
  text-align: center;
  transition: all 0.5s;
  opacity: 0;
}
.education:hover .education__caption {
  opacity: 1;
  transform: translate(-47%, -20%);
}
.education:hover .education__img {
  transform: translate(-0.2rem) scale(1);
  filter: blur(0.1rem);
  transition: all 0.5s;
}

.tool1__img {
  display: inline-flex;
  transition: all 0.2s;
}
.tool1__img-1 {
  position: absolute !important;
  transition: all 0.2s;
}
.tool1__img-2 {
  opacity: 0;
  transition: all 0.2s;
}

.tool1__img:hover .tool1__img-1 {
  opacity: 0;
  transition: all 0.2s;
}

.tool1__img:hover .tool1__img-2 {
  opacity: 1;
  transition: all 0.2s;
}

.profile-pic {
  height: 41rem;
  border-radius: 70%;
  border: 0rem solid #9696e5;
}

.feature-box {
  background-color: rgba(255, 255, 255, 0.8);
  font-size: 1.5rem;
  padding: 2.5rem;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  transition: transform 0.3s;
}
.feature-box__icon {
  font-size: 6rem;
  margin-bottom: 0.5rem;
  display: inline-block;
  background-image: linear-gradient(to right, #85F4FF, #42C2FF);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.feature-box:hover {
  transform: translateY(-1.5rem) scale(1.03);
}
.form__input {
  align-items: center;
  font-size: 1.5rem;
  font-family: inherit;
  color: inherit;
  padding: 1.5rem 2rem;
  border-radius: 1rem;
  border: none;
  border-bottom: 3px solid transparent;
  width: 40%;
  transition: all 0.3s;
}
.form__input:focus {
  outline: none;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.15);
  border-bottom: 3px solid gray;
}
.form__input:focus:invalid {
  border-bottom: 3px solid #ff7730;
}
.form__input::-webkit-input-placeholder {
  color: #999;
}
.form__label {
  font-size: 1.2rem;
  font-weight: 700;
  margin-left: 2rem;
  margin-top: 0.7rem;
  display: block;
  transition: all 0.3s;
}
.form__input:-moz-placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem);
}
.form__input:placeholder-shown + .form__label {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4rem);
}

.input_message {
  height: 10rem;
}

.composition {
  position: relative;
}
.composition__photo {
  width: 10%;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.4);
  border-radius: 1rem;
  z-index: 10;
  transition: all 0.2s;
  outline-offset: 2rem;
}
@media (max-width: 56.25em) {
  .composition__photo {
    float: left;
    background-color: 255;
    position: relative;
    width: 33.3333%;
  }
}
.composition__photo--p1 {
  left: 0;
  top: -2rem;
}
@media (max-width: 56.25em) {
  .composition__photo--p1 {
    top: 0;
    transform: scale(1.2);
  }
}
.composition__photo--p2 {
  right: 0;
  top: 2rem;
}
@media (max-width: 56.25em) {
  .composition__photo--p2 {
    top: -1.5rem;
    transform: scale(1.37);
    z-index: 100;
  }
}
.composition__photo--p3 {
  left: 20%;
  top: 10rem;
}
@media (max-width: 56.25em) {
  .composition__photo--p3 {
    top: 0rem;
    left: 0;
    transform: scale(1.2);
  }
}
.composition__photo:hover {
  outline: 1.5rem solid yellowgreen;
  transform: scale(1.1) translateY(-0.5rem);
  box-shadow: 0 2.5rem 4rem rgba(0, 0, 0, 0.5);
  z-index: 20;
}
@media (max-width: 56.25em) {
  .composition__photo:hover {
    outline: 1rem solid yellow;
    transform: scale(1.9) translateY(-0.9rem);
    z-index: 230;
  }
}
.composition:hover .composition__photo:not(:hover) {
  transition: all 0.2s;
  transform: scale(0.95);
}
@media (max-width: 56.25em) {
  .composition:hover .composition__photo:not(:hover) {
    transform: scale(1.1);
  }
}

.timeline {
  padding: 1rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}
@media (max-width: 37.5em) {
  .timeline {
    padding-left: 3rem;
  }
}
.timeline__list {
  margin-left: 4.5rem;
}
.timeline_item {
  position: relative;
  padding-left: 2.5rem;
  padding-bottom: 3rem;
}
@media (max-width: 37.5em) {
  .timeline_item {
    padding-left: 3.6rem;
  }
}
.timeline_item-title {
  font-size: 3.2rem;
  margin-bottom: 0.25rem;
}
@media (max-width: 37.5em) {
  .timeline_item-title {
    font-size: 2.4rem;
  }
}
.timeline_item-course {
  font-size: 2.2rem;
  background-color: rgba(203, 213, 225, 0.8);
  transition: all 0.2s;
  display: table;
  opacity: 0.8;
  padding: 0.2rem 1.5rem 0.2rem 1.5rem;
  transform: translateX(-0.1rem);
  line-height: normal;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}
.timeline_item-course span {
  display: none;
  font-size: 1rem;
  line-height: -11rem;
}
.timeline_item-date {
  font-size: 1.8rem;
  letter-spacing: 0.24rem;
  color: rgb(60, 117, 139);
}
.timeline_item {
  position: relative;
}

.timeline_item:not(:last-child):before {
  content: "";
  position: absolute;
  top: -3.88rem;
  left: -2.068rem;
  height: calc(115% + 3.39rem);
  width: 0.15rem;
  width: 0.3rem;
  background: #2b2a2a;
  border-radius: 0.1rem;
}
@media (max-width: 75em) {
  .timeline_item:not(:last-child):before {
    top: -3.7rem;
  }
}

.timeline_item::after {
  content: "";
  position: absolute;
  top: 2.2rem;
  left: -2.6rem;
  height: 1.2rem;
  width: 1.2rem;
  background: rgb(0, 52, 89);
  border-radius: 50%;
  box-shadow: 0 0 0 4px hsl(193, 16%, 78%);
}

.timeline_title-wrapper {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 56.25em) {
  .timeline_title-wrapper .iconBox {
    transform: translateX(-0.49rem);
  }
}
.timeline_title-wrapper-text {
  font-size: 3.8rem;
  font-weight: 900;
}

.logo {
  font-weight: bolder;
  margin-right: auto;
  text-decoration: none;
  font-size: 2.5rem;
  cursor: pointer;
  transition: all 0.3s;
}
@media (max-width: 37.5em) {
  .logo {
    font-size: 3.2rem;
  }
}
.logo:hover {
  color: #e46e0f;
  transition: all 0.3s;
}

.contact_hidden {
  display: none !important;
}
@media (max-width: 37.5em) {
  .contact_hidden {
    display: inline-block !important;
  }
}

.hidden {
  display: none !important;
}

.navigation {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: rgba(255, 255, 255, 0.98);
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0rem 10%;
}
@media (max-width: 37.5em) {
  .navigation {
    padding-left: 5%;
  }
}
.navigation__checkbox {
  display: none;
}
@media (max-width: 37.5em) {
  .navigation {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  .navigation__button {
    background-color: #fff;
    height: 3.8rem;
    width: 3.27rem;
    position: fixed;
    top: 2rem;
    right: 7.2%;
    cursor: pointer;
    z-index: 400;
  }
  .navigation__background {
    background-color: #03045e;
    height: 2rem;
    width: 2rem;
    position: fixed;
    top: 2rem;
    right: 7.2%;
    z-index: 300;
    background-image: radial-gradient(#85F4FF, #42C2FF);
  }
}
.navigation__nav {
  padding: 0;
  transition: transform 0.3s ease-in-out;
}
@media (max-width: 37.5em) {
  .navigation__nav {
    height: 100vh;
    width: 100%;
    display: none;
  }
}
.navigation__list {
  list-style-type: none;
}
@media (max-width: 37.5em) {
  .navigation__list {
    display: grid;
    justify-content: center;
    margin: 10rem auto auto auto;
  }
}
.navigation__list li {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
}
@media (max-width: 37.5em) {
  .navigation__list li {
    font-size: 5rem;
  }
}
.navigation__list a {
  transition: all 0.3s ease 0s;
  padding: 1rem 2rem;
  text-decoration: none;
  margin: 1rem 0rem;
}
.navigation__list a:hover {
  background-color: #03045e;
  color: #e46e0f;
  transition: all 0.15s;
}
.navigation__list a:active {
  top: 0.1rem;
}
.navigation__link {
  display: inline-block;
  position: relative;
  line-height: normal;
}
.navigation__checkbox:checked ~ .navigation__nav {
  display: grid;
}
@media (max-width: 37.5em) {
  .navigation__icon {
    margin-top: 1.8rem;
    position: relative;
  }
  .navigation__icon, .navigation__icon::before, .navigation__icon::after {
    width: 3.27rem;
    height: 2px;
    background-color: #333;
    display: inline-block;
  }
  .navigation__icon::before, .navigation__icon::after {
    content: " ";
    position: absolute;
    left: 0;
  }
  .navigation__icon::before {
    top: -1rem;
  }
  .navigation__icon::after {
    top: 1rem;
  }
  .navigation__checkbox:checked + .navigation__button .navigation__icon {
    background-color: transparent;
  }
  .navigation__checkbox:checked + .navigation__button .navigation__icon::before {
    top: 0;
    transform: rotate(138deg);
  }
  .navigation__checkbox:checked + .navigation__button .navigation__icon::after {
    top: 0;
    transform: rotate(-135deg);
  }
}

.row {
  max-width: 70%;
  display: flex;
  margin: 0 auto;
}
@media (max-width: 75em) {
  .row {
    max-width: 90%;
  }
}
@media (max-width: 56.25em) {
  .row {
    flex-direction: column;
  }
}
.row:not(:last-child) {
  margin-bottom: 8rem;
}
@media (max-width: 56.25em) {
  .row:not(:last-child) {
    margin-bottom: 6rem;
  }
}

[class^=col-]:not(:last-child) {
  margin-right: 6rem;
}
@media (max-width: 56.25em) {
  [class^=col-]:not(:last-child) {
    margin-right: 0;
    margin-bottom: 6rem;
  }
}
@media (max-width: 56.25em) {
  [class^=col-] {
    width: 100% !important;
  }
}

.col-1-of-2 {
  width: 47.2%;
  background-color: skyblue;
}

.col-1-of-3 {
  width: 30.5333333333%;
}

.col-1-of-4 {
  width: 22.2%;
}

.home {
  width: 100%;
  display: flex;
  transition: all 0.2s;
}
@media (max-width: 56.25em) {
  .home {
    margin-bottom: 4rem;
    flex-direction: column;
    gap: 12rem;
  }
}
@media (max-width: 75em) {
  .home {
    margin: 0 auto;
    margin-bottom: 4rem;
  }
}
.home__text {
  width: inherit;
  transition: all 0.2s;
}
@media (max-width: 56.25em) {
  .home__text {
    margin: 0 auto;
  }
}
.home__text-name {
  background-color: #42C2FF;
  display: inline-block;
  width: 0%;
  transition: all 0.5s;
}
.home__text h1 {
  font-size: 10rem;
  margin-bottom: 0;
  line-height: 1;
  letter-spacing: 2rem;
}
@media (max-width: 37.5em) {
  .home__text h1 {
    letter-spacing: 1rem;
    font-size: 6.9rem;
  }
}
.home__text h2 {
  font-size: 3rem;
  padding-left: 0.5rem;
  color: #42C2FF;
}
.home__text h3 {
  font-size: 6rem;
  padding-left: 0.3rem;
  color: #e2cc09;
}
@media (max-width: 37.5em) {
  .home__text h3 {
    font-size: 3rem;
  }
}
.home__text h4 {
  font-size: 2.5rem;
  padding-top: 1rem;
  padding-left: 0.7rem;
}
.home__text h4 strong {
  color: #eb0606;
}
.home__text p {
  font-size: 2rem;
  padding-left: 0.7rem;
  padding-top: 1.8rem;
}
@media (max-width: 75em) {
  .home__text p {
    font-size: 2.5rem;
    padding-top: 1rem;
  }
}
.home__contact {
  display: flex;
  width: inherit;
}
@media (max-width: 75em) {
  .home__contact {
    padding-top: 2rem;
    flex-direction: column;
  }
}
.home__contact-1 {
  margin-right: 5rem;
}
@media (max-width: 37.5em) {
  .home__contact-1 {
    margin: 0 auto;
  }
}
@media (max-width: 75em) {
  .home__contact-1 {
    margin-top: 1rem;
  }
}
.home__contact-2 {
  display: inline-flex;
  gap: 2rem;
}
@media (max-width: 75em) {
  .home__contact-2 {
    padding-top: 3rem;
    transform: scale(1.1);
    gap: 3rem;
    margin-left: 2rem;
  }
}
@media (max-width: 37.5em) {
  .home__contact-2 {
    padding-top: 3rem;
    margin: 0 auto;
  }
}

.home__img {
  transition: all 0.2s;
  margin-left: auto;
}
@media (max-width: 37.5em) {
  .home__img {
    transform: scale(0.9);
  }
}
@media (max-width: 56.25em) {
  .home__img {
    margin: 0 auto;
  }
}

.project {
  width: 100%;
}
@media (max-width: 37.5em) {
  .project {
    margin-top: 5rem;
  }
}

.project-list {
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  justify-content: center;
}
@media (max-width: 37.5em) {
  .project-list {
    gap: 11rem;
  }
}

.about {
  display: flex;
  align-items: center;
  -moz-column-gap: 10rem;
       column-gap: 10rem;
}
@media (max-width: 75em) {
  .about {
    flex-direction: column;
  }
}
@media (min-width: 120.5em) {
  .about {
    gap: 15%;
  }
}
.about__img {
  margin-right: auto;
  margin-left: auto;
}
@media (min-width: 120.5em) {
  .about__img {
    padding-left: 15rem;
  }
}
.about__img img {
  justify-content: center;
}
@media (max-width: 37.5em) {
  .about__img img {
    width: 100%;
  }
}
.about__text {
  padding-left: 5rem;
  margin-right: auto;
  margin-left: auto;
  padding-bottom: 10rem;
}
@media (max-width: 75em) {
  .about__text {
    padding-left: 0;
  }
}
@media (max-width: 37.5em) {
  .about__text {
    padding-bottom: 0rem;
  }
}
.about__text_title {
  font-size: 3.2rem;
  color: #003459;
}
.about__text p {
  font-size: 2.4rem;
  color: #324d67;
}

.skill-tag {
  margin-top: 2.6rem;
  margin-right: 1.6rem;
  font-size: 1.8rem;
  background-color: rgba(203, 213, 225, 0.8);
  transition: all 0.2s;
  display: inline-block;
  opacity: 0.8;
  padding: 0.18rem 1.5rem 0.18rem 1.5rem;
  transform: translateX(-0.1rem);
  line-height: normal;
  border-radius: 0.5rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 37.5em) {
  .skill-tag {
    margin-top: 1.5rem;
  }
}

footer {
  background-color: #030427;
  color: #eee;
  font-size: 1.5rem;
  text-align: center;
  letter-spacing: 0.12rem;
  line-height: 3rem;
  padding-bottom: 1.2rem;
  padding-top: 1.2rem;
}

.link:link, .link:visited {
  color: #f7f7f7;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
}
.link:hover, .link:active {
  color: #42C2FF;
}
.link2:hover {
  background-color: #333;
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.4);
  transform: scale(1.2);
}

.section-home {
  background-color: #eaf0f5;
  -webkit-backdrop-filter: blur(10%);
          backdrop-filter: blur(10%);
  padding: 12rem 0 14rem 0;
}
@media (max-width: 56.25em) {
  .section-home {
    padding: 12rem 0 12rem 0;
  }
}
@media (max-width: 37.5em) {
  .section-home {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}

.section-education {
  padding: 8rem 0 8rem 0;
}
@media (max-width: 56.25em) {
  .section-education {
    padding: 6rem 0 6rem 0;
  }
}

.section-project {
  background-color: #eaf0f5;
  padding: 8rem 0;
}
@media (max-width: 37.5em) {
  .section-project {
    padding: 6rem 0 12rem 0;
  }
}

.section-about {
  padding: 8rem 0;
}

.section-contact {
  padding: 15rem 0;
  background-image: linear-gradient(to left top, #fff, rgba(153, 153, 153, 0.25));
}

.contact {
  background-image: linear-gradient(to right bottom, rgba(66, 194, 255, 0.1) 50%, rgba(153, 153, 153, 0.5) 100%, transparent 55%), url(/img/contact.jpg);
  background-size: cover;
  background-position: center;
  border-radius: 3px;
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.15);
  transition: all 0.3s;
  height: 54rem;
  width: 114rem;
  margin: 0 auto;
  text-align: center;
}
.contact:hover {
  box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.3);
  transition: all 0.3s;
}/*# sourceMappingURL=main.css.map */