@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sanchez&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth !important;
}

:root {
    --dark-color: #232323;
    --light-color: #fff;
    --dark-menu: #1e1e1e;
}



/* *************** Multi *************** */

section h1, h2 {
    font-family: 'DM Mono', monospace;
}

#home h1, h2 {
    font-family: 'Sanchez', cursive;
}

#homeTextRunningElement i {
    font-family: 'Sanchez', cursive;
}

#contact {
    font-family: Arial, Helvetica, sans-serif;
}


/* *************** Start Page *************** */

#startPage {
    position: relative;
    width: 100vw;
    height: 100vh;
    overflow-x: hidden;
}

#startFullScreen {
    height: 100vh;
    width: 100vw;
    background-color: var(--dark-color);
    display: flex;
    justify-content: center;
    align-items: center;
}

#startText {
    display: flex;
    color: var(--light-color);
}

/* #startText span i {
    font-family: 'Itim', cursive;
} */

#startMid {
    width: 100vw;
    position: absolute;
    bottom: 0;
    height: 0;
    background-color: aquamarine;
}

#shutBox {
    display: none;
}

#shutter {
    width: 100vw;
    position: absolute;
    bottom: 0;
    height: 0;
    background-color: var(--light-color);
    /* display: flex; */
    background-repeat: no-repeat;
}


/* **********Hamburger Menu********** */

#menuToggle {
    z-index: 99;
    display: block;
    position: fixed;
    top: 50px;
    left: 50px;
    z-index: 111;
    -webkit-user-select: none;
    user-select: none;
}


#menuToggle a {
    text-decoration: none;
    color: var(--light-color);
    transition: color 0.3s ease;
}

#menuToggle a:hover {
    color: var(--clr);
    text-shadow: 0 0 25px var(--clr);

}

#menuToggle input {
    display: block;
    width: 40px;
    height: 32px;
    position: absolute;
    top: -11px;
    left: -5px;
    cursor: pointer;
    opacity: 0;
    z-index: 122;
    -webkit-touch-callout: none;
}

#menuToggle span {
    display: block;
    width: 33px;
    height: 4px;
    margin-bottom: 5px;
    position: relative;
    background: var(--dark-color);
    border-radius: 3px;
    z-index: 121;
    transform-origin: 4px 0px;
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
        opacity 0.55s ease;
}

#menuToggle span:first-child {
    transform-origin: 0% 0%;
}

#menuToggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

#menuToggle input:hover~span {
    transform: scaleX(1.1);
}

#menuToggle input:hover~span:nth-last-child(2) {
    transform: scaleX(1.1);
}

#menuToggle input:hover~span:nth-last-child(3) {
    transform: scaleX(0.65);
}

#menuToggle input:checked~span {
    opacity: 1;
    transform: rotate(45deg) translate(-2px, -1px);
    background: var(--light-color);
}

#menuToggle input:checked~span:nth-last-child(3) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}

#menuToggle input:checked~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(0, -1px);
}

#menuToggle input:checked:hover~span {
    opacity: 1;
    transform: rotate(45deg) translate(10px, -10px) scaleX(0.5);
    background: var(--light-color);
}

#menuToggle input:checked:hover~span:nth-last-child(3) {
    opacity: 1;
    transform: rotate(0deg) scale(0.8, 0.8);
}

#menuToggle input:checked:hover~span:nth-last-child(2) {
    transform: rotate(-45deg) translate(11px, 13px) scaleX(0.5);
}

#menu {
    position: absolute;
    width: 300px;
    height: 100vh;
    margin: -100px 0 0 -50px;
    z-index: 111;
    padding: 50px;
    padding-top: 125px;
    background: #2b2b2b;
    list-style-type: none;
    -webkit-font-smoothing: antialiased;
    transform-origin: 0% 0%;
    transform: translate(-100%, 0);
    transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
}

#menu li {
    padding: 10px 0;
    font-size: 25px;
}

#menuToggle input:checked~ul {
    transform: none;
}



/* *******Social Links Container******* */

.socials {
    z-index: 99;
    position: fixed;
    top: 5%;
    right: 5%;
}

.socials ul {
    position: relative;
    display: flex;
}

.socials ul li {
    position: relative;
    list-style: none;
    margin: 0 10px;
    cursor: pointer;
}

.socials ul li a {
    text-decoration: none;
}

.socials ul li a .fa-brands {
    font-size: 30px;
    color: #222;
}

.socials ul li a::before {
    font-family: "FontAwesome";
    position: absolute;
    top: -1px;
    left: 0;
    font-size: 30px;
    height: 0;
    overflow: hidden;
    transition: 0.5s ease-in-out;
}

.socials ul li:nth-child(1) a::before {
    content: "\f16d";
    /* background-image: linear-gradient(45deg,
            #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%,
            #bc1888 100%); */
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    border-bottom: 5px solid #dc2743;
}

.socials ul li:nth-child(2) a::before {
    content: "\f232";
    color: #25D366;
    border-bottom: 4px solid #25D366;
}

.socials ul li:nth-child(3) a::before {
    content: "\f0e1";
    color: #1DA1F2;
    border-bottom: 4px solid #1DA1F2;
}

.socials ul li:hover a::before {
    height: 110%;
    overflow-y: hidden;
}




/* *******Home Image Container******* */

.homeImgContainer {
    width: 100vw;
    height: 30vh;
}

.homeImgContainer .imgRender img {
    position: absolute;
    right: 0;
    top: 20%;
    width: 30vw;
    max-width: 350px;
    height: 50vw;
    max-height: 500px;
}




/* *********Home Text Container********* */

.leftTextContainer {
    position: relative;
    width: 60vw;
    height: 60vh;
    left: 5%;
    top: 25%;
}

.leftTextContainer h2 {
    color: #7d7d7df9;
    font-size: 3.5vw;
}

.leftTextContainer h1 {
    color: #b8b8b8;
    font-size: 3.5rem;
    width: 60vw;
}

h3 {
    font-size: 2rem;
    color: #3b3b3b;
    font-weight: bolder;
}

#Home {
    display: flex;
    justify-content: space-between;
}

.downArrow {
    text-align: center;
    width: 100vw;
}

.downArrow svg {
    animation: myAnim 3s ease 0s infinite;
    cursor: pointer;
}

@keyframes myAnim {
    0% {
        transform: scale3d(0.75, 1.25, 1);
        /* transform: translateY(-20px); */
    }

    20% {
        transform: translateY(20px);
    }


    50% {
        transform: translateY(-20px);
    }

    80% {
        transform: translateY(20px);
    }

    100% {
        transform: scale3d(0.75, 1.25, 1);
        /* transform: translateY(-20px); */
    }

}


/* ************** About Section ************** */

#About {
    margin-top: 10rem;
    width: 100vw;
    /* height: 100vh; */
}

.aboutHolder {
    display: flex;
    height: auto;
    width: 100vw;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
}

.aboutImageHolder {
    background-color: #22263633;
    border-radius: 30px;
    position: relative;
    animation: moveImage 5s ease-in-out alternate 0s infinite;
}

@keyframes moveImage {
    0% {
        transform: (0deg);
    }

    25% {
        transform: rotate(18deg);
    }

    50% {
        transform: rotate(-18deg);
    }

    75% {
        transform: (-18deg);
    }

    100% {
        transform: (0deg);
    }
}


.aboutImageHolder span:nth-child(n) {
    position: absolute;
    width: 2rem;
    height: 6px;
    border-radius: 80px;
}

.aboutImageHolder span:nth-child(1) {
    bottom: 2rem;
    transform: rotate(-25deg);
    left: -3rem;
    background-color: #ff4000;
    animation: shortLong 1.5s ease 1s infinite;
}

.aboutImageHolder span:nth-child(2) {
    bottom: 8rem;
    /* transform: rotate(15deg); */
    left: -3.5rem;
    background-color: #1df268;
    animation: shortLong 1.5s ease 3s infinite
}

.aboutImageHolder span:nth-child(3) {
    bottom: 14rem;
    transform: rotate(8deg);
    left: -2.5rem;
    background-color: #ff4000;
    animation: shortLong 1.5s ease 0s infinite;
}

.aboutImageHolder span:nth-child(4) {
    bottom: 20rem;
    transform: rotate(20deg);
    left: -1.4rem;
    background-color: #fffc2f;
    animation: shortLong 1.5s ease 2s infinite;
}

.aboutImageHolder span:nth-child(5) {
    bottom: 26rem;
    transform: rotate(30deg);
    left: -.2rem;
    background-color: #1DA1F2;
    animation: shortLong 1.5s ease 4s infinite;
}

.aboutImageHolder span:nth-child(6) {
    top: -1.2rem;
    transform: rotate(80deg);
    left: 7rem;
    background-color: #1df268;
    animation: shortLong 1.5s ease 3s infinite;
}

.aboutImageHolder span:nth-child(7) {
    top: -.5rem;
    transform: rotate(115deg);
    left: 15rem;
    background-color: #fffc2f;
    animation: shortLong 1.5s ease 1s infinite;
}

.aboutImageHolder span:nth-child(8) {
    bottom: 24rem;
    transform: rotate(-24deg);
    right: -4.5rem;
    background-color: #ff4000;
    animation: shortLong 1.5s ease 0s infinite;
}

.aboutImageHolder span:nth-child(9) {
    bottom: 17rem;
    transform: rotate(10deg);
    right: -3.5rem;
    background-color: #1df268;
    animation: shortLong 1.5s ease 3s infinite;
}

.aboutImageHolder span:nth-child(10) {
    bottom: 10rem;
    transform: rotate(25deg);
    right: -2.5rem;
    background-color: #1DA1F2;
    animation: shortLong 1.5s ease 2s infinite;
}

.aboutImageHolder span:nth-child(11) {
    bottom: 3rem;
    transform: rotate(30deg);
    right: -1.5rem;
    background-color: #ff4000;
    animation: shortLong 1.5s ease 4s infinite;
}

.aboutImageHolder span:nth-child(12) {
    bottom: -2.5rem;
    transform: rotate(45deg);
    right: 0rem;
    background-color: #fffc2f;
    animation: shortLong 1.5s ease 1s infinite;
}

.aboutImageHolder span:nth-child(13) {
    bottom: -2.5rem;
    transform: rotate(100deg);
    right: 7rem;
    background-color: #1df268;
    animation: shortLong 1.5s ease 2s infinite;
}

.aboutImageHolder span:nth-child(14) {
    bottom: -1.2rem;
    right: 14rem;
    background-color: #1DA1F2;
    transform: rotate(115deg);
    animation: shortLong ease 1.5s infinite;
}

@keyframes shortLong {
    0% {
        width: 2rem;
    }

    25% {
        width: 2.1rem;
    }

    50% {
        width: 1.7rem;
    }

    75% {
        width: 2.3rem;
    }

    100% {
        width: 2rem;
    }
}
/* 
@keyframes Rotate {
    0% {
        transform: rotate(360deg);
    }
    25% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
 */
.aboutImage {
    margin-top: 20px;
    margin-left: 20px;
    width: 18rem;
    display: flex;
    height: 26rem;
    justify-content: center;
    transform: rotate(10deg);
    border-radius: 30px;
    overflow-y: hidden;
    overflow-x: hidden;
}

.aboutImageRender {
    content: url("./abt-img.jpg");
    object-fit: fill;
    border-radius: 30px;
    width: 18rem;
    height: 27rem;
    transform: scalex(1.2);
    /* background-color: #1DA1F2; */
}

.aboutText {
    margin-top: 2rem;
    width: 70vw;
    padding: 0 5vw;
}

.aboutText p {
    width: 70vw;
    margin-bottom: 2rem;
    padding: 0 5vw;
    font-size: 1.25rem;
    text-align: justify;
}

.aboutText p::before {
    content: url(cross.svg);
    margin-right: 1.5rem;
}

#About h1 {
    text-align: center;
    font-weight: bold;
    font-size: 3.2rem;
    color: #ff1f1f;
    text-shadow: #ff1f1f 0 0 15px;
    margin-bottom: 3rem;
}


/* ************** Projects Section ************** */

#Projects {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    /* height: 100vh; */
    width: 100vw;
}

#Projects h1 {
    text-align: center;
    font-weight: bold;
    font-size: 3.2rem;
    color: #ff1f1f;
    text-shadow: #ff1f1f 0 0 15px;
}


.projectHolder {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    /* grid-template-columns:  repeat(3, 1fr); */
    flex-wrap: wrap;
    column-gap: 2rem;
    margin-inline: 2rem;
}

.projectCard {
    margin-top: 2rem;
    height: 28rem;
    width: 28rem;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.projectCard h2 {
    display: block;
    font-weight: bolder;
    font-size: 2rem;
    margin: 0 !important;
}

.projectImage:hover {
    transform: scale(1.1);
    transition: 1s ease;
}

.projectImage {
    position: relative;
    overflow: hidden;
    height: 20rem;
    width: 25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 0 15px #ff1f1f;
}

.projectImage img {
    height: 20rem;
    width: 25rem;
    overflow: hidden;
}

.projectDesc {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding-top: 1rem;
    background-color: #6666666a;
    color: #fff;
    font-weight: bold;
    font-size: 2rem;
    width: 25rem;
    position: absolute;
    bottom: -5rem;
    opacity: 0;
}

.projectDesc .name {
    font-size: 1rem;
    padding-inline: 1rem;
}

.projectImage:hover .projectDesc {
    display: block;
    transition: 1s ease;
    position: absolute;
    bottom: 0;
    opacity: 1;
}

.projectDesc a {
    text-decoration: none;
}

.projectDesc a i {
    color: rgb(30, 48, 80);
    font-size: 1.5rem;
    margin-inline: .25rem;
}

.projectDesc a:hover i {
    color: #fff;
    transition: .2s ease;
}

#Projects h2 {
    display: block;
    font-weight: bolder;
    font-size: 2rem;
    margin: 2rem 0;
}

/* ************** Achievements Section ************** */

#Achievements {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
    width: 100vw;
}

#Achievements h1 {
    text-align: center;
    font-weight: bold;
    font-size: 3.2rem;
    color: #ff1f1f;
    text-shadow: #ff1f1f 0 0 15px;
}

.achievementHolder {
    margin-top: 5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 2rem;
    margin-inline: 2rem;
    width: 100vw;
}

.achievementCard {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.achievementDesc h2 {
    margin-bottom: 2rem;
    /* text-align: center; */
    font-size: 2.2rem;
}

.achievementCard .achievementDetails {
    display: flex;
    align-items: center;
    gap: 15rem;
    width: 85%;
    /* border-top: 2px solid #a9a9a9; */
    border-bottom: 1px solid #e3e3e3;
    padding: 2rem;
}

.achievementCard:nth-child(n+2) .achievementDetails {
    flex-direction: row-reverse;
}


.achievementImage {
    width: 25rem;
    height: 20rem;
    align-items: center;
    display: flex;
}

.achievementImage img {
    width: 22rem;
    height: 17rem;
    box-shadow: 0 0 20px #ff1f1f;
}

.achievementImage:hover {
    transform: scale(1.1);
    transition: 1s ease-in-out;
    cursor: pointer;
}

.achieveDesc {
    font-size: 1.5rem;
    text-align: justify;
}

.achieveDesc span {
    color: #FF1F1F;
    font-weight: bold;
}


/* **********Skills Section********** */

#Skills {
    margin-top: 7rem;

}

#Skills h1 {
    text-align: center;
    font-weight: bold;
    font-size: 3.2rem;
    color: #ff1f1f;
    text-shadow: #ff1f1f 0 0 15px;
}

.skillHolder {
    padding: 0 5rem;
    display: flex;
    flex-wrap: wrap;
    width: 100vw;
    /* height: 100vh; */
    margin-top: 5rem;
    justify-content: space-evenly;
    align-items: center;
    column-gap: 5rem;
    row-gap: 5rem;
}

.parent-skill {
    width: 200px;
    height: auto;
}

.skill {
    width: 200px;
    height: 200px;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    /* box-shadow: inset 10px 10px 19px #ff8888, inset -10px -10px 19px #fc7d7d; */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.progress {
    width: 97%;
    height: 97%;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    /* background: linear-gradient(280deg, #371818, #2b2323); */
    box-shadow: inset 15px 15px 30px #ff6e6e, inset -15px -15px 30px #ffffff;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.progress-number {
    font-family: 'Poppins', sans-serif;
    color: #f9004d;
    font-size: 2rem;
}

.title {
    font-family: 'Poppins', sans-serif;
    color: #f9004d;
    font-size: 2rem;
    display: block;
    text-align: center;
    margin-top: 20px;
}

/* ***********************Download Section *********************** */

#Download {
    margin-top: 5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

#Download a{
    text-decoration: none;
}

.btn-86 {
    --tilt: 40px;
    display: block;
    box-sizing: border-box;
    padding: 20px 45px;
    border-radius: 999px;
    position: relative;
    overflow: hidden;
    color: #ff1f1f;
    background: none;
    text-transform: uppercase;
    border: 3px solid currentColor;
}

.btn-86 span {
    font-weight: 900;
}

.btn-86:before,
.btn-86:after {
    content: "";
    z-index: -1;
    width: calc(100% + var(--tilt));
    height: 100%;
    position: absolute;
    top: 0;
    background: #ff1f1f;
    clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 100%, 0 100%);
    transition: transform 0.6s;
}

.btn-86:before {
    left: calc(-100% - var(--tilt));
}

.btn-86:after {
    left: 100%;
    transform: rotate(180deg);
}

.btn-86:hover:before {
    transform: translateX(100%);
}

.btn-86:hover:after {
    transform: rotate(180deg) translateX(100%);
}

.btn-86:hover .letters span {
    color: #fff;
}

/* ***********************Footer Section *********************** */

#Footer {
    width: 100vw;
    margin: 5rem 0;
    margin-top: 5rem;
}

.footerHolder {
    width: 100vw;
    background-color: #040919;
    display: flex;
    justify-content: space-evenly;
    /* align-items: center; */
    padding: 3rem;
}

.footerHolder #footerMenu a {
    color: #fff;
    font-size: 1.2rem;
    text-decoration: none;
}

.footerHolder #footerMenu a:hover {
    color: #ff1f1f;
    transition: .2s;
}

.footerHolder #footerMenu a li {
    list-style: none;
    margin-bottom: 1rem;
    border-bottom: 1px solid #2d3247;
    padding-bottom: .8rem;
}

.footerHolder #footerMenu a li:hover {
    transform: scale(1.1);
    transition: .5s;
}

.footerNav h3 {
    color: #fff;
    align-self: flex-start;
    font-size: 1.5rem;
    margin-bottom: 1rem;
    padding: .5rem 10.5rem .5rem .1rem;
    border-bottom: 2px solid #ff1f1f;
}

.fa-angle-right {
    color: #ff1f1f;
    font-size: 1.2rem;
    margin-right: .5rem;
}

.footerContact h3 {
    color: #fff;
    align-self: flex-start;
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    padding: .5rem 10.5rem .5rem .1rem;
    border-bottom: 2px solid #ff1f1f;
}

.footerContactHolder p {
    color: #fff;
}

.footerContactHolder .fa {
    margin-right: .5rem;
}

.footerContact .footerContactHolder p {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #2d3247;
    padding-bottom: .8rem;
}

.footerContact .footerContactHolder p:hover {
    color: #ff1f1f;
    cursor: pointer;
    transform: scale(1.1);
    transition: .5s;
}

.footerContact .footerContactHolder p:hover i, b {
    color: #fff;
    cursor: pointer;
}

.footerContactHolder a {
    text-decoration: none;
}

.footerContact .footerContactLinks a {
    font-size: 20px;
    display: inline-block;
    background: #222636;
    color: #eee;
    line-height: 1;
    padding: 8px 8px;
    margin-right: 4px;
    border-radius: 50%;
    text-align: center;
    width: 36px;
    height: 36px;
    transition: 0.3s;
    margin-right: 1rem;
}

.footerContact .footerContactLinks a:hover {
    transform: scale(1.25);
}

.footerContact .footerContactLinks a:hover:nth-child(1) {
    background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, transparent 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, transparent 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, transparent 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, transparent), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);
}

.footerContact .footerContactLinks a:hover:nth-child(2) {
    background: #25D366;
}

.footerContact .footerContactLinks a:hover:nth-child(3) {
    background: #1DA1F2;
}

/* **********Media Queries********** */

@media (max-width: 912px) {
    .homeImgContainer .imgRender img {
        position: absolute;
        top: 50%;
        width: 40vw;
        height: 60vw;
    }

    .leftTextContainer {
        width: 100vw;
    }

    .leftTextContainer h2 {
        color: #9f9f9f;
        font-size: 5vw;
    }

    .leftTextContainer h1 {
        color: #b8b8b8;
        font-size: 6vw;
        width: 90vw;
    }

    h3 {
        font-size: 3.5vw;
        color: #343434;
    }

    .homeHolder {
        display: flex;
        flex-direction: column;
    }

    #About {
        width: 100vw;
        /* height: 100vh; */
    }

    .aboutHolder {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .aboutImageHolder {
        margin-bottom: 3rem;
        margin-top: 1.5rem;
    }

    .aboutText {
        width: 100vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .aboutImageRender {
        content: url("./abt-img.jpg");
        border-radius: 30px;
        width: 18rem;
        height: 27rem;
        transform: scalex(1.2);
    }


    .aboutText p {
        width: 100%;
        margin-bottom: 1rem;
        margin-left: 1rem;
        padding: 0 5vw;
        font-size: 1.25rem;
        text-align: justify;
    }

    #Projects {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5rem;
        /* height: 100vh; */
        width: 100vw;
        text-align: center;
    }

    .projectImage {
        position: relative;
        overflow: hidden;
        height: 20rem;
        width: 20rem;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 0 15px #ff1f1f;
    }

    .projectDesc {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding-top: 1rem;
        background-color: #6666666a;
        color: #fff;
        font-weight: bold;
        font-size: 2rem;
        width: 20rem;
        position: absolute;
        bottom: -5rem;
        opacity: 0;
    }

    .achievementCard .achievementDetails {
        display: flex;
        flex-direction: column;
        gap: 3rem;
        align-items: center;
        justify-content: center;
    }

    .achievementCard .achievementDetails h2 {
        text-align: center;
    }

    .achievementCard:nth-child(n+2) .achievementDetails {
        flex-direction: column;
    }

    .achievementImage {
        width: 22rem;
        height: 17rem;
        align-items: center;
        display: flex;
    }

    .achievementImage img {
        width: 20rem;
        height: 15rem;
        box-shadow: 0 0 20px #ff1f1f;
    }

    #Footer .footerHolder {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
}

@media (max-width: 660px) {
    #Projects {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 5rem;
        text-align: center;
        /* height: 100vh; */
        width: 100vw;
    }
}