@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300&family=Tomorrow&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Agbalumo&family=Audiowide&family=Exo+2:ital,wght@0,100..900;1,100..900&family=Kumbh+Sans:wght@100..900&family=Manrope:wght@200..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

 * {
     margin: 0;
     padding: 0;
 }

.wave-style{
    margin: auto;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    overflow: auto;
    background: linear-gradient(315deg, rgba(101,0,94,1) 3%, rgba(60,132,206,1) 38%, rgba(48,238,226,1) 68%, rgba(255,25,25,1) 98%);
    animation: gradient 15s ease infinite;
    background-size: 400% 400%;
    background-attachment: fixed;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 12em;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    z-index: -1;
}

.wave:nth-of-type(2) {
    bottom: -1.25em;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5em;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

 .font-montserrat {
     font-family: "Montserrat", sans-serif;
     font-optical-sizing: auto;
     font-style: normal;
 }

 .fw-600 {
     font-weight: 600;
 }

 .purple {
     color: #9333ea;
 }

 .bodyDarkMode {
     background-color: #111827;
 }

 .fRow h2 {
     font-family: "Exo 2", sans-serif;
 }

 .codeSpan {
     font-family: 'Cabin', sans-serif;
     color: #9333ea;
     font-weight: 600;
 }

 .codeSpan i {
     font-weight: 600 !important;
 }
 .moonBtn {
     font-size: 2rem;
     color: white;
 }

 .moonIcon {
     margin-right: 5vw;
     cursor: pointer;
     font-size: 2.5rem;
     color: white;
     font-size: 34px;
 }

 li a {
     /* font-family: 'Tomorrow', sans-serif; */
     font-family: 'Cabin', sans-serif;
     color: #212529 !important;
     font-size: large;
     position: relative;
     /* padding: 20px 0 !important; */
 }
 ul li a:after{
    content: "";
    position: absolute;
    background-color: #9333ea;
    height: 3px;
    width: 0;
    bottom: 0;
    left: 0;
 }

 li a:hover,
 li a.active {
     color:#9333ea  !important;
     transform: scale(1.1);
 }
 a:hover:after{
    width: 100%;
    transition: .5s;
 }

 .menuBtn {
     border: none !important;
     color: #9333ea !important;
     font-size: 30px;
 }

 /* .topNavbar { */
     /* background-color: #ffffff; */
     /* box-shadow: 0px 0px 23px #9333ea; */
 /* } */
 .nav-link{
    font-size: medium;
 }

 .box-shadow{
     box-shadow: 0px 0px 23px #9333ea;
     background: rgba(0, 0, 0, 0.7);
 }

 .firstP {
     margin: auto;
 }

 .secondBox img {
    max-width: 100%;
    box-shadow: 0px 22px 33px #9333ea;
    border-radius: 50%;
    border: 1px solid #9333ea;
    padding-top: 36px;
 }

 .twoBtns div .btn1 {
     background: #111827;
     outline: none;
     border: none;
     font-size: 13px;
     padding: 0.6rem 0.8rem;
     font-family: 'Cabin';
     border-radius: 7px;
     border: 1px solid white;
 }

 .twoBtns div .btn1 a {
     text-decoration: none;
     color: #fdf5ec;
 }

 .twoBtns div .btn2 a {
     text-decoration: none;
     color: #111827;
 }


 .twoBtns div .btn1:hover {
     background: #2d3f66;
     color: #fdf5ec;
 }

 .twoBtns div .btn2:hover {
     background: #798eae;
     color: #111827;
 }

 .twoBtns div .btn2 {
     background: #d1d5db;
     outline: none;
     border: none;
     font-size: 13px;
     padding: 0.6rem 0.8rem;
     font-family: 'Cabin';
     border-radius: 7px;
     font-weight: bold;
 }

 /* tools and technology  */
 .tools-card,.projects-card{
    background: transparent;
    visibility: visible;
    box-shadow: 0px 6px 41px #c2c2c2;
 }
 .tools-card:hover{
    transform: scale(1.1);
    transition: all .5s ease;
 }
 .project-btn{
    background-color: #2d3f66;
    border: none;
    width: 117px;
    height: 37px;
 }
 .project-btn:hover{
    background-color: #384b75;
 }
.footer i{
    cursor: pointer;
}

.display-none{
    display: none;
}
.click-bg{
    background-color: #5a6275 !important;
}

 /* for dark mode */
 .sunWhite {
     color: white;
 }

 .bg-dark-color {
     background-color: #111827;
 }

 .dark-mode-shadow{
    box-shadow: 0px 0px 25px #524d4d !important;
 }

 .bg-transparent{
    background-color: transparent !important;
 }

 /* scroll bar  */
 body::-webkit-scrollbar {
    width: 12px; /* Width of the scrollbar */
}

/* Track */
body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

/* Handle */
body::-webkit-scrollbar-thumb {
    background: #9333ea;
    border-radius: 10px;
}

body::-webkit-scrollbar-thumb:hover {
    background: #7a2c92; /* Darker color when hovered */
}




 @media screen and (max-width : 991px) {
     .twoBtns {
         right: 2rem !important;
     }
 }

@media screen and (max-width : 580px) {
     .textBox {
         text-align: center;
         height: 40vh;
     }

     .secondBox img {
         /* height: 30vh; */
        width: 82vw;
         margin: auto;
         display: block;
     }

     .twoBtns {
         left: 1%;
     }

     .aDarkColor {
         color: #9333ea !important
     }
}
@media screen and (max-width : 500px) {
    .firstP{
        margin: 10px 0px;
    }
}
@media screen and (max-width : 400px) {
    .about-p{
        font-size: 14px;
    }
    .firstP{
        margin: 10px 0px;
    }
    #home{
        margin-top: auto !important;
    }
}
@media screen and (max-width : 376px) {
    .codeSpan{
        margin: 0 !important;
    }
    /* .footer-p{
        font-size: 12px !important;
    } */
    .projects-card img{
        height: 140px !important;
    }
    .projects-card p{
        font-size: 14px;
    }

    .projects-card small{
        font-size: 12px;
        font-weight: bold;
    }
    /* .twoBtns{
        margin-top: -25px !important;
    } */
    .main-container-row{
        padding: 0 !important;
    }
    
}

@media screen and (max-width : 328px) {
     .about-p h2{
        font-size: 23px;
    }
}