/* ---------------------------- */
/* ---------------------------- */

body
{
    height: auto;
    /* height: 90vh; */
    width: 100vw;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #191919;
    overflow: hidden;
}

@media screen and (max-width: 535px)
{
    body
    {
        height: 86vh;
    }


    /* #fullHeightDiv 
    {
        width: 100vw;
        overflow: hidden;
    } */
      
}

html 
{
    scroll-behavior: smooth;
}

/* ==================================================================== */


/* blviaeubliaeubr  louwehrnlfioqhneliru */
/* juehfblqiuehbwrl qlwibrfliquebrlfiq   ilqwbrfilqergaerg */

/* kjhdbkcwuehrf liqewbfliuwef  liqbwelfiqb lhbqfl */
/* ieugdhoqiyusgefq bfqigwbefiuyq liwbfiquygerb iqywbe */

/* nav */

.btnMainContainer
{
    position: relative;
    display: flex;
    flex-direction: row;
    width: -webkit-fill-available;
    max-width: 1741px;
    height: 5vh;
    margin: 10px 20px 20px 20px;
    /* background-color: aqua; */
    flex-wrap: nowrap;
    justify-content: space-between;
}


.eachBtnCont
{
    position: relative;
    display: flex;
    margin-top: 0px;
    width: 32%;
    padding-top: 0px;
    background-color: rgb(11, 11, 11);
    /* padding-bottom: 2px; */
    border-radius: 10px;
    flex-direction: column-reverse;
}

.bottomNavButtons
{
    height: 4.6vh;
    border-style: none;
    background-color: transparent;
    padding: 0;
    color: rgb(233 233 233);
    font-family: 'Inter';
    font-weight: 800;
    font-size: clamp(0px, 3.4vh, 25px);
    /* font-size: 20px;  */
}

.bottomNavButtons:hover
{
    height: 4.6vh;
    border-style: none;
    background-color: transparent;
    padding: 0;
    color: rgb(255, 81, 0);
    font-family: 'Inter';
    font-weight: 800;
    font-size: clamp(0px, 3.4vh, 25px);
}
.R
{
    margin: 0;
}


@media screen and (min-width: 700px)
{
    .bottomNavButtons:hover
    {
        color: rgb(255, 81, 0) !important;
    }

    .nameHover
    {
        scale: 1;
        transition: scale 1s ease;
        cursor:default;
    }

    
    .nameHover:hover
    {
        scale: 1.05;
        color: #797979;
        transition: scale 0.5s ease;
    }
}


.t
{
    background-color: #00d0ff;
    margin: 5px;
    color: white;
}

.copyrightTop
{
    display: flex;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.297);
    font-family: 'Inter', sans-serif;
    margin-bottom: 2px;
}
.copyrightBottom
{
    display: none;
    font-size: 0.8em;
    color: rgba(255, 255, 255, 0.297);
    font-family: 'Inter', sans-serif;
    margin-bottom: 2px;
}


@media screen and (max-width: 700px)
{
    .copyrightTop
    {
        display: none;
        
    }
    .copyrightBottom
    {
        display: flex;
    }
    .eachBtnCont 
    {
        border-radius: 13px;
        flex-direction: column;
    }

    .bottomNavButtons 
    {
        font-size: clamp(0px, 3.4vh, 20px);
    }

    .bottomNavButtons:hover
    {
        font-size: clamp(0px, 3.4vh, 20px);
        /* color: rgb(181, 181, 181) !important; */
    }
}

@media screen and (max-width: 535px)
{
    .bottomNavButtons 
    {
        font-size: 1.6vh;
    }

    .bottomNavButtons:hover
    {
        /* color: rgb(181, 181, 181) !important; */
        font-size: 1.6vh;
    }
}

@media screen and (max-width: 370px)
{
}



/* nav ends */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* MAIN & TOP page */

.mainContainer {
    position: relative;
    display: flex;
    background-color: #191919;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
}

.mainPageContainer
{
    position: relative;
    display: flex;
    /* background-color: #ff0000; */
    width: -webkit-fill-available;
    height: 95vh;
    min-height: 282px;
    margin: 20px 20px 10px 20px;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
}

@media screen and (max-width: 370px)
{
}

@media screen and (max-width: 535px)
{
}

@media screen and (max-width: 700px)
{
    .mainContainer 
    {
        flex-direction: column-reverse;
    }

    .mainPageContainer 
    {
        margin: 4px 8px 8px 8px;
    }

    .btnMainContainer 
    {
        margin: 8px 8px 4px 8px;
    }
}


/* MAIN & TOP page ends */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* SR LANDING PAGE */

.SRlandingpage
{
    position: relative;
    display: flex;
    flex-direction: column;
    width: -webkit-fill-available;
    max-width: 1741px;
    height: -webkit-fill-available;
    background-color: rgb(11, 11, 11);
    /* background: url("../../images/BlkGrainyBgrnd.png") center ; */
    background-size: cover;
    font-family: 'Bebas Neue', sans-serif;
    flex-wrap: nowrap;
    border-radius: 45px;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}


/* for 966 & above */
/* .SRlandingpage h1  
{
    font-weight: 900;
    font-size: clamp(0px, 17.8vw, 20em);
    color: #494949;
    background: url("../../images/GreyTxtBgrnd.png") center ;
    background-size: cover;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: -4% 0;
} */

.nameTxtCont
{
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
}


.profCont
{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between ;
    width: -webkit-fill-available;
    color: #545454;
    font-family: 'Inter', sans-serif;
    font-weight: 100;
    /* margin-bottom: 0.5%; */
    margin: 0 30px 19px 30px;
    z-index: 1;
}

.profCont p 
{
   transition: color 1s;
}

.profCont p:hover 
{
    color: #ff5900;
    /* font-weight: 500; */
    cursor: none;
    transition: color 0.1s;
}

.profCont2
{
    position: relative;
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: space-between ;
    width: -webkit-fill-available;
    color: #545454;
    font-family: 'Inter', sans-serif;
    font-weight: 100;
    /* margin-bottom: 0.5%; */
    margin: 0 10px 19px 10px;
}

.nameTxtSha
{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: -webkit-fill-available;
    font-weight: 900;
    font-size: clamp(0px, 29.8vw, 35em);
    color: #545454;
    margin: -4% 0;
    line-height: 1;
    font-family: 'Bebas Neue';
    font-weight: 900;
}
.nameTxtRvn
{
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: -webkit-fill-available;
    font-weight: 900;
    font-size: clamp(0px, 29.8vw, 26em);
    color: #545454;
    margin: -3.6% 2%;
    line-height: 1;
}
.recentAct
{
    position: relative;
    display: flex;
    background-size: cover;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 72%;
    margin-top: clamp(0px, 2.7%, 34px);
    margin-right: 8px;
    /* background-color: #44444494; */
    border-radius: 20px;
    /* border-style: solid; */
    background: url("../oldImages/recentActGradiendBackg.jpg") center ;
    background-size: cover;
    overflow: hidden;
}
.recentAct2
{
    position: relative;
    display: none;
    background-size: cover;
    overflow: hidden;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 72%;
    margin-top: clamp(0px, 2.7%, 34px);
    margin-right: 8px;
    /* background-color: #44444494; */
    border-radius: 20px;
    /* border-style: solid; */
    background: url("../oldImages/recentActGradiendBackg.jpg") center ;
    background-size: cover;
    overflow: hidden;
}

.recentActivityTxtCont
{
    /* background-color: red; */
    display: flex;
    position: relative;
    flex-direction: row-reverse;
    align-items: center;
    width: 96%;
}

.recentActivityTxtCont p
{
 font-size: clamp(10px, 1vw, 15px);
 color: black;
 font-family: 'Roboto Mono';
 font-weight: 900;
 text-align: right;
}

.recentActivityLinks
{
    /* background-color: red; */
    display: flex;
    position: relative;
    flex-direction: column;
    width: 96%;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 20px;
    margin-bottom: 20px;
}



.recentActivityLinks p, .recentActivityLinks a
{
    font-size: clamp(10px, 1.6vw, 16px);
    color: #9A7DEB;
    font-family: 'Roboto Mono';
    font-weight: 200;
    text-align: left;
    margin: 0;
    transition: scale 1s;
    text-decoration: none;
    margin-top: 9px;
    width: 95%;
}
.recentActivityLinks a:hover
{
    scale: 1.05;
    transition: scale 1s;
    cursor: ne-resize;
    color: #d0bfff;
}
.recentActivityLinks p:hover
{
    scale: 1.05;
    transition: scale 1s;
    cursor: not-allowed;
    color: #d0bfff;
}

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




    .nameTxtRvn
    {
        position: relative;
        display: flex;
        align-items: flex-start;
        font-weight: 900;
        font-size: clamp(0px, 29.8vw, 20em);
        color: #545454;
        margin: -3.4% 0;
        line-height: 1;
    }

    .recentAct {
        position: relative;
        display: flex;
        width: 100%;
        height: 71%;
        margin-top: clamp(0px, 1.7%, 34px);
        /* background-color: #44444494; */
        border-radius: 20px;
        border-style: solid;
    }

    /* @media screen and (max-height: 1080px)
    {
        .nameTxtCont 
        {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            transform: scaleY(100%);
        }
    }

    @media screen and (max-height: 950px)
    {

    }

    @media screen and (max-height: 850px)
    {
        .nameTxtCont 
        {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            transform: scaleY(90%);
        }
    }

    @media screen and (max-height: 750px)
    {
        .nameTxtCont 
        {
            position: relative;
            display: flex;
            flex-direction: column;
            width: 100%;
            transform: scaleY(60%);
        }
    } */

    
}

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


    .profCont
    {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between ;
        width: -webkit-fill-available;
        color: #545454;
        font-family: 'Inter', sans-serif;
        font-weight: 100;
        /* margin-bottom: 0.5%; */
        margin: 0 30px -7px 30px;
        z-index: 1;
    }
    .nameTxtSha
    {
        position: relative;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        width: -webkit-fill-available;
        font-weight: 900;
        font-size: clamp(0px, 29.8vw, 35em);
        color: #545454;
        margin: -4% 0;
        line-height: 0.80;
        transform: scaleY(65%);
        font-family: 'Bebas Neue';
    font-weight: 900;
    }
}



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

}

@media screen and (max-width: 700px)
{
    .SRlandingpage 
    {
        border-radius: 36px;
        justify-content: space-between;
    }

    .nameTxtCont
    {
        align-items: center;
        margin-top: 25px;
    }

    .nameTxtSha
    {
        position: relative;
        display: flex;
        align-items: flex-start;
        font-weight: 900;
        font-size: clamp(0px, 26vw, 35em);
        color: #545454;
        margin: -4% 0;
        line-height: 1;
        transform: scaleY(100%);
        font-family: 'Bebas Neue';
    font-weight: 900;
    }
    .nameTxtRvn
    {
        position: relative;
        display: flex;
        align-items: flex-start;
        font-weight: 900;
        font-size: clamp(0px, 45vw, 23em);
        color: #545454;
        margin: -5% 0;
        line-height: 1;
    }

    .recentAct {
        position: relative;
        display: none;
        width: 100%;
        height: 71%;
        margin-top: clamp(0px, 1.7%, 34px);
        /* background-color: #44444494; */
        border-radius: 20px;
        border-style: solid;
    }

    .profCont
    {
        display: none;
    }
    .profCont2
    {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between ;
        width: -webkit-fill-available;
        color: #545454;
        font-family: 'Inter', sans-serif;
        font-weight: 500;
        font-size: 3.2vw;
        /* margin-bottom: 0.5%; */
        margin: 0 20px 0px 20px;
    }
    .profCont2Bottom
    {
        height: 3px;
    }

        .recentAct2
    {
        position: relative;
        display: flex;
        background-size: cover;
        overflow: hidden;
        flex-direction: column;
        justify-content: space-between;
        width: 90%;
        height: 30%;
        margin-top: clamp(0px, 9%, 34px);
        margin-left: 0;
        margin-right: 0;
        margin-bottom: 5% ;
        /* background-color: #44444494; */
        border-radius: 20px;
        /* border-style: solid; */
        background: url("../images/recentActGradiendBackg.jpg") center ;
        background-size: cover;
        overflow: hidden;
    }

    .recentActivityLinks p, .recentActivityLinks a
    {
        font-size: clamp(13px, 2vw, 20px);
        color: #9A7DEB;
        font-family: 'Roboto Mono';
        font-weight: 200;
        text-align: left;
        margin: 0;
        transition: scale 1s;
        text-decoration: none;
        margin-top: 9px;
    }

    .recentActivityLinks a:hover
    {
        scale: 1;
        transition: scale 0s;
        cursor: ne-resize;
        color: #9A7DEB;
    }
    .recentActivityLinks p:hover
    {
        scale: 1;
        transition: scale 0s;
        cursor: not-allowed;
        color: #9A7DEB;
    }


}

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

}




/* SR LANDING PAGE ends */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* about page */



.exp1
{
    color: rgb(193, 193, 193);
    font-weight: 800;
    font-size: clamp(13px, 1.2vw, 20px);
}



.content-scrollable 
{
    width: 100%;  /* ========================changed for safari */
    height: 100%; /* ========================changed for safari */
    overflow: scroll;
    padding: 10px;
    /* margin: 29px; */
    color: #4E4E4E;
    background-color: rgb(11, 11, 11);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    border-radius: 20px;
    gap: 196px;
}

.aboutMePopup
{
    padding: 0px 26px;
    margin: 15px;
}

.popupChildFix
{
    display: flex;
    width: 100%;
    height: 100%;
    background-color:  rgb(11, 11, 11);
    padding: 40px 16px 40px 16px;
    overflow: hidden;
    margin-bottom: -1px;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}



.aboutmeChildSec1 {
    position: relative;
    width: -webkit-fill-available;
    height: 500px;
    background-color: rgb(11, 11, 11);
    margin: 20px 0 0px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-radius: 35px;
    color: #636363;
    font-family: 'Roboto Mono';
    font-weight: 500;
    /* font-size: 1vw; */
    border-style: solid;
    border-width: 9px;
    padding: 14px;
    border-color: #4E4E4E;
}

.aboutmeChildSec2
{
    position: relative;
    width: -webkit-fill-available;
    height: 100%;
    background-color: rgb(11, 11, 11);
    margin: 0 0 0px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-radius: 35px;

    border-style: solid;
    border-width: 9px;
    padding: 14px;
    border-color: #4E4E4E;
}

.aboutmeChildSec3
{
    position: relative;
    width: -webkit-fill-available;
    height: 100%;
    background-color: rgb(11, 11, 11);
    margin: 0 0 0px 0;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-radius: 35px;

    border-style: solid;
    border-width: 9px;
    padding: 14px;
    border-color: #4E4E4E;
    margin-bottom: 23px;
}

.aboutMeTitle 
{
    font-family: 'Inter', sans-serif;
    font-size: clamp(8px, 3.4vw, 50px);
    font-weight: 900;
    color: #ff4300;
    line-height: 0px;
}

.aboutMeSubtitles
{
    font-size: 1vw;
}

.myPicCont {
    position: relative;
    display: flex;
    /* width: 347px; */
    border-radius: 15px;
    overflow: hidden;
    height: 100%;
    align-items: center;
    flex-direction: column;
}
.myPicCont img
{
    position: relative;
    /* width: 100%; */
    height: 100%; 
}
.abtMeTxt {
    position: relative;
    width: 60%;
    padding: 8px 1vw 8px 8px;
    text-align: end;
}

.abtMeTxt2
{
    width: 100% !important;
    text-align: center !important;
}

.skls
{
    padding: 3px 9px;
    border-radius: 10px;
    color: #bdbdbd;
    margin: 1px;
    border-color: #212121;
    border-width: 2px;
    border-style: solid;
    line-height: 35px;
    font-weight: 600;
    font-size: clamp(15px, 1.2vw, 20px);
}

.aboutMeSubtitles {
    font-size: clamp(0px, 1.9vw, 16px);
}

.exNInCont
{
    position: relative;
    display: flex;
    width: 100%;
    /* height: 300px; */
    /* background-color: #0048ff; */
    flex-direction: column;
    align-content: space-around;
    align-items: center;
    justify-content: center;
    font-family: 'Jost';
    line-height: 20px;
    
}

.workName
{
    font-size: clamp(0px, 2.2vw, 20px);
    color: #b4b4b4;
    font-weight: 500;
}
.workTitle
{
    font-size: clamp(0px, 2.1vw, 24px);
    font-weight: 700;
    color: #6d677b;
}
.workDuration
{
    font-size: clamp(0px, 1.8vw, 20px);
    font-weight: 400;
    color: #9aa9be;
}

.expContainer
{
    position: relative;
    display: flex;
    width: 100%;
    height: fit-content;
    flex-direction: column;
    align-items: center;
    margin: 50px 0;

}

.expMiddleLine
{
    position: absolute;
    width: 5px;
    height: 95%;
    /* background-color: white; */
    /* background: linear-gradient(45deg, red, #00ff4e); */
    background: linear-gradient(187deg, #e8d3aaa3 -5.57%, #4200ff 55.35%, #00e7ff 107.25%);
    z-index: 1;
    border-radius: 12px;
    top: 4px;
}

.exp1Child p, .exp2Child p, .exp3Child p
{
    margin: 0;
}

.exper1
{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    line-height: clamp(0px, 2vw, 23px);
    /* height: 100px; */
    /* background-color: #00ff95; */
}
.exp1Child
{
    position: relative;
    display: flex;
    width: 48%;
    height: 80%;
    /* background-color: #3142d7; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: end;
}
.exper2
{
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    width: 100%;
    line-height: clamp(0px, 2vw, 23px);
    /* height: 100px; */
    /* background-color: #75ffc5; */
}
.exp2Child
{
    position: relative;
    display: flex;
    width: 48%;
    height: 80%;
    /* background-color: #c62525; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: start;
}
.exper3
{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    line-height: clamp(0px, 2vw, 23px);
    /* height: 100px; */
    /* background-color: #3a8667; */
}
.exp3Child
{
    position: relative;
    display: flex;
    width: 48%;
    height: 80%;
    /* background-color: #d1ff29; */
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: end;
}

.otherInv
{
    position: relative;
    display: flex;
    width: 100%;
    height: fit-content;
    /* background-color: #0048ff; */
    flex-direction: column;
    align-items: center;
    font-size: clamp(10px, 2vw, 25px);
    font-weight: 400;
    line-height: 25px;
    color: #cacaca;
}

.eduName
{
    font-size: clamp(0px, 3vw, 20px);
    font-weight: 900;
    color: #bfbfbf;
}
.eduTitle
{
    font-size: clamp(0px, 3.2vw, 24px);
    font-weight: 400;
    color: #909090;
}
.eduDuration
{
    font-size: clamp(0px, 3vw, 20px);
    font-weight: 400;
}

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

    .content-scrollable 
    {
        gap: 100px;
    }
    .aboutMeSubtitles {
        font-size: clamp(0px, 1.7vw, 16px);
    }

    .aboutMeTitle {
        font-family: 'Inter', sans-serif;
        font-size: clamp(8px, 5vw, 50px);
        font-weight: 900;
        color: #ff4300;
        line-height: 0px;
    }


    .aboutmeChildSec2 {
        position: relative;
        width: 100%;
        height: auto;
        background-color: rgb(11, 11, 11);
        margin: 0 0 100px 0;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        padding: 100px 14px;
    }

    .abtMeTxt {
        position: relative;
        width: 60%;
        padding: 8px 1vw 8px 1vw;
        text-align: end;
    }

    .skls {
        padding: 3px 9px;
        border-radius: 10px;
        color: #bdbdbd;
        margin: 1px;
        border-color: #212121;
        border-width: 2px;
        border-style: solid;
        line-height: 25px;
        font-weight: 600;
        font-size: clamp(10px, 0.2vw, 20px);
    }

    .exndin 
    {
        font-size: clamp(10px, 5.2vw, 50px);
        line-height: 30px;
    }
}


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

    .popupChildFix
    {
        padding: 16px 16px 26px 16px;
    }


    .aboutmeChildSec1 {
        position: relative;
        width: 100%;
        height: fit-content;
        background-color: rgb(11, 11, 11);
        margin: 7px 25px 0px 25px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        overflow: hidden;
        border-radius: 28px;
        border-width: 4px;
        color: #747474;
    }

    .aboutmeChildSec2 {
        position: relative;
        width: 90%;
        height: fit-content;
        background-color: rgb(11, 11, 11);
        margin: 0px 25px 0px 25px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 28px;
        border-width: 4px;
        padding: 100px 2px;
    }

    .aboutmeChildSec3 {
        position: relative;
        width: 90%;
        height: 100%;
        background-color:rgb(11, 11, 11);
        margin: -1px 25px 0px 25px;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        border-radius: 28px;
        border-width: 4px;
    }

    .myPicCont 
    {
        position: relative;
        display: flex;
        width: 100%; /* ========================changed for safari */
        border-radius: 15px;
        overflow: hidden;
        margin-bottom: 52px;
    }


    .myPicCont img {
        position: relative;
        width: 100%;
        /* height: auto; */
    }
    
    .abtMeTxt {
        position: relative;
        width: -webkit-fill-available;
        padding: 8px 0vw 8px 0vw;
        text-align: center;
        /* font-size: 1px; */
        background-color: #1c1c1c;
        border-radius: 15px;
    }

    .bio
    {
        padding: 8px 1vw 8px 1vw;
    }

    .abtMeTxt2
    {
        background-color: unset;
    }

    .aboutMeSubtitles {
        font-size: clamp(0px, 2.7vw, 16px);
    }

    .aboutMePopup
    {
        padding: 0px;
        margin: 0px;
        gap: 10vh;
    }
}




/* about page ends */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* project page */




.scrollable-div 
{
    width: 300px;
    height: 200px;
    overflow: auto;
    background-color: rgb(11, 11, 11);
    width: 100%;
    height: 100%;
    /* Hide scrollbar for Firefox */
    scrollbar-width: none; 
    transition: 1s;

}

.scrollable-div::-webkit-scrollbar {
    display: none;
}

::-webkit-scrollbar {
    display: none;
}


.projectPopupMainContainer
{
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 20px;
    border-radius: 25px;
    font-family: 'Jost', sans-serif;
    transition: 0.5s ease-in-out;
}


.projectsInsideRowDiv
{
    position: relative;
    display: flex;
    flex-direction: row;
    background-color: rgb(11, 11, 11);
    width: 100%;
    /* height: clamp(416px, 42vh, 500px); */
    height: clamp(374px, 41vh, 500px);
    /* margin: 3px; */
    transition: 0.5s ease-in-out;
}

.projectsIndivDivs
{
    position: relative;
    margin: 5px 5px;
    background-color: #b0b0b0;
    color: #8f8f8f;
    border-style: solid;
    border-color: #484848;
    border-radius: 40px;
    border-width: 8px;
    overflow: hidden;
    transition: 0.5s ease-in-out;
    text-align: center;
    font-family: 'Bebas Neue', sans-serif;

}

.indivDiv1
{
    width: 60%;
    display: flex;
    padding: 5px;
    flex-direction: column;
    justify-content: space-evenly;
    transition: 0.5s ease-in-out;
    color: #444444;
    background-color: #b0b0b0;
    font-family: 'Inter', sans-serif;
}

.indivDiv1:hover
{
    width: 70%;
    transition: 0.5s ease-in-out;
}

.projectTxtHeader
{
    font-size: clamp(0px, 8vw, 120px);
    font-weight: 900;
    margin: 0vh 5vw 0 2vw;
}

.projectsTxtInner
{
    font-size: clamp(0px, 1.2vw, 18px);
    font-weight: 300;
    margin: 0vh 1vw;
    text-align: end;
}

/* -- */

.indivDivSmallOne
{
    width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    background-color: #0e0e0e;
    transition: 0.5s;
}

.indivDivSmallOne:hover
{
    width: 50%;
    transition: 0.5s;
    cursor: pointer;
}

.indivDivBigOne
{
    width: 60%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    background-color: #000000;
    transition: 0.5s;
}

.indivDivBigOne:hover
{
    width: 70%;
    transition: 0.5s;
    cursor: pointer;
}



.indivDivSmallOne:hover .insideInDiv2Txt
{
    opacity: 0.2;
}

.indivDivBigOne:hover .insideInDiv2Txt
{
    opacity: 0.2;
}

.indivDivSmallOne:hover .insideInDivSmallOne
{
    display: flex;
    transition: 0.5s;
    margin: 0px;
    border-style: none;
}

.indivDivBigOne:hover .insideInDivBigOne
{
    display: flex;
    transition: 0.5s;
    margin: 0px;
    border-style: none;
}

.insideInDivSmallOne
{
    position: relative;
    display: none;
    width: 100%;
    height: 100%;
    margin: 10px;
    border-radius: 20px;
    border-style: solid;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    transition: 0.5s;
}


.insideInDivSmallOne img
{
    width: 100%;
    height: -webkit-fill-available;
    object-fit: cover;
    object-position: center;
    transition: 0.5s;
}

.insideInDivBigOne
{
    position: relative;
    display: none;
    width: 100%;
    height: 100%;
    margin: 10px;
    border-radius: 20px;
    border-style: solid;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    transition: width 0.5s ease-in-out;
}

.insideInDivBigOne img
{
    width: -webkit-fill-available;
    height: -webkit-fill-available;
    object-fit: cover;
    object-position: center;
    transition: 0.5s;
}

.insideInDiv2Txt
{
    display: flex;
    position: absolute;
    font-size: clamp(0px,7.8vw, 130px);
    font-weight: 900;
    margin: 0vh 5vw;
    /* text-shadow: 
    -3px -3px 0 #fff, 
    3px -3px 0 #fff, 
    -3px 3px 0 #fff, 
    3px 3px 0 #fff; */
    flex-direction: column;
    align-items: center;
}

/* -- */
/* -- */

.indivDivSmallOne:hover .learnMore
{
    display: none;
}

.indivDivBigOne:hover .learnMore
{
    display: none;
}

.learnMore
{
    line-height: 1px;
    font-size: 20px;
    text-decoration: none;
    font-weight: 200;
    text-shadow: none;
}





@media screen and (max-width: 965px)
{
    .projectsInsideRowDiv {
        position: relative;
        display: flex;
        flex-direction: row;
        /* background-color: #191919; */
        width: 100%;
        /* height: clamp(416px, 42vh, 500px); */
        height: clamp(266px, 33vh, 500px);
        /* margin: 3px; */
        transition: 0.5s ease-in-out;
    }

    .projectsTxtInner {
        font-size: clamp(0px, 1.4vw, 11.7px);
        font-weight: 300;
        margin: 0vh 13px;
        text-align: end;
        line-height: 13px;
    }

    .insideInDiv2Txt {
        display: flex;
        position: absolute;
        font-size: clamp(0px,7.3vw, 130px);
        font-weight: 900;
        margin: 0vh 2vw;
        text-shadow:none;
        flex-direction: column;
        align-items: center;
    }

    /* .k {
        display: none;
        line-height: 20px;
        font-size: 11px;
        text-decoration: none;
        font-weight: 500;
        text-shadow: none;
        color: #000000;
        padding: 1px 5px;
        margin: 2px;
        border-style: solid;
        border-width: 1px;
        border-color: #000000;
        background-color: #ffffff;
        border-radius: 14px;
    } */

    .learnMore {
        line-height: 13px;
        font-size: 15px;
        text-decoration: none;
        font-weight: 200;
        text-shadow: none;
    }
}

@media screen and (max-width: 700px)
{
    .projectPopupMainContainer {
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 13px;
        border-radius: 16px;
        font-family: 'Jost', sans-serif;
        transition: 0.5s ease-in-out;
    }

    /* .projectsIndivDivs {
        position: relative;
        margin: 5px 5px;
        background-color: #ececec;
        border-radius: 9px;
        overflow: hidden;
        transition: 0.5s ease-in-out;
        text-align: center;
    } */

    .insideInDiv2Txt 
    {
        backdrop-filter: blur(2px);
    }

    .projectsTxtInner {
        font-size: clamp(0px, 1.7vw, 11.6px);
        font-weight: 300;
        margin: 0vh 13px;
        text-align: end;
    }


    .projectsIndivDivs {
        position: relative;
        margin: 5px 5px;
        border-radius: 32px;
        overflow: hidden;
        transition: 0.5s ease-in-out;
        text-align: center;
        border-style: solid;
        border-color: #616161;
        color: rgb(30 30 30 / 67%);
        /* box-shadow: 0px 0px 8px 1px #00000070 inset; */
    }

    .insideInDivSmallOne {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0px;
        border-radius: 0px;
        border-style: none;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        transition: 0.5s;
    }

    .insideInDivBigOne {
        position: relative;
        display: flex;
        width: 100%;
        height: 100%;
        margin: 0px;
        border-radius: 0px;
        border-style: none;
        overflow: hidden;
        justify-content: center;
        align-items: center;
        transition: width 0.5s ease-in-out;
    }

    .learnMore {
        line-height: 13px;
        font-size: 15px;
        text-decoration: none;
        font-weight: 600;
        text-shadow: none;
        color: white;
    }
}

@media screen and (max-width: 535px)
{
    #popup2 
    {
        background-color: rgb(11, 11, 11);
        /* transition: visibility 1s, opacity 1s, ease-in-out; */
        /* padding: 15px 10px; */
    }

    .projectPopupMainContainer 
    {
        position: relative;
        display: flex;
        flex-direction: column;
        margin: 7px;
        /* margin-top: 30px; */
        border-radius: 16px;
        font-family: 'Jost', sans-serif;
        transition: 0.5s ease-in-out;
    }

    .insideInDivSmallOne 
    {
        background-color: black;
    }

    .insideInDivSmallOne img 
    {
        opacity: 0.1;
    }

    .insideInDivBigOne 
    {
        background-color: rgb(0, 0, 0);
    }

    .insideInDivBigOne img 
    {
        opacity: 0.1;
    }

    .insideInDiv2Txt {
        display: flex;
        position: absolute;
        font-size: clamp(0px,5vw, 130px);
        font-weight: 900;
        margin: 0vh 2vw;
        text-shadow: none;
        flex-direction: column;
        align-items: center;
        color: #ffffffd9;
    }

    .indivDivBigOne:hover .k 
    {
        display: none;
    }

    .indivDivSmallOne:hover .k 
    {
        display: none;
    }

    .learnMore {
        line-height: 13px;
        font-size: 10px;
        text-decoration: none;
        font-weight: 200;
        font-family: 'Jost', sans-serif;
        text-shadow: none;
        color: #ffffff;
    }

    .indivDivSmallOne:hover .learnMore
    {
        display: flex;
    }

    .indivDivBigOne:hover .learnMore
    {
        display: flex;
    }

    .projectsTxtInner {
        font-size: clamp(0px, 2.1vw, 11.6px);
        font-weight: 400;
        margin: 0vh 13px;
        text-align: end;
        line-height: 10px;
    }

    
}

@media screen and (max-width: 380px)
{
    .projectsTxtInner {
        font-size: clamp(0px, 2.5vw, 11.6px);
        font-weight: 400;
        margin: 0vh 13px;
        text-align: end;
        line-height: 8px;
    }

    .projectsInsideRowDiv {
        position: relative;
        display: flex;
        flex-direction: row;
        /* background-color: #191919; */
        width: -webkit-fill-available;
        height: clamp(249px, 33vh, 500px);
        /* margin: 3px; */
        transition: 0.5s ease-in-out;
    }
}


/* expandable popup */

.Expopup {
    display: flex;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0.5s;
    position: absolute;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    width: 100%;
    height: 100%;
    padding: clamp(18px, 3vw, 35px); 
    color: white;
    /* Rest of the styling for the popup */
}

.projLinksHighlight
{
    text-decoration: none;
    font-weight: 500;
    color: #ff5100;
}

.projLinksHighlight a
{
    text-decoration: none;
    font-weight: 700;
    color: #e1ff00;
}

/* .projectPopupMainContainer
{
    position: relative;
    display: flex;
    flex-direction: column;
    margin: 30px;
    border-radius: 25px;
    font-family: 'Jost', sans-serif;
    transition: 0.5s ease-in-out;
} */

.Expopup.visible {
    
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s, visibility 0.5s;
}

.close {
    cursor: pointer;
    position: relative;
    color: #000000;
    /* height: 15px; */
    font-size: 30px;
    line-height: 18px;
    text-align: center;
    top: -2px;
    font-weight: 900;
}
.closeTxt
{
    position: relative;
    display: flex;
    margin: 0;
    margin-left: -43px;
    font-weight: 900;
    color: #000000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.1s ease, visibility 1s ease, margin-left 0.5s ease;

}

.cls
{
    background-color: #ff4e00;
    position: fixed;
    display: flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    z-index: 1;
    padding: 9px;
    border-radius: 11px;
    top: 37px;
    left: 41px;
    /* margin: 0 0 0 14px; */
}
.cls:hover .closeTxt
{
    display: flex;
    opacity: 1;
    visibility: visible;
    margin-left: 0px;
    transition: opacity 1.5s ease, visibility 1s ease, margin-left 0.5s ease;

}

.carkeyExpChildContainer
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color:rgb(11, 11, 11);
    overflow: hidden;
}

.carkeyExp
{
    border-radius: 20px;
}

.projectexpHeader
{
    position: relative;
    font-family: 'Bebas Neue', sans-serif;
    color: white;
    font-size: clamp(80px, 9vw, 110px);
    font-weight: 900;
    margin: 0;
    line-height: 130px;
}

.hmkit
{
    font-size: clamp(40px, 9vw, 110px);
}

.descripNdSkillsInvCont
{
    position: relative;
    display: flex;
    flex-direction: row;
    width: 98%;
    height: fit-content;
    gap: 10px;
}
.descripCont
{
    position: relative;
    display: flex;
    width: 80%;
    height: 100%;
    min-height: 126px;
    /* background-color: #2b2b2b; */
    border-style: solid;
    border-width: 5px;
    border-color:  #2b2b2b;
    border-radius: 26px;
    padding: 5px 10px;
    align-items: center;
}

.skillsBarCont
{
    position: relative;
    width: 20%;
    min-height: 126px;
    font-family: 'Jost', sans-serif;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: center;
    border-style: solid;
    border-width: 5px;
    border-color: #2b2b2b;
    padding: 2px;
    border-radius: 26px;
    padding: 5px 5px;
}

.ExpSkillsEnvTxt
{
    margin: 0 6px;
    font-weight: 600;
    background: linear-gradient(162deg, #ffe100 35.97%, #bfff00 99.52%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(0px, 1.5vw, 20px);
}

.ExpSkillsCont
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
}

.ExpSkills
{
    width: clamp(0px, 100%, 134px);
    text-align: center;
}

.ExpSkills p
{
    margin: 0;
    color: rgb(0, 0, 0);
    background: linear-gradient(162deg, #bac3ce 35.97%, #c8bdd6 99.52%);
    /* padding: 1px 24px; */
    border-radius: 17px;
    font-weight: 600;
    font-size: clamp(0px, 1.9vw, 15px);
}


.projectexpBody
{
    position: relative;
    font-family: 'Jost', sans-serif;
    text-align: center;
    color: white;
    font-size: small;
    font-weight: 200;
}

.ProjExpImgSlider
{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background-color: transparent;
    overflow: hidden;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: center;
    margin-top: 10vh;
}

.ProjCover1
{
    position: relative;
    display: flex;
    width: 90%;
    height: 42vw;
    background-color: #00ff0800;
    overflow: hidden;
    border-radius: 20px;
}

.ProjCover1 img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.ProjCover2
{
    position: relative;
    display: flex;
    width: 90%;
    height: 42vw;
    /* background-color: #00ff08; */
    overflow: hidden;
    border-radius: 20px;
    flex-direction: row;
    gap: 11px;
}

.ProjCover2 img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.ProjVerticalImgCont
{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    width: 90%;
    height: auto;
    gap: 5px;
    margin: 50px 0;
}

.ProjInsidevertical
{
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
    background-color: #00d0ff00;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
   
}

.ProjInsideverticalImg
{
    position: relative;
    display: flex;
    width: 100%;
    height: auto;
}
.ProjInsideverticalImg img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}
.ProjInsideverticalImg video
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}
















.ProjExpImgIndivCont
{
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(156px, 40%, 327px);
    overflow: hidden;
    margin: 5px;
    border-radius: 15px;
}

.ProjExpImgIndivCont img
{
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.5s; 
}

.ProjExpImgIndivCont video
{
    width:100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: 0.5s; 
}

@media screen and (max-width: 965px)
{
    .skillsBarCont
    {
        position: relative;
        width: 20%;
        min-height: 126px;
        font-family: 'Jost', sans-serif;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        border-style: solid;
        border-width: 5px;
        border-color: #2b2b2b;
        padding: 2px;
        border-radius: 21px;
        padding: 5px 5px;
    }
}

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



    .cls {
        background-color: #ff4e00;
        position: fixed;
        display: flex;
        flex-direction: row;
        align-items: center;
        align-content: center;
        flex-wrap: nowrap;
        z-index: 1;
        padding: 6px 8px 4px 8px;
        border-radius: 32px;
        top: 74px;
        left: 25px;
        /* margin: 0 0 0 14px; */
    }
    .close {
        cursor: pointer;
        position: relative;
        color: #000000;
        /* height: 15px; */
        font-size: 20px;
        line-height: 18px;
        text-align: center;
        top: -2px;
        font-weight: 900;
    }
    .closeTxt {
        position: relative;
        display: none;
        margin: 0;
        /* margin-left: -43px; */
        font-weight: 900;
        font-size: 10px;
        color: #000000;
        opacity: 1;
        visibility: visible;
        transition: opacity 0.1s ease, visibility 1s ease, margin-left 0.5s ease;
    }

    .in
    {
        padding: 0;
    }

    .descripNdSkillsInvCont 
    {
        position: relative;
        display: flex;
        flex-direction: column;
        width: 98%;
        height: fit-content;
        gap: 10px;
        align-items: center;
    }
    .descripCont {
        position: relative;
        display: flex;
        width: 91%;
        height: 100%;
        min-height: 126px;
        /* background-color: #2b2b2b; */
        border-style: solid;
        border-width: 2px;
        border-color: #2b2b2b;
        border-radius: 26px;
        padding: 5px 10px;
        align-items: center;
        /* margin: 0; */
    }

    .projectexpBody {
        position: relative;
        font-family: 'Jost', sans-serif;
        text-align: center;
        color: white;
        font-size: 12px;
        margin: 5px 0px;
        font-weight: 200;
    }
    
    

    .ProjExpImgIndivCont {
    position: relative;
    display: flex;
    align-items: center;
    width: clamp(119px, 46%, 327px);
    overflow: hidden;
    margin: 5px;
    border-radius: 15px;
    }

    .skillsBarCont 
    {
        position: relative;
        font-family: 'Jost', sans-serif;
        width: 94%;
        height: fit-content;
        display: flex;
        min-height: 20px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        /* background: linear-gradient(162deg, #202020cf 35.97%, #737373 99.52%); */
        padding: 3px;
        border-width: 2px;
        border-radius: 25px;
    }

    .ExpSkillsCont 
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        margin-left: 10px;
    }

    .ExpSkillsEnvTxt 
    {
        margin: 0 0 0 10px;
        font-weight: 900;
        background: linear-gradient(162deg, #ffe100 35.97%, #bfff00 99.52%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: clamp(0px, 1.5vw, 20px);
        text-align: end;
    }

    .ExpSkills 
    {
        width: auto;
        text-align: center;
    }

    .ExpSkills p 
    {
        margin: 3px 0px 3px 0px;
        color: black;
        background-color: black;
        padding: 4px 10px;
        border-radius: 17px;
        font-size: clamp(0px, 2.3vw, 13px);
        background: linear-gradient(162deg, #bac3ce 35.97%, #c8bdd6 99.52%);
    }

    .ProjCover2 {
        position: relative;
        display: flex;
        width: 90%;
        height: 42vw;
        /* background-color: #00ff08; */
        overflow: hidden;
        border-radius: 20px;
        flex-direction: row;
        gap: 7px;
        align-items: center;
        justify-content: center;
    }
    .ProjCover2 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 11px;
    }

    .ProjVerticalImgCont {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: flex-start;
        width: 90%;
        height: auto;
        gap: 5px;
        margin: 24px 0;
    }

    .ProjInsideverticalImg img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 11px;
    }


}

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

    .skillsBarCont {
        position: relative;
        font-family: 'Jost', sans-serif;
        width: 94%;
        height: fit-content;
        display: flex;
        min-height: 20px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: space-between;
        /* background: linear-gradient(162deg, #202020cf 35.97%, #737373 99.52%); */
        padding: 3px;
        border-width: 2px;
        border-radius: 18px;
    }

    .ExpSkillsEnvTxt {
        margin: 0;
        font-weight: 900;
        background: linear-gradient(162deg, #ffe100 35.97%, #bfff00 99.52%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-size: clamp(0px, 2.3vw, 20px);
        text-align: end;
    }

    .ExpSkillsCont {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        margin-left: 0;
        width: 100%;
    }

    .ExpSkills {
        text-align: center;
        width: 100%;
    }
}

/* expandable popup ends*/

/* project page ends */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */
/* get in touch */



.popupChildFixForGIT 
{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: rgb(11, 11, 11);
    /* padding: 40px 16px 40px 16px; */
    /* overflow: hidden; */
    /* margin-bottom: -1px;*/
}

.getInTouchCont
{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* background-color: #2fff00; */
    backdrop-filter: blur(13.3px);
    -webkit-backdrop-filter: blur(13.3px);
    width: 100%;
    /* height: 100%; */
    /* border-style: solid;
    border-width: 1px;
    border-radius: 25px;
    border-color: #d3caff36; */
    font-family: 'Jost', sans-serif;
    margin: clamp(4px, 3.5vw, 16px);
    /* padding: 10px;*/
    
}

.GITTopCont
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 15%;
    /* background-color: #0080ff; */
    color: #5d5d5d;
   
}

.resume a
{
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(0px, 9vh, 100px);
    font-weight: 900;
    margin: 0;
    text-decoration: none;
    color: #5d5d5d;
}
.resume a:hover
{
    background: linear-gradient(157deg, #F00 -5.58%, #E8D3AA -5.57%, #4200FF 55.35%, #202020 107.25%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.KC
{
    font-family: 'Big Shoulders Display', sans-serif;
    text-align: end;
    font-size: clamp(0px, 4vh, 50px);
    font-weight: 500;
    margin: 0;
    line-height: 3.7vh;
}

.GITBottomCont 
{
    position: relative;
    display: flex;
    flex-direction: row;
    width: -webkit-fill-available;
    height: 85%;
    /* background-color: #cce5ff; */
    border-radius: 28px;
    background: url(../images/recentActGradiendBackg.jpg) center;
    background-size: cover;
    padding: 6px;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.socialsCont {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 30%;
    height: 100%;
    background-color: #000000;
    /* margin-bottom: 19px; */
    border-radius: 20px;
    backdrop-filter: blur(13.3px);
    -webkit-backdrop-filter: blur(13.3px);
    box-shadow: 0 0 6px 2px #00000059;
    align-items: center;
}
.socialsTxt
{
    position: relative;
    display: flex;
    align-items: center;
    width: 80%;
    /* height: 10%; */
    margin-top: 12px;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: 25px;
    color: #ff4300;
}

.sRow1, .sRow2, .sRow3
{
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}
.social11, .social12 , .social21 , .social22 , .social31 , .social32
{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: rgb(0, 0, 0);
}

.icon1
{
    position: absolute;
    display: flex;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    padding: 3px;
    border-radius: 35px;
    margin-right: 5px;
    transition: opacity 2s;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s, visibility 0s linear 0.5s;
    left: 3vw;
    /* scale: 1.1; */
}
.social11:hover .icon1, .social12:hover .icon1, .social21:hover .icon1, 
.social22:hover .icon1, .social31:hover .icon1, .social32:hover .icon1
{
    transition: opacity 0.5s, visibility 0s;
    visibility: visible;
    /* display: flex; */
    opacity: 1;
}





.social11 a, .social12 a , .social21 a , .social22 a , .social31 a , .social32 a
{
    font-family: 'Big Shoulders Display', sans-serif;
    font-size: large;
    font-weight: 900;
    text-decoration: none;
    color: rgb(151, 151, 151);
}

.contactDiv
{
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 70%;
    height: 100%;
    background-color: #000000dc;
    border-radius: 22px;
    border-style: solid;
    border-width: 1px;
    /* border-color: #ebebeb; */
    backdrop-filter: blur(13.3px);
    -webkit-backdrop-filter: blur(13.3px);
    overflow: hidden;
    box-shadow: 0 0 6px 2px #00000059;
    /* box-shadow: 0 0 0 6px #000000; */
    align-items: center;
}

.contactSEC01
{
    position: relative;
    display: flex;
    align-items: center;
    width: 90%;
    /* height: 10%; */
    margin-top: 12px;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: 25px;
    color: #ff4300;
}
.contactSEC1 a:hover
{
    color: #ff4300;
    /* cursor: url('images/plogo.PNG'), auto; */
}
.contactSEC1
{
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 95%;
    height: 10%;
    background-color: #000000;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    font-size: 15px;
    border-style: solid;
    border-color: #fd5000;
    border-radius: 10px;
    border-width: 1px;
    /* background-color: #535353; */
    align-items: center;
    margin-top: 77px;
}
.contactSEC1 a
{
    text-decoration: none;
    font-family: 'inter', sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: #676767;
    background-color: #00000000;
    align-items: center;
    border-radius: 10px;
    border-style: solid;
    border-color: #3a3a3a00;
    border-width: 1px;
    padding: 5px 10px;
}

.contactSEC2
{
    position: relative;
    display: flex;
    width: 100%;
    height: 80%;
    /* background-color: #335abc; */
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.form {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 96%;
    height: 100%;
    margin-top: 48px;
}

.form textarea
{
    height: 10vh;
    margin: 8px 0;
}
.form textarea
{
    border-style: solid;
    border-radius: 10px;
    background-color: #000000;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    color: #f7f7f7;
    border-color: #333333;
    padding: 12px;
    border-width: 1px;
    height: 50%;
    font-size: 18px;
}
.form button {
    border-style: solid;
    border-radius: 10px;
    background-color: #000000;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 200;
    font-size: 20px;
    border-color: #f7f7f7;
    /* color: #f7f7f7; */
    color: #ff5500;
    padding: 8px;
    border-width: 1px;
    margin-bottom: 2%;
    transition: color 1s ease, background-color 0.3s ease 0.2s, border-color 0.3s ease 0.2s, letter-spacing 0.3s ease;

}
.form button:hover
{
    background-color: #2a0e00;
    border-color: #ff5500;
    color: #ff5500;
    font-weight: 700;
    letter-spacing: 10px;
    transition: color 1s ease, background-color 0.3s ease 0.2s, border-color 0.3s ease 0.2s, letter-spacing 0.3s ease;


}


.inoutSeoCont
{
    position: relative;
    display: flex;
    gap: 7px;
    height: 10%;

}
.inoutSeoCont input
{
    position: relative;
    width: 100%;
    border-style: solid;
    border-radius: 7px;
    border-width: 1px;
    border-color: #333333;
    background-color: #000000;
    font-family: 'Big Shoulders Display', sans-serif;
    font-weight: 300;
    color: #f7f7f7;
    padding-left: 5px;
    font-size: 18px;
   
}




@media screen and (max-width: 700px)
{
    .GITBottomCont
    {
        position: relative;
        display: flex;
        flex-direction: column;
        width:  -webkit-fill-available;
        height: 85%;
        /* background-color: #cce5ff; */
        /* border-style: solid;
        border-width: 0.5px;
        border-color: #ffffffaa; */
        border-radius: 28px;
        background: url("../images/recentActGradiendBackg.jpg") center ;
        background-size: cover;
        padding: 6px;
        gap: 0px;
    }

    .socialsCont
    {
        position: relative;
        display: flex;
        flex-direction: row;
        width: 100%;
        height: 40%;
        background-color: #000000ad;
        margin-bottom: 19px;
        border-radius: 20px;
        backdrop-filter: blur(13.3px);
        -webkit-backdrop-filter: blur(13.3px);
        box-shadow: 0 0 6px 2px #00000059;
    }
    .socialsTxt
    {
        position: relative;
        display: none;
    }

    .contactDiv
    {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        align-items: center;
        width: 100%;
        height: 60%;
        background-color: #000000dc;
        border-radius: 22px;
        border-style: solid;
        border-width: 1px;
        /* border-color: #ebebeb; */
        backdrop-filter: blur(13.3px);
        -webkit-backdrop-filter: blur(13.3px);
        overflow: hidden;
        box-shadow: 0 0 6px 2px #00000059;
        /* box-shadow: 0 0 0 6px #000000; */
    }
    .contactSEC01
    {
        position: relative;
        display: none;
        width: 100%;
        height: 15%;
        background-color: #00ff08;
    }
    .contactSEC1
    {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        width: 95%;
        height: 10%;
        background-color: #ff550017;
        font-family: 'Big Shoulders Display', sans-serif;
        font-weight: 300;
        font-size: 15px;
        border-style: solid;
        border-color: #ff5500;
        border-radius: 10px;
        border-width: 1px;
        /* background-color: #535353; */
        align-items: center;
        margin-top: 0;
    }

    .contactSEC1 a
    {
        text-decoration: none;
        font-family: 'inter', sans-serif;
        font-size: 10px;
        font-weight: 500;
        color: #ff5500;
        background-color: #00000000;
        align-items: center;
        border-radius: 10px;
        border-style: solid;
        border-color: #3a3a3a00;
        border-width: 1px;
        padding: 5px 10px;
    }
    .contactSEC1 a:hover
    {
        color: #ffa477;
    }
  
    .form
    {
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        width: 96%;
        height: 100%;
        margin-top: 0px;
    }

    .form textarea
    {
        border-style: solid;
        border-radius: 10px;
        background-color: #000000;
        font-family: 'Big Shoulders Display', sans-serif;
        font-weight: 300;
        color: #f7f7f7;
        border-color: #333333;
        padding: 12px;
        border-width: 1px;
        font-size: 13px;
    }
    .form button
    {
        border-style: solid;
        border-radius: 10px;
        background-color: #000000;
        font-family: 'Big Shoulders Display', sans-serif;
        font-weight: 300;
        font-size: 15px;
        border-color: #f7f7f7;
        color: #f7f7f7;
        padding: 12px;
        border-width: 1px;
        margin-bottom: 0;
    }

    .inoutSeoCont input
    {
        font-size: 13px;
    
    }

.social11:hover .icon1, .social12:hover .icon1, .social21:hover .icon1, 
.social22:hover .icon1, .social31:hover .icon1, .social32:hover .icon1
{
    transition: opacity 0.5s, visibility 0s;
    visibility: hidden;
    /* display: flex; */
    opacity: 0;
}

}

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


  
}




/* get in touch ends */
/* |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||| */



/* =========================================================================== */

/* Popup Styles */
.popup {
    position: absolute;
    display: flex;
    width: 100%;
    max-width: 1741px;
    height: 0;
    opacity: 0;
    background-color: rgb(0, 0, 0);
    font-family: 'Inter', sans-serif;
    flex-wrap: nowrap;
    border-radius: 45px;
    transition: opacity 1s, visibility 1s;
    visibility: hidden;
    overflow: hidden;
    color: #000000;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}




.swipe-item 
{
    position: relative;
    display: flex;
    width: 100%;
   
    flex-shrink: 0;
    scroll-snap-align: start;
    
    /* Add styling as needed */
}


/* .new
{
    padding: 29px ;
} */


#swipeItem1
{
    background-color: #ffffff00;
    color: rgb(0, 0, 0);
    height: -webkit-fill-available;
}

#swipeItem2
{
    background-color:#00d0c200;
    color: rgb(255, 255, 255);
    height: 100%;
}

#swipeItem3
{
    background-color:#00d0c200;
    color: rgb(0, 0, 0);
    height: 100%;
}

#popup3
{
    background: linear-gradient(180deg, #bbff0000 14.97%, #00ff9500 40.52%, #000000 95.52%);
    border-radius: 42px;
    z-index: 2;
    /* transition: visibility 1s, opacity 1s  ease-in-out; */
}

#popup2
{
    background-color: rgb(11, 11, 11);
    z-index: 2;
    /* transition: visibility 1s, opacity 1s, ease-in-out; */
}


.popup.open {
    height: 100%; /* Adjust as needed */
    transition: visibility 1s, opacity 1s;
    opacity: 1;
    visibility: visible;
}

.popup.openFor3 {
    height: 100%; /* Adjust as needed */
    transition: visibility 2s, opacity 2s;
    opacity: 0.5;
    visibility: visible;
}

/* Initial State for Movable Divs */
.move_left, .move_right, .move_up, .move_down {
    opacity: 1;
    transition: transform 2s, opacity 2s;
}

/* Move Left and Fade */
.move_left.active {
    transform: translateX(-100%);
    opacity: 0;
    transition: transform 2s, opacity 2s;
}

/* Move Right and Fade */
.move_right.active {
    transform: translateX(100%);
    opacity: 0;
    transition: transform 2s, opacity 2s;
}


.move_up.active {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 2s, opacity 2s; 
}

.move_down.active {
    transform: translateY(100%);
    opacity: 0;
    transition: transform 2s, opacity 2s;
}

#bt1 {
    transition: margin 1s ease; /* Adjust duration and timing function as needed */
}

#bt2 {
    transition: margin 1s ease; /* Adjust duration and timing function as needed */
}

#bt3 {
    transition: margin 1s ease; /* Adjust duration and timing function as needed */
}



.fade-in-image {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.fade-in-image.visible {
    opacity: 1;
}




.slide-fade-in-L-R-image {
    opacity: 0;
    transform: translateX(-40px); /* Start 50px left of the original position */
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-fade-in-L-R-image.visible {
    opacity: 1;
    transform: translateX(0px); /* Slide to original position */
}




.slide-fade-in-R-L-image {
    opacity: 0;
    transform: translateX(60px); /* Start 50px left of the original position */
    transition: opacity 2.5s ease-out, transform 2.5s ease-out;
}

.slide-fade-in-R-L-image.visible {
    opacity: 1;
    transform: translateX(0px); /* Slide to original position */
}



/* up to down */
.slide-fade-in-U-D-image {
    opacity: 0;
    transform: translateY(-60px); 
    transition: opacity 2s ease-out, transform 2s ease-out;
}

.slide-fade-in-U-D-image.visible {
    opacity: 1;
    transform: translateY(0px); /* Slide to original position */
}



.slide-fade-in-D-U-image {
    opacity: 0;
    transform: translateY(60px); 
    transition: opacity 1s ease-out, transform 1s ease-out;
}

.slide-fade-in-D-U-image.visible {
    opacity: 1;
    transform: translateY(0px); /* Slide to original position */
}


@media screen and (max-width: 700px)
{
    .popup 
    {
         border-radius: 36px;
    }

    .popupOne
    {
     border-radius: 42px;
    }

    #popup3
    {
        background: linear-gradient(1deg, #bbff0000 14.97%, #00ff9500 40.52%, #000000 95.52%);
        /* transition: visibility 1s, opacity 1s  ease-in-out; */
    }
}















/* The Modal (background) */
.modal 
{
    display: none;
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.9);
    z-index: 9;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Modal Content (Image) */
.modal-content 
{
    margin: auto;
    display: block;
    width: 90%;
    max-width: 90vmin;
    border-radius: 19px;
}

/* Add Animation */
.modal-content 
{  
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom 
{
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)}
}

@keyframes zoom 
{
    from {transform:scale(0)} 
    to {transform:scale(1)}
}