*{
    margin: 0;
    padding: 0;
}
html{
    scroll-behavior: ease;
    scroll-padding-top: 70px;
}

body{
    background-color: #14131a;
}
.header{
    height: 55px;
    width: 100%;
    background-color: #14131a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: fixed;
    padding-left: 30px;
    padding-top: 0;
    z-index: 2;
    top: 0;
    bottom: 0;
}
.navContanier{
    display: none;
}

.menuBtn{
    display: none;
}
.logo{
    height: 30px;
    width: 30px;
}
.con-btn{
    height: 30px;
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: 5px;
    padding: 3px;
    background-color: #2bd576;
    margin-right: 45px;
}
.con-icon{
    height: 25px;
    width: 25px;
}
.flex{
    height: 100vh;
    width: 100%;
    background-color: #14131a;
    display: flex;
    padding-top: 50px;
}
.left-flex{
    height: 500px;
    max-width: 24%;
    width: calc(100% - 0);
    min-width: 180px;
    background-color: #1c1b23;
    border-radius: 10px;
    margin: 20px 10px 10px 10px;
    position: fixed;
}
.right-flex{

width: calc(100% - 220px);

margin-left: 220px;

margin-top: 15px;

padding: 0 20px;
}
.profile{
    background: linear-gradient(60deg, rgba(238,175,221,1) 23%, rgba(34,193,195,1) 100%);
    backdrop-filter: blur(150rem);
    background-position: center;
    height: 114px;
    width: calc(100% - 25PX);
    display: flex;
    gap: 20px;
    align-items: center;
    margin-top: 10px;
    margin-right: 30px;
}
.pro-img{
    height: 100px;
    width: 100px;
    border-radius: 50%;
    border: rgb(255, 237, 39) solid 3px;
    margin-left: 20px;
}
.name{
    font-size: 2rem;
    font-weight: 700;
    font-family: "Inter", sans-serif;
    color: black;

}
.role{
    font-size: 1.6rem;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: black;
    margin-bottom: 0;
}
.profile>p{
    margin-bottom: 0;
}
.opt-lk>a{
    font-size: 1.1rem;
    text-decoration: none;
    color: #a3b6cf;
    transition:  all 0.3s ease;
}
.opt-lk>a>i{
    font-size: 1.3rem;
}

.Socl{
    font-size: 1.5rem;
    margin: 20px 0 20px 15px;
    color: #677586;
    font-family: "Inter", serif;
}
.nav-bar{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 40px;
    text-decoration: none;
    list-style: none;
}

.card>img{
    border-radius: 10px 10px 0 0;
   
}
.nav-cont{
    padding-top: 30px;
}
.about{
    width: 100%;
    color: white;
    margin-top: 20px;

}
.ab-hed{
    font-size: 2rem;
    margin-top: 20px;
    font-family: "Inter", sans-serif;
}
.ab-con{
    font-size: 1.2rem;
    margin-top: 20px;
    font-family: "Inter", sans-serif;
}
.down{
    width: auto;
}
.download{

    height: 60vh;
    display: flex;
    width: auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.download-button {
    text-decoration: none; /* removes underline from link */
    font-display: none;
    padding: 10px 20px;
    background-color: #3498db;
    color: white;
    border: none;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;

}
.download-button:hover{
    background-color: #0073c0be;
    transition: all 0.5s ease;

}
.click{
    font-family: "Inter", sans-serif;       
    padding: 20px 0px 20px 0px;
    color: white;
}
.resu{
    padding: 20px 0px 20px 0px;
    font-family: "Inter", sans-serif;

}
  
.download-button i {
    margin-right: 5px;
}
.expr {
    width: 97%;
    padding: 0 0px 20px 0px;
}
#conp-hed,h2,p{
    font-family: "Inter", sans-serif;
    color: white;
}
.work-info{
    font-family: "Inter", sans-serif;
    padding-top: 10px;
}
#comp-hed{
    margin-top: 20px;
    color: white;
}
.skills{
    height: auto;
    width: 100%;
}
.sklls-card{
    background-color: #1c1b23;
    height: 360px;
    width: 200px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.skillhed{  
    margin: 20px 0px;
    font-family: "Inter", sans-serif;
    color: #677586;
}
/* for all heading */
.heading{
    font-family: "Inter", sans-serif;
    margin: 20px 0px 20px 0px;
    font-size: 2.2rem;
}
.skill-info{
    color: #677586;
    height: 30px;
    background-color: #14131a;
    margin: 10px 0;
    width: 100px;
    text-align: center;
    align-content: center;
    border-radius: 5px;
    border: 1px solid #765d14;
}  
#colo1{
    border: 1px solid #2bd576;
}
#colo2{
    border: 1px solid #25457d;
}
.cards{
    z-index: -1;
    margin: 0 !important;
}
.card-body{
    background-color: #1c1b23;
    border-radius: 0 0 10px 10px;
}
.card{
    border-radius: 10px;
    border: none;
}

.card-title{
    color: white;
}


footer{
    height: 70px;
    width: 100%;
    min-width: 450px;
    display: grid;
    place-items: center;
    text-align: center;
    background-color: #1c1b23;
}
.navBar{
    display: none;
}
.cop-rigt{
    font-size: 1rem;
    font-family: "Inter", sans-serif;
    margin: 0;
}
.opt-lk>a:hover{
    transform: scale(1);
    transition:  all 0.4s ease;
    color: white;
    
}

/* css for animation */
.hidden{
    opacity: 0;
    transition: all 2s ease;
    margin-right: 20px;
}
.show{
    opacity: 1;
    margin-right: 20px;
}


#preloader{
    background:  #2a2826 url(./images/loder.gif) no-repeat center center;
    background-size: 20%;
    height: 100vh;
    width: 100%;
    position: fixed;
    z-index: 3;
}

.contact-me {
    width: 100%;
    max-width: 680px;
    margin: 20px auto;
    padding: 20px;
    background-color: #2a2930;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* justify-content: center; */
    /* align-items: center; */
    /* align-content: center; */
}
.contactContainer{
    width: 100%;
    /* max-width: 670px; */
    /* height: auto; */
    display: flex;
    justify-content: center;
    align-items: center;
}
h1 {
    text-align: center;
    color: white;
}

form {
    margin-top: 20px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
}

textarea {
    height: 150px;
}

#submit-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

#submit-button:hover {
    background-color: #0056b3;
}


#success-message {
    background-color: #28a745;
    color: #fff;
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    text-align: center;
}
.cardCont {
    width: 100%;
    height: 100%;
}

.cardCont {

font-size: 18px;

padding: 20px;

gap: 20px;

border-radius: 10px;

background: #2a2930;

display: flex;

justify-content: flex-start;

align-items: center;

overflow-x: scroll;

scroll-behavior: smooth;

scrollbar-width: none;
}




/* code for toggle button which used for the dark and light mode */



/* Default styles for all devices */

  /* Laptop/Desktop */
@media(max-width: 1920){
    .cardCont {
        width: 100%;
        height: 100%;
    }
}

  @media all and  (min-width:920px) and (max-width: 1220px) {
    .right-flex {
        width: calc(100% - 145px);
        margin-left: 220px;
        margin-top: 15px;
    }
    .cardCont {
        width: 100%;
        height: 100%;
    }
  }
  
  /* Large Desktop */
  @media all and  (min-width:760px) and (max-width: 920px) {
    /* Large desktop-specific styles */
    .skills {
        height: auto;
        width: 100%;
    }    
    .left-flex{
        width: 20%;
        margin: 27px 10px 10px 12px;
    
    } 
    .opt-lk>a>i {
        font-size: 1.2rem;
    }
    .opt-lk>a {
        font-size: 1.1rem;
    }
    .Socl {
        font-size: 1.8rem;
        margin: 20px 0 20px 15px;
    }
    .profile{

    width: calc(100% - 16px);

    } 
    .left-flex>.nav-cont>ul.nav-bar  {
        padding-left: 36px;
    }
    .right-flex {
        width: calc(90% - 145px);
        margin-left: 220px;
        margin-top: 15px;
    }

    #preloader{
        height: 100%;
        background-size: 30%;
    }
    .cardCont {
        width: 100%;
        height: 100%;
    }
}

  /* Mobile */
  @media (max-width: 760px) {
    *{
        margin: 0;
        padding: 0;
    }
    .cardCont {
        width: 100%;
        height: 100%;
    }
    .flex{
        width: 100%;
        display: block;
        padding-top: 50px;
    }

    .profile {
        /* margin-left: 20px; */
        width: 100%;
        gap: 10px;
    }
    .header{
        height: 60px;
        /* width: calc(89%); */
    }
    .left-flex{
        display: none;
        width: auto;
    }
    .sklls-card {
    height: 328px;
    }
    .right-flex{
        width: 100%;
        margin-left: 0;
        padding-left: 0;
        padding: 0px 20px;
    }
    /* .profile{
        background: url(./images/Bg.jpeg) no-repeat;
        background-size: cover;
        background-position: center;
    } */


    .click{
        font-size: 18px;
        text-align: center;
    }
    .cop-rigt {
        font-size: 1.2rem;
        margin-top: 20px;
        padding: 0 20px;
    }
    button.con-btn {
        display: none;
    }
    .menuBtn{
        display: flex;
        margin-right: 20px;
        width: 50px;
        height: 50px;
        justify-content: center;
        align-items: center;
    }

    .skills {
        height: auto;
        width: 100%;
    }

    .icon{
        display: inline-block;
        color: white;
        cursor: pointer;
    }
    #check:checked~.icon #menu-icon{
        display: none;
    }
    .icon #close-icon{
        display: none;
    }
    #check:checked~.icon #close-icon{
        display: block;
    }

    #check:checked~.nav-cont{
       display: block;
    }
    input#check {
        display: none;
    } 


    /* footer icon */
    .navBar{
        display: flex;
        margin-bottom: 10px;
        height: 45px;
        padding: 0;
    }

    .opt-lk>a{
        text-decoration: none;
        margin: 0 20px;
        font-size: 1.5rem;
    }
    .opt-lk>a:hover{
        transform: scale(1);
    }
    .opt-lk{
        list-style: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    footer{
        height: 200px;
        width: 100%;
        min-width: 0;
    }
    .navContanier{
        display: none;
        width: 100%;
        position: fixed;
        background-color: #1c1b23;
        top: 60px;
        left: 0;
        transition: 0.2s;
        z-index: 1;
        padding-left: 0;
        height: 0;
        transition: all 0.8s ease;
    }
    ul.nav-bar2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        list-style: none;
        gap: 20px;
        padding: 15px 0 0 0;
        margin: 0;
        opacity: 0;
        transition: all 0.5s ease;
    }
    .nav-bar2>li>a{
        font-size: 1.1rem;
        text-decoration: none;
        color: #677586;
        overflow: hidden;
    }
    .navContanier>ul{
        overflow: hidden;
    }
    .nav-bar2>li>a:hover{
        transform: scale(1);
        color: white;
        transition:  all 0.4s ease;
    }
    .nanavContanier.active{
        height: 210px;
        opacity: 0;
    }
    nav.navContanier.active {
        display: block;
        height: 250px;
        transition: all 0.5s ease;
    }
    nav.navContanier.active ul.nav-bar2{
        opacity: 1;
        transition: all 2s ease;

    }
    .bx{
        font-size: xx-large;
    }

    #preloader{
        height: 100%;
        background-size: 50%;
    }
    .pro-img{
        margin-left: 10px;

    }
    .name{
        font-size: 1.5rem;
    }
    .role{
        font-size: 1rem;
    }
}