@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap");



* {

  font-family: "Poppins", sans-serif;



  margin: 0;



  padding: 0;



  box-sizing: border-box;



  scroll-behavior: smooth;



  scroll-padding-top: 2rem;

}



:root {

  /* --main-color: #647bff; */



  --main-color: #1af3ac;



  /* --body-color: #090a1a; */



  --body-color: #565656;



  /* --container-color: #171b3c; */



  --container-color: #5c8678;



  /* --heading-color: #222231; */



  --heading-color: #dcdcdc25;



  /* --box-color: #0d0f26; */



  --box-color: #42424d;



  --bg-color: #fff;

}



/* Boot */



.carousel-fade .carousel-item {

  display: flex;



  justify-content: center;

}



.carousel-control-prev {

  left: 19%;

}



.carousel-control-next {

  right: 19%;

}



/* Boot */



body {

  color: var(--bg-color);



  background: var(--body-color);

}



ul {

  padding: 0;



  margin: 0;

}



img {

  width: 100%;

}



section {

  padding: 3rem 0 2rem;

}



a {

  text-decoration: none;

}



li {

  list-style: none;

}



.container {

  max-width: 960px;



  margin: auto;



  width: 100%;

}



/* New */



.container-fluid {

  --bs-gutter-x: 0 !important;

}



.carousel-inner {

  height: 100vh !important;



  width: 100%;

}



.carousel-control-prev {

  left: 0 !important;

}



.carousel-control-next {

  right: 0 !important;

}



.carousel-item-1 {

  background-image: url("../img/IMG_1.jpg");



  background-position: 0 -200px;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 130vh;

}



.carousel-item-2 {

  background-image: url("../img/IMG_21.jpg");



  background-position: center;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-3 {

  background-image: url("../img/IMG_22.jpg");



  background-position: center;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-4 {

  background-image: url("../img/IMG_23.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-5 {

  background-image: url("../img/IMG_24.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-6 {

  background-image: url("../img/IMG_25.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-7 {

  background-image: url("../img/IMG_26.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-8 {

  background-image: url("../img/IMG_27.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-9 {

  background-image: url("../img/IMG_28.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-10 {

  background-image: url("../img/IMG_29.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.carousel-item-11 {

  background-image: url("../img/IMG_210.jpg");



  background-position: top;



  background-repeat: no-repeat;



  background-size: cover;



  width: 100% !important;



  height: 100vh;

}



.title-carousel {

  display: inline;



  z-index: 34;



  position: absolute;



  text-transform: uppercase;



  font-weight: 700;



  left: 50%;



  transform: translate(-50%, 0);



  top: 30%;



  text-align: center;



  border: 4px solid rgb(255, 255, 255);



  padding: 0.5rem;

}



/* Header */



header {

  position: fixed;



  top: 0;



  left: 0;



  width: 100%;



  z-index: 100;

}



.header-active {

  background: var(--box-color);



  transition: 0.4s;

}



.navigation {

  display: flex;



  align-items: center;



  justify-content: space-between;



  padding: 20px 0;

}



.logo {

  font-size: 1.2rem;



  font-weight: 600;



  color: var(--main-color);

}



.navbar-desk {

  display: flex;



  align-items: center;



  column-gap: 1.5rem;

}



.nav-link {

  font-size: 0.94rem;



  padding: 4px 8px;



  border-radius: 0.2rem;



  color: var(--bg-color);

}



.nav-link:hover {

  color: var(--main-color);



  background: var(--container-color);



  transition: 0.3s all linear;

}



/* Menu Icon */



.menu-icon {

  flex-direction: column;



  align-items: center;



  justify-content: center;



  row-gap: 5px;



  cursor: pointer;



  z-index: 200;



  transition: 0.3s;



  display: none;

}



.menu-icon div {

  display: block;



  background: var(--bg-color);



  height: 2px;



  width: 24px;



  transition: 0.3s;

}



.move .line1 {

  transform: rotate(-45deg) translate(-5px, 5px);

}



.move .line2 {

  opacity: 0;

}



.move .line3 {

  transform: rotate(45deg) translate(-5px, -5px);

}



/* Home */



.home {

  /* padding-top: 7rem; */



  padding: 0 !important;

}



.home-content {

  position: relative;



  max-width: 600px;



  width: 100%;



  margin: auto;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;

}



.home-img {

  width: 180px;



  height: 180px;



  border-radius: 50%;



  background: #5c8678;



  overflow: hidden;



  margin-bottom: 2rem;

}



.home-img {

  width: 180px;



  height: 180px;



  object-fit: contain;



  object-position: center;

}



.home-text {

  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  text-align: center;

}



.home-text h3 {

  position: relative;



  display: flex;



  align-items: center;



  column-gap: 0.5rem;



  font-size: 1.1rem;



  color: var(--main-color);

}



.home-text h3::before {

  content: "";



  position: absolute;



  top: 50%;



  transform: translate(-50%);



  left: -15px;



  width: 20px;



  height: 2px;



  background: var(--main-color);

}



.home-text h3::after {

  content: "";



  position: absolute;



  top: 50%;



  transform: translate(-50%);



  right: -35px;



  width: 20px;



  height: 2px;



  background: var(--main-color);

}



.home-text h2 {

  font-size: 2.5rem;



  line-height: 3rem;

}



.home-text p {

  font-size: 0.938rem;



  margin-bottom: 1.5rem;

}



.color {

  color: var(--main-color);

}



.social {

  display: flex;



  align-items: center;



  column-gap: 1rem;



  margin-top: 1rem;

}



.social .bx {

  font-size: 1.3rem;



  padding: 10px;



  border-radius: 50%;



  color: var(--bg-color);



  background: var(--container-color);

}



.social .bx:hover {

  background: var(--main-color);



  transition: 0.3s all linear;

}



/* Heading */



.heading {

  font-size: 5rem;



  text-transform: uppercase;



  color: var(--heading-color);



  text-align: center;



  margin-bottom: 2rem;

}



.about-content {

  display: flex;



  flex-direction: column;



  justify-content: center;



  align-items: center;



  gap: 1.5rem;

}



.about-data span {

  font-size: 1rem;



  font-weight: 500;



  text-transform: uppercase;



  color: var(--main-color);

}



.about-data h2 {

  font-size: 2rem;



  line-height: 2.6rem;



  font-weight: 700;



  margin: 1rem 0;

}



.btn {

  font-size: 0.97rem;



  display: inline-flex;



  align-items: center;



  column-gap: 0.5rem;



  color: var(--bg-color);



  background: var(--main-color);



  padding: 12px 16px;



  border-radius: 0.4rem;



  margin-top: 1rem;



  width: fit-content;

}



.btn .bx {

  font-size: 1.2rem;

}



.btn:hover {

  background: var(--container-color);



  transition: 0.3s all linear;

}



.about-text p {

  font-size: 1rem;



  letter-spacing: 1px;



  text-align: justify;



  margin-bottom: 1.5rem;

}



/* Portfolio */



.portfolio-content {

  display: grid;



  grid-template-columns: repeat(2, 1fr);



  gap: 2rem;

}



.portfolio-box {

  position: relative;



  width: 100%;



  height: 320px;



  border-radius: 1rem;



  overflow: hidden;

}



.portfolio-img {

  width: 100%;



  height: 100%;



  object-fit: fill;



  object-position: center;

}



.portfolio-overlay {

  position: absolute;



  top: -100%;



  left: 0;



  width: 100%;



  height: 100%;



  display: flex;



  flex-direction: column;



  align-items: center;



  justify-content: center;



  background: hsl(234, 45%, 16%, 0.7);

}



.portfolio-overlay h2 {

  font-size: 1.6rem;



  font-weight: 600;



  margin-bottom: 10px;

}



.portfolio-overlay .bx {

  font-size: 24px;



  padding: 10px;



  background-color: var(--main-color);



  color: var(--bg-color);



  border-radius: 4px;

}



.portfolio-overlay .bx:hover {

  background: var(--container-color);



  transition: 0.3s all linear;

}



.portfolio-box:hover .portfolio-overlay {

  top: 0;



  transition: 0.3s all ease;

}



/* Contact */



.contact-form {

  max-width: 600px;



  margin: auto;



  width: 100%;



  display: flex;



  flex-direction: column;



  row-gap: 1rem;

}



.contact-form input,

.contact-form textarea {

  border: none;



  outline: none;



  font-size: 0.9rem;



  padding: 15px;



  color: var(--bg-color);



  background: var(--box-color);



  border-radius: 0.4rem;

}



.contact-form .send-btn {

  width: 120px;



  font-size: 1rem;



  letter-spacing: 1px;



  font-weight: 500;



  text-transform: uppercase;



  padding: 12px;



  background: var(--main-color);



  cursor: pointer;



  align-self: center;

}



.contact-form .send-btn:hover {

  background: var(--container-color);



  transition: 0.3s all linear;

}



.info-h3 {

  color: var(--container-color);

}



.p-content p {

  font-size: 1.3rem;

}



.p-content span {

  font-size: 1.2rem;



  color: var(--main-color);

}



p a {

  color: var(--container-color);

}



p a:hover {

  color: var(--main-color);

}



.autorizzation {

  margin-top: 5rem;



  font-size: 0.7rem !important;

}



/* Footer */



.footer {

  display: flex;



  align-items: center;



  flex-direction: column;



  row-gap: 1.4rem;



  padding: 30px 0;

}



.footer p {

  font-size: 0.9rem;

}



/* Scroll Top */



.scroll-top {

  position: fixed;



  bottom: -100%;



  right: 1.5rem;



  z-index: 300;

}



.scroll-top .bx {

  padding: 8px;



  font-size: 1.3rem;



  color: var(--bg-color);



  background: var(--box-color);



  border-radius: 0.2rem;

}



.scroll-top .bx:hover {

  background: var(--container-color);



  transition: 0.3s;

}



.scroll-active {

  bottom: 2rem;



  transition: 0.3s;

}



/* Skills */



.img-skill {

  width: 50px;



  height: 50px;

}



.about-skills {

  display: grid;



  grid-template-columns: repeat(3, 1fr);



  gap: 2rem;

}



/* Qr */



.img-qr {

  width: 200px;



  height: 200px;

}



.social-qr {

  display: none;

}



.social-qr-active {

  display: inline-flex;

}



/* Responsive */



@media (max-width: 990px) {

  .container {

    margin: 0 auto;



    width: 90%;

  }

}



@media (max-width: 892px) {

  .carousel-item-1,

  .carousel-item-2,

  .carousel-item-3,

  .carousel-item-4,

  .carousel-item-5,

  .carousel-item-6 .carousel-item-7,

  .carousel-item-8,

  .carousel-item-9,

  .carousel-item-10,

  .carousel-item-11 {

    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;



    width: 100% !important;



    height: 100vh;

  }



  section {

    padding: 2rem 0;

  }



  .navigation {

    padding: 12px 0;

  }



  .heading {

    font-size: 4rem;

  }



  .portfolio-box {

    height: 257px;

  }

}



@media (max-width: 775px) {

  .carousel-item-1,

  .carousel-item-2,

  .carousel-item-3,

  .carousel-item-4,

  .carousel-item-5,

  .carousel-item-6 .carousel-item-7,

  .carousel-item-8,

  .carousel-item-9,

  .carousel-item-10,

  .carousel-item-11 {

    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;



    width: 100% !important;



    height: 100vh;

  }



  .logo {

    font-size: 1.1rem;

  }



  .home {

    min-height: 500px;



    padding-top: 6rem;

  }



  .home-text h3 {

    font-size: 1rem;

  }



  .home-text h2 {

    font-size: 2.2rem;



    line-height: 2.2rem;

  }



  .home-text p {

    font-size: 0.825rem;

  }



  .portfolio-box {

    height: 245px;

  }



  .menu-icon {

    display: flex;

  }



  .navbar-desk {

    position: absolute;



    top: 0;



    right: -100%;



    width: 300px;



    height: 100vh;



    background: var(--box-color);



    display: flex;



    flex-direction: column;



    align-items: center;



    padding: 50px 20px;



    transition: 0.5 all cubic-bezier(0.075, 0.82, 0.165, 1);

  }



  .open-menu {

    right: 0;



    transition: 0.5 all cubic-bezier(0.075, 0.82, 0.165, 1);

  }



  .nav-link {

    display: block;



    margin: 1rem 0;



    font-size: 1.5rem;

  }

}



@media (max-width: 635px) {

  .carousel-item-1,

  .carousel-item-2,

  .carousel-item-3,

  .carousel-item-4,

  .carousel-item-5,

  .carousel-item-6 .carousel-item-7,

  .carousel-item-8,

  .carousel-item-9,

  .carousel-item-10,

  .carousel-item-11 {

    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;



    width: 100% !important;



    height: 100vh;

  }



  .about-content {

    grid-template-columns: 1fr;

  }



  .about-data span {

    font-size: 0.9rem;

  }



  .about-data h2 {

    font-size: 1.8rem;



    list-style: 2.3rem;



    font-weight: 600;



    margin: 0.8rem 0;

  }



  .about-text p {

    font-size: 0.825rem;



    margin-bottom: 1.3rem;

  }



  .w-50 {

    width: 100% !important;

  }



  .carousel-control-prev {

    left: 0;

  }



  .carousel-control-next {

    right: 0;

  }



  .portfolio-content {

    grid-template-columns: 1fr;

  }

}



@media (max-width: 450px) {

  .carousel-item-1,

  .carousel-item-2,

  .carousel-item-3,

  .carousel-item-4,

  .carousel-item-5,

  .carousel-item-6 .carousel-item-7,

  .carousel-item-8,

  .carousel-item-9,

  .carousel-item-10,

  .carousel-item-11 {

    background-position: center;



    background-repeat: no-repeat;



    background-size: cover;



    width: 100% !important;



    height: 100vh;

  }



  .home {

    min-height: 485px;



    padding-top: 5rem;

  }



  .home-img {

    width: 140px;



    height: 140px;

  }



  .home-img img {

    width: 140px;



    height: 140px;

  }



  .home-text h2 {

    font-size: 2.1rem;



    line-height: 2.7rem;

  }



  .home-text p br {

    display: contents;

  }



  .heading {

    font-size: 2.5rem;

  }



  .navbar-desk {

    width: 100%;

  }



  .btn {

    font-size: 0.8rem;

  }

}



@media (max-width: 350px) {

  .heading {

    font-size: 2rem;

  }

}