@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@300;400;500;600;700&family=Kalam:wght@300;400;700&family=Lato:wght@300;400;700&family=Montserrat+Alternates:wght@200;300;500;600&family=Poppins:wght@100;200;300;400;500;600;700&family=Roboto:wght@300;400;500;700&family=Slabo+27px&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');


/* ring color: rgba(59, 130, 246, .5) */
/* Heading/sub-heading Color: #E2E8F0 */
/* paragraph Color: #64748B */



*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    color: white;
    font-family: 'Poppins', sans-serif;
}

html{
    scroll-behavior: smooth;
}

button{
    text-align: center;
    font-size: 12px;
    border-radius: 4px;
    padding: 10px 20px 10px 20px;
    background:#3b82f680;
    color: #E2E8F0;
    border: none;
    outline: none;
    font-weight: 600;
    cursor: pointer;
}

h1{
    font-family: "Inter Tight", sans-serif;
    font-weight: 700;
    color: #E2E8F0;
}

p{
    color: #64748B;
}

.wrapper{
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-y: hidden;
}


::-webkit-scrollbar{
    appearance: none;
    width: 5px;
    background: #515151;
}

::-webkit-scrollbar-thumb{
    width: 5px;
    background: #3b82f680;
}

body{
    overflow-x: hidden;
}

/* blur bg element */

.section{
    position: relative;
}

.section::before{
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 650px;
    height: 650px;
    border-radius: 50%;
    background: #083c9180;
    filter: blur(250px);
    z-index: 0;
}

.fixed-menu{
    position: fixed;
    top: 20%;
    left: 0;
    width: 70px;
    height: 45px;
    display: flex;
    flex-direction: column;
    /* gap: 8px; */
    justify-content: top;
    align-items: center;
    background: #3b82f680;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    transition: all .5s cubic-bezier(1, -0.29, 0, 1.42);
    overflow: hidden;
    z-index: 1001;
}

.fixed-menu:hover{
    height: 220px;
}

.fixed-menu i{
    font-size: 26px;
    padding-block: 5px;
    color: #E2E8F0;
}

.fixed-menu a{
    width: 100%;
    height: fit-content;
    padding-block: 4px;
    text-decoration: none;
    color: #E2E8F0;
    font-size: 14px;
    z-index: 10;
    text-align: center;
    padding-inline: 8px;
    padding-block: 8px;
    transition:all .2s ease;
}

.fixed-menu a:hover{
    color: #1265d1;
    background: #000;
}

.fixed-menu a:focus{
    background: #000;
    color: #0e67db;
}

.wrapper{
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    background: #011434;
    /* justify-content: center; */
}



.hero-section{
    position:relative;
    top:0;
    left:0;
    width: 100%;
    height: 619px;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.navbar{
    width: 1300px;
    height: 70px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: bottom;
    z-index: 1000;
}

.navbar .logo{
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo h1{
    color: #E2E8F0;
    font-size: 25px;
    /* font-family: 'Kalam', cursive; */
    letter-spacing: 1.5px;
}

.navbar .menu{
    display: flex;
    flex-direction: row;
    justify-content:center;
    align-items: center;
    gap: 25px;
}

.menu a{
    text-decoration: none;
    font-size: 12px;
    color: #E2E8F0;
    transition: all .24s ease;
    padding-inline: 4px;
    padding-block: 4px;
}

.menu a:hover{
    color: #2584ff;
}

.navbar .menu-buttons{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
}

.menu-buttons button{
    text-align: center;
    padding:10px 20px 10px 20px;
    font-size: 12px;
    border-radius: 4px;
    background:#3b82f680;
    color: #E2E8F0;
    border: none;
    outline: none;
    font-weight: 900;
    transition: all .24s ease;
}

.menu-buttons button.contact-btn{
    /* background: transparent; */
    background-color: #3b82f680;
    color: #E2E8F0;
    border: none;
}

.menu-buttons button.contact-btn:hover{
    color: #E2E8F0;
    background: #5b98fb80;
}

.menu-buttons button:hover{
    background: #3b82f680;
}

/* intro section coding starts here */


.hero-section .intro-section{
    margin-top: 30px;
    width: 1330px;
    height: calc(619px - 70px);
    background: transparent;
    display: flex;
    flex-direction: row;
}

.intro-section .intro-description{
    width: 750px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    padding-left: 100px;
    background: transparent;
    gap: 30px;
}

.intro-description p{
    width: 500px;
    font-size: 14px;
    color: #E2E8F0;
    font-weight: 200;
    line-height: 20px;
    transform: translateY(200px);
    animation: slide-up .6s ease 1;
    opacity: 0;
    animation-delay: .4s;
    animation-fill-mode:forwards;

    
}

.intro-description p span{
    color: #5ca3ff;
    font-weight: bold;
}

.intro-description h1{
    font-size: 50px;
    width: 600px;
    line-height: 65px;
    transform: translateX(-1000px);
    animation: slide-in .6s ease 1;
    animation-fill-mode:forwards;
    
    opacity: 0;
}



.intro-description button{
    width: fit-content;
    padding-block: 15px;
    transition: all .24s ease;
    font-size: 15px;
    animation: slide-up .6s ease 1;
    transform: translateY(200px);
    opacity: 0;
    animation-fill-mode: forwards;
    animation-delay: .6s;
}

.intro-description button:hover{
    background: #5492f680;
}

.intro-section .intro-image{
    width: calc(100% - 750px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
    overflow: hidden;

}

.intro-image .image-box{
    width: 0px;
    height: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: img-box .5s cubic-bezier(0.58, -0.04, 0.08, 1.2) 1;
    animation-fill-mode: forwards;
    /* clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%); */
    overflow: hidden;
    /* background: #163b7756; */
    border-radius: 20%;
}

.image-box img{
    position: relative;
    top: 10px;
    width: 0px;
    height: 0px;
    transform: rotate(0deg);
    border-radius: 20px;
    /* border: 10px solid #FFD43A; */
    animation: anime-img .5s cubic-bezier(0.58, -0.04, 0.08, 1.2) 1;
    /* animation-delay: .5s; */
    animation-fill-mode: forwards;
    filter: hue-rotate(353deg) grayscale(0.5);
    z-index: 1;
    
}


/* services section coding starts here */




.services-section{
    width: 100%;
    min-width: 1000px;
    height: fit-content;
    min-height: 600px;
    display: flex;
    flex-direction: column;
    background: transparent;
    /* background: green; */
    margin-top: 150px;
}

.header{
    width: 100%;
    margin-block-end: 60px;
    background: transparent;
}

.header h1{
    width: 100%;
    height: auto;
    padding-block: 10px;
    background: transparent;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #E2E8F0;
}
 h1.small{
    font-size: 14px;
    color: #E2E8F0;
}

h1.large{
    font-size: 30px;
    color: #E2E8F0;
}

div h1 hr{
    width: 50px;
    border: 1px solid #E2E8F0;
    margin-inline: 15px;
}

.services-section hr:nth-child(1){
    border-top-left-radius: 150%;
    border-bottom-left-radius: 150%;
}
.services-section hr:nth-child(2){
    border-top-right-radius: 150%;
    border-bottom-right-radius: 150%;
}

.services-section .services-container{
    width: 100%;
    height: fit-content;
    background: transparent;
    /* background: red; */
    display: grid;
    grid-template-rows: 200px 200px;
    grid-template-columns: 350px 350px 350px;
    gap: 20px;
    justify-content: center;
}

.services-container .service-box{
    background: #032f7583;
    height: fit-content;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: left;
    gap: 20px;
    padding-inline:50px;
    padding-block: 30px;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1000;
}



.service-box span{
    font-size: 0px;
    transition: all .23s ease;
    color: #E2E8F0;
    /* display: none; */
}

.service-box h1{
    font-size: 18px;
    font-weight: 500;
    letter-spacing: .7px;
    word-spacing: 3px;
    font-family: 'Poppins', sans-serif;
    color: #E2E8F0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 30px;
}

.service-box p{
    font-size: 10px;
    /* height: 0; */
    line-height: 20px;
    color: #E2E8F0;
    text-align: left;
}

.service-box h1,
.service-box p{
    width: 100%;
}

.service-box:hover{
    background: #4689f680;
    cursor: pointer;
    transition: all .45s ease;
    color: #E2E8F0;
    transform: scale(1.1);
}


/* .service-box:hover span{
    font-size: 30px;
    display: block;
    color: #E2E8F0;
} */


/* .service-box:hover  p,
.service-box:hover h1{
    color: #E2E8F0;
    height: fit-content;
    line-height: 15px;
} */

/* .service-box:hover h1{
    font-size: 14px;
    justify-content: left;
    font-weight: bolder;
    letter-spacing: normal;
} */



/* skills section coding starts here */

.skills-section{
    margin-top: 150px;
    width: 100vw;
    height: 560px;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.skills-section .skills-container{
    position: relative;
    width: 100%;
    height: 73%;
    display: flex;
    flex-direction: row;
    padding-inline: 100px;
    gap: 50px;
}


.skills-container .skill-name-container{
    width: 20%;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* gap: 50px; */
    justify-content: top;
    align-items: center;
    border-right: 1px solid #E2E8F0;
}

.skill-name-container a{
    width: 100%;
    font-size: 15px;
    background: none;
    font-weight: bold;
    padding: 0;
    color: #E2E8F0;
    transition: all .3s ease;
    padding-block: 35px;
    padding-inline: 8px;
    /* line-height: 30px; */
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0px;
    text-decoration: none;
    cursor: pointer;

}





.skill-name-container a:hover{
    border-bottom:1px solid #00bfff;
    color: #00bfff;
}

.skills-container .skill-desc-container{
    width: 80%;
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-inline: 20px;
    padding-block-start: 20px;
    gap: 50px;
    overflow: auto;
    scroll-behavior: smooth;
    pointer-events: none;
}

.skill-desc-container::-webkit-scrollbar-thumb {
    width: 5px;
    background: #3b82f680;
}
.skill-desc-container::-webkit-scrollbar-track {
    width: 5px;
    background: #3b82f680;
}

.skill-desc-container .skill{
    width: 100%;
    min-width: 100%;
    min-height: 100%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    gap: 20px;

}

.skill-desc-container .skill h1{
    font-size: 22px;
}
.skill-desc-container .skill p{
    font-size: 12px;
    color: #E2E8F0;
    line-height: 20px;
}

.skill-desc-container .skill-stats{
    display: flex;
    flex-direction: row;
    margin-top: 30px;
    justify-content: space-between;
    padding-inline-end: 130px;
}

.skill-stats h3{
    color: #E2E8F0;
    font-size: 16px;
    font-weight: 550;
}


.skill-stats .progress-container {
    width: 60%;
    background-color: rgb(1, 40, 104);
    border-radius: 10px;
    height: 20px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background-color: #3b82f680;
    border-radius: 10px 0 0 10px;
    position: absolute;
    border-radius: 50px;
}

.progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #04306a;
    font-weight: bold;
}

.contact-me-section{
    width: 100vw;
    height: fit-content;
    display: flex;
    flex-direction: column;
}

.contact-me-section .contact-wrapper{
    width: 100%;
    height: fit-content;
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.contact-me-section form.contact-form{
    width: 50%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: 80px 150px 50px;
    justify-content: center;
    align-items: center;
    row-gap: 5px;
    column-gap: 20px;
    padding-inline:100px;
    padding-block-end: 50px;
    z-index: 1000;
}

form.contact-form input,
form.contact-form textarea{
    width: 100%;
    font-size: 16px;
    line-height: 30px;
    color: #E2E8F0;
    text-indent: 20px;
    outline: none;
    border: none;
    border-radius: 5px;
    min-height: 50px;
    background: #032f7583;
    color: #E2E8F0;
}

textarea{
    resize: none;
    resize: vertical;
    padding-inline: 10px;
    padding-block: 10px;
    max-height: 140px;
}

form.contact-form input:focus,
form.contact-form textarea:focus{
    outline: 3px solid#E2E8F0;
}



form.contact-form input::placeholder,
form.contact-form textarea::placeholder{
    color: #e2e8f03a;
    font-size: 14px;
}

form.contact-form input{
    height: 50px;
}
form.contact-form input#user-name{
    grid-column:1/2;
}
form.contact-form input#user-email{
    grid-column: 2/5;
}
form.contact-form textarea{
    height: 100px;
    grid-column: span 4;
}

form.contact-form button{
    width: 170px;
    grid-column: 1/2;
    font-size: 16px;
    background: transparent;
    border: 2px solid #E2E8F0;
    transition: all .23s ease;
    color: #E2E8F0;
}

form.contact-form button:hover{
    background: #3b82f680;
    color: #E2E8F0;
}


.social-media-icons{
    grid-column: 2/5;
    display: flex;
    flex-direction: row;
    gap: 30px;
    justify-content: left;
    align-items: center;
    padding-left: 20px;
}

.social-media-icons i{
    font-size: 30px;
    transition: all .23s ease;
}

.social-media-icons i:hover{
    color: #E2E8F0;
}

.social-media-icons span{
    color: #E2E8F0;
}

iframe.map{
    z-index: 1000;
}

.footer-section{
    width: 100vw;
    height: 200px;
    padding-inline: 100px;
    display: flex;
    flex-direction: row;
    background: #032f7583;
    padding-block: 30px;
    gap: 15px;
}

.footer-section .footer-col{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.footer-col h1{
    color: #E2E8F0;
    font-size: 20px;
}

.footer-col .links{
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
}



.footer-col a{
    color: #8d9bac;
    text-decoration: none;
    width: fit-content;
    height: fit-content;
}

.footer-col a:hover{
    color: #E2E8F0;
    text-decoration: underline;
}


.wrapper .section {
    width: 100%;
}



































/* animations code here */

@keyframes img-box{
    from{
        width: 0px;
        height: 0px;
    }
    to{
        width: 400px;
        height: 400px;
    }
}
@keyframes anime-img{
    from{
        width: 0px;
        height: 0px;
    }
    to{
        width: 400px;
        height: 400px;
    }
}



@keyframes slide-in {
    from{
        transform: translateX(-800px);
        opacity: 0;
    }
    to{
        transform: translateX(0px);
        opacity: 1;
    }
}
@keyframes slide-up {
    from{
        transform: translateY(200px);
        opacity: 0;
    }
    to{
        transform: translateY(0px);
        opacity: 1;
    }
}



/* media queries for small screens */


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

    
    .wrapper{
        width: 100vw;
        padding: 0;
        margin: 0;
        gap: 100px;
        align-items: center;
        padding-inline:30px;
    }
    .navbar{
        display: none;
        z-index: 1000;
    }

    .wrapper .section{
        padding: 0;
        margin: 0;
        width: 100%;
        display: flex;
        align-items: center;
    }

    .hero-section{
        width: 100%;
        height: fit-content;
        padding: 0;
        margin: 0;
    }

    .hero-section .intro-section{
        display: flex;
        flex-direction: column-reverse;
        width: 100%;
        height: fit-content;
        padding: 0;
        margin: 0;
    }

    .intro-section .intro-description{
        width: 100%;
        margin: 0;
        padding: 0;
        align-items: center;
    }

    .intro-description p,
    .intro-description h1{
        width: 100%;
    }

    .intro-description h1{
        position: relative;
        top: -30px;
        font-size: 35px;
        text-align: center;
        z-index: 1000;
        background-color: #01215d;
    }

    .intro-description h1 span.mobile-highlight{
        background: white;
        padding-inline: 20px;
        width: 100%;
        color: black;
        padding-block: 10px;
    }

    .intro-section .intro-image{
        width: 100%;
        /* background: #FFD43A; */
        /* display: none; */
    }

    .intro-image .image-box{
        background: transparent;
    }

    .skills-section{
        height: fit-content;
        width: 100%;
        padding: 0;
        margin: 0;
        align-items: center;
    }
    .skills-section .skills-container{
        display: flex;
        flex-direction: column;
        width: 100%;
        height: fit-content;
        overflow-y: auto;
        margin: 0;
        padding: 0;
    }

    .skills-container .skill-name-container{
        display: none;
    }

    .skills-container .skill-desc-container{
        width: 100%;
        height: fit-content;
        overflow: auto;
        margin: 0;
        padding: 0;
    }


    .services-section{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .services-section .services-container{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        padding: 0;
        margin:0;
        align-items: center;
    }

    .services-container .service-box{
        width: 50%;
        height: 300px;
    }

    .wrapper .contact-me-section{
        width: 100%;
        height: fit-content;
        margin: 0;
        padding: 0;
        align-items: center;
        flex-direction: column;
    }

    .contact-me-section .contact-wrapper{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 0;
        margin: 0;
    }

    .contact-wrapper form.contact-form{
        width: 100%;
        height: fit-content;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 0;
        margin: 0;
    }

    form.contact-form button,
    form.contact-form .social-media-icons{
        margin-top: 20px;
    }

    form input,
    form textarea{
        width: 100%;
    }

    .footer-section{
        width: 100vw;
        height: fit-content;
        margin: 0;
        padding: 0;
        gap: 50px;
        align-items: center;
        flex-direction: column;
        padding-inline: 20px;
        padding-block: 50px;
    }

    .footer-section .footer-col{
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        height: fit-content;
        margin: 0;
        padding: 0;
    }

    .fixed-menu{
        top: 0;
        left: 0;
        width: 100vw;
        z-index: 1;
        background: #01215d;
        z-index: 1001;
    }

    .fixed-menu:hover{
        height: 100vw;
    }

    .fixed-menu a{
        width: 100%;
        padding-block: 20px;
    }
}