@import url('https://fonts.googleapis.com/css2?family=Clicker+Script&family=Poppins:wght@100;200;300;400;500;600;700&display=swap');

:root {
    --bg-black-900: #f2f2fc;
    --bg-black-100: #fdf9ff;
    --bg-black-50: #e8dfec;
    --text-black-900: #302e4d;
    --text-black-700: #504e70;
    --skin-color: #ff5722; /* Example skin color */
}

body.dark{
--bg-black-900: #151515;
--bg-black-100: #222222;
--bg-black-50: #393939;
--text-black-900: #ffffff;
--text-black-700: #e9e9e9;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
    font-size: 16px;
    font-family: 'Poppins', sans-serif;
    overflow-y: hidden;
    /*scroll-behavior: smooth;*/
}

*,
::before,
::after {
    margin: 0;
    padding: 0;
    outline: none;
    text-decoration: none;
    box-sizing: border-box;
}

.section {
    background: var(--bg-black-100);
    min-height: 100vh;/*100vh*/
    display: flexbox;/*block*/
    padding: 0 30px;
    opacity: 1;
    position: absolute;/*fixed*/
    left: 270px;
    top: 0;
    right: 0;
    z-index: 0;
    overflow-x: hidden;
    overflow-y:scroll;
    /* scroll-snap-type: y mandatory;
    scroll-behavior: smooth;*/
    
    

}
.back-section
{
z-index: 1;
}

.active{
    z-index: 2;
    opacity: 1; 
    /*animation: slideSection 1s ease;*/
}
/*
@keyframes slideSection
{
0%
{
transform: translateX(100%);
}
100%{
    transform: translateX(0%);
}
}
*/
.hidden{
    display:none !important;

}
    


.padd-15 {
    padding-left: 15px;
    padding-right: 15px;
}

.container {
    max-width: 1100px;
    width: 100%;
    margin: auto;
}

.section .container
{
padding-top: 60px;
padding-bottom: 70px;
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 60px;

}
.section-title h2{
font-size: 40px;
color: var(--text-black-900);
font-weight: 700;
position: relative;
}
.section-title h2::before{
content:"";
height: 4px;
width: 50px;
background-color: var(--skin-color);
position: absolute;
top: 100%;
left:0;
}
.section-title h2::after{
    content:"";
    height: 4px;
    width: 25px;
    background-color: var(--skin-color);
    position: absolute;
    top: 100%;
    left:0;
    margin-top: 8px;
    }


.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
    position: relative;
}

.btn {
    font-size: 16px;
    font-weight: 500;
    padding: 12px 35px;
    color: white;
    border-radius: 40px;
    display: inline-block;
    white-space: nowrap;
    border: none;
    background: var(--skin-color);
    transition: all 0.3s ease;
}

.btn:hover {
    transform: scale(1.05);
}

.shadow-dark{
    box-shadow: 0 0 20px rgba(48,46,77,0.15);
}
ul {
    list-style-type: none;
}

/* Aside */
.aside {
    width: 270px;
    background: var(--bg-black-100);
    position: fixed;
    padding: 30px;
    left: 0;
    top: 0;
    height: 100%;
    border-right: 1px solid var(--bg-black-50);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    transition: all 0.3s ease;
}

.aside .logo {
    position: absolute;
    top: 10px;
    left: 70px;
    font-size: 10px;
    text-transform: capitalize;
}

.aside .logo a {
    color: var(--text-black-900);
    font-weight: 700;
    padding: 15px 20px;
    font-size: 30px;
    letter-spacing: 5px;
    position: relative;
}

.aside .logo{
    flex: 0 0 1%;
    max-width: 4%;
    margin-right: 100px;
}
.aside .logo img{
    height: 80px;
    width: 80px;
}

.aside .logo a span {
    font-family: 'Clicker Script', cursive;
    font-size: 40px;
}

.aside .logo a::before {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-bottom: 8px solid var(--skin-color);
    border-left: 8px solid var(--skin-color);
    bottom: 40px;
    left: -30px;
}

.aside .logo a::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 50px;
    border-top: 8px solid var(--skin-color);
    border-right: 8px solid var(--skin-color);
    top: 30px;
    right: -100px;
}

.aside .nav-toggler {
    height: 40px;
    width: 45px;
    border: 1px solid var(--bg-black-50);
    cursor: pointer;
    position: fixed;
    left: 300px;
    top: 70px;
    border-radius: 5px;
    background: var(--bg-black-100);
    display: flex; /*none*/
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.aside .nav-toggler span {
    height: 2px;
    width: 18px;
    background: var(--skin-color);
    display: inline-block;
    position: relative;
}
.aside .nav-toggler.open span{
    background-color: transparent;
}



.aside .nav-toggler.open span::before{
    transform: rotate(45deg);
    top: 0;
}

.aside .nav-toggler.open span::after{
    transform: rotate(-45deg);
    top: 0;
}

.aside .nav-toggler span::before,
.aside .nav-toggler span::after {
    content: '';
    height: 2px;
    width: 18px;
    background: var(--skin-color);
    position: absolute;
    left: 0;
}

.aside .nav-toggler span::before {
    top: -6px;
}

.aside .nav-toggler span::after {
    top: 6px;
}

.aside .nav {
    margin-top: 50px;
}

.aside .nav li {
    margin-bottom: 20px;
    display: block;
}

.aside .nav li a {
    font-size: 16px;
    font-weight: 600;
    display: block;
    border-bottom: 1px solid var(--bg-black-50);
    color: var(--text-black-900);
    padding: 5px 15px;
}

.aside .nav li a.active {
    color: var(--skin-color);
}

.aside .nav li a i {
    margin-right: 15px;
}

/* Home */
.home {
    min-height: 100vh;/*100vh*/
    display: block;
    color: var(--text-black-900);
}
.home .container{
    margin-top: 50px;
    padding-bottom: 300px;
}

.home .home-info {
    flex: 0 0 60%;
    max-width: 60%;
}

h3.hello {
    font-size: 28px;
    margin: 15px 0;
    color: var(--text-black-900);
}

h3.hello span {
    font-family: 'Clicker Script', cursive;
    font-size: 30px;
    font-weight: 700;
    color: var(--skin-color);
}

h3.my-profession {
    font-size: 30px;
    margin: 15px 0;
}

.typing {
    color: var(--skin-color);
}
.typing2 {
    color: var(--skin-color);
}

.home-info p {
    margin-bottom: 70px;
    font-size: 20px;
    color: var(--text-black-700);
}

.home-img {
    flex: 0 0 35%;
    max-width: 35%;
    text-align: center;
    position: relative;
}

.home-img img {
    flex: 0 0 20%;
    max-width: 90%;
    margin: auto;
    border-radius: 5px;
    height: 370px;
}

.home-img::after {
    content: '';
    position: absolute;
    height: 80px;
    width: 80px;
    border-bottom: 10px solid var(--skin-color);
    border-right: 10px solid var(--skin-color);
    right: -10px;
    bottom: -45px;
}

.home-img::before {
    content: '';
    position: absolute;
    height: 80px;
    width: 80px;
    border-top: 10px solid var(--skin-color);
    border-left: 10px solid var(--skin-color);
    left: -20px;
    top: -40px;
}



/* About */
.about .about-content{
    
    flex: 0 0 100%;
    flex-wrap: wrap;
    max-width: 100%;
    /*max-height: fit-content;*/
}

.about .about-content .about-text{
    flex: 0 0 100%;
    max-width: 100%;
}
.about .about-content .about-text h3{
    font-size: 24px;
    margin-bottom: 15px;
    font-weight: 700;
    color: var(--text-black-900);
}
.about .about-content .about-text h3 span {
    color: var(--skin-color);
}

.about .about-content .about-text p {
    font-size: 16px;
    line-height: 25px;
    color: var(--text-black-700);
}

.personal-info{
    background-color: #ff5722;
    flex: 0 0 60%;
    max-width: 60%;
    margin-top: 20px;
}

.info-item{
    flex: 0 0 50%;
    max-width: 50%;
    

}

.info-item p{
    font-weight: 600;
    padding: 10px 0;    
    font-size: 16px;
    color: var(--text-black-900);
    border-bottom: 1px solid var(--bg-black-50);
}

.info-item p span{
    font-weight: 400;
    color: var(--text-black-700);
    margin-left: 4px;
    display: inline-block;
}

.skillbar{
    background-color: #ffff22;
    display: flex;
    flex: 0 0 100%;
    height: 25px;
   margin-top: -64px;
   margin-right: 70px;
}
.skills {
    /*display: flex;*/
    flex: 0 0 40%;
    max-width: 40%;
    margin-top: 40px;
}

.about .about-content .skills .skill-item {
    flex: 0 0 100%;
    max-width: 100%;
    margin-top: -30px;
}

.about .about-content .skills .skill-item h5 {
    line-height: 40px;
    font-weight: 600;
    font-size: 16px;
    color: var(--text-black-900);
    text-transform: capitalize;
}

.about .about-content .skills .skill-item .progress {
    background-color: var(--bg-black-50);
    height: 7px;
    border-radius: 4px;
    width: 100%;
    position: relative;
}

.about .about-content .skills .skill-item .progress .progress-in {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 4px;
    background-color: var(--skin-color);
}
.about .about-content .skills .skill-item{
    margin-bottom: 30px;
}

.about .about-content .skills .skill-item .skill-percent {
    position: absolute;
    right: 0;
    color: var(--text-black-900);
    top: -40px;
    font-weight: 400;
    line-height: 40px;
}

.personal-info .buttons{
    margin-top: 80px;
}

.personal-info .buttons .btn {
    margin-right: 15px;
    margin-top: 10px;
}

.educationstyle .container{
    margin-top: -10px;
}
.education,
.experience {
    flex: 0 0 50%;
    max-width: 50%;
    margin-top: 30px;
}

.title {
    font-size: 24px;
    margin-bottom: 30px;
    font-weight: 700;
    color: var(--skin-color);
}

.timeline-box {
    flex: 0 0 100%;
    max-width: 100%;
}

.timeline {
    background-color: var(--bg-black-100);
    padding: 30px 15px;
    border: 1px solid var(--bg-black-50);
    border-radius: 10px;
    width: 100%;
    position: relative;
}

.timeline .timeline-item {
    position: relative;
    padding-left: 37px;
    padding-bottom: 50px;
}

.timeline .timeline-item:last-child {
    padding-bottom: 0;
}

.timeline .timeline-item::before {
    content: '';
    width: 1px;
    position: absolute;
    height: 100%;
    left: 7px;
    top: 0;
    background-color: var(--skin-color);
}

.timeline .circle-dot {
    position: absolute;
    left: 0;
    top: 0;
    height: 15px;
    width: 15px;
    border-radius: 50%;
    background-color: var(--skin-color);
}

.timeline .timeline-date {
    font-weight: 400;
    font-size: 14px;
    margin-bottom: 12px;
    color: var(--text-black-700);
}

.timeline .timeline-date .fa {
    margin-right: 5px;
}

.timeline .timeline-title {
    font-weight: 700;
    font-size: 18px;
    margin-bottom: 15px;
    text-transform: capitalize;
    color: var(--text-black-900);
}

.timeline .timeline-text {
    line-height: 25px;
    font-size: 16px;
    text-align: justify;
    color: var(--text-black-700);
}


/* service */

.service .container{
    padding-bottom: 40px;
}
.service .service-item {
    margin-bottom: 30px;
    flex: 0 0 33.33%;
    max-width: 33.33%;
}
.service .service-item .service-item-inner
{
    background-color: var(--bg-black-100);
    border: 1px solid var(--bg-black-50);
    border-radius: 10px;
    padding: 30px 15px;
    text-align: center;
    transition: all 0.3s ease;
}
.service .service-item .service-item-inner:hover
{
    box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
}


.service .service-item .service-item-inner .icon
{
height: 60px;
width: 60px;
border-radius: 50%;
display: block;
margin: 0 auto 30px;
text-align: center;
transition: all 0.3s ease;
}

.service .service-item .service-item-inner .icon .fa
{
font-size: 40px;
line-height: 60px;
color: var(--skin-color);
transition: all 0.3s ease;
}

.service .service-item .service-item-inner:hover .icon
{

    background: var(--skin-color);

}
.service .service-item .service-item-inner:hover .icon .fa
{

font-size: 25px;
color: #ffffff;
}

.service .service-item .service-item-inner h4
{
font-size: 18px;
margin-bottom: 15px;
color: var(--text-black-900);
font-weight: 700;
text-transform: capitalize;
}






/* portfolio */
.portfolio .container{
    padding-bottom: 40px;
}
.portfolio .portfolio-heading
{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 40px;
}
.portfolio .portfolio-heading h2
{
color: var(--text-black-900);
font-weight: 500;
}

.portfolio .portfolio-item 
{
flex: 0 0 33.33%;
max-width: 33.33%;
margin-bottom: 30px;
}

.portfolio .portfolio-item-inner
{
border: 6px solid var(--bg-black-100);
border-radius: 10px;
overflow: hidden;
cursor: pointer;
}

.portfolio .portfolio-item-inner .portfolio-img img
{
width: 100%;
display: block;
}

.social-links {
    display: flex; /* Use flexbox for the social links */
    justify-content: center; /* Center the links */
    margin-top: 10px; /* Space between the image and the icons */
}

.social-links a {
    margin: 0 10px; /* Space between icons */
    font-size: 24px; /* Size of the icons */
    color: var(--skin-color);
     /* Default icon color */
}
.social-links a:hover {
    color: #87CEEB;
    background:var(--bg-black-900);
     /* Change color on hover (LinkedIn color) */
}

.live-project {
    
    display: flex; /* Flexbox for live project */
    align-items: center; /* Center icon and text */
    margin-left: 10px; /* Space between the icon and text */
}

.live-project i {
    font-size: 20px; /* Size of the icon */
    margin-right: 5px; /* Space between the icon and text */
    color: var(--skin-color); /* Default icon color */
}

.live-project span {
    margin-left: 5px; /* Space between icon and text */
    font-family: 'Poppins', sans-serif;
    font-size: medium;
    color: var(--bg-black-900);
    background:var(--bg-black-100);/* Use the imported font */
}
/*
.live-project span:hover {
    margin-left: 5px; 
    font-family: 'Poppins', sans-serif;
    color: #87CEEB; 
}
    */
.project-completed {
    
    display: flex; /* Flexbox for live project */
    align-items: center; /* Center icon and text */
    margin-left: 10px; /* Space between the icon and text */
}

.project-completed i {
    font-size: 20px; /* Size of the icon */
    margin-right: 5px; /* Space between the icon and text */
    color: var(--skin-color); /* Default icon color */
}

.project-completed span{
    margin-left: 5px; /* Space between icon and text */
    font-family: 'Poppins', sans-serif;
    font-size: medium;
    color: var(--skin-color);
}
.project-completed span:hover {
    margin-left: 5px; /* Space between icon and text */
    font-family: 'Poppins', sans-serif;
    color: #87CEEB; /* Use the imported font */
}


/* Contact */

.contact .container{
    min-height:100vh;
}
.contact-title
{
color: var(--skin-color);
text-align: center;
font-size: 25px;
margin-bottom: 20px;
}

.contact-sub-title
{
color: var(--text-black-900);
text-align: center;
font-size: 15px;
margin-bottom: 20px;
}

.contact .contact-info-item
{
flex: 0 0 25%;
max-width: 25%;
text-align: center;
margin-bottom: 0px;
}
.contact .contact-info-item .icon
{
display: inline-block;
}
.contact .contact-info-item .icon .fa
{
font-size: 25px;
color: var(--skin-color);
}

.contact .contact-info-item h4
{
font-size: 18px;
font-weight: 700;
color: var(--text-black-900);
text-transform: capitalize;
margin: 15px 0 5px;
}
.contact .contact-info-item p
{
font-size: 16px;
line-height: 25px;
color: var(--text-black-700);
font-weight: 400;
}

.contact .contact-form{
flex: 0 0 100%;
    max-width: 100%;
}

.contact .contact-form .col-6
{
    flex: 0 0 50%;
    max-width: 50%;
}

.contact .contact-form .col-12
{
    flex: 0 0 100%;
    max-width: 100%;

}

.contact .contact-form .form-item
{
    margin-bottom: 30px;
}

.contact .contact-form .form-item .form-control
{
width: 100%;
height: 50px;
border-radius: 25px;
background: var(--bg-black-100);
border: 1px solid var(--bg-black-50);
padding: 10px 25px;
font-size: 16px;
color: var(--text-black-700);
transition: all 0.3s ease;
}

.contact .contact-form .form-item .form-control:focus
{
box-shadow: 0 0 20px rgba(48, 46, 77, 0.15);
}

.contact .contact-form .form-item textarea .form-control
{
height: 140px;
}
.contact .contact-form .btn
{
height: 50px;
padding: 0 50px;
}

@media (max-width:2000px) {
    .container{
        max-height: 100vh;
        padding-top: 10px;
    }
    .aside .nav-toggler{
        display: none;
        left: 30px;
        top: 20px;
    }
    
    
}

@media (max-width:1199px)
{

.container{
    max-height: 100vh;
    padding-top: 10px;
}
.aside
{
left: -270px;
}
.aside.open{
    left: 0;
}

/*.main-content
{
padding-left: 0;
} */

.aside .nav-toggler{
    display: flex;
    left: 30px;
    top: 20px;
}

.aside .nav-toggler.open{
    display: flex;
    left: 300px;

}
.section{
    left:0;
}
.about .about-content .personal-info .info-item p span
{
display: block;
margin-left: 0;
}
}


@media (max-width:991px)
{

    .container{
        max-height: 100vh;
        padding-top: 10px;
        /*overflow-y: scroll;*/
    }

    .contact .contact-info-item, 
    .portfolio .portfolio-item,
    .educationstyle .education,
    .service .service-item
{
flex: 0 0 50%;
max-width: 50%;
}
.home .home-info
{
flex: 0 0 100%;
max-width: 100%;
}
.home .home-img
{
display: none;
}

.home .home-info{
    flex:0 0 100%;
    }
}



@media (max-width:767px)
{

    .container{
        max-height: 100vh;
        padding-top: 10px;
        /*overflow-y: scroll;*/
    }

.contact .contact-form .col-6,
.contact .contact-info-item,
.portfolio .portfolio-item,
.educationstyle .education,
.educationstyle .experience,
.service .service-item,
.about .about-content .experience,
.about .about-content .education,
.about .about-content .skills,
.about .about-content .personal-info
{
    flex: 0 0 100%;
    max-width: 100%;
}
.info-item{
    flex: 0 0 100%;
    max-width: 100%;
}
.info-item p{
    flex: 0 0 100%;
    max-width: 100%;
    font-weight: 600;
    padding: 10px 0;    
    font-size: 16px;
    color: var(--text-black-900);
    border-bottom: 1px solid var(--bg-black-50);
}

}

/* MEDIA QUERY for small devices */
@media (max-width: 766px) {
    .container{
        max-height: 100vh;
        padding-top: 10px;
        /*overflow-y: scroll;*/
    }
    .skillbar{
        background-color: #ffff22;
        display: flex;
        flex: 0 0 100%;
        height: 25px;
       margin-top: -30px;
       margin-left: -10px;
    }
    .aside {
        left: -270px; /* Hide the aside initially */
    }
    
    .aside.open {
        left: 0; /* Show aside when open */
    }
    
    .aside .nav-toggler {
        display: flex; /* Show the toggler button */
    }

    .contact .contact-form .col-6,
    .contact .contact-info-item,
    .portfolio .portfolio-item,
    .educationstyle .education,
    .educationstyle .experience,
    .service .service-item,
    .about .about-content .experience,
    .about .about-content .education,
    .about .about-content .skills,
    .about .about-content .personal-info
    {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 425px) {
    .container{
        max-height: 100vh;
        padding-top: 10px;
        /*overflow-y: scroll;*/
    }
    .skillbar{
        background-color: #ffff22;
        display: flex;
        flex: 0 0 100%;
        height: 25px;
       margin-top: -30px;
       margin-left: -10px;
    }
    .aside {
        left: -270px; /* Hide the aside initially */
    }
    
    .aside.open {
        left: -20px; /* Show aside when open */
    }
    
    .aside .nav-toggler {
        left: 0px;
        display: flex;
        left: 0px; /* Show the toggler button */
    }
    
    .aside .nav-toggler span {
        height: 2px;
        width: 18px;
        background: var(--skin-color);
        display: inline-block;
        position: relative;
        left: 0px;
    }
    .aside .nav-toggler span::before {
        top: -6px;
        left: 50px;
    }
    
    .aside .nav-toggler span::after {
        top: 6px;
        left: 50px;
    }
    .aside .nav-toggler.open {
        
        display: flex;
        left: 188px; /* Show the toggler button */
    }
    .aside .nav-toggler.open span{
        background-color: transparent;
        
    }
    
    
    
    .aside .nav-toggler.open span::before{
        transform: rotate(45deg);
        top: 0;
        
    }
    
    .aside .nav-toggler.open span::after{
        transform: rotate(-45deg);
        top: 0;
        
    }
    
    .aside .nav-toggler span::before,
    .aside .nav-toggler span::after {
        content: '';
        height: 2px;
        width: 18px;
        background: var(--skin-color);
        position: absolute;
        /*left: 0;*/
        left: 0px;
    }
    
   
    

    .contact .contact-form .col-6,
    .contact .contact-info-item,
    .portfolio .portfolio-item,
    .educationstyle .education,
    .educationstyle .experience,
    .service .service-item,
    .about .about-content .experience,
    .about .about-content .education,
    .about .about-content .skills,
    .about .about-content .personal-info
    {
        flex: 0 0 100%;
        max-width: 100%;
    }
}