@font-face {
    font-family: montserrat;
    src: url(../fonts/Montserrat-VariableFont_wght.ttf);
}

* {
    margin: 0;
    padding: 0;
    font-family: montserrat;
    scroll-behavior: smooth;
}


button {
    cursor: pointer;
}

a {
    cursor: pointer;
}

body p {
    margin: 0;
    padding: 0;
}

:root {

    font-size: 62.5%;
    /* 10px on default */



    --text-color: #f8f9fa !important;
    --text-color2: #ced4da;
    --background-color: #212529;
    --background-color-rgb: 33, 37, 41;

    --color1: #f8f9fa;
    --color2: #e9ecef;
    --color3: #dee2e6;
    --color4: #ced4da;
    --color5: #adb5bd;
    --color6: #6c757d;
    --color7: #495057;
    --color8: #343a40;
    --color9: #212529;


    --color10: #3acfd5;
    --color11: #3a6073;
    --color12: #3a7bd5;
}

body .text-primary {
    color: var(--text-color) !important;
}

body .text-secondary {
    color: var(--color10) !important;
}



body {
    background-color: var(--background-color) !important;

}


.dark-mode {}



/* scroll bar settings */


::-webkit-scrollbar {
    width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
    background: var(--color8);
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: var(--color7);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: var(--color6);
}



/* page animation */
.hidden-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.visible-animation {
    opacity: 1;
    transform: translateY(0);
}



.modal-content {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

.modal-overflow {
    max-height: 80vh !important;
    overflow: auto !important;
}

.modal-paragraph {
    color: var(--text-color2) !important;
    font-size: .9rem !important;
    line-height: 1.5 !important;
    max-width: 90%;
    text-align: justify !important;
}
























/* nav */
.nav-container {
    padding: 10px 80px;
    background-color: var(--color9);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
}

.nav-link {
    color: var(--text-color) !important;
    text-transform: uppercase !important;
    font-weight: 500 !important;

}

.nav-link:hover {
    color: var(--color10) !important;
}


.profile-image {
    height: 50px;
    width: 50px;

    border-radius: 50%;
    padding: 5px;
    background-image: linear-gradient(to bottom right, #3a7bd5, #3a6073, #3acfd5);
    -webkit-clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
    clip-path: polygon(50% 0%, 80% 10%, 100% 35%, 100% 65%, 80% 90%, 50% 100%, 20% 90%, 0 65%, 0 35%, 20% 10%);
}

body .navbar-toggler {
    border: 0 !important;
    /* Optional: border color */
}

.navbar-toggler .navbar-toggler-icon {
    display: none;
}










/* home */
.home {
    width: 100%;
    padding-top: 150px;
    padding-bottom: 50px;
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    background-color: #212529;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(180,768,367)'%3E%3Cstop offset='0' stop-color='%23212529'/%3E%3Cstop offset='1' stop-color='%23343A40'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='639' height='532.5' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.01'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-size: cover;
}

.home-header {
    font-size: 5rem;
    font-weight: 600;
}


.custom-max-width {
    max-width: 700px;
    /* or any value you prefer */
    margin-left: auto;
    margin-right: auto;
}

.home button {
    width: fit-content;
    align-self: center;
    padding: 1.3em 3em;
    font-size: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 500;
    color: #000;
    background-color: #fff;
    border: none;
    border-radius: 30px;
    box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease 0s;
    cursor: pointer;
    outline: none;
}

.home button:hover {
    background: rgb(58, 123, 213);
    background: linear-gradient(0deg, rgba(58, 123, 213, 1) 0%, rgba(58, 207, 213, 1) 100%);

    box-shadow: 0px 15px 20px rgba(58, 207, 213, 0.2);
    color: #fff;
    transform: translateY(-5px);
    transition: ease-in-out 0.3s;
}

.home button:active {
    transform: translateY(-1px);
}



















/* scroll down icon */


/* From Uiverse.io by mrhyddenn */
.scrolldown {

    margin-top: 100px;
    --color: var(--color11);
    --sizeX: 30px;
    --sizeY: 50px;
    position: relative;
    width: var(--sizeX);
    height: var(--sizeY);
    margin-left: var(sizeX / 2);
    border: calc(var(--sizeX) / 10) solid var(--color);
    border-radius: 50px;
    box-sizing: border-box;
    margin-bottom: 16px;
    cursor: default;
    align-self: center;
}

.scrolldown::before {
    content: "";
    position: absolute;
    bottom: 30px;
    left: 50%;
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: var(--color);
    border-radius: 100%;
    animation: scrolldown-anim 2s infinite;
    box-sizing: border-box;
    box-shadow: 0px -5px 3px 1px #2a547066;
}

@keyframes scrolldown-anim {
    0% {
        opacity: 0;
        height: 6px;
    }

    40% {
        opacity: 1;
        height: 10px;
    }

    80% {
        transform: translate(0, 20px);
        height: 10px;
        opacity: 0;
    }

    100% {
        height: 3px;
        opacity: 0;
    }
}

.chevrons {
    padding: 6px 0 0 0;
    margin-left: -3px;
    margin-top: 48px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.chevrondown {
    margin-top: -6px;
    position: relative;
    border: solid var(--color);
    border-width: 0 2px 2px 0;
    display: inline-block;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
}

.chevrondown:nth-child(odd) {
    animation: pulse54012 500ms ease infinite alternate;
}

.chevrondown:nth-child(even) {
    animation: pulse54012 500ms ease infinite alternate 250ms;
}

@keyframes pulse54012 {
    from {
        opacity: 0;
    }

    to {
        opacity: 0.5;
    }
}









.socials-container {
    display: flex;
    flex-direction: column;
    background-color: rgba(var(--background-color-rgb), .9);
    padding: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    position: absolute;
    left: 0;
    align-self: center;
    /* 50% opacity */

}

.socials-container a {

    color: var(--text-color);
    /* Default color */
    font-size: 2.5rem;
    /* Icon size */
    text-decoration: none;
    padding: 10px;
    border-radius: 4px;
}

.socials-container a:hover {
    transition: ease-in-out .3s;
    background-color: var(--color11);
    /* Example hover color for LinkedIn */
}


















/* start of about */


.about {
    width: 100%;
    background-color: #212529;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%233ACFD5'/%3E%3Cstop offset='1' stop-color='%233ACFD5'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%233ACFD5'/%3E%3Cstop offset='1' stop-color='%233A6073'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='5.28'%3E%3Cpath transform='translate(-8.4 -4.8) rotate(-4.8 1409 581) scale(0.964)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='1.7600000000000002' transform='translate(-30 12) rotate(-2.4 800 450) scale(0.994)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(-8.4 18) rotate(-30 401 736) scale(0.994)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='1.6'%3E%3Cpath transform='translate(72 7.2) rotate(-1.8 150 345) scale(1.012)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='3.5200000000000005' transform='translate(18 -36) rotate(-43.2 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-4.8 -4.8) rotate(-7.2 1400 132) scale(0.94)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
    padding-top: 80px;
}

.about-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 50px;
}

.about-header h1 {
    margin: 50px 0 20px 0;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 3rem;
    border-bottom: 2px solid var(--color10);
}

.about-header p {
    font-size: 1.5rem;
    color: var(--text-color2);
    max-width: 1200px;
    text-align: center;
}


.about-content-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    padding: 20px 200px;
}





.about-self {

    max-width: 550px;
    text-align: start;
}

.about-self h1 {
    font-size: 2rem;
    margin-bottom: 30px;
}

.about-self p {
    font-size: 1.5rem;
    line-height: 1.5;
    text-align: justify;
}





/* button */
.about-self button {
    margin-top: 20px;
    position: relative;
    padding: 12px 20px;

    background: rgb(58, 123, 213);
    background: linear-gradient(0deg, rgba(58, 123, 213, 1) 0%, rgba(58, 207, 213, 1) 100%);

    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    border: 3px solid var(--color10);
    border-radius: 8px;
    box-shadow: 0 0 0 #ffffff;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.star-1 {
    position: absolute;
    top: 20%;
    left: 20%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 0 var(--color10));
    z-index: -5;
    transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}

.star-2 {
    position: absolute;
    top: 45%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 var(--color10));
    z-index: -5;
    transition: all 1scubic-bezier(0, 0.4, 0, 1.01);
}

.star-3 {
    position: absolute;
    top: 40%;
    left: 40%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 var(--color10));
    z-index: -5;
    transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-4 {
    position: absolute;
    top: 20%;
    left: 40%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 0 var(--color10));
    z-index: -5;
    transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-5 {
    position: absolute;
    top: 25%;
    left: 45%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0 var(--color10));
    z-index: -5;
    transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01);
}

.star-6 {
    position: absolute;
    top: 5%;
    left: 50%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0 var(--color10));
    z-index: -5;
    transition: all 0.8s ease;
}

.about-self button:hover {
    background: transparent;
    color: var(--color10);
    box-shadow: 0 0 0px var(--color10);
}

.about-self button:hover .star-1 {
    position: absolute;
    top: -80%;
    left: -30%;
    width: 25px;
    height: auto;
    filter: drop-shadow(0 0 0px var(--color10));
    z-index: 2;
}

.about-self button:hover .star-2 {
    position: absolute;
    top: -0%;
    left: 10%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0px var(--color10));
    z-index: 2;
}

.about-self button:hover .star-3 {
    position: absolute;
    top: 55%;
    left: 25%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0px var(--color10));
    z-index: 2;
}

.about-self button:hover .star-4 {
    position: absolute;
    top: 30%;
    left: 80%;
    width: 8px;
    height: auto;
    filter: drop-shadow(0 0 0px var(--color10));
    z-index: 2;
}

.about-self button:hover .star-5 {
    position: absolute;
    top: 25%;
    left: 115%;
    width: 15px;
    height: auto;
    filter: drop-shadow(0 0 0px var(--color10));
    z-index: 2;
}

.about-self button:hover .star-6 {
    position: absolute;
    top: 5%;
    left: 60%;
    width: 5px;
    height: auto;
    filter: drop-shadow(0 0 0px var(--color10));
    z-index: 2;
}

.fil0 {
    fill: var(--color10);
}



/* button */



.about-skills {
    flex-grow: 1;
}

.about-skills h1 {
    font-size: 2rem;
    margin-bottom: 30px;
    text-align: center;
}



.skill-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.skill-box {
    width: 150px;
    padding: 20px;
    background-color: var(--color8);
    border: 1px solid var(--color2);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.skill-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

.skill-box span {
    font-size: 1.2rem;
    font-weight: bold;
    margin-bottom: 10px;
    display: block;
    color: var(--text-color);
}

.skill-bar {
    position: relative;
    height: 10px;
    background-color: var(--color3);
    border-radius: 5px;
    margin: 10px 0;
    overflow: hidden;
}

.skill-level {
    height: 100%;
    background: rgb(58, 123, 213);
    background: linear-gradient(0deg, rgba(58, 123, 213, 1) 0%, rgba(58, 207, 213, 1) 100%);
    border-radius: 5px;
    transition: width 0.5s ease-in-out;
}

.skill-box p {
    font-size: 0.9rem;
    margin: 5px 0 0;
    color: var(--color5);
}

.icon-container {
    margin-top: 10px;
}

.icon-container i {
    font-size: 2rem;
    color: var(--text-color);
}













/* projects section */
.projects {
    padding-top: 80px;
    width: 100%;
    background-color: #212529;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='1' y2='0'%3E%3Cstop offset='0' stop-color='%233ACFD5'/%3E%3Cstop offset='1' stop-color='%233ACFD5'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='0' x2='0' y1='0' y2='1'%3E%3Cstop offset='0' stop-color='%233ACFD5'/%3E%3Cstop offset='1' stop-color='%233A6073'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='%23FFF' fill-opacity='0' stroke-miterlimit='10'%3E%3Cg stroke='url(%23a)' stroke-width='5.28'%3E%3Cpath transform='translate(-8.4 -4.8) rotate(-4.8 1409 581) scale(0.964)' d='M1409 581 1450.35 511 1490 581z'/%3E%3Ccircle stroke-width='1.7600000000000002' transform='translate(-30 12) rotate(-2.4 800 450) scale(0.994)' cx='500' cy='100' r='40'/%3E%3Cpath transform='translate(-8.4 18) rotate(-30 401 736) scale(0.994)' d='M400.86 735.5h-83.73c0-23.12 18.74-41.87 41.87-41.87S400.86 712.38 400.86 735.5z'/%3E%3C/g%3E%3Cg stroke='url(%23b)' stroke-width='1.6'%3E%3Cpath transform='translate(72 7.2) rotate(-1.8 150 345) scale(1.012)' d='M149.8 345.2 118.4 389.8 149.8 434.4 181.2 389.8z'/%3E%3Crect stroke-width='3.5200000000000005' transform='translate(18 -36) rotate(-43.2 1089 759)' x='1039' y='709' width='100' height='100'/%3E%3Cpath transform='translate(-4.8 -4.8) rotate(-7.2 1400 132) scale(0.94)' d='M1426.8 132.4 1405.7 168.8 1363.7 168.8 1342.7 132.4 1363.7 96 1405.7 96z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-attachment: fixed;
    background-size: cover;
}

.projects-header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 50px;
}

.projects-header h1 {
    margin: 50px 0 20px 0;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 3rem;
    border-bottom: 2px solid var(--color10);
}

.projects-header p {
    font-size: 1.5rem;
    color: var(--text-color2);
    max-width: 1200px;
    text-align: center;
}



.projects-base-container {
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding-bottom: 100px;
}


.project-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
    justify-content: center;
    align-items: center;

}

.project-container .project-info {
    color: var(--text-color2);
}



/* laptop design */
.project-image {
    flex-grow: 1;
    max-width: 550px;
    width: 550px;
}

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

.laptop-container img {
    max-width: 510px;
    width: 510px;
    border: 15px solid black;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}

.laptop-container .laptop-keyboard {
    width: 100%;
    height: 18px;
    background: rgb(2, 0, 36);
    background: -moz-linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(83, 83, 85, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 38%, rgba(190, 190, 194, 1) 38%, rgba(190, 190, 194, 1) 100%);
    background: -webkit-linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(83, 83, 85, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 38%, rgba(190, 190, 194, 1) 38%, rgba(190, 190, 194, 1) 100%);
    background: linear-gradient(0deg, rgba(2, 0, 36, 1) 0%, rgba(83, 83, 85, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 37%, rgba(240, 242, 241, 1) 38%, rgba(190, 190, 194, 1) 38%, rgba(190, 190, 194, 1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#020024", endColorstr="#bebec2", GradientType=1);
    border: 1px solid black;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

/* end */

















/* info */
.project-info {
    max-width: 550px;
    width: 550px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.project-info h2 {
    font-size: 2rem;
    color: var(--text-color);
    font-weight: 700;
}

.project-info p {
    font-size: 1.5rem;
    text-align: justify;
    line-height: 1.5;
}





/* Redesigned Documents button: pill-shaped gradient with left folder icon */
.Documents-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* center the label horizontally */
    gap: 12px;
    padding: 8px 24px 8px 56px; /* left padding reserves space for pseudo-icon */
    min-width: 160px; /* helps keep the label centered visually */
    height: 48px;
    border: none;
    border-radius: 999px;
    position: relative;
    /* animated blue gradient */
    background: linear-gradient(90deg, #2f6fb8 0%, #3a7bd5 25%, #3acfd5 60%, #6fd3ff 100%);
    background-size: 200% 100%;
    color: var(--text-color);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(58, 96, 163, 0.16), inset 0 -2px 0 rgba(0,0,0,0.06);
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease, background-position 3s linear;
}

/* left folder icon implemented via pseudo-element so HTML doesn't need changes */
.Documents-btn::before {
    content: "";
    position: absolute;
    left: 14px;
    width: 24px;
    height: 18px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='xMidYMid meet'><path fill='%23FFFFFF' d='M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z'/></svg>");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0.98;
}

/* animate the gradient sliding subtly left-right */
@keyframes docs-bg-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.Documents-btn {
    animation: docs-bg-shift 6s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .Documents-btn { animation: none; transition: none; }
}

.Documents-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 26px rgba(58, 96, 163, 0.22);
    filter: brightness(1.02);
}

.Documents-btn:active {
    transform: translateY(-1px) scale(0.99);
}

.Documents-btn:focus-visible {
    outline: 3px solid rgba(58, 123, 213, 0.18);
    outline-offset: 4px;
}

.text {
    color: var(--text-color);
    font-size: 1.4rem;
    font-weight: 600;
    letter-spacing: 0.2px;
    display: block;
    text-align: center; /* center text inside the button */
 
}






.modal-paragraph p {
    font-size: 1.3rem !important;
}





.project-language h2 {

    color: var(--text-color);
    margin-bottom: 20px;
    text-align: start;
}

.language-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
    max-width: 550px;
}

.language-container div {
    font-size: 1.2rem;
    text-align: center;
    padding: 5px;
    font-weight: 500;
    color: var(--text-color);
    background-color: var(--color8);
    border: 1px solid var(--color10);
    border-radius: 5px;

}

.language-container div:hover {
    transform: translateY(-2px);
    transition: ease-in-out 0.3s;
}


.link-container h2 {
    font-size: 1rem;
    color: var(--text-color);
    margin-bottom: 20px;
    text-align: start;
}



.link-container div {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    text-align: center;
}


.link-container a {
    font-size: 1.4rem;
    color: rgb(58, 123, 213);
    color: linear-gradient(0deg, rgba(58, 123, 213, 1) 0%, rgba(58, 207, 213, 1) 100%);
}



.link-container a:hover {
    transform: translateY(-2px);
    transition: ease-in-out 0.3s;
}



















/* contact section */


/* contact */
.contact {

    width: 100%;
    background-color: var(--background-color);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 0 50px 0;
    background-color: #212529;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25'%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='100%25' gradientTransform='rotate(180,768,367)'%3E%3Cstop offset='0' stop-color='%23212529'/%3E%3Cstop offset='1' stop-color='%23343A40'/%3E%3C/linearGradient%3E%3Cpattern patternUnits='userSpaceOnUse' id='b' width='639' height='532.5' x='0' y='0' viewBox='0 0 1080 900'%3E%3Cg fill-opacity='0.01'%3E%3Cpolygon fill='%23444' points='90 150 0 300 180 300'/%3E%3Cpolygon points='90 150 180 0 0 0'/%3E%3Cpolygon fill='%23AAA' points='270 150 360 0 180 0'/%3E%3Cpolygon fill='%23DDD' points='450 150 360 300 540 300'/%3E%3Cpolygon fill='%23999' points='450 150 540 0 360 0'/%3E%3Cpolygon points='630 150 540 300 720 300'/%3E%3Cpolygon fill='%23DDD' points='630 150 720 0 540 0'/%3E%3Cpolygon fill='%23444' points='810 150 720 300 900 300'/%3E%3Cpolygon fill='%23FFF' points='810 150 900 0 720 0'/%3E%3Cpolygon fill='%23DDD' points='990 150 900 300 1080 300'/%3E%3Cpolygon fill='%23444' points='990 150 1080 0 900 0'/%3E%3Cpolygon fill='%23DDD' points='90 450 0 600 180 600'/%3E%3Cpolygon points='90 450 180 300 0 300'/%3E%3Cpolygon fill='%23666' points='270 450 180 600 360 600'/%3E%3Cpolygon fill='%23AAA' points='270 450 360 300 180 300'/%3E%3Cpolygon fill='%23DDD' points='450 450 360 600 540 600'/%3E%3Cpolygon fill='%23999' points='450 450 540 300 360 300'/%3E%3Cpolygon fill='%23999' points='630 450 540 600 720 600'/%3E%3Cpolygon fill='%23FFF' points='630 450 720 300 540 300'/%3E%3Cpolygon points='810 450 720 600 900 600'/%3E%3Cpolygon fill='%23DDD' points='810 450 900 300 720 300'/%3E%3Cpolygon fill='%23AAA' points='990 450 900 600 1080 600'/%3E%3Cpolygon fill='%23444' points='990 450 1080 300 900 300'/%3E%3Cpolygon fill='%23222' points='90 750 0 900 180 900'/%3E%3Cpolygon points='270 750 180 900 360 900'/%3E%3Cpolygon fill='%23DDD' points='270 750 360 600 180 600'/%3E%3Cpolygon points='450 750 540 600 360 600'/%3E%3Cpolygon points='630 750 540 900 720 900'/%3E%3Cpolygon fill='%23444' points='630 750 720 600 540 600'/%3E%3Cpolygon fill='%23AAA' points='810 750 720 900 900 900'/%3E%3Cpolygon fill='%23666' points='810 750 900 600 720 600'/%3E%3Cpolygon fill='%23999' points='990 750 900 900 1080 900'/%3E%3Cpolygon fill='%23999' points='180 0 90 150 270 150'/%3E%3Cpolygon fill='%23444' points='360 0 270 150 450 150'/%3E%3Cpolygon fill='%23FFF' points='540 0 450 150 630 150'/%3E%3Cpolygon points='900 0 810 150 990 150'/%3E%3Cpolygon fill='%23222' points='0 300 -90 450 90 450'/%3E%3Cpolygon fill='%23FFF' points='0 300 90 150 -90 150'/%3E%3Cpolygon fill='%23FFF' points='180 300 90 450 270 450'/%3E%3Cpolygon fill='%23666' points='180 300 270 150 90 150'/%3E%3Cpolygon fill='%23222' points='360 300 270 450 450 450'/%3E%3Cpolygon fill='%23FFF' points='360 300 450 150 270 150'/%3E%3Cpolygon fill='%23444' points='540 300 450 450 630 450'/%3E%3Cpolygon fill='%23222' points='540 300 630 150 450 150'/%3E%3Cpolygon fill='%23AAA' points='720 300 630 450 810 450'/%3E%3Cpolygon fill='%23666' points='720 300 810 150 630 150'/%3E%3Cpolygon fill='%23FFF' points='900 300 810 450 990 450'/%3E%3Cpolygon fill='%23999' points='900 300 990 150 810 150'/%3E%3Cpolygon points='0 600 -90 750 90 750'/%3E%3Cpolygon fill='%23666' points='0 600 90 450 -90 450'/%3E%3Cpolygon fill='%23AAA' points='180 600 90 750 270 750'/%3E%3Cpolygon fill='%23444' points='180 600 270 450 90 450'/%3E%3Cpolygon fill='%23444' points='360 600 270 750 450 750'/%3E%3Cpolygon fill='%23999' points='360 600 450 450 270 450'/%3E%3Cpolygon fill='%23666' points='540 600 630 450 450 450'/%3E%3Cpolygon fill='%23222' points='720 600 630 750 810 750'/%3E%3Cpolygon fill='%23FFF' points='900 600 810 750 990 750'/%3E%3Cpolygon fill='%23222' points='900 600 990 450 810 450'/%3E%3Cpolygon fill='%23DDD' points='0 900 90 750 -90 750'/%3E%3Cpolygon fill='%23444' points='180 900 270 750 90 750'/%3E%3Cpolygon fill='%23FFF' points='360 900 450 750 270 750'/%3E%3Cpolygon fill='%23AAA' points='540 900 630 750 450 750'/%3E%3Cpolygon fill='%23FFF' points='720 900 810 750 630 750'/%3E%3Cpolygon fill='%23222' points='900 900 990 750 810 750'/%3E%3Cpolygon fill='%23222' points='1080 300 990 450 1170 450'/%3E%3Cpolygon fill='%23FFF' points='1080 300 1170 150 990 150'/%3E%3Cpolygon points='1080 600 990 750 1170 750'/%3E%3Cpolygon fill='%23666' points='1080 600 1170 450 990 450'/%3E%3Cpolygon fill='%23DDD' points='1080 900 1170 750 990 750'/%3E%3C/g%3E%3C/pattern%3E%3C/defs%3E%3Crect x='0' y='0' fill='url(%23a)' width='100%25' height='100%25'/%3E%3Crect x='0' y='0' fill='url(%23b)' width='100%25' height='100%25'/%3E%3C/svg%3E");
    background-size: cover;
    background-attachment: fixed;
}



.contact h1 {
    margin: 50px 0 20px 0;
    color: var(--text-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 3rem;
    border-bottom: 2px solid var(--color10);
}


.contact p {
    font-size: 1.5rem;
    text-align: justify;
    margin-bottom: 50px;
}

form {
    display: flex;
    flex-direction: column;
    background-color: var(--color9);
    padding: 40px;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

form label {
    color: var(--text-color);
    font-weight: 500;
    font-size: 1.5rem;
}

/* Styling form elements */
form input,
form textarea {
    background-color: var(--color7);
    color: var(--text-color);
    min-width: 400px;
    flex-grow: 1;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1.4rem;
    transition: border-color 0.3s ease;
}

form textarea {
    height: 100px;
}

/* Input and textarea focus styling */
form input:focus,
form textarea:focus {
    border-color: var(--color10);
    outline: none;
}

/* Placeholder text styling */
form input::placeholder,
form textarea::placeholder {
    color: #929292;
}

/* Submit button styling */
form button {
    background: rgb(58, 123, 213);
    background: linear-gradient(0deg, rgba(58, 123, 213, 1) 0%, rgba(58, 207, 213, 1) 100%);

    color: white;
    font-size: 1.5rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    width: fit-content;
    align-self: flex-end;
    transition: background-color 0.3s ease;
}

form button:hover {
    background-color: var(--color11);
    transition: ease-in-out 0.3s;
    transform: translateY(-2px);
}

/* Add responsive design */





































@media (max-width: 768px) {

    /* nav */
    .nav-container {
        padding: 10px 20px;
    }

    .project-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;

    }



    /* laptop design */
    .project-image {
        flex-grow: 1;
        max-width: 300px;
        width: 300px;
    }

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

    .laptop-container img {
        max-width: 250px;
        width: 250px;
        border: 10px solid black;
    }

    .laptop-container .laptop-keyboard {

        height: 13px;

    }





    /* info */
    .project-info {
        padding: 20px;
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    .project-info h2 {
        font-size: 2rem;
        color: var(--text-color);
    }

    .project-info p {
        font-size: 1.2rem;
        text-align: justify;
        line-height: 1.5;

    }


    /* contact */

    .contact {
        padding-top: 40px;
    }

    .contact h1 {
        margin: 50px 0 20px 0;
        color: var(--text-color);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 2rem;
        border-bottom: 2px solid var(--color10);
    }


    .contact p {
        font-size: 1.5rem;
        text-align: justify;
        margin-bottom: 50px;
        padding: 20px;
    }

    form {
        display: flex;
        flex-direction: column;
        background-color: var(--color9);
        padding: 20px;
        border-radius: 5px;
        box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
    }

    form label {
        color: var(--text-color);
        font-weight: 500;
        font-size: 1.5rem;
    }

    /* Styling form elements */
    form input,
    form textarea {

        min-width: 250px;
        padding: 10px;

    }


}











































/* end of home */
@media (max-width: 1024px) {
    .about-content-container {
        display: flex;
        flex-direction: row;
        gap: 20px;
        padding: 20px 10px;
    }


    .about-self {
        max-width: 1024px;
        text-align: start;
    }



}




/* Custom styles for collapsed navbar (mobile) */
@media (max-width: 991.98px) {

    /* Bootstrap's lg breakpoint */
    #mainNavbar {
        background: var(--color8) !important;
        padding: 1.5rem 1rem;
        border-radius: 0 0 1rem 1rem;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    }

    #mainNavbar .nav-link {
        color: var(--color10) !important;
        font-size: 1.25rem;
        margin-bottom: 1rem;
        text-align: center;

    }

    #mainNavbar .nav-link:hover {
        color: #fff;
        background: #3acfd5;
        border-radius: 0.5rem;
    }

    #mainNavbar .navbar-nav {
        flex-direction: column !important;
        gap: 0;
    }

    .socials-container {
        display: none;
    }






}

@media screen and (max-width: 768px) {
    .home-header {
        font-size: 3.5rem;
    }

    /* start of about */

    .about {
        padding-top: 40px;
    }

    .about-header h1 {
        margin: 50px 0 20px 0;
        color: var(--text-color);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 2rem;
        border-bottom: 2px solid var(--color10);
    }

    .about-header p {
        font-size: 1.5rem;
        color: var(--text-color2);
        max-width: 1200px;
        text-align: justify;
        padding: 20px;
    }


    .about-content-container {
        display: flex;
        flex-direction: column;
        gap: 30px;
        padding: 20px;
    }





    .about-self {

        max-width: 768px;
        text-align: start;
    }

    .about-self h1 {
        font-size: 2rem;
        margin-bottom: 30px;
    }

    .about-self p {
        font-size: 1.2rem;
        line-height: 1.5;
        text-align: justify;
    }

    /* button */
    .about-self button {
        margin-top: 20px;
        position: relative;
        padding: 12px 20px;
        font-size: 1.2rem;
        font-weight: 600;
        color: #ffffff;
        border: 3px solid var(--color10);
        border-radius: 8px;
        box-shadow: 0 0 0 #ffffff;
        transition: all 0.3s ease-in-out;
        cursor: pointer;
    }






    /* projects section */

    .projects {
        padding-top: 40px;
    }

    .projects-header {
        margin-bottom: 50px;
    }

    .projects-header h1 {
        margin: 50px 0 20px 0;
        color: var(--text-color);
        font-weight: 600;
        text-transform: uppercase;
        font-size: 2rem;
        border-bottom: 2px solid var(--color10);
    }

    .projects-header p {
        font-size: 1.5rem;
        color: var(--text-color2);
        max-width: auto;
        text-align: justify;
        padding: 20px;
    }



    .projects-base-container {
        display: flex;
        flex-direction: column;
        gap: 100px;
        padding-bottom: 100px;
    }


    .project-container {
        display: flex;
        flex-direction: column;
        gap: 20px;
        justify-content: center;
        align-items: center;

    }



    /* laptop design */
    .project-image {
        flex-grow: 1;
        max-width: 300px;
        width: 300px;
    }

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

    .laptop-container img {
        max-width: 250px;
        width: 250px;
        border: 10px solid black;
    }

    .laptop-container .laptop-keyboard {

        height: 13px;

    }





    /* info */
    .project-info {
        padding: 20px;
        width: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;

    }

    .project-info h2 {
        font-size: 2rem;
        color: var(--text-color);
    }

    .project-info p {
        font-size: 1.2rem;
        text-align: justify;
        line-height: 1.5;

    }

    /* From Uiverse.io by vinodjangid07 */
    .Documents-btn {
        align-self: center;
    }



}

@media screen and (max-width: 576px) {
    .home-header {
        font-size: 2.5rem;
    }


}

@media screen and (max-width: 400px) {
    .home-header {
        font-size: 2rem;
    }

}







































































































/* footer */

/* footer */
footer {
    width: 100%;
    background-color: black;

}

.footer-info-container {
    display: flex;
    flex: row;
    justify-content: space-between;
    padding: 50px 200px;
    gap: 20px;
}


.footer-info {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex-grow: 1;
}

footer h1 {
    font-size: 1.5rem;
    color: var(--text-color)
}

.footer-info p {
    max-width: 500px;
    line-height: 1.5;
    font-size: 1.2rem;
    text-align: justify;
    color: var(--text-color)
}

.footer-social-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}


.footer-social-info .footer-social-container {
    display: flex;
    flex-direction: row;
    gap: 20px;
}




.footer-social-container a {
    color: var(--text-color);
    /* Default color */
    font-size: 2rem;
    /* Icon size */
    text-decoration: none;
    border-radius: 4px;
}

.footer-social-container a:hover {
    transition: ease-in-out .3s;
    color: var(--color11);
}

.copyright-container {
    border-top: 1px solid var(--color7);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.copyright-container a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: bold;
}







@media (max-width: 768px) {

    .footer-info-container {
        display: flex;
        flex: column;
        justify-content: space-between;
        padding: 20px;
        flex-wrap: wrap;
        gap: 20px;
    }


    .footer-info {
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex-grow: 1;
    }

    .footer-info p {
        max-width: 500px;
        line-height: 1.5;
        font-size: 1rem;
        text-align: justify;
    }

    .footer-social-info {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }


    .footer-social-info .footer-social-container {
        display: flex;
        flex-direction: row;
        gap: 20px;
    }




    .footer-social-container a {

        font-size: 1.5rem;
        /* Icon size */

    }





}