/* Remove default margin and padding */
* {
    margin: 0%;
    padding: 0%;
    box-sizing: border-box; /* Ensures padding and border do not affect element's width and height */
}

/* Optional: Reset for body and html for full page width */
html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    color: #1e1e1e;
    overflow-block: auto;
    scroll-behavior: smooth; /* Enables smooth scrolling for the entire page */
}

/* Mobile View: Show Maintenance Page */
@media screen and (max-width: 768px) {
    body {
        background: rgba(0, 0, 0, 0.9);
        color: #fff;
        overflow-y: hidden;
        overflow-x: hidden;
    }
    #maintenance {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.9);
        z-index: 9999;
        text-align: center;
    }
    #maintenance-box {
        background: #222;
        padding: 50px 50px;
        border-radius: 12px;
        box-shadow: 0 0 15px #fd6e00;
        display: flex;
        flex-direction: column;
        align-items: center;
        max-width: 90%;
    }
    #maintenance-logo img {
        width: 50px;
        height: 50px;
        margin-bottom: 15px;
    }
    h1, p {
        margin: 0;
        padding: 8px 0;
        font-family: 'Poppins', sans-serif;
        text-align: center;
    }
    h1 {
        font-weight: 600;
        font-size: 22px;
    }
    p {
        font-weight: 300;
        font-size: 14px;
    }
    #original-content {
        display: none;
    }
}

@media screen and (min-width: 769px) {
    html, body {
        height: auto;
        width: auto;
        overflow: auto;
    }
    #maintenance {
        display: none;
    }
    #original-content {
        display: block;
    }
}

.about-me-child {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 800px;
    object-fit: cover;
    border-radius: 50px;
    box-shadow: #000;
}
.about-me-item {
    position: absolute;
    top: -195px;
    left: -302px;
    filter: blur(247.9px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.1);
    width: 394px;
    height: 394px;
}

.about-me1 {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 600;
    background: linear-gradient(40deg, #fd6f00 5%, #fff), #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.about-me1::after {
    content: '';
    position: absolute;
    top: 90%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #fd6f00; /* Underline color */
    transition: width 0.3s ease-in-out;
}

.about-me1:hover::after {
    width: 23%; /* Adjust the width of the underline as needed */
}
.hi-im {
    font-family: Poppins;
    color: #fff;
}
.sahil-davkhar {
    font-weight: 600;
    font-family: Poppins;
    color: #fd6f00;
}
.uiux-design-graphic {
    color: #fd6f00;
    font-family: Poppins;
}
.uiux-design-graphic-design {
    font-weight: 600;
    font-family: Poppins;
}
.and {
    font-family: Poppins;
}
.hi-im-sahil-davkhar-a-compu {
    align-self: stretch;
    position: relative;
    font-size: 14.25px;
    letter-spacing: 0.03em;
    color: #fff;
    display: inline-block;
    height: 40.3px;
    flex-shrink: 0;
}
.hi-im-sahil-container {
    width: 959.3px;
    position: relative;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    display: inline-block;
    height: 182.3px;
    flex-shrink: 0;
}

.about-me-parent {
    width: 965px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
}
.web-development {
    position: absolute;
    top: 0px;
    left: 0px;
    letter-spacing: 0.03em;
    font-weight: 600;
}
.group-child {
    position: absolute;
    top: 35.25px;
    left: 0px;
    border-radius: 3.92px;
    background-color: #edecec;
    width: 423px;
    height: 7.5px;
}
.group-item {
    position: absolute;
    top: 35.25px;
    left: 0px;
    border-radius: 3.92px;
    background-color: #fd6f00;
    width: 375px;
    height: 7.5px;
}
.group-inner {
    position: absolute;
    top: 28.5px;
    left: 363.75px;
    box-shadow: 0px 2.6122448444366455px 4.57px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background-color: #edecec;
    border: 2px solid #fd6f00;
    box-sizing: border-box;
    width: 20.9px;
    height: 20.9px;
}
.web-development-parent {
    width: 423px;
    position: relative;
    height: 49.4px;
}
.rectangle-div {
    position: absolute;
    top: 35.35px;
    left: 0px;
    border-radius: 3.92px;
    background-color: #edecec;
    width: 423px;
    height: 7.5px;
}
.group-child1 {
    position: absolute;
    top: 35.35px;
    left: 0px;
    border-radius: 3.92px;
    background-color: #fd6f00;
    width: 398.3px;
    height: 7.5px;
}
.ellipse-div {
    position: absolute;
    top: 28.6px;
    left: 387.75px;
    box-shadow: 0px 2.6122448444366455px 4.57px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background-color: #edecec;
    border: 2px solid #fd6f00;
    box-sizing: border-box;
    width: 20.9px;
    height: 20.9px;
}
.graphic-design-parent {
    width: 423px;
    position: relative;
    height: 49.5px;
}
.group-child3 {
    position: absolute;
    top: 35.35px;
    left: 0px;
    border-radius: 3.92px;
    background-color: #fd6f00;
    width: 390.8px;
    height: 7.5px;
}
.group-child4 {
    position: absolute;
    top: 28.6px;
    left: 375px;
    box-shadow: 0px 2.6122448444366455px 4.57px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background-color: #edecec;
    border: 2px solid #fd6f00;
    box-sizing: border-box;
    width: 20.9px;
    height: 20.9px;
}
.group-child6 {
    position: absolute;
    top: 35.35px;
    left: 0px;
    border-radius: 3.92px;
    background-color: #fd6f00;
    width: 360.8px;
    height: 7.5px;
}
.group-child7 {
    position: absolute;
    top: 28.6px;
    left: 350.25px;
    box-shadow: 0px 2.6122448444366455px 4.57px rgba(0, 0, 0, 0.2);
    border-radius: 50%;
    background-color: #edecec;
    border: 2px solid #fd6f00;
    box-sizing: border-box;
    width: 20.9px;
    height: 20.9px;
}
.skills {
    position: absolute;
    top: 0.05px;
    left: 0px;
    width: 423px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 14.3px;
    animation: fadeLeft 1.5s ease-out forwards;
}

@keyframes fadeLeft {
    0% {
        transform: translateX(-70px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.b {
    align-self: stretch;
    position: relative;
}
.years-of-designing-container {
    align-self: stretch;
    position: relative;
    font-size: 14.25px;
    letter-spacing: 0.03em;
    color: #fff;
    display: inline-block;
    height: 65.3px;
    flex-shrink: 0;
}
.parent {
    position: absolute;
    top: -3px;
    left: -3px;
    box-shadow: 0px 3px 15.1px rgba(0, 0, 0, 0.13);
    border-radius: 10.5px;
    background-color: #1e1e1e;
    border: 3px solid #fd6f00;
    box-sizing: border-box;
    width: 136.5px;
    height: 246.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 11.2px 14.3px;
    gap: 91.5px;
    transition: box-shadow 0.2s ease-out, border 0.2s ease-out; /* Smooth transition */

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #db5f00; /* Orange border */
        box-shadow: 0 4px 12px 2px rgba(253, 110, 0, 0.688); /* Orange shadow */
    }
}
.metrics-inner {
    width: 130.5px;
    position: relative;
    height: 240.8px;
}
.group {
    position: absolute;
    top: -3px;
    left: -3px;
    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.13);
    border-radius: 10.5px;
    background-color: #1e1e1e;
    border: 3px solid #fd6f00;
    box-sizing: border-box;
    width: 136.5px;
    height: 246.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 11.2px 14.3px;
    gap: 91.5px;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #db5f00; /* Orange border */
        box-shadow: 0 4px 12px 2px rgba(253, 110, 0, 0.688); /* Orange shadow */
    }
}
.b2 {
    width: 101.3px;
    position: relative;
    display: flex;
    align-items: center;
}
.certifications {
    width: 101.3px;
    position: relative;
    font-size: 14.25px;
    letter-spacing: 0.03em;
    color: #fff;
    display: inline-block;
    height: 65.3px;
    flex-shrink: 0;
}
.metrics {
    position: absolute;
    top: 0px;
    left: 495.75px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 39px;
    font-size: 37.5px;
    color: #fd6f00;
    animation: fadeRight 1.5s ease-out forwards;
}

@keyframes fadeRight {
    0% {
        transform: translateX(70px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
.skills-parent {
    width: 965.2px;
    position: relative;
    height: 240.8px;
    text-align: left;
    font-size: 15.67px;
}
.frame-parent {
    position: absolute;
    top: 62px;
    left: 275.75px;
    width: 965.2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 127px;
}
.about-me {
    position: absolute;
    top: 836px;
    /* left: calc(50% - 720px);  */
    width: 100%;
    height: 800px;
}
.landing-page-child {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #1e1e1e;
    width: 1440px;
    height: 836px;
}
.bg-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.landing-page-item {
    position: absolute;
    top: 680px;
    left: -50px;
    filter: blur(180px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.3);
    width: 394px;
    height: 394px;
}
.landing-page-item1 {
    position: absolute;
    top: 1550px;
    left: 850px;
    filter: blur(170px);
    border-radius: 20%;
    background-color: rgba(255, 112, 0, 0.3);
    width: 400px;
    height: 400px;
}
.glow-skill {
    position: absolute;
    top: 300px;
    left: -450px;
    filter: blur(200px);
    border-radius: 20%;
    background-color: rgba(255, 111, 0, 0.401);
    width: 200px;
    height: 700px;
    z-index: index;
}
.glow-skill1 {
    position: absolute;
    top: 300px;
    left: 1100px;
    filter: blur(200px);
    border-radius: 20%;
    background-color: rgba(255, 111, 0, 0.401);
    width: 200px;
    height: 200px;
    z-index: index;
}
.landing-page-inner {
    position: absolute;
    top: 346px;
    left: 900px;
    filter: blur(140.7px);
    border-radius: 50%;
    background-color: rgba(253, 111, 0, 0.8);
    width: 120px;
    height: 120px;
}
.logo-icon {
    position: absolute;
    top: 2.08px;
    left: 100.59px;
    width: 168.8px;
    height: 45.3px;
    display: none;
}
.logo-1-icon {
    width: 68.3px;
    position: relative;
    height: 50.4px;
    object-fit: cover;
    display: none;
}
.logo-child {
    position: absolute;
    height: 100.96%;
    width: 97.01%;
    top: -0.97%;
    right: 2.99%;
    bottom: 0.01%;
    left: 0%;
    box-shadow: 0px 0px 12.8px 1px rgba(0, 0, 0, 0.15);
    border-radius: 32.88px;
    background-color: rgba(255, 255, 255, 0.9);
}
.frame-child {
    width: 31.6px;
    position: relative;
    border-radius: 50%;
    height: 31.6px;
    object-fit: cover;
}
.sahil-davkhar1 {
    width: 77px;
    position: relative;
    font-weight: 600;
    font-family: Poppins;
    font-style: Bold;
}
.develop-design {
    align-self: stretch;
    position: relative;
    font-size: 4.96px;
    color: rgba(0, 0, 0, 0.9);
    margin-top: -2.8px;
}
.sahil-davkhar-parent {
    width: 73.6px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.ellipse-parent {
    position: absolute;
    height: 76.92%;
    width: 85.82%;
    top: 11.05%;
    right: 8.96%;
    bottom: 12.03%;
    left: 5.22%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 6.9px;
}
.logo {
    width: 134px;
    position: relative;
    height: 41.6px;
    left: -20px;
}
.logo1 {
    width: 100px;
    position: relative;
    height: auto;
    left: -40px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    
}
.logo1 img{
    width: 260px;
    height: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;

}
.home {
    position: relative;
    letter-spacing: 0.03em;
    font-family: Poppins;
    color: white; /* Sets text color to white */
    text-decoration: none; /* Removes underline for links */
    transition: color 0.3s ease; /* Adds smooth transition for hover effect */
}
.home::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0; /* Initially, the underline is not visible */
    height: 1px;
    background-color:#fd6f00; /* Underline color */
    transition: width 0.2s ease; /* Smooth transition */
    direction: rtl;
}

.home:hover::after {
    width: 100%; /* Expand the underline on hover */
}
.home1{
    position: relative;
    letter-spacing: 0.03em;
    font-family: Poppins;
    color: #000;
    text-decoration: none;
}
.home2{
    position: relative;
    letter-spacing: 0.03em;
    font-family: Poppins;
    align-self: center;
    left: 50px;

}
.home3{
    position: absolute;
    letter-spacing: 0.03em;
    font-family: Poppins;
}
.home-wrapper {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6.8px 9.5px;
}
.home-wrapper1 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6.8px 9.5px;
}
.frame-container {
    width: 516.3px;
    height: 35.3px;
    right: 100%;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    justify-content: flex-end;
    gap: 8.1px;
}
.frame-container1 {
    width: 100%;
    position: relative;
    left: 55px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30.1px;
    text-align: left;
    font-size: 16.5px;
    color: #000;
    font-family: Poppins;
    font-weight: 400;
}
.downlaod-cv {
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 500;
    color: white;
}
.btn {
    width: 133px;
    border-radius: 3.38px;
    background: linear-gradient(90deg, #fd6f00, #522400 85%);
    height: 33px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 12px 1px;
    box-sizing: border-box;
    text-align: justify;
    transition: box-shadow 0.2s ease-out, border 0.2s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 12px 5px rgba(253, 110, 0, 0.149); /* Orange shadow */
    }
}
button {
    border: none; /* Removes the default button border */
    background: transparent; /* Ensures no background color is added by the browser */
    padding: 0; /* Remove any extra padding applied by default */
    cursor: pointer; /* Changes the cursor to indicate it's clickable */
    justify-content: flex-end;
}
.frame-group {
    position: relative;
    display: flex;
    left: 40px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 16.5px;
    font-size: 14.2px;
    color: #fff;
}
.logo-1-parent {
    position: absolute;
    top: 0px;
    left: 20px;
    width: 960px;
    height: 50.4px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}
.nav-bar {
    width: 960px;
    position: relative;
    height: 50.4px;
    z-index: 1;
}
.hi-i-am {
    position: absolute;
    top: 0px;
    left: 0px;
    letter-spacing: 0.03em;
    font-weight: 600;
    display: inline-block;
    width: 482.7px;
}
.hi-i-am-wrapper {
    width: 482.7px;
    position: relative;
    height: 24px;
}
.sahil-davkhar-wrapper {
    width: 482.7px;
    position: relative;
    height: 35px;
    font-size: 23.25px;
}
.group-parent {
    width: 482.7px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.developer {
    position: absolute;
    top: 0px;
    left: 0px;
    letter-spacing: -0.01em;
    line-height: 120%;
    font-weight: 500;
    background: linear-gradient(90deg, #fd6f00 26.1%, #ffae00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    width: 482.7px;
    text-shadow: 0px 1px 8px rgba(255, 136, 43, 0.3);
    transition: text-shadow 0.4s ease, transform 0.9s ease; /* Smooth transition for shadow and transform */
}
.developer:hover {
    text-shadow: 
        0 0 25px rgba(255, 136, 43, 0.2), /* Outer glow */
        0 0 20px rgba(255, 136, 43, 0.2), /* Medium glow */
        0 0 25px rgba(255, 136, 43, 0.2); /* Stronger inner glow */
}
.developer-wrapper {
    width: 482.7px;
    position: relative;
    height: 81px;
}
.d {
    font-family: Charm;
    margin: 0%;    
}
.esigner {
    font-family: 'Cactus Classical Serif';
    text-shadow: 0px 1px 8px rgba(255, 136, 43, 0.3);
    text-shadow: 0px 1px 8px rgba(255, 136, 43, 0.3);
    transition: text-shadow 0.4s ease, transform 0.9s ease; /* Smooth transition for shadow and transform */
}
.esigner:hover {
    text-shadow: 
        0 0 25px rgba(255, 136, 43, 0.2), /* Outer glow */
        0 0 20px rgba(255, 136, 43, 0.2), /* Medium glow */
        0 0 25px rgba(255, 136, 43, 0.2); /* Stronger inner glow */
}

.span1 {
    letter-spacing: 0.03em;
}
.designer {
    position: absolute;
    top: 0px;
    left: 0px;
    line-height: 120%;
    background: linear-gradient(90.02deg, #fd6f00 26%, #ffae00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    width: 482.7px;
}
.designer-wrapper {
    width: 482.7px;
    position: relative;
    height: 81px;
    margin-top: -5px;
    text-align: right;
    font-family: Calistoga;
}
.group-container {
    width: 482.7px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    font-size: 67.61px;
    font-family: Montserrat;
}
.frame-parent1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    font-size: 16.23px;
}
.a-creative-enthusiast {
    flex: 1;
    position: relative;
    letter-spacing: 0.03em;
    display: inline-block;
    height: 84.8px;
}
.description {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
.lets-connect {
    width: 102px;
    position: relative;
    letter-spacing: 0.03em;
    display: inline-block;
    flex-shrink: 0;
    color: white;
    font: size 50px;;
}
.btn1 {
    width: 153px;
    border-radius: 3.38px;
    background: linear-gradient(86.93deg, #fd6f00, #522400);
    height: 38.2px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 11px 25px;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease-out, border 0.2s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 12px 5px rgba(253, 110, 0, 0.149); /* Orange shadow */
    }
}
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}
.frame-div {
    position: absolute;
    top: 64.63px;
    left: 0px;
    width: 482.7px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
    animation: fadeUp 1.5s ease-out forwards;
}

@keyframes fadeUp {
    0% {
        transform: translateY(70px);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
.photo-icon {
    width: 328.5px;
    position: relative;
    height: 457.9px;
    object-fit: contain;
}
.dribbble-icon {
    width: 22px;
    position: relative;
    height: 22px;
    object-fit: cover;
    transition: box-shadow 0.1s ease-out, border 0.1s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.856); /* Orange shadow */
    }
}
.instagram-icon {
    width: 22px;
    position: relative;
    height: 22px;
    object-fit: cover;
    transition: box-shadow 0.1s ease-out, border 0.1s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.856); /* Orange shadow */
    }
}
.linkedin-icon {
    width: 22.5px;
    position: relative;
    height: 22.5px;
    object-fit: cover;
    transition: box-shadow 0.1s ease-out, border 0.1s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.856); /* Orange shadow */
    }
}
.dribbble-icon1 {
    width: 22.4px;
    position: relative;
    height: 22.4px;
    object-fit: cover;
    display: none;
}
.behance-icon1 {
    width: 22.6px;
    position: relative;
    height: 22.6px;
    object-fit: cover;
    display: none;
}
.instagram-icon1 {
    width: 31.5px;
    position: relative;
    height: 31.5px;
    object-fit: cover;
    display: none;
}
.linkedin-negative {
    width: 22px;
    position: relative;
    height: 22px;
    overflow: hidden;
    flex-shrink: 0;
    display: none;
}
.social-links {
    align-self:center;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16.9px;
}
.social-links1 {
    position: relative;
    display: flex;
    flex-direction: row;
    left: 40px;
    gap: 16.9px;
}
.photo {
    position: absolute;
    top: -60.5px;
    left: 650px;
    width: 329.5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 45px;
    animation: fadeRight 1.5s ease-out forwards;
}

@keyframes fadeRight {
    0% {
        transform: translateX(90px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.photo-icon {
    width: 328.5px;
    position: relative;
    height: 457.9px;
    object-fit: contain;
}
.header {
    align-self: stretch;
    position: relative;
    left: 20px;
    height: 475px;
    text-align: justify;
    font-size: 14.2px;
    color: #fff;
    gap: 50%;
    justify-content: space-between;
}
.nav-bar-parent {
    position: absolute;
    top: 36px;
    left: 260px;
    right: 0px;
    width: 980px;
    height: 647.3px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 132px;
}
.landing-page-child1 {
    position: absolute;
    top: -10px;
    left: 1100px;
    width: 100%;
    position: relative;
    filter: blur(141.7px);
    border-radius: 50%;
    background-color: rgba(253, 111, 0, 0.8);
    height: 200px;
}
.landing-page {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 1440px;
    height: 836px;
    text-align: left;
    font-size: 10.55px;
    color: #000;
}
.skills-child {
    position: absolute;
    top: 0px;
    left: 40px;
    background-color: #1e1e1e;
    width: 100%;
    height: 777px;
}
.my-skills {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 600;
    background: linear-gradient(40deg, #fd6f00 20%, #fff), #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.my-skills::after {
    content: '';
    position: absolute;
    top: 90%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #fd6f00; /* Underline color */
    transition: width 0.3s ease-in-out;
}

.my-skills:hover::after {
    width: 26%; /* Adjust the width of the underline as needed */
}

.my-experience{
    align-self: stretch;
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 600;
    background: linear-gradient(40deg, #fd6f00 20%, #fff), #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.my-experience::after{
    content: '';
    position: absolute;
    top: 90%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 0.5px;
    background-color: #fd6f00; /* Underline color */
    transition: width 0.3s ease-in-out;
}

.my-experience:hover::after{
    width: 43%; /* Adjust the width of the underline as needed */
}

.my-projects{
    align-self: stretch;
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 600;
    background: linear-gradient(40deg, #fd6f00 20%, #fff), #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.my-projects::after{
    content: '';
    position: absolute;
    top: 90%;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 1px;
    background-color: #fd6f00; /* Underline color */
    transition: width 0.3s ease-in-out;
}

.my-projects:hover::after{
    width: 35%; /* Adjust the width of the underline as needed */
}

.experienced-in-designing {
    align-self: stretch;
    position: relative;
    font-size: 13.5px;
    letter-spacing: 0.03em;
    display: inline-block;
    height: 40.5px;
    flex-shrink: 0;
}
.my-skills-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
    font-size: 42.45px;
}
.languages {
    position: relative;
    font-weight: 500;
}
.languages-wrapper {
    border-radius: 9px;
    background-color: #fd6f00;
    border: 0.3px solid #545454;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 7.5px 15px;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0.3px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.423); /* Orange shadow */
    }
}
.html-5-icon {
    width: 55px;
    position: relative;
    height: 55px;
    object-fit: cover;
    transition: transform 0.2s ease; /* Smooth transition for scaling */
}
.html-5-icon:hover{
    transform: scale(1.3);
}
.html-5-parent {
    align-self: stretch;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 40px;
}
.frame-parent3 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 45px;
}
.frame-item {
    width: 648.4px;
    position: relative;
    border-top: 1.1px solid #fd6f00;
    box-sizing: border-box;
    height: 1.1px;
}
.frame-parent4 {
    width: 414px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 45px;
}
.frame-parent2 {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 768.8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 67.5px;
}
.skills-inner {
    position: absolute;
    top: 74.5px;
    left: 336px;
    width: 768.8px;
    height: 633.8px;
}
.skills2 {
    position: absolute;
    top: 1636px;
    left: calc(50% - 720px);
    width: 1440px;
    height: 777px;
    font-size: 15.68px;
}
.experience-child {
    position: absolute;
    top: 0px;
    left: -50px;
    background-color: #000;
    width: 100%;
    height: 1120.3px;
}
.experience-item {
    position: absolute;
    top: 30px;
    left: -450px;
    filter: blur(350.1px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.4);
    width: 600px;
    height: 600px;
}
.experience-item1 {
    position: absolute;
    top: 900px;
    left: 1100px;
    filter: blur(180.1px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.4);
    width: 350px;
    height: 350px;
}
.acm-dbit-mumbai {
    position: relative;
    letter-spacing: -0.01em;
    line-height: 100%;
    font-weight: 600;
    color:#e86c0a;
}
.aug-2023- {
    position: relative;
    font-size: 14.25px;
    letter-spacing: -0.01em;
    line-height: 100%;
    color: #c6c6c6;
}
.acm-dbit-mumbai-parent {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10.5px;
}
.lt-creast-internship-mumbai-parent {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10.5px;
}
.frame-parent5 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 310.5px;
}
.organization {
    width: 364.5px;
    height: 783px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 129px;
}
.line-icon {
    width: 36px;
    position: relative;
    height: 783px;
}
.i-led-the-design-and-execution {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    padding-left: 19px;
}
.i-led-the-container {
    width: 333px;
    position: relative;
    font-size: 14.25px;
    letter-spacing: -0.01em;
    font-weight: 500;
    color: #c6c6c6;
    text-align: justify;
    display: inline-block;
}
.position {
    height: 783px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 39px;
}
.experience3 {
    position: absolute;
    top: 250.5px;
    left: calc(50% - 486.75px);
    width: 973.5px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 120px;
}
.my-experience-parent {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
}
.heading {
    position: absolute;
    top: 0px;
    left: 102px;
    width: 768.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: center;
    font-size: 42.45px;
    color: #fff;
}
.experience-parent {
    position: absolute;
    top: 81.75px;
    left: 235px;
    width: 973.5px;
    height: 1033.5px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.experience2 {
    position: absolute;
    top: 2413px;
    left: calc(50% - 720px);
    background-color: #000;
    width: 100%;
    height: 1120.3px;
    text-align: left;
    font-size: 21px;
    color: rgba(255, 255, 255, 0.95);
}
.projects-child {
    position: absolute;
    top: 0px;
    left: calc(60% - 915px);
    width: 100%;
    height: 2097px;
    object-fit: cover;
    
}
.projects-item {
    position: absolute;
    top: 1225px;
    left: 928px;
    filter: blur(150.6px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.4);
    width: 300px;
    height: 300px;
}
.projects-inner {
    position: absolute;
    top: 321px;
    left: 230px;
    filter: blur(150.6px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.4);
    width: 400px;
    height: 400px;
}
.projects-inner1 {
    position: absolute;
    top: 1700px;
    left: 80px;
    filter: blur(200.6px);
    border-radius: 50%;
    background-color: rgba(255, 112, 0, 0.4);
    width: 500px;
    height: 500px;
}
.my-projects-parent {
    position: absolute;
    top: 0px;
    left: 10px;
    width: 768.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 25px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.uiux-wrapper {
    width: 69.4px;
    border-radius: 7.71px;
    background-color: #f8f8f8;
    box-sizing: border-box;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6.4px 12.8px;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 3px 15px 2px rgba(253, 110, 0, 0.812); /* Orange shadow */
    }
}
.web-design-wrapper {
    width: 177.1px;
    border-radius: 7.71px;
    background-color: #f8f8f8;
    border: 0.3px solid #545454;
    box-sizing: border-box;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6.4px 12.8px;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 3px 15px 2px rgba(253, 110, 0, 0.812); /* Orange shadow */
    }
}
.app-design-wrapper {
    width: 120.2px;
    border-radius: 7.71px;
    background-color: #f8f8f8;
    border: 0.3px solid #545454;
    box-sizing: border-box;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6.4px 12.8px;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 3px 15px 2px rgba(253, 110, 0, 0.812); /* Orange shadow */
    }
}
.graphic-design-wrapper {
    width: 152.3px;
    border-radius: 7.71px;
    background-color: #f8f8f8;
    border: 0.3px solid #545454;
    box-sizing: border-box;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 6.4px 12.8px;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 3px 15px 2px rgba(253, 110, 0, 0.812); /* Orange shadow */
    }
}

main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
    gap: 20px;
    font-family: Poppins;
  }
  
  .card {
    top: 350px;
    left: -10px;
    width: 21rem;
    height: 28rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 3px solid;
    border-color: #fd6f00;
   
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
  
    h2 {
      position: absolute;
      inset: auto auto 20px 20px;
      margin: 0;
      transition: inset .3s .3s ease-out;
      font-size: 1rem;
      font-family: Poppins;
      font-weight: bold;
      text-transform: uppercase;
      color:#fd6e0000;
      z-index: 2;
    }
    
    p, a {
      position: absolute;
      opacity: 0;
      max-width: 80%;
      transition: opacity .3s ease-out;
      z-index: 2;
    }
    
    p {
      inset: auto auto 70px 20px;
      font-size: 0.9rem;
      color:#ffe8d6;
      text-align: left;
    }
    
    a {
      inset: auto auto 30px 20px;
      color: inherit;
      text-decoration: none;
      font-size: 0.9rem;
    }

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #fd6e00; /* Orange border */
        box-shadow: 0 7px 30px 3px rgba(253, 111, 0, 0.4); /* Orange shadow */
    }

    &:hover h2 {
      inset: auto auto 160px 20px;
      transition: inset .3s ease-out;
      color:#ff7811;
      text-decoration: solid;
      font-size: large;
    }
    
    &:hover p, &:hover a {
      opacity: 1;
      transition: opacity .5s .1s ease-in;
    }
    
    &:hover img {
      transition: opacity .3s ease-in;
      opacity: 0.4;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(79, 40, 7), transparent);
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures this doesn't block interactions */
    }

    &:hover::after {
        opacity: 1; /* Show gradient on hover */
    }
  
  }
  .card1 {
    top: 350px;
    left: 500px;
    width: 21rem;
    height: 28rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 3px solid;
    border-color: #fd6f00;
   
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
  
    h2 {
      position: absolute;
      inset: auto auto 20px 20px;
      margin: 0;
      transition: inset .3s .3s ease-out;
      font-size: 1rem;
      font-family: Poppins;
      font-weight: bold;
      text-transform: uppercase;
      color:#fd6e0000;
      z-index: 2;
    }
    
    p, a {
      position: absolute;
      opacity: 0;
      max-width: 80%;
      transition: opacity .3s ease-out;
      z-index: 2;
    }
    
    p {
      inset: auto auto 70px 20px;
      font-size: 0.9rem;
      color:#ffe8d6;
      text-align: left;
    }
    
    a {
      inset: auto auto 30px 20px;
      color: inherit;
      text-decoration: none;
      font-size: 0.9rem;
    }

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #fd6e00; /* Orange border */
        box-shadow: 0 7px 30px 3px rgba(253, 111, 0, 0.4); /* Orange shadow */
    }

    &:hover h2 {
      inset: auto auto 180px 20px;
      transition: inset .3s ease-out;
      color:#ff7811;
      text-shadow:#000;
      font-size: large;
    }
    
    &:hover p, &:hover a {
      opacity: 1;
      transition: opacity .5s .1s ease-in;
    }
    
    &:hover img {
      transition: opacity .3s ease-in;
      opacity: 0.5;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(79, 40, 7), transparent);
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures this doesn't block interactions */
    }

    &:hover::after {
        opacity: 1; /* Show gradient on hover */
    }
  
  }
  .card2 {
    top: 875px;
    left: -10px;
    width: 21rem;
    height: 28rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 3px solid;
    border-color: #fd6f00;
   
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
  
    h2 {
      position: absolute;
      inset: auto auto 20px 20px;
      margin: 0;
      transition: inset .3s .3s ease-out;
      font-size: 1rem;
      font-family: Poppins;
      font-weight: bold;
      text-transform: uppercase;
      color:#fd6e0000;
      z-index: 2;
    }
    
    p, a {
      position: absolute;
      opacity: 0;
      max-width: 80%;
      transition: opacity .3s ease-out;
      z-index: 2;
    }
    
    p {
      inset: auto auto 70px 20px;
      font-size: 0.9rem;
      color:#ffe8d6;
      text-align: left;
    }
    
    a {
      inset: auto auto 30px 20px;
      color: inherit;
      text-decoration: none;
      font-size: 0.9rem;
    }

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #fd6e00; /* Orange border */
        box-shadow: 0 7px 30px 3px rgba(253, 111, 0, 0.4); /* Orange shadow */
    }

    &:hover h2 {
      inset: auto auto 180px 20px;
      transition: inset .3s ease-out;
      color:#ff7811;
      text-shadow:#000;
      font-size: large;
    }
    
    &:hover p, &:hover a {
      opacity: 1;
      transition: opacity .5s .1s ease-in;
    }
    
    &:hover img {
      transition: opacity .3s ease-in;
      opacity: 0.5;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(79, 40, 7), transparent);
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures this doesn't block interactions */
    }

    &:hover::after {
        opacity: 1; /* Show gradient on hover */
    }
  
  }
  .card3 {
    top: 875px;
    left: 500px;
    width: 21rem;
    height: 28rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 3px solid;
    border-color: #fd6f00;
   
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
  
    h2 {
      position: absolute;
      inset: auto auto 20px 20px;
      margin: 0;
      transition: inset .3s .3s ease-out;
      font-size: 1rem;
      font-family: Poppins;
      font-weight: bold;
      text-transform: uppercase;
      color:#fd6e0000;
      z-index: 2;
    }
    
    p, a {
      position: absolute;
      opacity: 0;
      max-width: 80%;
      transition: opacity .3s ease-out;
      z-index: 2;
    }
    
    p {
      inset: auto auto 70px 20px;
      font-size: 0.9rem;
      color:#ffe8d6;
      text-align: left;
    }
    
    a {
      inset: auto auto 30px 20px;
      color: inherit;
      text-decoration: none;
      font-size: 0.9rem;
    }

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #fd6e00; /* Orange border */
        box-shadow: 0 7px 30px 3px rgba(253, 111, 0, 0.4); /* Orange shadow */
    }

    &:hover h2 {
      inset: auto auto 180px 20px;
      transition: inset .3s ease-out;
      color:#ff7811;
      text-shadow:#000;
      font-size: large;
    }
    
    &:hover p, &:hover a {
      opacity: 1;
      transition: opacity .5s .1s ease-in;
    }
    
    &:hover img {
      transition: opacity .3s ease-in;
      opacity: 0.5;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(79, 40, 7), transparent);
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures this doesn't block interactions */
    }

    &:hover::after {
        opacity: 1; /* Show gradient on hover */
    }
  
  }
  .card4 {
    top: 1400px;
    left: 500px;
    width: 21rem;
    height: 28rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 3px solid;
    border-color: #fd6f00;
   
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
  
    h2 {
      position: absolute;
      inset: auto auto 20px 20px;
      margin: 0;
      transition: inset .3s .3s ease-out;
      font-size: 1rem;
      font-family: Poppins;
      font-weight: bold;
      text-transform: uppercase;
      color:#fd6e0000;
      z-index: 2;
    }
    
    p, a {
      position: absolute;
      opacity: 0;
      max-width: 80%;
      transition: opacity .3s ease-out;
      z-index: 2;
    }
    
    p {
      inset: auto auto 70px 20px;
      font-size: 0.9rem;
      color:#ffe8d6;
      text-align: left;
    }
    
    a {
      inset: auto auto 30px 20px;
      color: inherit;
      text-decoration: none;
      font-size: 0.9rem;
    }

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #fd6e00; /* Orange border */
        box-shadow: 0 7px 30px 3px rgba(253, 111, 0, 0.4); /* Orange shadow */
    }

    &:hover h2 {
      inset: auto auto 160px 20px;
      transition: inset .3s ease-out;
      color:#ff7811;
      text-shadow:#000;
      font-size: large;
    }
    
    &:hover p, &:hover a {
      opacity: 1;
      transition: opacity .5s .1s ease-in;
    }
    
    &:hover img {
      transition: opacity .3s ease-in;
      opacity: 0.5;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(79, 40, 7), transparent);
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures this doesn't block interactions */
    }

    &:hover::after {
        opacity: 1; /* Show gradient on hover */
    }
  
  }
  .card5 {
    top: 1400px;
    left: -10px;
    width: 21rem;
    height: 28rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: absolute;
    box-shadow: 0 10px 30px 5px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 3px solid;
    border-color: #fd6f00;
   
    img {
      position: absolute;
      object-fit: cover;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      opacity: 1;
      transition: opacity .2s ease-out;
    }
  
    h2 {
      position: absolute;
      inset: auto auto 20px 20px;
      margin: 0;
      transition: inset .3s .3s ease-out;
      font-size: 1rem;
      font-family: Poppins;
      font-weight: bold;
      text-transform: uppercase;
      color:#fd6e0000;
      z-index: 2;
    }
    
    p, a {
      position: absolute;
      opacity: 0;
      max-width: 80%;
      transition: opacity .3s ease-out;
      z-index: 2;
    }
    
    p {
      inset: auto auto 70px 20px;
      font-size: 0.9rem;
      color:#ffe8d6;
      text-align: left;
    }
    
    a {
      inset: auto auto 30px 20px;
      color: inherit;
      text-decoration: none;
      font-size: 0.9rem;
    }

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 3px solid #fd6e00; /* Orange border */
        box-shadow: 0 7px 30px 3px rgba(253, 111, 0, 0.4); /* Orange shadow */
    }

    &:hover h2 {
      inset: auto auto 180px 20px;
      transition: inset .3s ease-out;
      color:#ff7811;
      text-shadow:#000;
      font-size: large;
    }
    
    &:hover p, &:hover a {
      opacity: 1;
      transition: opacity .5s .1s ease-in;
    }
    
    &:hover img {
      transition: opacity .3s ease-in;
      opacity: 0.5;
    }

    &::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgb(79, 40, 7), transparent);
        opacity: 0; /* Hidden by default */
        transition: opacity 0.3s ease-in-out;
        pointer-events: none; /* Ensures this doesn't block interactions */
    }

    &:hover::after {
        opacity: 1; /* Show gradient on hover */
    }
  
  }

  .button1{
    background-color: #db5f00;
    padding: 4px 11px;
    border-radius: 20px;
  }

  .material-symbols-outlined {
    vertical-align: middle;
}

.frame-parent7 {
    position: absolute;
    top: 234.01px;
    left: 138px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 11px;
    font-size: 15.42px;
    color: #000;
}

.web-designs-icon {
    position: absolute;
    top: 0px;
    left: 78.75px;
    width: 204.8px;
    height: 366.8px;
    object-fit: cover;
}
.web-designs-icon1 {
    position: absolute;
    top: 57.75px;
    left: 0px;
    width: 204.8px;
    height: 309px;
    object-fit: cover;
}
.web-designs-parent {
    width: 283.5px;
    position: relative;
    height: 366.8px;
}
.group-wrapper {
    align-self: stretch;
    border-radius: 9px;
    background-color: #ffebdb;
    height: 366.8px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 0px 21px 0px 25.5px;
    box-sizing: border-box;
}
.web-design1 {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.03em;
}
.business-landing-page {
    align-self: stretch;
    position: relative;
    font-size: 1px;
    letter-spacing: 0.03em;
    color: #fff;
}
.web-design-parent {
    width: 294.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 7.5px;
}
.frame-parent9 {
    width: 333.8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 27.8px;
}
.frame-parent8 {
    position: absolute;
    top: 342px;
    left: 9px;
    width: 750px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 300px 62.5px;
    text-align: left;
    font-size: 1px;
    color: #fd6f00;
}

.frame-parent6 {
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    top: 54px;
    left: calc(50% - 383.5px);
    width: 100%;
    height: 1958px;
    margin: 0;
}
.projects1 {
    position: absolute;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    top: 3533px;
    width: 100%;
    height: 2200px;
}
.contact-us-child {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: #1e1e1e;
    width: 1437px;
    height: 453px;
}
.lets-design-together {
    align-self: stretch;
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 600;
    background: linear-gradient(40deg, #fd6f00 20%, #fff), #fff;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: Poppins;
}
.lets-design-together-wrapper {
    width: 500px;
    position: relative;
    height: 64px;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.hello {
    font-weight: 600;
    color: #fd6f00;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.id-love-to-container {
    align-self: stretch;
    position: relative;
    font-size: 13.46px;
    letter-spacing: 0.03em;
    display: inline-block;
    height: 40.4px;
    flex-shrink: 0;
    font-family: Poppins;
    color: white;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.group-parent1 {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 25px;
}
.group-child8 {
    position: absolute;
    top: 0px;
    left: 0px;
    border-radius: 10.47px;
    background-color: #f8f8f8;
    border: 0.7px solid #afafaf;
    box-sizing: border-box;
    width: 469px;
    height: 56.1px;
}
.enter-your-email {
    position: absolute;
    top: 3px;
    left: 19.45px;
    letter-spacing: 0.03em;
    font-family: Poppins;
    height: 51px;
    width: 425px;
    border: none;
    background-color: #f8f8f8;
}
.rectangle-parent {
    width: 469px;
    position: relative;
    height: 56.1px;
}
.contact-me {
    position: relative;
    letter-spacing: 0.03em;
    font-weight: 600;
    color: white;
    font-size: 15.95px;
    font-family: Poppins;
}
.contact-me:focus {
    border-color: #fd6f00;
    outline: none;
}
.contact-me-wrapper {
    width: 166.1px;
    border-radius: 10.47px;
    background-color: #fd6f00;
    height: 56.1px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 14px 27px;
    box-sizing: border-box;
    font-size: 19.95px;
    color: #fff;
    font-family: Poppins;
    cursor: pointer;
    transition: box-shadow 0.3s ease-out, border 0.3s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 12px 0px rgba(253, 110, 0, 0.463); /* Orange shadow */
    }
}
.group-parent2 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;;
    font-size: 15.71px;
    color: #797979;
    height: 100%;
    z-index:auto;
}
.form-container {
    display: flex;
    flex-direction: column;
    width: 500px;
    max-width: 1000px;
    margin: 0 auto;
    gap: 15px;
}
.form-container input,
.form-container textarea,
.form-container button {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    height: 50px;
}
.form-container label {
    font-size: 14px;
    margin-bottom: 5px;
    font-family: 'Poppins';
    color: #ccc;
}
.form-container button {
    background-color:#fd6e00;
    color: white;
    cursor: pointer;
    border: none;
    transition: background-color 0.3s ease;
}
.form-container button:hover {
    background-color:#db5f00;
}
.frame-parent15 {
    position: absolute;
    top: 62.04px;
    left: calc(50% - 383.5px);
    width: 766.8px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: flex-start;
    gap: 80px;
}
.contact-us {
    position: absolute;
    top: 5630px;
    left: 0px;
    width: 100%;
    height: 500px;
    font-size: 42.34px;
    min-height: 100vh;
}
.frame-inner {
    width: 61.3px;
    position: relative;
    border-radius: 50%;
    height: 61.3px;
    object-fit: cover;
}
.sahil-davkhar3 {
    margin: 0;
    font-weight: 600;
}
.create-design {
    margin: 0;
    font-size: 13.5px;
}
.sahil-davkhar-create-container {
    position: relative;
    line-height: 149.96%;
    text-shadow: 0px 1.4961038827896118px 16.76px rgba(255, 137, 45, 0.35);
}
.ellipse-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 17.2px;
}
.home-container {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 7.5px 15.5px;
}
.frame-parent18 {
    align-self: center;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 50px;
    font-size: 15.71px;
    font-family: Poppins;
    width: 600px;
}
.dribbble-icon2 {
    width: 22.4px;
    position: relative;
    height: 22.4px;
    object-fit: cover;
    transition: box-shadow 0.2s ease-out, border 0.2s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.856); /* Orange shadow */
    }
}
.instagram-icon2 {
    width: 22.4px;
    position: relative;
    height: 22.4px;
    object-fit: cover;
    transition: box-shadow 0.2s ease-out, border 0.2s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.856); /* Orange shadow */
    }
}
.linkedin-negative1 {
    width: 21.9px;
    position: relative;
    height: 21.9px;
    overflow: hidden;
    flex-shrink: 0;
    transition: box-shadow 0.2s ease-out, border 0.2s ease-out; /* Smooth transition */

    /* Default border (transparent) */
    border: 0px solid transparent;

    &:hover {
        /* Add orange border and box-shadow on hover */
        border: 0px solid #db5f00; /* Orange border */
        box-shadow: 0 2px 10px 0px rgba(253, 110, 0, 0.856); /* Orange shadow */
    }
}
.frame-parent17 {
    width: 900px;
    left: 0px;
    display: flex;
    flex-direction:column;
    align-items: center;
    justify-content: center;
    gap: 47.1px;
    left: 400px;
}
.sahildavkhar {
    color: #e86c0a;
    font-family: Poppins;
}
.sahildavkhar-all-rights-reserv-wrapper {
    align-self: stretch;
    background-color: #545454;
    width: 1613px;
    height: 60px;
    display: flex;
    flex-direction: row;
    align-self: center;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 15.71px;
    color: #fff;
}
.frame-parent16 {
    position: absolute;
    top: 67.32px;
    left: 0px;
    width: 1440px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 61px;
}
.footer {
    position: absolute;
    top: 6363px;
    left: 0px;
    background-color: #f8f8f8;
    width: 100%;
    align-self: center;
    align-items: center;
    justify-content: center;
    height: 425.9px;
    text-align: left;
    font-size: 27.5px;
    color: #000;
}
.portfolio {
    width: 100%;
    position: relative;
    background-color: #1e1e1e;
    height: 6487px;
    overflow: hidden;
    text-align: center;
    justify-content: center;
    font-size: 42.45px;
    color: #fff;
    font-family: Poppins;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
    height: 100%; /* Height for horizontal scrollbar */
    margin: 0%;
}

/* Scrollbar Track */
::-webkit-scrollbar-track {
    background:#1e1e1e; /* Track color */
    border-radius: 00px; /* Rounded corners for track */
}

/* Scrollbar Handle */
::-webkit-scrollbar-thumb {
    background: #fe5f01; /* Handle color */
    border-radius: 10px; /* Rounded corners for thumb */
}

/* Scrollbar Handle on Hover */
::-webkit-scrollbar-thumb:hover {
    background: #DB6000; /* Handle color on hover */
}