@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dr+Sugiyama&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Coming+Soon&display=swap');


body{
    background-color: hsl(137, 54%, 85%);
}


@media only screen and (max-width: 1250px) and (min-width: 992px)  {
    .lg-txt{
        font-family: 'Dr Sugiyama', cursive;
        font-size: 3.2rem;
        color: #378087;
    }

    .nav-it-txt{
        color:#378087;
        font-size: 10px;
        margin-top: 15px;
    }
    .navbar-nav{
        margin-right: -7rem;
    }
    .abc{
        left:1rem;
    }
    .navbar-brand{
        transform: rotate(-3deg);
    }
}

@media only screen and (min-width: 1250px) {
        .lg-txt{
            font-family: 'Dr Sugiyama', cursive;
            font-size: 3.5rem;
            color: #378087;
        }
        .navbar-brand{
            transform: rotate(-8deg);
        }
        
    }

    @media only screen and (min-width: 992px)  {
        .navbar-collapse{
            width: 100%;
            display: flex;
            justify-content: center ;
            position: absolute ;
        }
        .abc{
            left: 3rem;
            position: relative;
        }
        .nav-it-txt{
            color:#378087;
            font-size: 20px;
            margin-top: 15px;
        }
        .navbar{
            margin-bottom: 15px;
        }
        .nav-link{
            margin: 2vh;
            font-family: 'Inter', sans-serif;
            font-weight: bold;
        }
        
    }

    @media only screen and (max-width: 992px)  {
        .lg-txt{
            margin-left: 15px;
            font-family: 'Dr Sugiyama', cursive;
            font-size: 200%;
            color: #378087;
        }  
        .nav-it-txt{
            color:#378087;
            font-size: 20px;
            margin-top: 4px;
        }
        .navbar{
            margin-bottom: 15px;
        }
    }
   




.navbar-collapse{
    width: 100%;
    display: flex;
    justify-content: center ;
}



.navbar{
    height: 100px;
    width: 100%;
    display: flex;
    justify-content: center;
    text-align: center;
    top: 0.5rem;
    position: relative !important;
}

.cstm{
    background-color: #C2EDCE;
}







.heading-sctone{
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    color: #F6F7F2;
    font-size: 310%;
    padding-right: 10%;
    padding-left: 10%;
    margin-top: 2%;
}
.sect-one{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

@media only screen and (min-width: 1000px)  {

.subheading-sctone{
   text-size-adjust: auto;
   white-space: nowrap;
    padding-right: 10%;
    padding-left: 10%;
    font-family: 'Coming Soon', cursive;
    color: #378087;
    margin-top: 2%;
    font-size: 1.9vh;
    text-align: center;
}
.heading-sctone{
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
    font-weight: bold;
    color: #F6F7F2;
    font-size: 3.3vw;
    padding-right: 10%;
    padding-left: 10%;
    margin-top: 2%;
}
}

@media only screen and (max-width: 1000px)  {
    .subheading-sctone{
        text-size-adjust: auto;
         padding-right: 10%;
         padding-left: 10%;
         font-family: 'Coming Soon', cursive;
         color: #378087;
         margin-top: 2%;
         margin-top: 2rem;
     }
     .fstbr{
        display: none;
     }
}



.illustration{
    height: 25vh;
    border-radius: 500px;
    margin-top: 4vh;
    padding-left: 1vh;
    padding-right: 1vh;
}



.mtd-btn{
    background-color: #6FB2B8;
    color: #F6F7F2;
    height: 80px;
    width: 230px;
    border: none;
    margin-top: 8vh;
    font-family: 'Inter' , sans-serif;
    border-radius: 35px;
    font-size: 20px;
}










@media only screen and (min-width: 1000px){
    .sect-sec{
        margin-top: 8vh;
    }

    hr{
        margin-top: 15vh;
    }
    /* temp */
    body{
        height: 200vh;
    }
}




.sect-sec{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}




.card-parent{
    display: flex;
    flex-direction: row;
}




.fst{
    margin-left: -1vw;
}

.lst{
    margin-left: 0.5vw;
}





@media only screen and (min-width: 1500px){
    .mid{
        margin-top: -10vh !important;
    }
    .card{
        margin: 1vw;
        margin-left: 4vw;
        margin-right:4vw;
        border: none;
        width: 18vw;
        height: 50vh;
        border-radius: 200px;
        background-color: #F6F7F2;
        box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
        display: flex;
        align-items: center;
    }
    .card-parent{
        margin-top: 20vh;
    }
    .skill-heading{
        text-align: center;
        margin-top: 2vw;
        color: #378087;
        font-weight: bold;
        font-size: 1.6vw;
    }
    .skst-heading{
        letter-spacing: 1px;
        color: #378087;
        font-family: 'Inter' , sans-serif;
        font-weight: bold !important;
        font-size: 2vw;
    }
    .skill-icon{
        height: 10vh;
        width: 10vh;
        margin-top: 8vh;
    }
}


@media only screen and (max-width: 1500px){
    .card-parent{
        flex-direction: column;
        margin-top: 6vh;
    }
    .card{
        margin: 1vw;
        margin-left: 4vw;
        margin-right:4vw;
        border: none;
        width: 250px;
        height: 400px;
        border-radius: 200px;
        background-color: #F6F7F2;
        box-shadow: rgba(149, 157, 165, 0.5) 0px 8px 24px;
        display: flex;
        align-items: center;
        margin-top: 5vh;
    }
    .skill-heading{
        text-align: center;
        margin-top: 40px;
        color: #378087;
        font-weight: bold;
        font-size: 20px;
        white-space: nowrap !important;
    }
    .skst-heading{
        letter-spacing: 1px;
        color: #378087;
        font-family: 'Inter' , sans-serif;
        font-weight: bold !important;
        font-size: 25px;
        margin-top: 5vh;
    }
    .skill-icon{
        height: 10vh;
        width: 10vh;
        margin-top: 12vh;
    }
}