@import url(bgpattern.css);
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700;800;900&display=swap');

*{
    box-sizing: border-box;
}
html{
    scroll-behavior: smooth;
    caret-color: var(--main-accent);
}

::selection{
    background-color: #1ea7dd;
    color: #1a1a1a;
}

:root{
    --gradient:linear-gradient(to right, 271deg,rgb(30, 167, 221) 30%,rgb(178, 127, 235) 50%,rgb(209, 223, 162) 80%,rgb(255, 160, 193) 94%);
    --white:#fff;
    --dim-white:#c1c1c1;
    --main-accent:#b27feb;
    --main-accent-dark:rgba(178, 127, 235, .2);
    --bg:#121212;
    --bg-transparent:rgba(18, 18, 18, 0.95);
    --bg-clear:#1a1a1a;
    --bg-clear-transparent:rgba(20,20,20,.8);
    --box-shadow: 0 0 25px .5px rgb(10, 10, 10);
}

body{
    font-family: 'Nunito', sans-serif;
    margin: 0;
    color: white;
    background-color: var(--bg);

}

h1{
    font-family: 'Poppins',sans-serif;
}
h1,h2,h3,h4,h5{
    margin: 1rem 0;
}

.hidden{
    visibility: hidden;
    width: 0;
    height: 0;
}

/*NAV BAR STARTS */



.logo{
    font-size: 1.9rem ;
    color: #fff;
    margin: 2rem;
    font-weight: 550;
    transition: 200ms;
    font-family: 'Poppins',sans-serif;
}

.logo:hover{
    color:var(--main-accent);
}



header {
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    background-color:var(--bg-transparent);
    color: white;
    z-index: 10;
    width: 100%;
    height: 5rem;
    margin: auto;
}



a {
    text-decoration: none;
    color: white;
    cursor: pointer;
}


.navbar-menu ul {
    display: flex;
}

.navbar-menu ul li {
    list-style: none;

}

.navbar-menu li a {
    text-decoration: none;
    color: white;
    padding: 1rem;
    font-size: 1.4rem;
    transition: 200ms;
    position: relative;
    letter-spacing: .2rem;
    margin: auto .5rem;
    padding: 0 10px;
    font-weight: 600;
    font-family: 'Poppins',sans-serif;

}


.navbar-menu ul li :hover {
    color:var(--main-accent);
}


.toggle-button {
    position: absolute;
    top: .5rem;
    right: .5rem;
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 2.5rem;
    height: 2.5rem;
}



.page-title{
    margin-bottom: 2.5rem ;
    font-size:44px;
    font-family: 'Poppins',sans-serif;
    color: #fff;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;
}







/*NAV BAR FINISHES/*


/* HERO STARTS */

.hero{
    background-color: var(--bg);
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    position: relative;

}

.inner-hero{
    position: absolute;
    background-color: var(--bg-transparent);
    backdrop-filter: blur(10px);
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 700px;
    width: 1100px;
    border-radius: 25px;
    padding: 4rem;
    margin: 0rem 0 0 0;
    box-shadow: var(--box-shadow);
    z-index: 3;
}

.hero-text{
    width: 600px;
    text-align: center;
}


.hero-about-me-title{
    margin: 5rem auto;
    font-size:52px;
    color: #fff;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 800;

}

.hero-about-me-text{
    font-size: 26px;
    margin: auto;
}
.hero-about-me-text:last-child{
    margin-bottom: 2rem;
}

.hero-img{
    transform: translateX(-30px);
    align-items: flex-end;
    width:  300px;
    height: 300px;
    border-radius: 50%;
    box-shadow: var(--box-shadow);
}

.hr{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.hr div{
    border-radius: 50%;
    height: 25px;
    width: 25px;
    margin: .5rem;
    background-color: var(--main-accent-dark);
    vertical-align: auto;
    transform: translateY(-52px);
    
}

.spacer{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    height:3rem;
}




/* HERO FINISHES */

/* ABOUT ME PAGE STARTS */

.about-me-page{
    margin: 5rem 0;
    background-color:  var(--bg);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    margin-top: -60px;
    min-height: 100vh;
    width: 100%;
}

.inner-about-me{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    width: 1400px;
    height: auto;
    border-radius: 25px;
    margin: 2rem;
}

.about-me-page-title{
    margin: 1rem 0;
    font-size:26px;
    color: #fff;
    font-weight: 800;
}

.about-me-text{
    margin: 1.5rem 0;
    line-height: 2rem;
    font-weight: 500
}

.about-me-text-container{
    display: flex;
    text-align: justify;
    flex-direction: column;
    width: 500px;
}

.about-me-img{
    width: 500px;
    height: 500px;
    border-radius: 25px;
    transition: 300ms;
    z-index: 4;
    box-shadow: var(--box-shadow);

    background: linear-gradient(white, white) padding-box,
              linear-gradient(271deg, rgb(30, 167, 221),rgb(178, 127, 235) ,rgb(209,223, 162) ,rgb(255, 160, 193)) border-box;
    border-radius: 25px;
    border: 5px solid transparent;


}

.about-me-img:hover{
    transform: scale(1.3);
}


/* ABOUT ME PAGE FINISHES */

/* CONTACT PAGE STARTS */

.contact-page{
    margin: 5rem 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    margin-top: -60px;
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.inner-contact{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 1400px;
    height: 800px;
    border-radius: 25px;
}

.mail-container{
        display: flex;
        flex-direction: column;
        text-align: center;
}

.email-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem;
}

.email-form-input-group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;

}

.email-form-input{
    width: 100%;
    background-color: var(--bg-clear);
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 2.5% 5%;
    margin: .5rem 0;
    font-size: 18px;
    font-family: 'Poppins',sans-serif;
    color: whitesmoke;
    transition: .2s ease-in-out;
}

.email-form-input:focus{
    background-color: whitesmoke;
    color: var(--bg-clear);
}

.email-form-txtarea{
    background-color: var(--bg-clear);
    width: 100%;
    margin: .5rem 0;
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 1rem 2rem;
    text-align: justify;
    font-family: 'Poppins',sans-serif;
    font-size: 18px;
    color: whitesmoke;
    resize: none;
}

.email-form-btn{
    background-color: var(--main-accent);
    color: whitesmoke;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 2% 15%;
    font-size: 22px;
    margin: 1rem;
    font-family: 'Poppins',sans-serif;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.email-form-btn:hover{
    background-color: whitesmoke;
    color: var(--bg-clear);

}



/*
.email{
    position: relative;
        margin: 2rem;
        transition: 300ms;
        font-size: 28px;
        font-weight: bold;
}

.email:hover{
        transform: scale(1.1);
        color: var(--violet);
}

.email::after{
    content: "";
    position: absolute;
    background: var(--violet);
    height: 3px;
    width: 0;
    left: 0;
    bottom: -5px;
    transition: 200ms;
}
.email:hover::after{
    width: 100%;

}
*/


.social-media {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.social-media-icons-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.social-media-icon{
    font-size: 32px;
    display:inline-block;
    cursor: pointer;
    margin: 20px;
    width: 80px;
    height: 80px;
    padding: 1.5rem 0;
    border-radius: 50%;
    line-height: 80px;
    text-align: center;
    position: relative;
    color: white;
    background-color: rgba(255, 255, 255, 0.1);
    transition: 300ms;
}

.social-media-icon::after {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    content: '';
    box-sizing: content-box;
    box-shadow: 0 0 0 3px var(--main-accent);
    top: 0;
    left: 0;
    opacity: 0;
    transition: 300ms;
  
  }
  
  
  .social-media-icon:hover{
    background-color: var(--main-accent);
    color: white;
    
  
  }
  
  
  .social-media-icon:hover::after{
    opacity: 1;
    transform: scale(1.15);
  }








/* CONTACT PAGE FINISHES */


/* WORK PAGE STARTS */

.work-page{
    background-color:  var(--bg);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    margin-top: -60px;
    position: relative;
    min-height: 100vh;
    width: 100%;
}

.projects-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin: 3rem auto
}

.cards-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    height: auto;
    width: auto;
}

.card{
    display: flex;
    flex-direction: column;
    width: 600px;
    height: auto;
    background-color: var(--bg-clear);
    padding: 10rem auto;
    border-radius: 20px;
    margin: 3rem 2rem;
}



.card-img {
    width: 100%;
    border: solid rgb(184, 184, 184);
    border-bottom: none;
    border-radius: 20px 20px 0 0 ;
}

.card-body{
    width: 100%;
    height: 100%;
    background-color: var(--bg-clear);
    padding: 1rem;
    margin: 0;
    border: solid rgb(184, 184, 184);
    border-radius: 0 0 20px 20px ;
}

.card-text{
    width: 100%;
}

.card-text h1{
    font-size: 30px;
    margin: 1rem 0;
}
.card-text h3{
    color: var(--dim-white);
    margin: 1rem 0;
}

.card-btn{
    background-color: var(--main-accent);
    display: inline-flex;
    color: whitesmoke;
    border: none;
    outline: none;
    border-radius: 5px;
    padding: 1.8% 10%;
    font-size: 22px;
    margin: .5rem 0;
    font-family: 'Poppins',sans-serif;
    justify-content: center;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.card-btn:hover{
    background-color: whitesmoke;
    color: var(--bg-clear);

}

.coming-soon-btn{
    background-color: transparent;
    display: inline-flex;
    color: whitesmoke;
    border: solid var(--dim-white);
    outline: none;
    border-radius: 5px;
    padding: 1.8% 10%;
    font-size: 22px;
    margin: .5rem 0;
    font-family: 'Poppins',sans-serif;
    justify-content: center;
    cursor: not-allowed;
    pointer-events: none;
    transition: .2s ease-in-out;
}

.coming-soon-card-img{
    filter: grayscale(100);
}
/* WORK PAGE FINISHES */

/* SETUP PAGE STARTS */

.setup-page{
    min-height: 100vh;
    width: 100%;
    margin: 5rem 0;
    background-color:  var(--bg);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    margin-top: -60px;
    position: relative;
}


/* SETUP PAGE FINISHES */

/* SUPPORT ME PAGE STARTS */

.support-me-page{

    background-color:  var(--bg);
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 60px;
    margin-top: -60px;
    width: 100%;
    min-height: 100vh;
}

 .inner-section-support{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    height: 800px;
    width: 1400px;
}

.inner-text-support{
    display: flex;
    flex-direction: column;
    width: 40%;
    margin: 0 4rem;

}


.support-me-text{
    font-size: 22px;


}

.support-icon{
    color: var(--main-accent);
    font-size: 200;
    opacity: 0;
}


.thanks-container{
    margin: 1rem 4rem;    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}



/* SUPPORT ME PAGE FINISHES */


/*FOOTER STARTS*/

.footer{

    margin-top: auto;
    display: flex;
    width: 100%;
    height: 6rem;
    background-color: var(--bg-clear);
    align-items: center;
    text-align: left;
}

.footer-text{
    margin: auto 3rem;
    font-weight: 400;
}



/* KEYFRAMES */

@keyframes nav-load {
    0%{
        transform: translateY(-100%);
    }

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

    100%{
        transform: translateY(0%);
    }
}



@keyframes hero-load {
    0%{
        transform: translateX(0px);
    }

    25%{
        transform: translateX(15px);
    }

    50%{
        transform: translateX(20px);
    }

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

    100%{
        transform: translateX(30px);
    }

}
@keyframes hero-load-img {
    0%{
        transform: translateX(0px);
    }

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

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

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

    100%{
        transform: translateX(-30px);
    }
 
    
}




/*OPTIMIZATIONS*/

/* NAVBAR MOBILE OPTIMIZATIONS */

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

    .scrollspy-indicator{
        display: none;
    }

    .logo{
        margin: 1.5rem 0 0 1.5rem;
    }

    header {
        position: fixed;
        flex-direction: column;
        align-items: flex-start;
        top: 0;
        margin-bottom: .8rem;
        background: var(--bg-transparent);

    }

    .toggle-button {
        display: flex;
        margin: 1.2rem 1.5rem 0rem 0;
    }

    .navbar-menu {
        position: absolute;
        background: var(--bg-transparent);
        height: 0;
        top:80px;
        left: 0;
        right: 0;
        width: 100vw;
        transition: .2s;
        overflow: hidden;
    }
    


    .navbar-menu ul{
        display: block;
        width: 100%;
        margin: 80px auto 0 auto;
        text-align: center;
        transition: 0.5s;
        opacity: 0;
    }
    
    .navbar-menu li {
        margin-bottom: 2.5rem;
    }

    .navbar-menu li a{
        font-size: 1.4rem;
        font-weight: 600;
        display: inline-block;
        width: 100%;
    }

    .menu-item.active{
        color:var(--main-accent);
    }

    .navbar-menu.active{
        height: 500px;
        width: 100%;
    }

    .navbar-menu.active ul {
        opacity: 1;
    }


}

/* NAVBAR OPTIMIZATION ENDS*/




@media screen and (max-width:767px) {
    html,body{
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    /* NAV AND HERO STARTS*/
                
    .page-title{
        margin: .5rem auto;
        font-size: 36px;
    }

    h1{
        font-size: 24px;
        font-weight: 600;
        margin: 1rem 0;
        text-align: justify;
    }
    h2{
        font-weight: 500;
        font-size: 20px;
        margin: .8rem 0;
    }
    
    .hero{
        margin: 4rem auto;
    }

    .inner-hero{
        width: 80%;
        position: relative;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        height: auto;
        background-color: var(--bg-clear-transparent);
        margin: 1.5rem 0;
        
    }

    .hero-text{
        width: 250px;
        display: flex;
        flex-direction: column;
    }

    .hero-about-me-title{
        font-weight: 800;
        font-size: 40px;
        margin: .5rem auto;
        text-align: center;
    }

    .hero-about-me-text{
        margin: 2rem auto;
        text-align: center;
        font-size: 20px;
    }

    .hero-about-me-title, .hero-about-me-text{
        transform: translateX(0px);
        animation: none;
    }


    .hero-img{
        width: 100px;
        height: 100px;
        transform: translateX(0px);
        margin: 1rem 0;
}

    /* NAV AND HERO ENDS*/

    

    /* ABOUT ME STARTS*/
    
    .inner-about-me{
        display: flex;

        position: relative;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: 25px;
    }
    
    .about-me-page-title{
        margin: 1.5rem auto;
        font-size:22px;
        color: #fff;
        font-weight: 800;
    }
    
    .about-me-text{
        font-weight: 500;
        font-size: 20px;
        line-height: 1.5rem;

    }
    
    .about-me-text-container{
        display: flex;
        margin:  auto;
        text-align: left;
        flex-direction: column;
        width: 80%;
        height: 100%;
    }
    
    .about-me-img{
        width: 300px;
        height: 300px;
        border-radius: 20px;
        margin: 2rem 0 5rem 0;
    }
    .about-me-img:hover{
        transform: none;
    }


    /* ABOUT ME ENDS*/

    /* WORK PAGE STARTS */

    .projects-container{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 3rem auto
    }
    
    
    .card{
        display: inline-flex;
        flex-direction: column;
        width: 400px;
        height: auto;
        background-color: var(--bg-clear);
        padding: 10rem auto;
        border-radius: 20px;
        margin: 2rem 1.5rem;
    }


    
    
    .card-img {
        width: 100%;
        border: solid rgb(184, 184, 184);
        border-bottom: none;
        border-radius: 20px 20px 0 0 ;
    }
    
    .card-body{
        width: 100%;
        height: 100%;
        background-color: var(--bg-clear);
        padding: 1rem;
        margin: 0;
        border: solid rgb(184, 184, 184);
        border-radius: 0 0 20px 20px ;
    }
    
    .card-text{
        width: 100%;
    }
    
    .card-text h1{
        font-size: 28px;
        text-align: center;
        margin: 1rem 0;
    }
    .card-text h3{
        color: var(--dim-white);
        font-size: 18px;
        text-align: justify;
        margin: 1rem 0;
    }
    
    .card-btn{
        background-color: var(--main-accent);
        display: inline-flex;
        color: whitesmoke;
        border: none;
        outline: none;
        width: 100%;
        border-radius: 8px;
        padding: 2.5%;
        font-size: 20px;
        margin: .5rem 0;
        font-family: 'Poppins',sans-serif;
        justify-content: center;
        cursor: pointer;
        transition: .2s ease-in-out;
    }
    
    .card-btn:hover{
        background-color: whitesmoke;
        color: var(--bg-clear);
    
    }

    .coming-soon-btn{
        background-color: var(--bg);
        display: inline-flex;
        color: whitesmoke;
        border: solid var(--dim-white);
        outline: none;
        width: 100%;
        border-radius: 8px;
        padding: 2.5%;
        font-size: 20px;
        margin: .5rem 0;
        font-family: 'Poppins',sans-serif;
        justify-content: center;
        cursor: not-allowed;
        pointer-events: none;
        transition: .2s ease-in-out;
    }

    /* WORK PAGE ENDS */


    /* CONTACT STARTS*/
    

    .contact-page{
        margin: 5rem 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        margin-top: -60px;
        position: relative;
        min-height: 100vh;
        width: 100%;
    }
    
    .inner-contact{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: auto;
        border-radius: 25px;
    }

    .social-media-icons-container{
        flex-wrap: wrap;
    }


    .social-media-icon::after{
        display: none;
    }

    .mail-container
    {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        margin: 2rem;
    }

    .mail-container h2{
        width: 80%;
    }

    .email{
        margin: 1rem 0;
        font-size: 24px;
        font-weight: bold;
    }



.email-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem;
}

.email-form-input-group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 300px;

}

.email-form-input{
    width: 100%;
    background-color: var(--bg-clear);
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 2.5% 5%;
    margin: .5rem 0;
    font-size: 16px;
    font-family: 'Poppins',sans-serif;
    color: whitesmoke;
    transition: .2s ease-in-out;
}

.email-form-input:focus{
    background-color: whitesmoke;
    color: var(--bg-clear);
}

.email-form-txtarea{
    background-color: var(--bg-clear);
    width: 100%;
    margin: .5rem 0;
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 5% 6%;
    text-align: justify;
    font-family: 'Poppins',sans-serif;
    font-size: 16px;
    color: whitesmoke;
    resize: none;
}

.email-form-btn{
    background-color: var(--main-accent);
    color: whitesmoke;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 4% 0;
    width: 100%;
    font-size: 18px;
    margin: 1rem;
    font-family: 'Poppins',sans-serif;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.email-form-btn:hover{
    background-color: whitesmoke;
    color: var(--bg-clear);

}
    

    .social-media {
        margin: 5rem auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
   
    /* CONTACT ENDS*/


    /*SUPPORT STARTS*/

    
    .inner-section-support{
        margin: 0;
        width: 700px;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: justify;
        background-color: var(--bg);
        
    }

    .inner-text-support{
        width: 40%;
    }


    .support-me-text{
        font-size: 22px;
    }

    .thanks-container{
        flex-direction: column;
        margin: 3rem 0;
    }


    .support-icon{
        opacity: 0;
    }

    /* SUPPORT ENDS*/


    .footer-text{
        font-size: 14px;
    }


}

@media screen and (min-width:768px) and (max-width:1400px){

    html,body{
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

    /* NAV AND HERO STARTS*/
                
    .page-title{
        margin: .5rem auto;
        font-size: 36px;
    }

    h1{
        font-size: 24px;
        font-weight: 600;
        margin: 1rem 0;
        text-align: justify;
    }
    h2{
        font-weight: 500;
        font-size: 20px;
        margin: 1rem 0;
        text-align: justify;
    }
    
    .hero{
        margin: 4rem auto;
    }

    .inner-hero{
        width: 75%;
        position: relative;
        justify-content: center;
        align-items: center;
        text-align: center;
        flex-direction: column-reverse;
        height: 750px;
        background-color: var(--bg-clear-transparent);
        margin: 1.5rem 0;
        
    }

    .hero-text{
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        text-align: justify;
    }

    .hero-about-me-title{
        font-weight: 800;
        font-size: 50px;
        text-align: center;
        margin: 2rem 0;
    }

    .hero-about-me-text{
        margin: 2rem 0;
        text-align: center;
        font-size: 24px
    }

    .hero-about-me-title, .hero-about-me-text{
        transform: translateX(0px);
        animation: none;
    }


    .hero-img{
        animation: none;
        margin-bottom: 1rem;
        width: 200px;
        height: 200px;
        transform: translatex(0px);
        
}

    /* NAV AND HERO ENDS*/

    

    /* ABOUT ME STARTS*/
    
    .inner-about-me{
        display: flex;

        position: relative;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 100%;
        border-radius: 25px;
    }
    
    .about-me-page-title{
        margin: 1.5rem auto;
        font-size:22px;
        color: #fff;
        font-weight: 800;
    }
    
    .about-me-text{
        font-weight: 500;
        font-size: 20px;

    }
    
    .about-me-text-container{
        display: flex;
        margin:  auto;
        text-align: left;
        flex-direction: column;
        width: 60%;
        height: 100%;
    }
    
    .about-me-img{
        width: 350px;
        height: 350px;
        border-radius: 20px;
        margin: 2rem 0 5rem 0;
    }
    .about-me-img:hover{
        transform: none;
    }


    /* ABOUT ME ENDS*/

     /* WORK PAGE STARTS */

     .projects-container{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        margin: 3rem auto
    }
    
    
    .card{
        display: inline-flex;
        flex-direction: column;
        width: 500px;
        height: auto;
        background-color: var(--bg-clear);
        padding: 10rem auto;
        border-radius: 20px;
        margin: 4rem;
    }
    
    
    .card-img {
        width: 100%;
        border: solid rgb(184, 184, 184);
        border-bottom: none;
        border-radius: 20px 20px 0 0 ;
    }
    
    .card-body{
        width: 100%;
        height: 100%;
        background-color: var(--bg-clear);
        padding: 1rem;
        margin: 0;
        border: solid rgb(184, 184, 184);
        border-radius: 0 0 20px 20px ;
    }
    
    .card-text{
        width: 100%;
    }
    
    .card-text h1{
        font-size: 28px;
        text-align: center;
        margin: 1rem 0;
    }
    .card-text h3{
        color: var(--dim-white);
        font-size: 18px;
        text-align: justify;
        margin: 1rem 0;
    }
    
    .card-btn{
        background-color: var(--main-accent);
        display: inline-flex;
        color: whitesmoke;
        border: none;
        outline: none;
        width: 100%;
        border-radius: 5px;
        padding: 2.5% 10%;
        font-size: 22px;
        margin: .5rem 0;
        font-family: 'Poppins',sans-serif;
        justify-content: center;
        cursor: pointer;
        transition: .2s ease-in-out;
    }
    
    .card-btn:hover{
        background-color: whitesmoke;
        color: var(--bg-clear);
    
    }

    .coming-soon-btn{
        background-color: transparent;
        display: inline-flex;
        color: whitesmoke;
        border: solid var(--dim-white);
        outline: none;
        width: 100%;
        border-radius: 5px;
        padding: 2.5% 10%;
        font-size: 22px;
        margin: .5rem 0;
        font-family: 'Poppins',sans-serif;
        justify-content: center;
        cursor: not-allowed;
        pointer-events: none;
        transition: .2s ease-in-out;
    }

    /* WORK PAGE ENDS */


    /* CONTACT STARTS*/
    

    .contact-page{
        margin: 5rem 0;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        padding-top: 60px;
        margin-top: -60px;
        position: relative;
        min-height: 100vh;
        width: 100%;
    }
    
    .inner-contact{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 90%;
        height: 100%;
        border-radius: 25px;
    }

    .social-media-icons-container{
        flex-wrap: wrap;
    }


    .social-media-icon::after{
        display: none;
    }

    .mail-container
    {
        display: flex;
        flex-direction: column;
        text-align: center;
        justify-content: center;
        align-items: center;
        width: 50%;
    }

    .email{
        margin: 3rem 0;
        font-size: 24px;
        font-weight: bold;
    }


.email-form{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem;
}

.email-form-input-group{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 600px;

}

.email-form-input{
    width: 100%;
    background-color: var(--bg-clear);
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 2.5% 5%;
    margin: .5rem 0;
    font-size: 16px;
    font-family: 'Poppins',sans-serif;
    color: whitesmoke;
    transition: .2s ease-in-out;
}

.email-form-input:focus{
    background-color: whitesmoke;
    color: var(--bg-clear);
}

.email-form-txtarea{
    background-color: var(--bg-clear);
    width: 100%;
    margin: .5rem 0;
    outline: none;
    border: none;
    border-radius: 10px;
    padding: 3% 6%;
    text-align: justify;
    font-family: 'Poppins',sans-serif;
    font-size: 16px;
    color: whitesmoke;
    resize: none;
}

.email-form-btn{
    background-color: var(--main-accent);
    color: whitesmoke;
    border: none;
    outline: none;
    border-radius: 10px;
    padding: 3% 0;
    width: 100%;
    font-size: 22px;
    margin: 1rem;
    font-family: 'Poppins',sans-serif;
    cursor: pointer;
    transition: .2s ease-in-out;
}

.email-form-btn:hover{
    background-color: whitesmoke;
    color: var(--bg-clear);

}

    

    .social-media {
        margin: 5rem auto;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
   
    /* CONTACT ENDS*/


    /*SUPPORT STARTS*/

    
    .inner-section-support{
        margin: 0;
        width: 700px;
        position: relative;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        background-color: var(--bg);
        
    }


    .support-me-text{
        margin: 1rem 0;
        font-size: 22px;
    }

    .inner-text-support{
        width: 70%;
    }

    .thanks-container{
        flex-direction: column;
        margin: 3rem 0;
    }


    .support-icon{
        opacity: 0;
    }

    /* SUPPORT ENDS*/


    .footer-text{
        font-size: 14px;
    }
}

@media screen and (min-width:1024px){
    html,body{
        display: block;
        width: 100%;
        overflow-x: hidden;
    }

   
}