@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');
*{
    margin: 0%;
    padding: 0%;
    box-sizing: border-box;
    font-family: 'Montserrat', sans-serif;
    text-transform: capitalize;
}
:root{
    --orange : #f06021;
    --blue : #3763b3;
}

li{
    list-style: none;
}
a{
    text-decoration: none;
    color: white;
}
h1{
    font-size: 4rem;
}
h2{
    font-size: 3rem;
}
h3{
    font-size: 2.2rem;
}
.btn-a{
    padding: 0.5rem 1.5rem;
    border-radius: 20px;
    border: 2px solid var(--orange);
    background-color: var(--orange);
    cursor: pointer;
    position: relative;
    z-index: 10;
    color: white;
}
.btn-a:hover{
    transition: 0.4s linear;
    background-color: transparent;
}

html{
    scroll-behavior: smooth;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 100%;
}
body{
    width: 100%;
    height: 100vh;
    overflow-x: hidden;
    /* max-width: 1400px; */
}


#preloader{
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    height: 100vh;
    background-color: black;
    z-index: 9999;
}
#preloader video{
    width: 200px;
    height: 200px;
    object-fit: fill;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~NAVBAR - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#navbar{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 100%;
    /* max-width: 1400px; */
    position: fixed;
    top: 0%;
    padding: 1rem 3rem;
    gap: 5rem;
    backdrop-filter: blur(9px);
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0.418);
}
.nav-img img{
    width: 70px;
    height: 30px;
}
.nav-items ul{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
}
.nav-items ul li a{
    padding: 0.3rem 0.4rem;
    position: relative;
}

.nav-items ul li a::after{
    content: '';
    position: absolute;
    bottom: 0%;
    left: 0%;
    height: 0.1rem;
    width: 0%;
    background-color: var(--orange);
    transition: width 0.5s;
}
.nav-items ul li a:hover::after{
    width: 100%;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~HOME - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.home{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    color: white;
    object-fit: contain;
    /* margin-top: 3rem; */
    /* background-color: bisque; */
}
.home-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.home-text p{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.home-text p img{
    width: 70px;
    height: 38px;
}
.home p{
    max-width: 600px;
    text-align: center;
}
.home h1 span{
    color: var(--orange);
}
.home-bg-video{
    position: absolute;
    bottom: 0%;
    right: 0%;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    z-index: -100;
}
@media(min-aspect-ratio: 16/9){
    .home-bg-video{
        width: 100%;
        height: auto;
    }
}
@media(max-aspect-ratio: 16/9){
    .home-bg-video{
        width: auto;
        height: 100%;
    }
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SERVICE - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.service{
   padding: 3rem 2rem;
   padding-bottom: 0rem;
}
.service h2{
    text-align: center;
}
.service h2 span{
    color: var(--orange);
}
.service-top{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding-top: 2rem;
}
.service-top-text{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4rem;
    row-gap: 2rem;
    text-align: center;
    /* width: 50%; */
    /* height: 100%; */
}
.service-points{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    gap: 0.7rem ;
}
.service-points img{
    widows: 15px;
    height: 15px;
}
.service-top-video{
    padding-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* border: 1px solid red; */
    /* width: 50%; */
}
.laptop{
    width: 350px;
}
.laptopvideo{
    position: absolute;
    top: 15%;
    left: 12%;
    width: 76%;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~LIGHT HOUSE - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.light-house{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
    padding: 0rem 2rem ;
}
.performance-section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding-top: 2rem;
}
.performance-circle{
    width: 70px;
    height: 70px;
    background-color: rgb(9, 196, 9);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* box-shadow: rgba(100, 100, 111, 0.836) 0px 7px 29px 0px; */
    box-shadow: rgb(38, 57, 77) 0px 20px 30px -15px;
}
.performance-inner-circle{
    width: 85%;
    height: 85%;
    border-radius: 50%;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.2rem;
}
.performance-inner-circle p{
    font-size: 8px;
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~PROJECT - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.project{
    padding: 2rem 2rem;
    padding-top: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* gap: rem; */
}
.project h2{
    text-align: center;
}
.project h2 span{
    color: var(--orange);
}
.project-button{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 2rem 0;
}
.project-btn{
    background-color: transparent;
    padding: 0.3rem 1rem;
    color: black;
    border: 1.5px solid var(--blue);
    position: relative;
    overflow: hidden;
    outline: none;
}
.project-btn::after{
    content: '';
    position: absolute;
    top: 0%;
    left: 0%;
    border-radius: 20px;
    background-color: var(--blue);
    width: 0%;
    height: 100%;
    transition:  width 0.7s;
    z-index: 10;
    outline: none;

}
.project-btn p{
    position: relative;
    z-index: 100;
    
}
.project-btn:hover::after{
    width: 100%;
}
.project-btn:hover > p{
    color: white;
}

.project-section{
    padding: 2rem 2rem;
    /* border: 1px solid red; */
    width: 1000px;
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 1rem;
}
.project-item{
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.project-img{
    width: 200px;
    height: 200px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 50px;
    cursor: pointer;
    border-radius: 6px;
    position: relative;
    overflow: hidden;
}

.project-img img{
    width: 100%;
    height: 100%;
    object-fit:contain;
    /* border-radius: 6px; */
}
.project-overlay{
    position: absolute;
    top: 100%;
    left: 0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(125deg ,#f05f21bd, #3762b3c3);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 1rem;
    color: white;
    padding: 2rem 2rem;
    font-size: 12px;
    transition: top 0.6s;
    text-align: center;
}
.project-img:hover > .project-overlay{
    top: 0%;
}

.link-btn{
    border: 1px solid white;
    padding: 0.1rem 1.5rem;
    border-radius: 20px;
    font-size: 12px;
}
.link-btn:hover{
    background-color: white;
    color: black;
}
.overlay-para{
    font-size: 8px;
    text-align: center;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~REVIEW- SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.review{
    padding: 2rem 3rem;
    /* overflow-x: scroll; */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.review-card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 2rem;
    width: 350px;
    background-color: white;
    /* border: 1px solid black; */
    border-radius: 5px;
    box-shadow: rgba(17, 17, 26, 0.4) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;

}
.review-name{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 1.5rem;
}
.review-name img{
    width: 30px;
    height: 30px;
    object-fit: fill;
    border-radius: 50%;
}
.review-text{
    font-size: 10px;
}
.review-rating{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
}
.review-rating h4{
    color: rgb(53, 172, 2);
}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ABOUT US - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.about-us{
    padding: 2rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
 }
 .about-us h2{
     text-align: center;
 }
 .about-us h2 span{
     color: var(--orange);
 }
 .about-section{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4rem;
 }
 .about-img{
    position: relative;
 }
 .about-img img{
    width: 300px;
    height: 400px;
    z-index: 100;
 }
 .black{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 300px;
    height: 400px;
    background-color: black;
    position: absolute;
    transform: rotate(5deg);
    z-index: -90;
    animation: black1 4s linear infinite;
 }
 .black2{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 300px;
    height: 400px;
    background-color: rgb(52, 51, 51);
    position: absolute;
    transform: rotate(8deg);
    z-index: -100;
    animation: black2 4s linear infinite;

 }
 .black3{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 300px;
    height: 400px;
    background-color: rgb(89, 87, 87);
    position: absolute;
    transform: rotate(10deg);
    z-index: -110;
    animation: black3 4s linear infinite;

 }.black4{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 300px;
    height: 400px;
    background-color: rgb(146, 143, 143);
    position: absolute;
    transform: rotate(12deg);
    z-index: -120;
    animation: black4 4s linear infinite;

 }
@keyframes black1{
    0%{
        transform: rotate(5deg);
    }
    50%{
        transform: rotate(8deg);
    }
    100%{
        transform: rotate(5deg);
    }
}
@keyframes black2{
    0%{
        transform: rotate(8deg);
    }
    50%{
        transform: rotate(10deg);
    }
    100%{
        transform: rotate(8deg);
    }
}
@keyframes black3{
    0%{
        transform: rotate(10deg);
    }
    50%{
        transform: rotate(12deg);
    }
    100%{
        transform: rotate(10deg);
    }
}
@keyframes black4{
    0%{
        transform: rotate(12deg);
    }
    50%{
        transform: rotate(14deg);
    }
    100%{
        transform: rotate(12deg);
    }
}
 .about-text{
    display: flex;
    flex-direction: column;
    gap: 1rem;
 }
 .about-text h3{
    color: var(--orange);
 }
 .about-text p{
    font-size: 12px;
    max-width: 500px;
 }
 .about-text img{
    width: 70px;
    height: 40px;
}




/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~SOCIAL MEDIA - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.social-media{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 2rem;
  }
  .media{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: rgba(17, 17, 26, 0.4) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;

  }
  .media img{
    width: 24px;
    height: 24px;
    object-fit: cover;
  }
  .media:hover{
    transition: 0.4s linear;
  }
  .whatsapp:hover{
    background-color: rgb(37, 211, 102);
  }
  .whatsapp:hover > .whatsapp-img{
    filter: invert(100%);
  }
  .twitter:hover{
    background-color: #00acee;
  }
  .twitter:hover > .twitter-img{
    filter: invert(100%);
  }
  .youtube:hover{
    background-color: #FF0000;
  }
  .youtube:hover > .youtube-img{
    filter: invert(100%);
  }
  .instagram:hover{
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
  }
  .instagram:hover > .instagram-img{
    filter: invert(100%);
  }
  .media{
    animation: whatsapp 3.5s linear infinite;
  }
  @keyframes whatsapp{
    0%{
      transform: translateY(0px);
      animation-delay: 2s;
    }
    50%{
      transform: translateY(-15px);
    }
    100%{
      transform: translateY(0px);
    }
  }




  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~CONTACT US - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.contact-us{
    padding: 2rem 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 2rem;
 }
 .contact-us h2{
     text-align: center;
 }
 .contact-us h2 span{
     color: var(--orange);
 }
 .contact-form{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    flex-direction: column;
    gap: 2rem;
    padding: 2rem 2rem;
    box-shadow: rgba(17, 17, 26, 0.4) 0px 8px 24px, rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
    border-radius: 12px;
    border: 3px solid var(--orange);

 }
 label{
    color: var(--orange);
 }
 .contact-form h3{
    color: var(--blue);
 }
 .name{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3rem;
 }
 .first-name,.last-name,.email,.subject,.query,label{
    display: flex;
    
    flex-direction: column;
 }
 input[type="text"]{
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-left: 1px solid black; */
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    /* border-right: 1px solid black; */
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid black;
    width: 240px;
    outline: none;
    padding: 0.5rem 1rem;
 }
 input[type="email"]{
    width: 100%;
    border-top: none;
    border-left: none;
    border-right: none;
    /* border-left: 1px solid black; */
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
    /* border-right: 1px solid black; */
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 1px solid black;
    outline: none;
    padding: 0.5rem 1rem;
 }
 input[type="text"]:focus,input[type="email"]:focus,textarea:focus{
    border-bottom: 2px solid red;
 }
 input[type="text"]:valid,input[type="email"]:valid,textarea:valid{
    border-bottom: 2px solid rgb(10, 209, 10);
 }
 .subject input{
    width: 100%;
 }
 textarea{
    padding: 1rem 1rem;
    outline: none;
    resize: none;
 }
 .form-btn{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 3rem;
    padding: 1rem 2rem;
 }
 .form-button{
    padding: 0.4rem 1.5rem;
    border-radius: 4px;
    border: none;
    color: white;
 }
 input[type="submit"]{
    background-color: green;
    cursor: pointer;
 }
 input[type="reset"]{
    background-color: red;
    cursor: pointer;
 }



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~FOOTER - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
#footer{
    display: grid;
    grid-template-columns: repeat(4,1fr);
    padding: 4rem 2rem;
    background-color:rgb(3, 3, 108);
}
.footer-logo img{
    width: 130px;
    height: 60px;
}
.footer-logo{
    color: white;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.footer-links ul{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    /* justify-content: center; */
    align-items: center;
}
.footer-email{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.footer-media{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
.media{
    background-color: white;
}





/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~MEDIA QUERY - SECTION ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */



@media(max-width:1090px){
    #footer{
        display: grid;
        grid-template-columns: repeat(3,1fr);
        row-gap: 3rem;
    }
    .footer-media{
        display: flex;
        justify-content: center;
        align-items: center;
        grid-column-start: 2;
    }
    .project-section{
        width: 750px;
    }
}
@media(max-width:950px){
    .about-text p{
        max-width: 400px;
     }
}

@media(max-width:890px){
    .service-top{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
}
@media(max-width:850px){
    .about-img img{
        width: 250px;
        height: 300px;
        z-index: 100;
     }
     .nav-items ul{
        gap: 2rem;
    }
     .black{
        width: 250px;
        height: 300px;
        transform: rotate(3deg);
        animation: blackr 4s linear infinite;
     }
     .black2{
        width: 250px;
        height: 300px;
        transform: rotate(5deg);
        animation: black2 4s linear infinite;
    
     }
     .black3{
        width: 250px;
        height: 300px;
        transform: rotate(7deg);
        animation: black3 4s linear infinite;
    
     }.black4{
        width: 250px;
        height: 300px;
        transform: rotate(9deg);
        animation: black4 4s linear infinite;
    
     }
     @keyframes blackr{
        0%{
            transform: rotate(3deg);
        }
        50%{
            transform: rotate(5deg);
        }
        100%{
            transform: rotate(3deg);
        }
    }
    @keyframes black2{
        0%{
            transform: rotate(5deg);
        }
        50%{
            transform: rotate(7deg);
        }
        100%{
            transform: rotate(5deg);
        }
    }
    @keyframes black3{
        0%{
            transform: rotate(7deg);
        }
        50%{
            transform: rotate(9deg);
        }
        100%{
            transform: rotate(7deg);
        }
    }
    @keyframes black4{
        0%{
            transform: rotate(9deg);
        }
        50%{
            transform: rotate(11deg);
        }
        100%{
            transform: rotate(9deg);
        }
    }
}

@media(max-width:800px){
   html{
    font-size: 90%;
   }
}
@media(max-width:750px){
    html{
     font-size: 90%;
    }
 }

@media(max-width:730px){
    .project-section{
        width: 570px;
        grid-template-columns: repeat(2,1fr);
    }
    .about-section{
        flex-direction: column;
    }
    .about-text p{
        max-width: 500px;
        text-align: center;
     }
     .about-text{
        padding-top: 2rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1rem;
     }
}
@media(max-width:700px){
    html{
        font-size: 80%;
    }
    .nav-items ul{
        gap: 1rem;
    }
}

@media(max-width:650px){
    .review{
        flex-direction: column;
    }
    input[type="text"]{
        width: 180px;
    }
    .subject input{
        width: 100%;
     }
    #footer{
        grid-template-columns: repeat(2,1fr);
    }
    html{
        font-size: 70%;
    }
    .home p{
        max-width: 400px;
    }
}
@media(max-width:580px){
    .project-section{
        width: 500px;
    }
}
@media(max-width:520px){
    .project-section{
        width: 470px;
    }
    .project-img{
        width: 160px;
        height: 160px;
    }
    h1{
        font-size: 3rem;
    }
    .about-text p {
        width: 400px;
    }
    .light-house{
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        padding: 0rem 2rem ;
    }
    
}
@media(max-width:470px){
    input[type="text"]{
        width: 130px;
    }
    .subject input{
        width: 100%;
     }
     .project-section{
        width: 400px;
     }
     .service{
        padding-top: 1rem;
    }
    h2{
        font-size: 2.5rem;
    }
    .performance-circle{
        width: 50px;
        height: 50px;
    }
    .performance-section p{
        font-size: 8px;
    }
    .performance-inner-circle p{
        font-size: 6px;
    }
    .project-section{
        grid-template-columns: 1fr;
    }
    .project-img{
        width: 300px;
        height: 300px;
    }
    .review-card{
        width: 250px;
    }
    .laptop{
        width: 250px;
    }
    .laptopvideo{
        position: absolute;
        top: 15%;
        left: 12%;
        width: 76%;
    }
    .home-text p{
        width: 250px;
    }
    .home-text h1{
        font-size: 2.5rem;
    }
    .about-text p{
        width: 290px;
        font-size: 8px;
    }
    #footer{
        display: grid;
        grid-template-columns: repeat(1,1fr);
    }
    textarea{
        height: 7em;
    }
    .footer-media{
        grid-column-start: 1;
    }
    .project-btn{
        font-size: 9px;
    }
    .nav-img img{
        width: 45px;
        height: 20px;
    }
}
@media(max-width:440px){
    .project-img{
        width: 250px;
        height: 250px;
    }
    input[type="text"]{
        width: 100px;
    }
    .subject input{
        width: 100%;
     }
}



@media(max-width:500px){
    #navbar{
        gap: 2rem;
    }
    .media{
        width: 30px;
        height: 30px;
      }
      .media img{
        width: 18px;
        height: 18px;
        object-fit: cover;
      }
}

@media(max-width:450px){
    .nav-items ul{
        font-size: 8px;
    }
}
@media(max-width:400px){
    .nav-items ul{
        gap: 1.1rem;
    }
    #navbar{
        padding-left: 1rem;
        gap: 2rem;
        padding-right: 0%;
    }
    .project-section{
        width: 300px;
    }
    

}