:root {
  --blue: #0454B7;
  --black: #000;
  --white: #fff;
} 

@font-face {
  font-family: 'coolvetica';
  src: url('./fonts/coolvetica.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gothambook';
  src: url('./fonts/GothamBook.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'gothammedium';
  src: url('./fonts/GothamMedium.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

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

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-weight: 300;
  line-height: 1;
  color: var(--black);
  overflow-x: hidden;
}

h1 {
  font-family: 'coolvetica', sans-serif;
}

h2 {
  font-family: 'gothammedium', sans-serif;
}

p {
  font-family: 'gothambook', sans-serif;
}

ul {
  list-style: none;
}

a {
  text-decoration: none;
  cursor: pointer;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

button,
input[type='button'],
input[type='submit'],
input[type='reset'] {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
}

button:hover {
  cursor: pointer;
}

span {
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  letter-spacing: inherit;
}

img {
  display: block;
}

/*----------------------------*/
/*---------- HERO ------------*/
/*----------------------------*/

.hero {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-wrap {
  width: 80vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 2rem 0;
}

@media screen and (max-width: 1200px) {
  .nav-wrap {
    width: 90vw;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 2rem;
  }
}
.nav-desk, .logo, .empty {
  flex: 1;
}

@media screen and (max-width: 1200px) {
  .nav-desk, .logo, .empty {
    flex: none;
  }
}


.nav-desk {
  display: flex;
  height: 2.5rem;
  font-family: 'gothambook', sans-serif;
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 100;
  transition: text-shadow 0.3s ease;
}

@media screen and (max-width: 1600px) {
  .nav-desk {
    font-size: 2rem;
    height: 2rem;
  }
}

@media screen and (max-width: 1480px) {
  .nav-desk {
    font-size: 1.6rem;
    height: 1.6rem;
  }
}

.nav-desk a {
  padding: 0;
  margin: 0;
}

/* .nav-desk a:first-child, .nav-desk a:nth-child(2) {
  padding-right: 1.5rem;
  border-right: 1px solid #000;
}

.nav-desk a:nth-child(2), .nav-desk a:nth-child(3) {
  padding-left: 1.5rem;
} */

.nav-desk span {
  margin: 0 1.5rem;
}

.nav-desk a:hover {
  text-shadow: 0px 0px 2.5px var(--black);
}

.active {
  text-shadow: 0px 0px 2.5px var(--black);
}

/* @media screen and (max-width: 1480px) {
  .nav-desk a:hover, .active {
    text-shadow: none;
  }
} */

.logo {
  margin-top: 1.2rem;
  width: 22vw;
  display: flex;
  justify-content: center;
}

@media screen and (max-width: 1200px) {
  .logo {
    width: 60rem;
    margin-top: 0;
  }
}

@media screen and (max-width: 980px) {
  .logo {
    width: 50rem;
  }
}

@media screen and (max-width: 480px) {
  .logo {
    width: 100%;
  }
}

.logo img {
  width: 22vw;
}

@media screen and (max-width: 1200px) {
  .logo img {
    width: 70%;
    margin: 0 auto;
  }
}

.empty {
  visibility: hidden;
}

@media screen and (max-width: 1200px) {
  .empty {
    display: none;
  }
}

.hero-img {
  background: url(./img/home.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 41.75vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 11vh;
}

@media screen and (max-width: 1400px) {
  .hero-img {
    padding-bottom: 8vh;
  }
}

@media screen and (max-width: 1200px) {
  .hero-img {
    padding-bottom: 6vh;
  }
}

@media screen and (max-width: 980px) {
  .hero-img {
    padding-bottom: 4vh;
  }
}

@media screen and (max-width: 680px) {
  .hero-img {
    padding-bottom: 3vh;
  }
}

@media screen and (max-width: 480px) {
  .hero-img {
    background-size: cover;
    width: 100%;
    height: 25vh;
    padding-bottom: 2vh;
  }
}

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'coolvetica', sans-serif;
  font-size: 2.5rem;
  color: var(--white);
  text-transform: uppercase;
  width: 25vw;
  height: 11vh;
  background: var(--blue);
  transition: box-shadow 0.4s ease;
  letter-spacing: 1.5px;
}

@media screen and (max-width: 1480px) {
  .btn {
    font-size: 2.4rem;
    width: 30rem;
    height: 8rem;
    letter-spacing: 1.25px;
  }
}

@media screen and (max-width: 1200px) {
  .btn {
    font-size: 2rem;
    height: 6rem;
  }
}

@media screen and (max-width: 680px) {
  .btn {
    font-size: 1.6rem;
    width: 20rem;
    height: 5rem;
  }
}

@media screen and (max-width: 560px) {
  .btn {
    width: 15rem;
    height: 4rem;
  }
}

.btn:hover {
  cursor: pointer;
  box-shadow: 0px 0px 20px var(--black);
}


/*----------------------------*/
/*-------- SERVICES ----------*/
/*----------------------------*/

.services {
  width: 80vw;
  margin: 11vh auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

@media screen and (max-width: 1200px) {
  .services {
    width: 85vw;
    margin: 8vh auto;
  }
}

.services h1 {
  font-size: 4.8rem;
  font-weight: 300;
  margin-bottom: 11vh;
}

@media screen and (max-width: 1200px) {
  .services h1 {
    font-size: 4rem;
    font-weight: 300;
    margin-bottom: 8vh;
    text-align: center;
  }
}

@media screen and (max-width: 980px) {
  .services h1 {
    font-size: 3rem;
  }
}

.services-flex {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 5vw;
  row-gap: 3vw;
}

@media screen and (max-width: 980px) {
  .services-flex {
    flex-direction: column;
    align-items: center;
    gap: 3rem;
  }
}

.service {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 35vw;
  border: 2px solid var(--blue);
  border-radius: 100px;
  overflow: hidden;
  transition: box-shadow 0.4s ease;
  gap: 4rem;
}

@media screen and (max-width: 1200px) {
  .service {
    width: 40vw;
    border-radius: 50px;
    gap: 3rem;
  }
}

@media screen and (max-width: 980px) {
  .service {
    width: 70%;
  }
}

@media screen and (max-width: 680px) {
  .service {
    width: 100%;
  }
}

.service:hover {
  box-shadow: 0px 0px 20px var(--black);
}

.service-img-1 {
  background: url(./img/service-1.png);
}

.service-img-2 {
  background: url(./img/service-2.png);
}

.service-img-3 {
  background: url(./img/service-3.png);
}

.service-img-4 {
  background: url(./img/service-4.png);
}

.service-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 35vw;
  height: 36vw;
  border-bottom: 2.5px solid var(--blue);
  border-radius: 100px;
}

@media screen and (max-width: 1200px) {
  .service-img {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 40vw;
    height: 350px;
    border-radius: 50px;
  }
}

@media screen and (max-width: 980px) {
  .service-img {
    width: 100%;
    height: 350px;
  }
}

@media screen and (max-width: 480px) {
  .service-img {
    height: 300px;
  }
}

.service h2 {
  justify-self: center;
  font-size: 2.4rem;
  line-height: 25px;
  margin: 0 0 4rem 0;
  width: 80%;
  text-align: center;
}

@media screen and (max-width: 1200px) {
  .service h2 {
    font-size: 2rem;
    margin: 0 0 3rem 0;
  }
}

.btn-contact {
  margin-top: 11vh;
}

@media screen and (max-width: 1200px) {
  .btn-contact {
    font-size: 2.5rem;
    width: 28rem;
    height: 8rem;
  }
}

/*----------------------------*/
/*---------- COVER -----------*/
/*----------------------------*/

.cover {
  background: url(./img/cover.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 41.75vw;
  margin-bottom: 6vh;
}

@media screen and (max-width: 1200px) {
  .cover {
    margin-bottom: 8vh;
  }
}

/*----------------------------*/
/*--------- FOOTER -----------*/
/*----------------------------*/

.footer {
  background: var(--black);
  color: var(--white);
  width: 100vw;
}

.top {
  width: 80vw;
  margin: 0 auto;
  padding: 15vh 0;
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 1200px) {
  .top {
    width: 85vw;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 5rem;
  }
}

.links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
}

@media screen and (max-width: 1200px) {
  .links {
    align-items: center;
  }
}

.links h1 {
  text-transform: uppercase;
  font-size: 2rem;
  margin-bottom: 2.5rem;
  font-weight: 300;
}

.links nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 2.5rem;
}

@media screen and (max-width: 1200px) {
  .links nav {
    align-items: center;
  }
}

.links nav a {
  font-size: 2rem;
  font-family: 'gothambook', sans-serif;
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 0.5px;
  padding-top: 1rem;
}

.links nav a:hover {
  color: var(--blue);
}

.links-2 {
  margin-left: -10vw;
}

@media screen and (max-width: 1200px) {
  .links-2 {
    margin-left: 0;
  }
}

.bottom {
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 1px solid var(--white);
  padding: 3rem 0;
}

.bottom h1 {
  font-size: 2.2rem;
  font-weight: 300;
}

@media screen and (max-width: 1200px) {
  .bottom h1 {
    font-size: 1.6rem;
  }
}

.footer-logo {
  width: 31vw;
}

@media screen and (max-width: 1200px) {
  .footer-logo {
    width: 300px;
  }
}

@media screen and (max-width: 480px) {
  .footer-logo {
    width: 100%;
  }
}

.footer-logo img {
  width: 100%;
}


/*----------------------------*/
/*---------- ABOUT -----------*/
/*----------------------------*/

.hero-img-about {
  background: url(./img/about.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 41.75vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 11vh;
}

@media screen and (max-width: 1400px) {
  .hero-img-about {
    padding-bottom: 8vh;
  }
}

@media screen and (max-width: 1200px) {
  .hero-img-about {
    padding-bottom: 6vh;
  }
}

@media screen and (max-width: 980px) {
  .hero-img-about {
    padding-bottom: 4vh;
  }
}

@media screen and (max-width: 680px) {
  .hero-img-about {
    padding-bottom: 3vh;
  }
}

@media screen and (max-width: 480px) {
  .hero-img-about {
    background-size: cover;
    width: 100%;
    height: 25vh;
    padding-bottom: 2vh;
  }
}

.about-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  border: 2px solid var(--blue);
  border-radius: 50px;
  padding: 14rem 5rem;
}

@media screen and (max-width: 980px) {
  .about-wrap {
    padding: 10rem 3rem;
  }
}

.about-wrap h1 {
  font-size: 3.3rem;
  margin-bottom: 4rem;
  text-transform: none;
}

@media screen and (max-width: 980px) {
  .about-wrap h1 {
    font-size: 2.7rem;
  }
}

@media screen and (max-width: 480px) {
  .about-wrap h1 {
    font-size: 2.5rem;
  }
}

.about-wrap p {
  font-size: 2.7rem;
  margin-bottom: 6rem;
}

@media screen and (max-width: 980px) {
  .about-wrap p {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 480px) {
  .about-wrap p {
    font-size: 1.8rem;
  }
}

.about-h1 {
  font-size: 3rem !important;
}

@media screen and (max-width: 980px) {
  .about-h1 {
    font-size: 2.7rem !important;
  }
}

@media screen and (max-width: 480px) {
  .about-h1 {
    font-size: 2.5rem !important;
  }
}
.about-wrap ul li {
  position: relative;
  font-size: 2.7rem;
  padding: 1rem 0;
  font-family: 'gothambook', sans-serif;
  font-weight: 600;
}

@media screen and (max-width: 980px) {
  .about-wrap ul li {
    font-size: 2.2rem;
  }
}

@media screen and (max-width: 480px) {
  .about-wrap ul li {
    font-size: 2rem;
  }
}

.about-wrap ul li::before {
  position: absolute;
  content: '';
  left: -65px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 10px solid var(--blue);
  background: var(--white);
}

@media screen and (max-width: 980px) {
  .about-wrap ul li::before {
    left: -44px;
  }
}


/*----------------------------*/
/*--------- CONTACT ----------*/
/*----------------------------*/

.hero-img-contact {
  background: url(./img/contact.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100vw;
  height: 41.75vw;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-bottom: 11vh;
}

@media screen and (max-width: 1400px) {
  .hero-img-contact {
    padding-bottom: 8vh;
  }
}

@media screen and (max-width: 1200px) {
  .hero-img-contact {
    padding-bottom: 6vh;
  }
}

@media screen and (max-width: 980px) {
  .hero-img-contact {
    padding-bottom: 4vh;
  }
}

@media screen and (max-width: 680px) {
  .hero-img-contact {
    padding-bottom: 3vh;
  }
}

@media screen and (max-width: 480px) {
  .hero-img-contact {
    background-size: cover;
    width: 100%;
    height: 25vh;
    padding-bottom: 2vh;
  }
}

@media screen and (max-width: 680px) {
  .btn2 {
    width: 22rem;
    height: 4rem;
  }
}

.contact-wrap {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 4rem;
}

@media screen and (max-width: 1250px) {
  .contact-wrap {
    flex-direction: column;
    align-items: center;
    gap: 5rem;
  }
}

.left {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 5rem;
  gap: 10rem;
}

@media screen and (max-width: 1250px) {
  .left {
    flex-direction: row;
    gap: 5rem;
    margin-top: 0;
  }
}

@media screen and (max-width: 680px) {
  .left {
    flex-direction: column;
  }
}

.left h1 ,.left h2 {
  text-align: left;
  font-size: 2.6rem;
  margin-bottom: 2.5rem;
  font-weight: 300;
}

@media screen and (max-width: 680px) {
  .left h1 ,.left h2 {
    font-size: 2rem;
  }
}

.left p {
  font-size: 2.2rem;
  line-height: 3rem;
  margin-bottom: 10rem;
}

@media screen and (max-width: 680px) {
  .left p {
    font-size: 1.8rem;
  }
}
.left p:last-child {
  margin-bottom: 0rem;
}

form {
  max-width: 60vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5rem;
}

@media screen and (max-width: 1250px) {
  form {
    max-width: 85vw;
    justify-content: center;
    align-items: center;
    gap: 3rem;
  }
}

.label {
  display: flex;
  justify-content: space-between;
}

@media screen and (max-width: 680px) {
  .label {
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3rem;
  }
}

.label input {
  width: 57rem;
  text-align: center;
  border: 2px solid var(--blue);
  margin-right: 3rem;
  font-size: 2rem;
  font-family: 'gothambook', sans-serif;
}

@media screen and (max-width: 1700px) {
  .label input {
    width: 47rem;
  }
}

@media screen and (max-width: 1550px) {
  .label input {
    width: 40rem;
  }
}

@media screen and (max-width: 1350px) {
  .label input {
    width: 35rem;
  }
}

@media screen and (max-width: 1250px) {
  .label input {
    width: 50vw;
    margin-right: 5vw;
  }
}

@media screen and (max-width: 680px) {
  .label input {
    width: 85vw;
    height: 8rem;
    margin-right: 0;
  }
}

.label input::placeholder {
  text-align: center;
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.5);
  font-family: 'gothambook', sans-serif;
}

@media screen and (max-width: 680px) {
  .label input::placeholder {
    font-size: 1.6rem;
  }
}

textarea {
  border: 2px solid var(--blue);
  border-radius: 80px;
  background: none;
  padding: 6rem;
  font-size: 2rem;
  color: var(--black);
  width: 90rem; 
  min-height: 45rem;
  resize: none;
  font-family: 'gothambook', sans-serif;
}

@media screen and (max-width: 1700px) {
    textarea {
    width: 80rem; 
    min-height: 45rem;
  }
}

@media screen and (max-width: 1550px) {
    textarea {
    width: 70rem; 
  }
}

@media screen and (max-width: 1400px) {
    textarea {
    width: 65rem; 
  }
}

@media screen and (max-width: 1350px) {
    textarea {
    width: 55rem; 
  }
}

@media screen and (max-width: 1250px) {
    textarea {
    width: 85vw; 
  }
}

@media screen and (max-width: 680px) {
    textarea {
    border-radius: 50px;
    padding: 4rem;
  }
}

textarea:focus {
  outline: none;
  border-color: var(--grey);
}

textarea::placeholder {
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.5);
  font-family: 'gothambook', sans-serif;
}

@media screen and (max-width: 680px) {
  textarea::placeholder {
    font-size: 1.6rem;
  }
}

.btn-contact-2 {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'coolvetica', sans-serif;
  font-size: 2.5rem;
  color: var(--white);
  text-transform: uppercase;
  width: 30rem;
  height: 8rem;
  background: var(--blue);
  transition: box-shadow 0.4s ease;
  letter-spacing: 1.5px;
}

@media screen and (max-width: 1550px) {
  .btn-contact-2 {
    font-size: 2.4rem;
    width: 27rem;
    height: 8rem;
    letter-spacing: 1.25px;
  }
}

@media screen and (max-width: 1400px) {
  .btn-contact-2 {
    width: 22rem;
  }
}

@media screen and (max-width: 1350px) {
  .btn-contact-2 {
    width: 17rem;
  }
}

@media screen and (max-width: 1250px) {
  .btn-contact-2 {
    width: 30vw;
    font-size: 2rem;
  }
}

@media screen and (max-width: 680px) {
  .btn-contact-2 {
    font-size: 2rem;
    width: 50vw;
    height: 8rem;
  }
}

.btn-contact-2:hover {
  cursor: pointer;
  box-shadow: 0px 0px 20px var(--black);
}

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: rgba(0, 0, 0, 0.8); /* Make it darker for better visibility */
  font-size: 2rem; /* Ensuring font size is sufficient */
}

:-ms-input-placeholder { /* Internet Explorer */
  color: rgba(0, 0, 0, 0.8);
}

::placeholder { /* Standard placeholder pseudo-element */
  color: rgba(0, 0, 0, 0.8);
  font-size: 2rem;
}