:root{
    --default: #fff;
    --bg-color: #fefae0 ;
    --column-bg-color: #023047;
    --text-color: #023047;
} 

html{
    scroll-behavior: smooth;
}
body{
    /* background-color: #fefae0 !important; */
    background: var(--default);
    position: relative;
}
.navbar{
    position: fixed;
    z-index: 1;
}
a{
    text-decoration: none;
    color: inherit;
}
.navbar a picture img{
    transition: transform 0.4s cubic-bezier(0.7, 0, 0, 1);
}
.navbar a:hover picture img {
    transform: rotate(360deg);
}
h1, h2, h5{
    font-family: "Montserrat", sans-serif; 
    /* color: #606c38; */
    color: var(--text-color);
    font-weight: 600;
}
a{
    text-decoration: none;
}
p{
    font-family: "Raleway", sans-serif;
}
strong{
    font-weight: 600;
}
li{
    position: relative;
}
.exp-details{
    position: relative;
}
ul li::marker{
    color: #457b9d;
}
ul li:nth-child(1) .exp-details::before{
    content: "";
    top: -0.6em;
    position: absolute;
    display: block;
    border: 1px solid #457b9d;
    rotate: 0deg;
    height: calc(100% - -1.9rem);
    left: calc(-1rem - 1px);
}
.splash-screen, .project-splash {
    position: fixed;
    inset: 0;
    background-color: #1a1a1a;
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 999;
    gap: 30px;
}
.logo{
    width: 100px;
    height: auto;
    opacity: 0;
    transform: scale(0.8);
}
.welcome-text{
    font-size: x-large;
}

.lhs{
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 5rem;
    padding-right: 5rem;
}
.lhs h2{
    font-size: 1.5rem;
    /* color: #606c38; */
    color: var(--text-color);
}
.lhs p, footer p{
    font-family: "Poppins", sans-serif;
    font-size: 0.8rem;
    /* color: #606c38 */
    color: var(--text-color);
}

.lhs .welcome-text {
    font-size: 1.4rem;
    margin-top: 20px;
    opacity: 0;
}
.main{
    display:none;
}
p.title{
    font-size: 0.9rem;
    font-weight: 600;
}
.skills p, .awards p, .contact p, .location p {
    font-size: 0.9rem;
}
.projects .content{
    gap: 20px;
}
.projects .content img{
    width: 300px;
    border-radius: 10px;
}
.education p {
    font-size: 1rem;
}
.projects .header p{
    transition: 0.3s ease-in;
}
.projects .header a{
    gap: 10px;
}
.projects .header p:hover{
    padding: 0.5rem;
    background-color: #023047;
    border-radius: 10px;
    color: #fff;
}
.projects .header p img{
    transition: transform 0.4s ease-in-out;
}
.projects .header p:hover img{
    transform: rotate(360deg);
    filter: invert(1);
}
.view-more-cta .btn, .resume-download{
    padding: 10px 16px;
    font-size: 1rem;
    color: #fff;
    border-radius: 10px;
    cursor: pointer;
    background: #023047;
    font-family: "Raleway", sans-serif;
    border: none;
    transition: 0.5s ease-in-out;
}
.view-more-cta .btn:hover, .resume-download:hover{
    background: transparent;
    border: 1px solid #001722;
    color: #333;
    font-weight: 700;
}
.view-more-cta .btn span{
    display: none;
}
.view-more-cta .btn:hover span{
    display: inline-block;
}
footer a{
    text-decoration: none;
    color: inherit;
    transition: 0.1s ease-in-out;
}
footer a:hover{
    font-weight: 600;
}
.sticky{
    height: 100vh;
    /* background-color: #283618; */
    background-color: var(--column-bg-color);
    position: sticky;
    top: 0;
}
.sticky h1{
    font-size: 5rem;
}
.sticky p{
    font-size: 2rem;
}
.sticky h1, .sticky p{
    color: #fff;
}
.sticky img{
    border-radius: 10px;
}

.rhs {
    opacity: 0;
}
.image-container {
    width: 294px;
    height: 294px;
    position: relative;
}

.profile-img {
    width: 100%;
    height: 100%;
    filter: blur(6px);
    transition: filter 0.5s ease;
    display: block;
}

.img-loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.4);
    z-index: 2;
    transition: opacity 0.5s ease;
}


/* Projects page css */
.project-wrapper{
    padding-left: 8rem !important;
    padding-right: 8rem !important;
}
.projects-grid{
    display: grid;
    grid-auto-columns: 1fr;
    grid-template-columns: 4fr 3fr 3fr;
    grid-template-rows: 1fr;
    grid-row-gap: 2em;
    column-gap: 2rem;
}
.projects-grid p{
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}
.grid{
    border-radius: 2rem;
    flex-direction: column;
    align-items: flex-start;
    min-height: 20rem;
    padding: 2rem;
    display: flex;
    position: relative;
    background-color: #fff;
    color: #060633;
    box-shadow: 0 20px 30px -10px rgb(16 16 39 / 7%);
    text-wrap: balance;
}
.project-splash p{
    font-size: 0.9rem;
}
.firstproject{
    grid-area: 1 / 2 / 2 / 4;
    background: #A0C3CC
}
.firstproject img{
    transition: transform 250ms linear;
}
.firstproject:hover img{
    transform: scale(1.1);
}
.firstproject .img-overflow{
    width: fit-content;
}
.secondproject{
    grid-area: 1 / 1 / 3 / 2;
    /* background-image: linear-gradient(-225deg, #fffeff 0%, #d7fffe 100%); */
    background-color: #D5C7A4;
}
.projects-grid h1{
    font-size: 1.6rem;
}
.project-imgs{
    /* position: absolute;
    inset: 0 0 0 50%; */

    position: relative;
    width: 100%;
    height: 100%;
    justify-content: \space-between;
}
.secondproject .sc-1,
.secondproject .sc-2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;  
  height: auto;
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.7, 0, 0, 1);
}
.secondproject .sc-1 {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateZ(-26deg);
    z-index: 1;
    transform-style: preserve-3d;
    top: 10%;
    left: 40%;
    width: 50%;
    transform-origin: 50% 100%;
    right: 0;
}
.secondproject .sc-2 {
    transform: translate3d(0px, 0px, 0px) scale3d(1, 1, 1) rotateZ(9deg);
    z-index: 2;
    transform-style: preserve-3d;
    top: 17%;
    left: 35%;
    width: 50%;
    transform-origin: 50% 100%;
}
.secondproject:hover .sc-1 {
    transform: rotateZ(-30deg);
}
.secondproject:hover .sc-2 {
    transform: rotateZ(15deg);
}
.secondproject p{
    width: 18rem;
}

.thirdproject{
    background-color: #C9D5B5;
    overflow: hidden;
}
.thirdproject .outer-wrapper{
    padding-top: 5%;
    padding-left: 2rem;
    padding-right: 2rem;
    position: absolute;
    inset: 45% 0% 0;
    overflow: hidden;
}
.thirdproject .main-wrapper{
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 #0000, 0 1px .4px #00000008, 0 2px .8px #0000000a, 0 3px 1.6px #0000000b, 0 5px 2.9px #0000000c, 0 9px 5.3px #0000000c, 0 15px 10.4px #0000000d, 0 31px 22.8px #0000000e;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0, 1);
}
.thirdproject:hover .main-wrapper{
    transform: translate3d(0px, -2%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}
.thirdproject .main-wrapper img{
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    width: 100%;
    max-width: none;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0, 1);
    overflow-clip-margin: content-box;
    overflow: clip;
}
.thirdproject:hover .main-wrapper img{
    transform: translate3d(0px, -35%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}
.fourthproject{
    background-color: #E3C1BB;
}
.fourthproject .img-wrapper{
    border-bottom-right-radius: 2rem;
    padding-top: 10%;
    position: absolute;
    inset: 45% 0% 0% 2rem;
    overflow: hidden;
}
.fourthproject .img-wrapper img{
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    width: 100%;
    max-width: none;
    display: block;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0, 1);
}
.fourthproject:hover .img-wrapper img{
    transform: translate3d(0px, -5%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
}
.fifthproject{
    grid-area: 3 / 1 / 4 / 3;
    background-color: #E3C1BB;
    justify-content: end;
}
.fifthproject .main-screen-wrapper{
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 70%;
    display: flex;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    overflow: hidden;
}
.fifthproject .screen-grids{
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    place-content: center;
    place-items: center;
    padding-left: 2rem;
    padding-right: 2rem;
    display: grid;
    transform: rotate(-15deg);
}
.fifthproject .screen-grids .screen-grid1,
.fifthproject .screen-grids .screen-grid2,
.fifthproject .screen-grids .screen-grid3{
    grid-column-gap: 1.5rem;
    grid-row-gap: 1.5rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    place-content: center;
    place-items: center;
    display: grid;
    transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
    transition: transform 0.4s cubic-bezier(0.7, 0, 0, 1);
}
.fifthproject .screen-grids img{
    grid-area: span 1 / span 1 / span 1 / span 1;
    border-radius: .75rem;
    width: 100%;
    max-width: none;
    display: block;
    box-shadow: 0 0 #0000, 0 1px .4px #00000008, 0 2px .8px #0000000a, 0 3.4px 1.6px #0000000b, 0 5.4px 2.9px #0000000c, 0 8.9px 5.3px #0000000c, 0 15.4px 10.4px #0000000d, 0 30.6px 22.8px #0000000e;
    min-height: 84px;
    object-fit: cover;
}

.fifthproject .screen-grids:hover .screen-grid1{
    transform: translate3d(0px, 10%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.fifthproject .screen-grids:hover .screen-grid2{
    transform: translate3d(0px, -10%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.fifthproject .screen-grids:hover .screen-grid3{
    transform: translate3d(0px, 10%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    transform-style: preserve-3d;
}

.fifthproject .content{
    width: 30%;
}

.sixthproject{
    grid-area: 3 / 3 / 4 / 4;
    background-color: #E3C1BB;
}
.view-projects{
    display: none;
}
.award1 p a{
    position: relative;
}
.award1 p a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0%;
    height: 2px;
    background-color: #023047; /* Border color */
    transition: width 0.4s cubic-bezier(0.7, 0, 0, 1);
}
.award1 p a:hover::after {
    width: 100%;
}




/* Media Queries */

@media(max-width: 1366px){
    .project-wrapper {
        padding-left: 4rem !important;
        padding-right: 4rem !important;
    }
    .secondproject .sc-1, .secondproject .sc-2{
        width: 50%;
    }
    .thirdproject .outer-wrapper{
        inset: 45% -5% 0;
        padding-left: 1.8rem;
        padding-right: 1.8rem;
    }
    .thirdproject .main-wrapper{
        transform: translate3d(0px, 1%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg); 
    }
    .thirdproject:hover .main-wrapper {
        transform: translate3d(0px, 0%, 0px) scale3d(1, 1, 1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg, 0deg);
    }
}

@media(max-width: 1280px){
    .projects .content img {
        width: 215px;
    }
}

@media(max-width: 1120px){
    .project-wrapper {
        padding-left: 0rem !important;
        padding-right: 0rem !important;
    }
    .projects .content img {
        width: 200px;
    }
}

@media(max-width: 835px){
    #under-construction{
        width: 100% !important;
    }
}

@media (max-width: 480px){
    .welcome-text {
        font-size: larger;
    }
    .project-splash .splash-heading{
        font-size: larger !important;
    }
    .main-row{
        flex-direction: column-reverse;
    }
    .sticky{
        position: relative;
    }
    .navbar{
        z-index: 999;
        width: 100%;
        background-color: var(--column-bg-color);
    }
    .lhs{
        padding: 3rem;  
    }
    .sticky h1{
        font-size: 4.5rem;
    }
    .mini-view{
        display: none !important;
    }
    .view-projects{
        display: flex;
    }
    .projects .header{
        align-items: center !important;
    }
    .projects .content{
        flex-direction: column !important;
        align-items: start !important;
    }
    .project-wrapper{
        padding-right: calc(var(--bs-gutter-x) * .5) !important;
        padding-left: calc(var(--bs-gutter-x) * .5) !important;
    }
    .firstproject{
        gap: 30px;
        flex-direction: column !important;
    }
    .firstproject .content{
        margin-bottom: 3rem !important;
    }
    .firstproject .main-content-wrapper{
        flex-direction: column !important;
    }
    .projects-grid{
        display: flex;
        grid-row-gap: 2em;
        flex-direction: column;
    }
    .secondproject{
        min-height: 34rem;
        flex-direction: column !important;
        justify-content: unset !important;
    }
    .secondproject .project-imgs{
        position: absolute;
        inset: 25% 0% 0% 0%;
    }
    .secondproject .sc-1, .secondproject .sc-2 {
        width: 31%;
    }
    footer{
        flex-direction: column !important;
    }
}

@media(max-width: 430px){
    .secondproject{
        min-height: 31rem;
    }
}

@media(max-width: 412px){
    .secondproject {
        min-height: 29rem;
    }
}

@media(max-width: 393px){
    .secondproject{
        min-height: 28rem;
    }
    .sticky h1 {
        font-size: 4.2rem;
    }
}

@media(max-width: 390px){
    .secondproject{
        min-height: 27rem;
    }
}

@media(max-width: 360px){
    .sticky p {
        font-size: 1.9rem;
    }
}