@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap');

*,*::after,*::before{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background-color: rgb(15, 23, 42);
    color: #cac0b3;
    font-family: 'Montserrat', sans-serif;
}

.navbar,.navbar-brand{
    background-color: rgb(21, 31, 51) !important;
    color: #ff595a !important;
}

.nav-link{
    color:#cac0b3 !important;
}

a:hover{
    color: #ff595a !important;
}

#element{
    color: #cac0b3;
}

.about-section{
    height: 150vh;
    padding-top: 50px !important;
}

.section:not(.about-section){
    height: 100vh;
    padding-top: 100px !important;
}

.section{
    word-spacing: 0.10rem;
    line-height: 1.4rem;
    text-align: justify;
}

.getknow-sec{
    margin-top: 3.75rem;
}

.para{
    text-align: justify !important;
}

.skill-box{
    display: flex;
    flex-wrap: wrap;
}


.skill-item{
    background: #cac0b3;
    color: rgb(68, 65, 65);
    border-radius: 0.625rem;
    margin-right: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1rem 2rem;
}

#project{
    margin-top: 20% !important;
}

.contact-heading{
    margin-bottom: 80px !important;
}

.contact-icon{
    padding: 1rem;
}

.link{
    font-size: 1.5rem;
}


.msg-form{
    background-color:rgb(23, 33, 54);
    padding: 1rem !important;
    width: 22.25rem !important;
    border-radius: 0.9375rem;
}

.form-heading{
    font-size: 1.3rem;
    color: #cac0b3;
}
input,textarea{
    background-color:rgb(23, 33, 54) !important;
    border-color: rgb(148 163 184) !important;
    color: #cac0b3 !important;
}

input::placeholder{
    color: rgb(148 163 184) !important;
}

.error-text{
    color: red;
    text-align: left;
    margin: -5px 0 10px;
    display: none;
}

.btn{
    color: #cac0b3;
}

footer a{
    color: #cac0b3;
}

.icons i{
    font-size: 1.2rem;
}

.icons i{
    color: #cac0b3;
    transition: color 0.1s ease-in-out;
}

.icons i:hover{
    color:#ff595a;
}
/* Media query goes here */

@media (max-width:576px){
    .skill-box{
        display: grid;
        grid-template-columns: repeat(2,1fr);
        margin-left: 1rem;
    }

    .skills-section{
        margin-top: 5rem !important;
    }

    .skills-section h4 , .getknow-sec h4{
        text-align: center !important;
    }

    .about-section{
        height: 240vh;
    }

    .contact-section{
        height: 130vh !important;
        margin-bottom: 5rem !important;
    }

    .left-sec-para{
        margin-left: 0.5rem;
        margin-bottom: 5rem;
    }

    .msg-form{
        width:19rem !important;
    }

}

@media (min-width:576px) and (max-width:767px){

    .selfintro-sec{
        margin-bottom: 3rem !important;
    }

    .about-section{
        margin-bottom: 20rem !important;
    }
    
    .contact-section{
        margin-bottom: 13rem !important;
    }
}