html {
     scroll-behavior: smooth;
 }

 body {
     box-sizing: border-box;
     margin: 0;
     font-size: 18px;
     line-height: 30px;
     font-family: Arial, Helvetica, sans-serif;
     padding-top: 70px;
     color: #333333;
     transition: all 1s;
 }

 h2 {
     font-size: 42px
 }

 /* SECTIONS */
 .section {
     min-height: 100vh;
     padding: 60px 20px;
 }

 /* NAVBAR */
 .nav-wrap h2,
 .nav-wrap ul li {
     margin: 0;
     padding: 0;
 }

 .nav-wrap {
     background: rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(12px);
     -webkit-backdrop-filter: blur(12px);
     /* border: 1px solid rgba(255, 255, 255, 0.2); */
     border-radius: 15px;
     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     width: 100%;
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     color: #330000;
     font-weight: 600;
 }

 .navbar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 0 8%;
 }

 nav ul {
     display: flex;
     gap: 20px;
 }


 nav ul li {
     list-style: none;
     cursor: pointer;
     transition: 0.5s ease-out;
 }

 /* nav ul li:hover {
     transform: rotateX(360deg);
 } */

 nav ul li a {
     font-size: 18px;
     text-decoration: none;
     color: inherit;
 }

 .toggle-btn {
     background: transparent;
     box-shadow: none;
     outline: none;
     border: none;
     font-size: 25px;
 }

 .dark {
     background: #0F172A;
     color: white;
 }

 .dark .mobmenu {
     color: #fff;
 }

 .dark .hero-btn {
     background-image: linear-gradient(to right, #252525 0%, #252525 50%, #f0f0f0 50%, #f0f0f0 100%);
 }

 .dark .nav-wrap {
     color: #fff;
 }

 .dark .projects {
     background-image:
         radial-gradient(white 01px, transparent 1px);
     background-size: 35px 35px;
 }

 .dark .project-card {
     background: #1F2937;
     border: 1px solid #374151;
     border-radius: 12px;
     box-shadow: 15px 15px 20px rgba(182, 182, 182, 0.1);
 }

 .dark .form-wrap {
     background: #535353;
     border: 1px solid #374151;
     color: #fff;
     box-shadow: 0px 0px 5px #4d4d4d;
 }

 .dark .contact {
     filter: brightness(0.4) contrast(1);
     opacity: 1;
     transition: all 1s ease;
 }

 /* HERO */

 .hero {
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     /* background: linear-gradient(135deg, #0f2027, #203a43, #2c5364); */
     /* color: white; */
     min-height: calc(100vh + 70px);
 }

 .hero-img {
     width: 140px;
     border-radius: 50%;
     margin-bottom: 20px;
 }

 .hero-title {
     font-size: 48px;
 }

 .hero-subtitle {
     margin: 10px 0;
     font-size: 18px;
 }

 .btn-wrap {
     margin-top: 30px;
 }

 .hero-btn {
     text-decoration: none;
     background-image: linear-gradient(to right, #242424 0%, #4d4d4d 49.5%, #f0f0f0 50.5%, #f0f0f0 100%);
     color: #fff;
     padding: 15px 45px;
     text-transform: uppercase;
     background-size: 200% auto;
     border-radius: 10px;
     outline: none;
     border: none;
     cursor: pointer;
     transition: background-position 0.5s ease, color 0.5s ease;
 }

 .hero-btn:hover {
     background-position: right center;
     font-weight: 700;
     color: #333333;
     box-shadow: 2px 2px 5px rgba(65, 65, 65, 0.6);

 }


 /* ABOUT */
 .about {
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .about-container {
     max-width: 800px;
     margin: auto;
     text-align: center;
 }


 /* skills */
 .skills {
     display: flex;
     flex-direction: column;
     justify-content: space-around;
     align-items: center;
 }

 .skill {
     color: #fff;
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 18px 50px;
     margin-bottom: 20px;
     /* background-color: rgb(15, 150, 143); */
     background: linear-gradient(to right, #084947, #0f968f, #1db3ab);
     /* border-radius: 0px 60px 60px 0px; */
 }

 .skill-wrap {
     position: relative;
 }


 .skill-val {
     display: flex;
     justify-content: center;
     align-items: center;
     background-color: rgb(192, 192, 192);
     width: 70px;
     height: 70px;
     box-shadow: 5px -5px 10px black;
     position: absolute;
     left: 0;
     transform: translate(-50%) rotate(45deg);
     z-index: 1;
 }

 .skill-val p {
     transform: rotate(-45deg);
     color: #165856;
     font-weight: 600;

 }

 .triangle-clip {
     background-color: #1db3ab;
     height: 72px;
     width: 72px;
     padding: 15px;
     clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 50% 51%);
     position: absolute;
     right: 0;
     z-index: 2;
     transform: translateX(49%);
 }


 .circle-outer {
     width: 250px;
     height: 250px;
     border: 12px solid;
     border-radius: 150px 0px 150px 150px;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .circle {
     width: 200px;
     height: 200px;
     border: 1px solid;
     border-radius: 50%;
     display: flex;
     justify-content: center;
     align-items: center;
 }


 /* PROJECTS */

 .projects {
     text-align: center;
     background-image:
         radial-gradient(#333333 01px, transparent 1px);
     background-size: 35px 35px;
 }

 .project-grid {
     display: grid;
     justify-items: center;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     margin-top: 40px;
 }

 .project-card {
     max-width: 330px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     background: #F8F9FA;
     border: 1px solid #E5E7EB;
     box-shadow: 10px 15px 15px rgba(0, 0, 0, 0.4);
     border-radius: 12px;
     padding: 30px;
     transition: 0.4s ease;
 }

 .project-card img {
     width: 100%;
     border-radius: 5px;
 }

 .project-buttons {
     display: flex;
     gap: 15px;
     justify-content: center;
 }

 .project-card:hover {
     transform: translateY(-12px) !important;
     /* transition: 1s; */
 }

 /* CONTACT */
 .contact {
     background-image: url(.//asset/jonathan-borba-0Nrq6UvFpI8-unsplash.jpg);
     background-position: center;
     background-size: cover;
     display: flex;
     position: relative;
     justify-content: center;
     align-items: center;
     text-align: center;

 }

 .form-wrap {
     background: rgba(34, 34, 34, 0.35);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(22px);
     color: #fff;
     border: 1px solid #E5E7EB;
     box-shadow: 10px 15px 15px rgba(0, 0, 0, 0.4);
     border-radius: 12px;
     transform-origin: center;
     width: 600px;
     padding: 60px 40px;
     border-radius: 20px;
     border-radius: 12px;
 }

 .contact-form {
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 input, textarea {
     font-size: 16px;
     outline: none;
     padding: 12px;
     border: 1px solid #fff;
     border-radius: 5px;
     background-color: transparent;
     color: #fff;
 }


 input::placeholder,
 textarea::placeholder {
     color: #fff;

 }

 .btn-grad {
     background-image: linear-gradient(to right, #363636 0%, #646464 50%, #f0f0f0 50%, #f0f0f0 100%);
     padding: 15px 25px;
     transition: .5s;
     background-size: 200% auto;
     color: white;
     box-shadow: 0 0 3px #eee;
     border-radius: 10px;
     border: none;
     cursor: pointer;
     text-decoration: none;
     font-weight: 700;
 }


 .btn-grad:hover {
     background-position: right center;
     color: #333333;
     box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.6);
 }

 .social-icons {
     font-size: 32px;
     display: flex;
     flex-direction: column;
     gap: 10px;
     background-color: orangered;
     color: #fff;
     padding: 10px;
     border-radius: 5px;
     position: absolute;
     left: -8.5%;
     bottom: 0;
 }

 .social-icons a {
     text-decoration: none;
     color: inherit;
 }

 /* FOOTER */

 footer {
     position: absolute;
     bottom: 0;
     width: 100%;
     left: 0;
     background: black;
     color: white;
     text-align: center;
     margin-bottom: 0;
     padding: 0;
 }

 footer p {
     font-size: 12px;
     padding: 10px;
 }

 .hamburger {
     display: none;
 }



 @media screen and (max-width:1024px) {
     .project-grid {
         gap: 50px;
     }

     .skills-container {
         width: 100% !important;
     }

     .project-buttons {
         flex-direction: column;
     }
 }

 @media screen and (max-width:768px) {
     .skills-container {
         padding: 60px 20px;
         flex-direction: column;
         gap: 100px;
     }

     h2, .hero-title {
         font-size: 28px;
     }

     .social-icons {
         flex-direction: row;
         bottom: -10%;
         left: 0;
     }

 }


 @media screen and (max-width:425px) {


     .menu {
         display: none;
     }

     .hamburger {
         display: block;
     }

     .hamburger button {
         background-color: #0F172A;
         padding: 5px 10px;
         color: #fff;
         border: none;

     }

     .navbar {
         padding: 10px;
         position: relative;
     }

     .mobmenu {
         transition: all 2s ease;
         padding: 20px;
         position: absolute;
         top: 80%;
         right: 3%;
         width: auto;
     }

     .mobmenu ul {
         flex-direction: column;
     }

 }