@font-face {
    font-family:'helvetica' ;
    src: url(./fonts/Helvetica.ttf);
}
@font-face {
    font-family: futura;
    src: url(./fonts/FUTURA55REGULAR.TTF);
}
@font-face {
    font-family: 'edition';
    src: url(./fonts/EDITION_.TTF);
}
*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    overflow-x:hidden;
}
html{
    scroll-behavior: smooth;
}
:root {
    --screen-width:100vw;
    --screen-height:100vh;
    --herocontent-margin-top:6vh;
    --midnight-blue: #101720;
    --deep-navy-blue:#011222;
    --charcoal-grey:#171717;
    --rich-black:#020D19;
    --obsidian:#0B1215;
    --snow:#FFFAFA;
    --ghost-white:#F8F8FF;
    --alice-blue:#F0F8FF;
    --gainsboro:#F1EFF2;
    --off-white:#FBFBFB;
    --hex-colour:#27aae1;
    --primary_colour:#011222f0;
}
img{
    max-width: 100%;
    max-height: 100%;
}
.main{
    width: var(--screen-width);
    display: flex;
    flex-direction: column;
    font-family: helvetica;
    letter-spacing: 0.02rem;
}
.navbar{
    backdrop-filter: blur(8px);
    position: fixed;
    top: 0px;
    left: 0px;
    width: var(--screen-width);
    height: 7vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 35vw;
    box-shadow: 1px 2px 6px rgba(7, 11, 12, 0.568);
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    background-color: rgba(0, 0, 0, 0.041);
}
.logo a{
    min-width: 8vw;
    height: 5vh;
    border-radius: 10vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0.3vw;
    text-decoration: none;
    background:#011222c4 ;
}
.logo a:hover{
    background-color: var(--primary_colour);
}
.logo  a img{
    max-width: 100%;
    max-height: 100%;
}
.logo a h1{
    font-size: 1rem;
    color: white;
    font-family: futura;
    letter-spacing: 0.1rem;
}
.options{
    display: flex;
    gap: 2vw;
    justify-content: center;
    align-items: center;
}
.options a{
    text-decoration: none;
    color: aliceblue;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.8rem;
    overflow: hidden;
}
.options a:hover{
    transition: all 500ms;
}

.op_about{
    background-color:transparent ;
    width: 5.5vw;
    height: 4vh;
    border-radius: 5px;
}
.op_about:hover{
    background-color:var(--primary_colour) ;
}
.op_skills{
    background-color:transparent ;
    border-radius: 5px;
    width: 4vw;
    height: 4vh;
}
.op_skills:hover{
    background-color:var(--primary_colour) ;
}
.op_project{
    background-color:transparent ;
    border-radius: 5px;
    width: 5.2vw;
    height: 4vh;
}
.op_project:hover{
    background-color:var(--primary_colour) ;
}
.op_contact{
    background-color:transparent ;
    border-radius: 5px;
    width: 6.4vw;
    height: 4vh;
    background-color: #011222c4 ;
    border-radius: 5px;
}
.op_contact:hover{
    background-color:var(--primary_colour) ;
}
.herosection1{
    width: var(--screen-width);
    height: var(--screen-height);
    display: flex;
    justify-content: center;
    align-items: center;
    background: url(./images/background-2462431_1280.jpg) no-repeat center ;
    background-size: cover;
}
.herocontent{
    width: 86vw;
    height: 75vh;
    margin-top: var(--herocontent-margin-top);
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.textbox1{
    width: 48vw;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 3vh;
}
.textbox1_text1{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.textbox1_text1 h1{
    color: white;
    font-size: 3vw;
}
.textbox1_text1 h2{
    color: #011222e1;
    font-size: .8em;
    text-align: center;
}
.btnbox{
    display: flex;
    gap: 2vw;
}
.btnbox a{
    text-decoration: none;
}
.btnbox a input{
    height: 4vh;
    width: 6vw;
    background-color: #011222f0;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 4px;
    font-family: helvetica;
}
.btnbox a input:hover{
    background-color: var(--gainsboro);
    color: var(--primary_colour);
    transition: all 200ms ease;
    font-weight: 700;
}
.imagebox2{
    background: url(./images/wallpaperflare.com_wallpaper\ \(1\).jpg) no-repeat center;
    background-size: cover;
    width: 30vw;
    height: 60.5vh;
    border-radius: 50%;
    border: 2px solid var(--primary_colour);
    display: flex;
    justify-content: center;
    align-items: center;
}
.imagebox2_image{
    width: 30vw;
    height: 60vh;
    transition: all 0.8s ease;
    background: url(./images/pexels-pixabay-157675.jpg) no-repeat top;
    background-size: cover;
    border-radius: 50%;
}
.imagebox2_image:hover{
    transform: rotateY(90deg);

}
.herosection2{
    width: var(--screen-width);
    height: 55vh;
    display: flex;
    flex-direction: column;
}
.textbox3{
    background-color:#011222f0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 10vh;
    padding: 1vh;

}
.textbox3 h1{
    background-color: transparent;
    color: white;
    font-size: 30px;
}
.aboutbox{
    display: flex;
    background-color:#011222f0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 45vh;
}
.imagebox{
    border-radius: 50%;
    height: 34.8vh;
    width: 17vw;
    border: 2px solid rgba(18, 18, 18, 0.648);
}
.imagebox img{
    max-width: 100%;
    max-height: 100%;
    aspect-ratio: 16/16;
}
.textbox2{
    width: 50vw;
    height: 40vh;
    background-color: #F0F8FF;
    border-radius: 10px;
}







.textbox2 h1{
    color: rgb(14, 13, 13);
    font-size: 20px;
    text-align: center;
}
.herosection3{
    width: var(--screen-width);
    height: 55vh;
    display: flex;
    flex-direction: column;
}
.textbox4{
    background-color:#011222f0;
    height: 10vh;
    padding: 2vh;
}
.textbox4 h1{
    text-align: center;
    color: white;
}
.box2{
    height: 45vh;
    width: 100vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    background-color:#011222f0 ;
}
.box2_box1{
    width: 30vw;
    height: 38vh;
    background-color:#F0F8FF;
    border-radius: 10px;
}
.box2_box1 h1{
    color: rgb(14, 13, 13);
    font-size: 20px;
    text-align: center;
}
.box2_box2{
    width: 30vw;
    height: 38vh;
    background-color:#F0F8FF;
    border-radius: 10px;

}
.box2_box2 h1{
    color: rgb(11, 11, 11);
    font-size: 20px;
    text-align: center;
}
.herosection4{
    width: var(--screen-width);
    background-color: #011222f0;
    display: flex;
    flex-direction: column;
}
.textbox5{
    background-color: #011222f0;
    height: 10vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.textbox5 h1{
    color: white;
}
.project_box{
    width: 100vw;
    background-color: #011222f0;
    display: flex;
    flex-direction: column;
    gap: 10vh;
    align-items: center;
}
.project1{
    height: 50vh;
    width: 80vw;
    background-color:#F0F8FF;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.629);
}
.project2{
    height: 50vh;
    width: 80vw;
    background-color:#F0F8FF;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.629);
}

.project3{
    height: 50vh;
    width: 80vw;
    background-color: #F0F8FF;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.629);
}
.project4{
    height: 50vh;
    width: 80vw;
    background-color: #F0F8FF;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.629);
}
.project5{
    height: 50vh;
    width: 80vw;
    background-color: #F0F8FF;
    border-radius: 10px;
    border: 2px solid rgba(0, 0, 0, 0.629);
}





.footer{
    background-color: #011222f0;
    width: var(--screen-width);
    height: 45vh;
    display: flex;
    flex-direction: column;
    color: white;
    border-top: 2px solid rgba(255, 255, 255, 0.715);
}
.footer-box-edit1{
    display: flex;
    width: var(--screen-width);
    height: 40vh;
}



.footer-box1{
    width: 40vw;
    background-color:var(--primary_colour);
    display: flex;
    flex-direction: column;
    gap: 2vh;
}
.footer-box1 h4{
    font-size: 1.2em;
    margin-top: 5vh;
    margin-left: 10vw;
}
.footer_quote{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    color: white;
    margin-left: 10vw;
}
.footer_quote h1{
    font-size: .9em;
    font-weight: 10;
    opacity: 50%;
}
.footer_quote h2{
    font-size: .9em;
    font-weight: 10;
    opacity: 50%;
}
.footer_quote h3{
    font-size: .9em;
    font-weight: 10;
    opacity: 50%;
    text-align: justify;
    margin-bottom: 2vh;
}






.footer-box2{
    width: 35vw;
    background-color: var(--primary_colour);
    display: flex;
    justify-content: center;
}
.footer_email{
    display: flex;
    flex-direction: column;
    gap: 2vh;
    margin-top: 5vh;
}
.footer_email h1{
    font-size: 1.2em;
}
.footer_email h2{
    font-size: .9em;
    opacity: 50%;
    font-weight: 1;
}
.footer_emailbox{
    height: 6vh;
}
.inputbox{
    height: 5vh;
    width: 17vw;
    background-color: rgba(255, 255, 255, 0.668);
    border-radius: 5px;
    border: none;
    padding-left: 2vw;
}
.inputbox:focus{
    outline: none;
}
.inputbox:hover{
    background-color: transparent;
    color: var(--gainsboro);
    border: 2px solid var(--gainsboro);
}
::placeholder{
    color: var(--primary_colour);
}
.inputbtn{
    height: 5vh;
    width: 5vw;
    border-radius: 5px;
    border: none;
    background-color: rgba(255, 255, 255, 0.668);
}
.inputbtn:hover{
    background-color: var(--primary_colour);
    color: var(--gainsboro);
    border: 2px solid var(--gainsboro);
}





.footer-box3{
    width:25vw;
    background-color: var(--primary_colour);
    display: flex;
    flex-direction: column;
}
.footer_text1{
    display: flex;
    flex-direction: column;
    margin-top: 5vh;
    gap: 2vh;
    width: 10.5vw;
}
.footer_text1 h1{
    color: white;
    font-size: 1.2em;
}
.footer_text1 h2{
    color: white;
    font-size: .9em;
    font-weight: 10;
    opacity: 50%;
}
.footer_icons{
    display: flex;
    gap: 1vw;
}
.footer_icons a{
    color: rgba(255, 255, 255, 0.668);
}
.footer_icons a:hover{
    color: white;
    transition: all 300ms ease;
}
.footer_icons a i{
    font-size: 2em;
    height: 6vh;
}

.footer_github{
    display: flex;
    flex-direction: column;
    width: 20vw;
    height: 15vh;
    gap: .5vh;
}
.footer_github h1{
    font-size: 1.2em;
}
.footer_github_box{
    display: flex;
    gap: 1vw;
    background-color: rgba(255, 255, 255, 0.668);
    border-radius: 5px;
    padding: 0.2vw;
    width: 12vw;
}
.footer_github_box:hover{
    background-color: var(--gainsboro);
    transition: all 300ms ease;
}

.github_logo{
    width: 2vw;
    height: 4vh;
    overflow-y: hidden;
}
.github_logo i{
    font-size: 2rem;
    color: var(--primary_colour);
    overflow-y: hidden;
}
.github_text{
    color: var(--primary_colour);
}
.github_text h1{
    font-size: 1em;
}
.github_text h2{
    font-size: .9em;
    font-weight: 10;
    
}





.footer-box4{
    width: var(--screen-width);
    height: 5vh;
    background-color: var(--primary_colour);
    display: flex;
    justify-content: center;
    gap: 2vw;
    font-size: .35em;
    border-top: 1px solid rgba(255, 255, 255, 0.378);
}
.footer-box4 h1{
    font-weight: 10;
    opacity: 50%;
}

/* comming soon....... */
.project1 h1{
    color: rgb(10, 10, 10);
    text-align: center;
}
.project2 h1{
    color: rgb(12, 12, 12);
    text-align: center;
}
.project3 h1{
    color: rgb(14, 14, 14);
    text-align: center;
}
.project4 h1{
    color: rgb(4, 4, 4);
    text-align: center;
}
.project5 h1{
    color: rgb(7, 7, 7);
    text-align: center;
}

/* for dropdowns */
.menu{
    display: none;
}





/* for navbar scroll stuff */
.scroll-down .navbar{
    transform: translateY(-100%);
    box-shadow: none;
}
.scroll-up .navbar{
    transform: translateY(0);
}
.navbar {
    transition: transform 0.3s ease;
  }





  /* for animation */
.show{
    opacity: 1;
    transform: translateX(0);
}


/* for herosection animation */
.animation-up{
    opacity: 0;
    transform: translatey(-100%);
    transition: all 1s ease;
}
.animation-up.show {
    opacity: 1;
    transform: translateY(0);
}
/* for delay */
.ani1{
    transition-delay: 300ms;
}
.ani2{
    transition-delay: 500ms;
}






/* for footer transition delay */
.ani3 {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ease;
    transition-delay: 0ms;
}

.ani4 {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ease;
    transition-delay: 400ms;
}

.ani5 {
    opacity: 0;
    transform: translateX(-100%);
    transition: all 1s ease;
    transition-delay: 600ms;
}

.ani3.show,
.ani4.show,
.ani5.show {
    opacity: 1;
    transform: translateX(0);
}


/* for mobile menu button */
.mob_btn{
    display: none;
    overflow: hidden;
}
#checkbox {
    display: none;
  }
  
  .toggle {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition-duration: .5s;
    position: relative;
    width: 1.2rem;
    height: 1.2rem;
    gap: 0.2rem;
  }
  
  .bars {
    width: 100%;
    height: .1rem;
    background-color: rgba(255, 217, 0, 0.833);
    border-radius: 4px;
  }
  


  #bar2 {
    transition-duration: .8s;
  }
  #bar1,#bar3 {
    width: 70%;
  }


  /* for rotation of bar */
  #checkbox:checked + .toggle .bars {
    position: absolute;
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle #bar2 {
    transform: scaleX(0);
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle #bar1 {
    width: 100%;
    transform: rotate(45deg);
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle #bar3 {
    width: 100%;
    transform: rotate(-45deg);
    transition-duration: .5s;
  }
  
  #checkbox:checked + .toggle {
    transition-duration: .5s;
    transform: rotate(180deg);
  }



  
  /* Styles for phones */
  @media (max-width: 768px) {
    .navbar{
        height: 5vh;
    }
    .logo a{
        height: 3vh;
        gap: 0.5vw;
    }
    .logo a h1{
        font-size: 0.6rem;
    }
    .options{
        display: none;
    }
    .mob_btn{
        display: block;
    }
    .herocontent{
        display: flex;
        flex-direction: column;
    }
    .textbox1{
        height: auto;
        width: auto;
    }
    .textbox1_text1{
        gap: 2vh;
    }
    .textbox1_text1 h1{
        font-size: 1.2rem;
    }
    .textbox1_text1 h2{
        font-size: .65rem;
    }
    .btnbox a input{
        width: 20vw;
    }
    .imagebox2{
        width: 80vw;
        height: 40vh;
        overflow: hidden;
    }
    .imagebox2_image{
        width: inherit;
        height: inherit;
    }
    .herosection2{
        height: 50vh;
    }
    .textbox3{
        height: 6vh;
    }
    .textbox3 h1{
        font-size: 1rem;
    }
    .imagebox{
        display: none;
    }
    .textbox2{
        width: 85vw;
    }
    .herosection3{
        height: 50vh;
    }
    .textbox4{
        height: 8vh;
    }
    .box2{
        flex-direction: column;
        gap: 2vh;
    }
    .box2_box1{
        width: 85vw;
    }
    .box2_box2{
        width: 85vw;
    }
    .footer{
        height: auto;
    }
    .footer-box-edit1{
        height: auto;
        flex-direction: column;
        width: 100vw;
    }
    .footer-box1{
        width: 100vw;
    }
    .footer_quote{
        margin-right: 10vw;
    }
    .footer-box1 h4{
        font-size: 1rem;
        overflow: hidden;
        margin-top: 2vh;
    }
    .footer_quote h1{
        font-size: .7rem;
    }
    .footer_quote h2{
        font-size: .7rem;
    }
    .footer_quote h3{
        font-size: .7rem;
    }
    .footer-box2{
        width: 100vw;
        justify-content: start;
    }
    .footer_email{
        margin-top: 2vh;
        margin-left: 10vw;
        gap: 1vh;
    }
    .footer_email h1{
        font-size: 1rem;
    }
    .footer_email h2{
        font-size: .7rem;
    }
    .inputbox{
        width: 40vw;
        height: 4vh;
        border: solid 2px gainsboro;
    }
    .inputbtn{
        width: 20vw;
        height: 4vh;
        border: solid 2px gainsboro;
    }
    .footer-box3{
        width: 100vw;
        padding-bottom: 2vh;
        display: grid;
        grid-template-rows: 1fr 1fr;
        grid-template-columns: 50% 50%;
        column-gap: 4vw;
    }
    .footer_text1{
        grid-area: 1 / 1 / 2 / 2;
        margin-top: 2vh;
        width: auto;
        margin-left: 10vw;
        gap: 1vh;
    }
    .footer_text1 h1{
        font-size: 1rem;
    }
    .footer_text1 h2{
        font-size: .7rem;
    }
    .footer_icons{
        margin-left: 10vw;
        gap: 2vw;
        grid-area: 2 / 1 / 2 / 2;
    }
    .footer_github{
        margin-top: 2vh;
        grid-area: 1 / 2 / 2 / 3;
        width: 50vw;
        height: auto;
    }
    .footer_github h1{
        font-size: 1rem;
    }
    .footer_github_box{
        width: 38vw;
    }
    .github_logo{
        width: 10vw;
    }
    .github_text h1{
        font-size: 1rem;
    }
    .github_text h2{
        font-size: .7rem;
    }
    .footer-box4 h1{
        font-size: .5rem;
    }
    .mob_btn{
        display: flex;
        flex-direction: row;
        gap: .5vw;
        background-color: #011222f0;
        height: 3vh;
        border-radius: 0.8rem;
        padding: 0.1rem;
        width: 15vw;
        justify-content: center;
        align-items: center;
    }
    .mob_btn h5{
        font-size: .7rem;
    }
    .menu{
        position: fixed;
        top: 5vh;
        right: 7vw;
        background-color: var(--primary_colour);
        width: 19.5vw;
        border-radius: 0.8rem;
        z-index: 2;
        padding: 2vh 1vw 2vh 1vw;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        justify-content: center;
        align-items: center;
        
    }
    .menu {
        display: none; /* Initially hide the menu */
      }
    .menu a{
        text-decoration: none;
    }
    .menu a li{
        font-size: .8rem;
        color: white;

    }
   
  }