@font-face {
    font-family: 'Inter';
    src: url('../Fonts/Inter/Inter-VariableFont_opsz\,wght.ttf');
}

@font-face {
    font-family: 'Archivo';
    src: url('../Fonts/Archivo/Archivo-VariableFont_wdth\,wght.ttf');
}

:root{
    --accent-hex: #1f3d40;
    --accent-rgb: rgba(31, 61, 64, 0.95); 
}

body {
    margin: 0;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow-x: hidden;
    visibility: hidden;
}

/* Blurred background layer */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../Images/site-background.jpg");
    background-size: cover;
    background-repeat: no-repeat;  
    background-attachment: fixed;
    background-position: center;

    filter: blur(12px); /* adjust blur strength */
    z-index: -1;        /* keeps it behind all content */
    transform: scale(1.05); /* prevents blurred edges from showing */
}

body:not(.animations-ready) * {
    animation: none !important;
}

body.animations-ready {
	visibility: visible;
}

.colored{
    color: red;
}




/* hero block */
#mainBlock{
    position: absolute;
    width: 500px;
    height: 300px;
    /* 
    background-color: #f9f9f7;
    background-color: #f3f6f8;

    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);

    background-color: rgba(24, 35, 35, 0.9);
    color: #f7f7f7;
    border: 1px solid rgba(255, 255, 255, 0.1);

    background: linear-gradient(145deg, #ffffffcc, #f4f6f7cc);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    */

    background: linear-gradient(
        145deg,
        rgba(249, 249, 247, 0.92), 
        rgba(243, 246, 248, 0.88)  
    );

    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.25); 
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); 

    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
}

#mainBlock p {
    margin: 0;
    padding: 0;
    position: relative;
    left: 63px;
    cursor: default;
}

#mainBlock #mainPretitle {
    font-family: "Inter";
    color: #5a6868;
    font-size: 19px;
    font-weight: 350;
    width: 500px; 
    margin-top: 26px; 
    opacity: 0.85;
}


#mainBlock #mainTitle {
    font-family: "Inter";
    color: #1a2525;
    font-size: 50px;
    font-weight: 600;
    width: fit-content;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
    top: -6px;
    letter-spacing: 0.2px;
    animation:
        typing 1s steps(22, end) forwards;
}

#mainTitle::after {
    content: ''; 
    position: absolute; 
    right: 0; 
    bottom: 10px; 
    width: 3px; 
    height: 40px; 
    background: #ffc09f; 
    background: var(--accent-hex);
    animation: blinkCursor 0.75s step-end infinite;
    animation-delay: 0.9s;
}

#mainBlock #mainDescription{
    font-family: "Inter";
    font-weight: 400;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 70%;
    position: relative;
    top: 9px;
    color: #263131;
}

@keyframes typing {
    from { width: 0; }
    to { width: 57%; }
}

@keyframes blinkCursor {
    50% { opacity: 0; }
}

#mainBlockBackgroundAccent{
    position: absolute;
    border: 3px solid #ffc09f;
    top: calc(50% - 9px);
    left: calc(50% + 12px);
    transform: translate(-50%, -50%);
    width: 500px;
    height: 300px;
    z-index: -1;
    border: 4px solid rgba(255, 192, 159, 0.95);
    border: 4px solid var(--accent-rgb);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--accent-hex);
}


#viewWorkBtn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    top: 36px;
    left: 54px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: -2px 2px 3px rgba(255, 165, 100, 0.25);
    box-shadow: -2px 2px 3px rgba(130, 174, 167, 0.25);
    box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    border: none;
    background: transparent;
    transition: box-shadow 0.3s ease;
}


#viewWorkBtn::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

#viewWorkBtn:hover::before {
    opacity: 1;
}

#viewWorkBtn:hover{
    box-shadow: none;
}
/*
#viewWorkBtn:hover #viewText {
    color: #2f3d3c;
    transition: color 0.2s ease; 
}
*/
.rightArrow {
    position: relative;
    height: 17px;
    cursor: pointer;
    filter: invert(18%) sepia(11%) saturate(462%) hue-rotate(128deg) brightness(95%) contrast(90%); /* keep your original */
    transition: filter 0.3s ease;
   
}


#viewWorkBtn:hover .rightArrow {
    filter: invert(63%) sepia(15%) saturate(230%) hue-rotate(141deg) brightness(92%) contrast(90%); /* #82aea7 */
}

#viewText{
    font-family: "Inter";
    font-size: 22px;
    font-weight: 400;
    color: #263131;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    left: -3px !important;
    cursor: pointer !important;
}

#heroWrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: moveToTopLeft 0.7s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: 1.4s; 
}

@keyframes moveToTopLeft {
    to {
        top: 210px;        
        left: 312px;      
        transform: translate(0, 0); 
    }
}

#navWrapper{
    opacity: 0;
    animation: appearAfterMove 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: 1.7s;
    position: fixed;
}

@keyframes appearAfterMove {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}



#navBlock{
    backdrop-filter: blur(10px);
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    position: fixed;
    height: 400px;
    width: 313px;
    width: 333px;
    top: 430px;
    top: 432px;
    left: 141px;
    left: 63px;
    /*left: 163px;*/
    z-index: 1;
    margin: 0;
    padding: 0;
}

#navBlockBackgroundAccent{
    position: fixed;
    width: 313px;
    width: 333px;
    height: 400px;
    top: 418px;
    top: 420px;
    left: 150px;
    left: 72px;
    /*left: 171px;*/
    z-index: -1;
    border: 4px solid var(--accent-rgb);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--accent-hex);
    margin: 0; 
    padding: 0;
}

#navTitle{
    font-family: "Inter";
    font-size: 27px;
    font-weight: 600;
    color: #1a2525;
    opacity: 0.95;
    letter-spacing: 0.4px;
    position: relative;
    top: 27px;
    left: 57px;
    margin: 0;
    padding: 0;
    cursor: default;
}

#navTopDivider{
    position: relative;
    width: 153px;
    height: 1px;
    left: 53px;
    top: 36px;
    opacity: 0.1;
}

.navDivider{
    border-bottom: 2px solid var(--accent-hex);
    margin: 0;
    padding: 0;
}

#navRows{
    display: flex;
    flex-direction: column;
    top: 63px;
    left: 50px;
    position: relative;
    margin: 0;
    padding: 0;
}

.navRow{
    background-color: red;
    position: relative;
    width: fit-content;
    display: flex;
    gap: 8px;
    background: transparent;
    cursor: pointer;
    transition: box-shadow 0.3s ease;
    overflow: hidden;
    border: none;
    border-radius: 6px;
    box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.05);
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    padding-bottom: 1px;
}

.navRow::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

.navRow:hover{
    box-shadow: none;
}

.navRow:hover .navArrow{
    filter: invert(63%) sepia(15%) saturate(230%) hue-rotate(141deg) brightness(92%) contrast(90%);
    filter: invert(31%) sepia(16%) saturate(950%) hue-rotate(135deg) brightness(90%) contrast(88%) !important;

}


.navArrow{
    position: relative;
    height: 17px;
    cursor: pointer;
    filter: invert(21%) sepia(11%) saturate(462%) hue-rotate(128deg) brightness(95%) contrast(90%);
    transition: filter 0.3s ease;
    margin-left: 8px;
    margin-bottom: 3px;
    margin-right: 6px;
}

.navText{
    position: relative;
    font-family: "Inter";
    font-size: 22px;
    font-weight: 400;
    color: #2b3838;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    cursor: pointer;
    top: 2px;
    margin-right: 9px;
    padding-bottom: 6px;
}

#navBottomDivider{
    position: relative;
    width: 207px;
    height: 1px;
    left: 53px;
    top: 72px;
    opacity: 0.1;
}



#socialsBar{
    position: relative;
    display: flex;
    height: 50px;
    width: 100%;
    top: 99px;
    left: 84px;
}

.social{
    margin-left: 13px;
    cursor: pointer;
    filter: invert(21%) sepia(11%) saturate(462%) hue-rotate(128deg) brightness(15%) contrast(90%);
}

#label{
    font-family: "Inter";
    font-size: 18px;
    color: #474747;
    color: #1a2525;
    opacity: .95;
    margin: 0; padding: 0;
    margin-left: 6px;
    position: relative;
    top: 6px;
    cursor: default;
}

.social:hover{
    filter: invert(31%) sepia(16%) saturate(950%) hue-rotate(135deg) brightness(90%) contrast(88%) !important;

}

#gmail{
    position: relative;
    height: 30px;
    filter: invert(63%) sepia(15%) saturate(230%) hue-rotate(141deg) brightness(92%) contrast(90%);
    filter: invert(60%) sepia(12%) saturate(1100%) hue-rotate(127deg) brightness(92%) contrast(88%);
    filter: invert(67%) sepia(9%) saturate(970%) hue-rotate(126deg) brightness(92%) contrast(90%);
    filter: invert(31%) sepia(16%) saturate(950%) hue-rotate(135deg) brightness(90%) contrast(88%);
    filter: invert(11%) sepia(32%) saturate(412%) hue-rotate(176deg) brightness(19%) contrast(91%);

}

#phone{
    position: relative;
    height: 23px;
    filter: invert(31%) sepia(16%) saturate(950%) hue-rotate(135deg) brightness(90%) contrast(88%);
    filter: invert(11%) sepia(32%) saturate(412%) hue-rotate(176deg) brightness(89%) contrast(91%);
    top: 4px;
    left: 9px;
}

#linkedin{
    position: relative;
    height: 30px;
    filter: invert(31%) sepia(16%) saturate(950%) hue-rotate(135deg) brightness(90%) contrast(88%);
    filter: invert(11%) sepia(32%) saturate(412%) hue-rotate(176deg) brightness(89%) contrast(91%);
    left: 18px;
}

#indeed{
    position: relative;
    height: 30px;
    top: -2px;
    filter: invert(31%) sepia(16%) saturate(950%) hue-rotate(135deg) brightness(90%) contrast(88%);
    filter: invert(11%) sepia(32%) saturate(412%) hue-rotate(176deg) brightness(89%) contrast(91%);

    left: -3px;
}


#contentWrapper{
    position: relative;
    width: 900px;
    height: 2400px;
    height: fit-content;
    opacity: 0;
    animation: appearAfterMove2 0.5s cubic-bezier(0.65, 0, 0.35, 1) forwards;
    animation-delay: 1.7s;
    left: 762px;
    margin-bottom: 100px;
    display: block;
}

@keyframes appearAfterMove2 {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#aboutMeWrapper{
    backdrop-filter: blur(10px);
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
    position: absolute;
    height: 1002px;
    height: fit-content;
    padding-bottom: 252px;
    width: 100%;
    background-color: blue;
    top: 58px;
    z-index: 1;
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    display: block;
}

#aboutMeBlockBackgroundAccent{
    position: relative;
    border: 3px solid #ffc09f;
    top: 652px;
    left: 463px;
    transform: translate(-50%, -50%);
    height: 1206px;
    width: 100%;
    z-index: -1;
    border: 4px solid rgba(255, 192, 159, 0.95);
    border: 4px solid var(--accent-rgb);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--accent-hex);
}

#topSection{
    position: relative;
    height: fit-content;
    width: 100%;
}

#preTopTitle{
    font-family: "Inter";
    color: #5a6868;
    font-size: 19px;
    font-weight: 350;
    position: relative;
    left: 60px;
    top: 26px;
    opacity: 0.85;
    margin: 0;
    padding: 0;
    cursor: default;
}

#topTitle{
    position: relative;
    font-family: "Inter";
    font-size: 27px;
    font-weight: 600;
    color: #1a2525;
    opacity: 0.95;
    letter-spacing: 0.4px;
    top: 27px;
    left: 60px;
    margin: 0;
    padding: 0;
    cursor: default;
}

#headshot{
    position: absolute;
    height: 70px;
    top: 15px;
    right: 60px;
    margin-left: auto;
}

#phoneNum{
    position: absolute;
    font-family: "Inter";
    font-size: 19px;
    font-weight: 450;
    color: #2b3838;
    opacity: 1;
    margin: 0;
    padding: 0;
    top: 27px;
    left: 620px;
    cursor: default;
    /*color: #e6a48b;*/
}

#emailInfo{
    position: absolute;
    font-family: "Inter";
    font-size: 19px;
    font-weight: 450;
    color: #2b3838;
    opacity: 1;
    margin: 0;
    padding: 0;
    top: 54px;
    left: 516px;
    cursor: default;
}

.aboutDivider{
    position: relative;
    width: 790px;
    height: 1px;
    left: 50px;
    top: 40px;
    opacity: 0.1;
    border-bottom: 2px solid var(--accent-hex);
    
}

.aboutDivider3{
    position: relative;
    width: 790px;
    height: 1px;
    left: 50px;
    top: 176px;
    opacity: 0.1;
    border-bottom: 2px solid var(--accent-hex);
    
}

#aboutDivider2{
    top: 63px !important;
}

#aboutInfoProf, #aboutInfoPre {
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    top: 54px;
    left: 60px;
    color: #263131;
    cursor: default;
}



#contactInfo{
    font-family: "Inter";
    font-weight: 600;
    font-size: 21px;
    color: #1a2525;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    position: relative;
    left: 60px;
    top: 165px;
    cursor: default;
}

#phoneNum2, #email2{
    position: relative;
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    color: #263131;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    top: 180px;
    left: 60px;
    cursor: default;
    line-height: 1.4;
}

#email2{
    position: relative;
}


#middleSection{
    position: relative;
    height: fit-content;
    width: 100%;
}

#objectiveTitle{
    position: relative;
    font-family: "Inter";
    font-size: 27px;
    font-weight: 600;
    color: #1a2525;
    opacity: 0.95;
    letter-spacing: 0.4px;
    top: 102px;
    left: 60px;
    margin: 0;
    padding: 0;
    cursor: default;
}

#objectiveText, #objectiveText2 {
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    top: 69px;
    left: 60px;
    color: #263131;
    height: fit-content;
    cursor: default;
}

#objectiveText{
    display: none !important;
}

#objectiveText2{
    margin: 0 !important;
    padding: 0 !important;
    top: 117px !important;
}

#learningList{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    color: #263131;
    position: relative;
    top: 88px;
    left: 60px;
    padding-right: 20px;
    width: 80%;
    cursor: default;

    li{
        margin-bottom: 6px;
        cursor: default;
    }
}

#headerTag, #headerTag2, #headerTag5, #headerTag6{
    font-family: "Inter";
    font-weight: 600;
    font-size: 21px;
    color: #1a2525;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    position: relative;
    top: 63px;
    left: 60px;
    cursor: default;
}

#headerTag3, #headerTag4 {
    font-family: "Inter";
    font-weight: 600;
    font-size: 21px;
    color: #1a2525;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    position: relative;
    left: 60px;
    top: 96px;
    cursor: default;
}

#headerTag4{
    top: 102px !important;
}






#resumeBlockBackgroundAccent {
    position: relative;
    border: 3px solid #ffc09f;
    top: 1022px;
    left: 463px;
    transform: translate(-50%, -50%);
    height: 1749px;
    width: 100%;
    z-index: -1;
    border: 4px solid rgba(255, 192, 159, 0.95);
    border: 4px solid var(--accent-rgb);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--accent-hex);
}

#resumeWrapper{
    backdrop-filter: blur(10px);
    box-shadow: 0px 8px 32px rgba(0, 0, 0, 0.1);
    position: absolute;
    height: 1586px;
    padding-bottom: 160px;
    width: 100%;
    background-color: blue;
    top: 1370px;
    z-index: 1;
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    display: block;
}

#topSection2{
    position: relative;
    height: fit-content;
    width: 100%;
}

#preTopTitle2{
    font-family: "Inter";
    color: #5a6868;
    font-size: 19px;
    font-weight: 350;
    position: relative;
    left: 60px;
    top: 26px;
    opacity: 0.85;
    margin: 0;
    padding: 0;
    cursor: default;
}

#phoneNum3, #email3{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: absolute;
    top: 9px;
    left: 699px;
    margin-left: auto;
    color: #263131;
    color: #2c575c;
    cursor: default;
}



#email3{
    top: 36px !important;
    left: 594px !important;
}

#topTitle2 {
    position: relative;
    font-family: "Inter";
    font-size: 27px;
    font-weight: 600;
    color: #1a2525;
    opacity: 0.95;
    letter-spacing: 0.4px;
    top: 27px;
    left: 60px;
    margin: 0;
    padding: 0;
    cursor: default;  
}

.resumeDivider{
        position: relative;
    width: 790px;
    height: 1px;
    left: 50px;
    top: 40px;
    opacity: 0.1;
    border-bottom: 2px solid var(--accent-hex);
}

#headerTag5, #headerTag6, #headerTag7, #headerTag8, #headerTag9, #headerTag10 {
    font-family: "Inter";
    font-weight: 600;
    font-size: 21px;
    color: #1a2525;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    position: relative;
    top: 63px;
    left: 60px;
    cursor: default;
}

#headerTag6{
    top: 81px !important;
}

#headerTag7{
    top: 27px !important;
}

#headerTag8{
    top: 290px !important;
}

#headerTag10{
    top: 204px;
}

#headerTag9{
    position: absolute !important;
    top: 1192px;
    left: 570px;
}



#resumeInfoSum {
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    top: 54px;
    left: 60px;
    color: #263131;
    cursor: default;
}

#eduInfo{
    position: relative;
    width: 100%;
    height: 200px;
    top: 97px;
}

#topRow, #bottomRow, #bottomBottomRow{
    position: relative;
    display: flex;
    height: fit-content;
    width: 90%;
    top: -4px;
}

#school{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 1;
    width: 80%;
    position: relative;
    margin: 0;
    padding: 0;
    left: 60px;
    color: #263131;
    color: #2c575c;
    cursor: default;
}

#location{
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    position: relative;
    margin: 0;
    padding: 0;
    color: #263131;
    cursor: default;
    right: 0;
}

#degree{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    left: 60px;
    color: #263131;
    cursor: default;
}

#time{
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    position: relative;
    margin: 0;
    padding: 0;
    color: #263131;
    cursor: default;
    right: 0;
}

#gpa{
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    left: 60px;
    color: #263131;
    cursor: default;
    margin-top: 9px;
}

#location, #time{
    margin-left: auto;
}


#expInfo{
    position: relative;
    width: 100%;
    top: 51px;
}

#jobRows{
    position: relative;
    top: 0;
    width: 100%;
    height: 400px;
}

.jobRow{
    position: relative;
    width: 90%;
    top: -12px;
}

.jobRow2{
    position: relative;
    width: 90%;
    top: 24px;
}

#infoRow1, #infoRow2, #infoRow3, #infoRow4{
    position: relative;
    width: 100%;
    height: 30px;
    display: flex;
}

.companyName{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 1;
    width: 80%;
    position: relative;
    margin: 0;
    padding: 0;
    left: 60px;
    color: #263131;
    color: #2c575c;
    cursor: default;
    flex: 1;
}

.companyLocation{
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    
    margin: 0;
    padding: 0;
    color: #263131;
    cursor: default;
    
}

.companyLocation, #companyTime{
    margin-left: auto;
}

.companyPosition{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    left: 60px;
    color: #263131;
    cursor: default;
    flex: 1;
}

.companyTime{
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
   
    margin: 0;
    padding: 0;
    color: #263131;
    cursor: default;
    
}

.companyRole{
    font-family: "Inter";
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    left: 81px;
    color: #263131;
    cursor: default;
    margin-top: 12px;

    li{
        margin-bottom: 3px;
    }

    p{
        margin: 0;
        padding: 0;
        margin-bottom: 3px;
    }
    
}

#techTools{
    position: relative;
    width: 100%;
    height: 60px;
    top: 306px;
}

#frontend, #backend, #general, #languages{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    left: 60px;
    color: #5a6868;
    color: #263131;
    margin-bottom: 3px;
    cursor: default;
    color: #2c575c;
    
}



#frontend, #frontendTools{
    top: 32px;
}

#backend, #backendTools{
    top: 48px;
}

#languages, #languageTools{
    top: 16px;
}

#frontendTools, #backendTools, #generalTools, #languageTools{
    font-family: "Inter";
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    left: 60px;
    color: #263131;
    cursor: default;
    margin-bottom: 3px;
}



#softSkills{
    position: relative;
    width: 300px;
    height: 500px;
    top: 244px;
    left: 570px;
}

#softSkill{
    font-family: "Inter";
    font-weight: 400;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    padding: 0;
    margin: 0;
    color: #263131;
    cursor: default;
    margin-bottom: 3px;
}

#projectsBlockBackgroundAccent{
    position: relative;
    border: 3px solid #ffc09f;
    top: 1020px;
    left: 463px;
    transform: translate(-50%, -50%);
    height: 1547px;
    
    width: 100%;
    z-index: -1;
    border: 4px solid rgba(255, 192, 159, 0.95);
    border: 4px solid var(--accent-rgb);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--accent-hex);
}

#projectsWrapper{
    position: absolute;
    height: 1335px;
    height: fit-content;
    padding-bottom: 210px;
    padding-bottom: 393px;
    width: 100%;
    top: 3226px;
    z-index: 1;
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px;
    display: block;
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.25);
    border-image: initial;
    border-radius: 6px 10px;
    
}

#topSection3{
    position: relative;
    height: fit-content;
    width: 100%;
}

#preTopTitle3 {
    font-family: "Inter";
    color: #5a6868;
    font-size: 19px;
    font-weight: 350;
    position: relative;
    left: 60px;
    top: 26px;
    opacity: 0.85;
    margin: 0;
    padding: 0;
    cursor: default;
}

#topTitle3 {
    position: relative;
    font-family: "Inter";
    font-size: 27px;
    font-weight: 600;
    color: #1a2525;
    opacity: 0.95;
    letter-spacing: 0.4px;
    top: 27px;
    left: 60px;
    margin: 0;
    padding: 0;
    cursor: default;
   
}

#workProjectsInfo, #clientProjectsInfo {
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    width: 80%;
    position: relative;
    top: 54px;
    left: 60px;
    color: #263131;
    cursor: default;
}

#clientProjectsInfo{
    top: 195px;
}

/* */

#workProject1Container, #workProject2Container{
    position: relative;
    width: 100%;
    height: fit-content;
   
    top: 72px;
}

#workProject2Container{
    top: 120px;
    
}

#project1Wrapper, #project2Wrapper{
    position: relative;
    height: 220px;
}

#workProject1Image, #workProject2Image{
    border-radius: 5px;
    width: 520px;
    /*border: 5px solid #a7bab4;*/
    /*border: 1px solid black;*/
    position: relative;
    left: 60px;
    /*filter: grayscale(100%);*/
    filter: saturate(0.3) grayscale(100%);
    
    mix-blend-mode: multiply;
    transition: all 0.4s ease;
    z-index: 2;
    
}

#workProject2Image{
    position: absolute;
    margin-left: auto;
    right: 60px;
    filter: saturate(0.3) brightness(90%) grayscale(100%);
}

#workProject1Image:hover{
    background: rgba(31, 61, 64, 0.25);
    mix-blend-mode: multiply;
    filter: grayscale(80%);
  transform: scale(1.01);
  filter: blur(4px) grayscale(90%);
  

}
/*
#workProject2Image:hover{
    background: rgba(31, 61, 64, 0.95);
    mix-blend-mode: multiply;
    filter: grayscale(90%);
  transform: scale(1.01);
  filter: blur(4px) grayscale(90%) brightness(30%);
}
*/


#techSpecs, #techSpecs2{
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  position: absolute;
  top: 6px;
  left: 100px;
  width: 450px;
}

#techSpecs{
    top: -40px !important;
    top: -20px !important;
}

#techSpecs2{
    left: 370px;
    top: -20px;
}

#project1Wrapper:hover #techSpecs,
#project1Text:hover ~ #project1Wrapper #techSpecs,
#project1Text:hover ~ #project1Wrapper #techSpecs
{
  opacity: 1;
}

#project2Wrapper:hover #techSpecs2,
#project2Text:hover ~ #project2Wrapper #techSpecs2,
#project2Text:hover ~ #project2Wrapper #techSpecs2
{
  opacity: 1;
}



#project1Wrapper:hover #workProject1Image, 
#project1Text:hover ~ #project1Wrapper #workProject1Image,
#project1Text:hover ~ #project1Wrapper #workProject1Image {
  background: rgba(31, 61, 64, 0.85);
    mix-blend-mode: multiply;
    filter: grayscale(80%);
  transform: scale(1.01);
  filter: blur(6px) grayscale(90%);
 
}



#project2Wrapper:hover #workProject2Image, 
#project2Text:hover ~ #project2Wrapper #workProject2Image,
#Project2Text:hover ~ #project2Wrapper #workProject2Image {
  background: rgba(31, 61, 64, 0.85);
    mix-blend-mode: multiply;
    filter: grayscale(80%);
  transform: scale(1.01);
  filter: blur(6px) grayscale(90%) brightness(89%);
 
}




#techSpecs .tech{
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  position: relative;
  top: -30px;
  left: -18px;
  opacity: 0;
  display: flex;
  width: fit-content;
  height: fit-content;
  background: #1f3d40;
  transform: translateY(10px);
  opacity: .35;
}

#techSpecs2 .tech{
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  position: relative;
  top: -30px;
  left: -18px;
  opacity: 0;
  display: flex;
  width: fit-content;
  height: fit-content;
  background: #1f3d40;
  transform: translateY(10px);
  opacity: .35;
}

#techSpecs .tech p {
    font-family: "Inter";
    font-size: 18px;
    margin: 0;
    padding: 0;
    
    color: white;
    font-weight: 400;
}

#techSpecs2 .tech p {
    font-family: "Inter";
    font-size: 18px;
    margin: 0;
    padding: 0;
    
    color: white;
    font-weight: 400;
}

#project1Wrapper:hover #techSpecs .tech,
#project1Text:hover ~ #project1Wrapper #techSpecs .tech,
#project1Text:hover ~ #project1Wrapper #techSpecs .tech {
  opacity: .85;
  transform: translateY(0);
}

#project2Wrapper:hover #techSpecs2 .tech,
#project2Text:hover ~ #project2Wrapper #techSpecs2 .tech,
#project2Text:hover ~ #project2Wrapper #techSpecs2 .tech {
  opacity: .85;
  transform: translateY(0);
}

#project1Text, #project2Text{
    position: absolute;
    width: 240px;
    height: 200px;
    top: -4px;
    right: 20px;
    cursor: default;
    z-index: 1;
    pointer-events: none;
}

#project1Text{
    top: 9px;
    left: 600px;
}

#project2Text{
    left: 60px;
    top: 21px;
}



#projectTitle{
    font-family: "Inter";
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    margin: 0;
    padding: 0;
    color: #2c575c;
}

#projectDescription{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    color: #263131;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    padding: 0;
    position: relative;
    margin: 0;
    top: 6px;
}

#viewProjectBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    top: 26px;
    left: -6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: -2px 2px 3px rgba(255, 165, 100, 0.25);
    box-shadow: -2px 2px 3px rgba(130, 174, 167, 0.25);
    box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    border: none;
    background: transparent;
    transition: box-shadow 0.3s ease;
    height: 33px;
    width: 127px;
    pointer-events: auto;
    z-index: 5;
    position: relative;
}

#viewProjectBtn:hover{
    box-shadow: none;
}

#viewProjectBtn::before{
    content: "";
    position: relative;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

#viewProjectBtn:hover .rightArrow {
    filter: invert(63%) sepia(15%) saturate(230%) hue-rotate(141deg) brightness(92%) contrast(90%);
}

#view{
    font-family: "Inter";
    font-size: 20px;
    font-weight: 400;
    color: #263131;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    left: -3px !important;
    cursor: pointer !important;
}
/*
#project2Wrapper:hover #workProject2Image {
    transform: scale(1.05);
    filter: brightness(0.6);
}
*/
/* Make tech pills appear when hovering the *wrapper* */
#project2Wrapper:hover #techSpecs2 {
    opacity: 1;
}

#project2Wrapper:hover #project2Image,
#project2Wrapper:hover .techSpecs2 {
    opacity: 1;
    transform: scale(1.02);
    filter: brightness(0.92);
    transition: all 0.25s ease;
}

/* Make pills hidden by default (same as Project1) */
.techSpecs2 {
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* */
#clientProject1Container, #clientProject2Container{
    position: relative;
    width: 100%;
    height: fit-content;
   
    top: 100px;
}

#clientProject1Container{
    top: 213px;
}

#clientProject2Container{
    top: 280px;
    
}

#project3Wrapper, #project4Wrapper{
    position: relative;
    height: 220px;
}

#clientProject1Image, #clientProject2Image{
    border-radius: 5px;
    width: 520px;
    /*border: 5px solid #a7bab4;*/
    /*border: 1px solid black;*/
    position: relative;
    left: 60px;
    /*filter: grayscale(100%);*/
    filter: saturate(0.3);
    
    mix-blend-mode: multiply;
    transition: all 0.4s ease;
    z-index: 2;
    filter: saturate(0.3) brightness(90%) grayscale(100%);
    
}

#clientProject2Image{
    position: absolute;
    margin-left: auto;
    right: 60px;
    filter: saturate(0.3);
    filter: brightness(1.45) contrast(0.95) saturate(0.3);
    filter: brightness(1.15) contrast(0.85) saturate(0.9);
    filter: 
    brightness(1.25)   /* gentle global lift */
    contrast(0.70)     /* flattens the highlight blowout */
    saturate(0.85)     /* softens harsh areas */
    brightness(1.10)  /* second pass: lifts only remaining dark tones */
    grayscale(100%);
}

#clientProject1Image:hover{
    background: rgba(31, 61, 64, 0.25);
    mix-blend-mode: multiply;
    filter: grayscale(80%);
  transform: scale(1.01);
  filter: blur(4px) grayscale(90%);
  

}
/*
#workProject2Image:hover{
    background: rgba(31, 61, 64, 0.95);
    mix-blend-mode: multiply;
    filter: grayscale(90%);
  transform: scale(1.01);
  filter: blur(4px) grayscale(90%) brightness(30%);
}
*/


#techSpecs3, #techSpecs4{
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: flex-start;
  gap: 8px;
  z-index: 2;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
  position: absolute;
  top: 6px;
  left: 100px;
  width: 450px;
}

#techSpecs3{
    left: 100px;
    top: -20px;
}

#techSpecs4{
    left: 370px;
    top: -20px;
}

#project3Wrapper:hover #techSpecs3,
#project3Text:hover ~ #project3Wrapper #techSpecs3,
#project3Text:hover ~ #project3Wrapper #techSpecs3
{
  opacity: 1;
}

#project4Wrapper:hover #techSpecs4,
#project4Text:hover ~ #project4Wrapper #techSpecs4,
#project4Text:hover ~ #project4Wrapper #techSpecs4
{
  opacity: 1;
}



#project3Wrapper:hover #clientProject1Image, 
#project3Text:hover ~ #project3Wrapper #clientProject1Image,
#project3Text:hover ~ #project3Wrapper #clientProject1Image {
  background: rgba(31, 61, 64, 0.85);
    mix-blend-mode: multiply;
    filter: grayscale(80%);
  transform: scale(1.01);
  filter: blur(6px) grayscale(90%);
 filter: blur(6px) grayscale(90%) brightness(89%);
}



#project4Wrapper:hover #clientProject2Image, 
#project4Text:hover ~ #project4Wrapper #clientProject2Image,
#Project4Text:hover ~ #project4Wrapper #clientProject2Image {
  background: rgba(31, 61, 64, 0.85);
    mix-blend-mode: multiply;
    filter: grayscale(80%);
  transform: scale(1.01);
  filter: blur(6px) grayscale(90%) brightness(89%);
  filter: brightness(1.25) contrast(0.70) saturate(0.85) brightness(1.10) blur(6px);
 
}




#techSpecs3 .tech{
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  position: relative;
  top: -30px;
  left: -18px;
  opacity: 0;
  display: flex;
  width: fit-content;
  height: fit-content;
  background: #1f3d40;
  transform: translateY(10px);
  opacity: .35;
}

#techSpecs4 .tech{
  color: #fff;
  padding: 6px 12px;
  border-radius: 8px;
  position: relative;
  top: -30px;
  left: -18px;
  opacity: 0;
  display: flex;
  width: fit-content;
  height: fit-content;
  background: #1f3d40;
  transform: translateY(10px);
  opacity: .35;
}

#techSpecs3 .tech p {
    font-family: "Inter";
    font-size: 18px;
    margin: 0;
    padding: 0;
    
    color: white;
    font-weight: 400;
}

#techSpecs4 .tech p {
    font-family: "Inter";
    font-size: 18px;
    margin: 0;
    padding: 0;
    
    color: white;
    font-weight: 400;
}

#project3Wrapper:hover #techSpecs3 .tech,
#project3Text:hover ~ #project3Wrapper #techSpecs3 .tech,
#project3Text:hover ~ #project3Wrapper #techSpecs3 .tech {
  opacity: .85;
  transform: translateY(0);
}

#project4Wrapper:hover #techSpecs4 .tech,
#project4Text:hover ~ #project4Wrapper #techSpecs4 .tech,
#project4Text:hover ~ #project4Wrapper #techSpecs4 .tech {
  opacity: .85;
  transform: translateY(0);
}

#project3Text, #project4Text{
    position: absolute;
    width: 240px;
    height: 200px;
    top: -4px;
    right: 20px;
    cursor: default;
    z-index: 1;
    pointer-events: none;
}

#project3Text{
    left: 600px;
    top: 15px;
}

#project4Text{
    left: 60px;
    top: 24px;
}



#projectTitle{
    font-family: "Inter";
    font-weight: 400;
    font-size: 21px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    margin: 0;
    padding: 0;
    color: #2c575c;
}

#projectDescription{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    color: #263131;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    padding: 0;
    position: relative;
    margin: 0;
    top: 6px;
}

#viewProjectBtn{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    top: 26px;
    left: -6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: -2px 2px 3px rgba(255, 165, 100, 0.25);
    box-shadow: -2px 2px 3px rgba(130, 174, 167, 0.25);
    box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    border: none;
    background: transparent;
    transition: box-shadow 0.3s ease;
    height: 33px;
    width: 150px;
    width: 127px;
    pointer-events: auto;
    z-index: 5;
    position: relative;
}

#viewProjectBtn:hover{
    box-shadow: none;
}

#viewProjectBtn::before{
    content: "";
    position: relative;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

#viewProjectBtn:hover .rightArrow {
    filter: invert(63%) sepia(15%) saturate(230%) hue-rotate(141deg) brightness(92%) contrast(90%);
}

#view{
    font-family: "Inter";
    font-size: 20px;
    font-weight: 400;
    color: #263131;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    left: -12px !important;
    cursor: pointer !important;
}
/*
#project2Wrapper:hover #workProject2Image {
    transform: scale(1.05);
    filter: brightness(0.6);
}
*/
/* Make tech pills appear when hovering the *wrapper* */
#project4Wrapper:hover #techSpecs4 {
    opacity: 1;
}

#project4Wrapper:hover #project4Image,
#project4Wrapper:hover .techSpecs4 {
    opacity: 1;
    transform: scale(1.02);
    filter: brightness(0.92);
    transition: all 0.25s ease;
}

/* Make pills hidden by default (same as Project1) */
.techSpecs4 {
    opacity: 0;
    transition: opacity 0.25s ease;
}

#offersWrapper{
    position: relative;
    height: 635px;
    padding-bottom: 210px;
    width: 135%;
    top: 4866px;
    top: 432px;
    left: -15%;
 
    /*
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px;
    display: block;
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.25);
    border-image: initial;
    border-radius: 6px 10px;
    */
    display: flex;
}

#leftPanel{
    width: 422px;
    height: 100%;
    position: relative;
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
    top: 24px;
    z-index: 1;
}



#rightPanel{
   width: 460px;
    height: 100%;
    position: relative;
    border-bottom-left-radius: 0px;
    border-top-left-radius: 0px;
    top: 24px; 
    z-index: 1;
    padding-right: 12px;
}

.panel{
 
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px;
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.25);
    border-image: initial;
    border-radius: 6px 10px;
    
}

#rightPanel, #leftPanel{
    backdrop-filter: blur(10px);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 8px 32px;
    background: linear-gradient(145deg, rgba(249, 249, 247, 0.92), rgba(243, 246, 248, 0.88));
    border-width: 1px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.25);
    border-image: initial;
    border-radius: 6px 10px;
    border-radius: 10px;
}

#leftPanel{
    border-bottom-right-radius: 0px;
    border-top-right-radius: 0px;
}

#innerPanel{
    width: 504px;
    height: calc(100% + 48px);
    position: relative;
    z-index: 4;
}

#offersBackgroundAccentMid{
    position: absolute;
    border: 3px solid #ffc09f;
    
    transform: translate(-50%, -50%);
    height: 1450px;
    width: 100%;
    height: 100%;
    height: 678px;
    height: 685px;
    width: 405px;
    width: 435px;
    top: 5287px;
    left: 442px;
    left: 462px;
    
    border: 4px solid rgba(255, 192, 159, 0.95);
    border: 4px solid var(--accent-rgb);
    border: 4px solid rgba(255, 192, 159, 0.95);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
    border-radius: 10px;
    border-top-left-radius: 6px;
    border-bottom-right-radius: 6px;
    background-color: var(--accent-hex);
    background-color: #d8bfa3;
    border: 4px solid #d8bfa3;
    border: 4px solid var(--accent-rgb);
    background-color: var(--accent-hex);
    z-index: 2;
}

#rightPanelContent{
    position: relative;
    left: 21px;
    width: 100%;
}

#panelTitle{
    font-family: "Inter";
    font-size: 30px;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.4px;
    color: #1a2525;
    position: relative;
    margin: 0;
    padding: 0;
    top: 27px;
    left: 45px;
    cursor: default;
}

#panelDescription{
    font-family: "Inter";
    font-weight: 400;
    font-size: 19px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    color: #263131;
    margin: 0;
    padding: 0;
    position: relative;
    left: 45px;
    top: 35px;
    width: 100%;
    cursor: default;
}

#divider, #dividerOne{
    position: relative;
    width: 270px;
    height: 1px;
    left: 42px;
    top: 47px;
    opacity: 0.1;
    border-bottom: 2px solid var(--accent-hex);
    margin: 0;
    padding: 0;
}

#divider{
    top: 45px;
}

#dividerOne{
    width: 330px;
    top: 44px;
}

#divider2, #divider3, #divider4{
    position: relative;
    width: 300px;
    height: 1px;
    left: 42px;
    top: -12px;
    opacity: 0.1;
    border-bottom: 2px solid var(--accent-hex);
    margin: 0;
    padding: 0;
}

#divider3{
    top: 63px;
    width: 321px;
}

#divider4{
    top: -9px;
}



#innerPanelContent{
    position: relative;
    width: 400px;
    
}

#leftPanelContent{
    position: relative;
    width: 300px;
    
}

#rightPanelContent{
    position: relative;
    width: 300px;
    left: -3px;
}

#offerOptions, #offerOptions2{
    position: relative;
    width: 340px;
    height: 400px;
    left: 36px;
    top: 63px;
}

#offerOptions{
    top: 72px;
}







#offerOptions li, #offerOptions2 li{
    font-family: "Inter";
    font-weight: 400;
    font-size: 17px;
    color: #263131;
    line-height: 1.1;
    letter-spacing: 0.1px;
    opacity: 0.95;
    padding: 0;
    position: relative;
    margin: 0;
    margin-bottom: 14px;
    cursor: default;
    
}

#offerOptions2 li{
    margin-bottom: 14px;   
}

#offerOptions2{
    top: 63px;
}

#offerOptions i, #offerOptions2 i{
    color: #2c575c;
    font-style: normal;
}

#middleText, #middleText2, #middleText3{
    font-family: "Inter";
    font-size: 21px;
    font-weight: 600;
    color: #1a2525;
    opacity: 0.95;
    letter-spacing: 0.4px;
    position: relative;
    top: 45px;
    left: 45px;
    margin: 0;
    padding: 0;
    cursor: default;
}

#middleText{
    top: 63px;
}

#middleText3{
    top: 72px;
    margin-bottom: 3px;
}


#middleText2{
    top: 63px;
    margin-bottom: 3px;
}

#bottomOfferInfo, #bottomOfferInfo2{
    display: block;
}

#bottomOfferInfo3{
    position: relative;
    left: 6px;
}

#timeline, #timeline2{
    font-family: "Inter";
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    margin: 0;
    padding: 0;
    color: #263131;
    cursor: default;
}

#timeline2{
    top: 36px;
}

#price, #price2, #price3{
    font-family: "Inter";
    font-size: 30px;
    font-weight: 600;
    opacity: 0.95;
    letter-spacing: 0.4px;
    color: #1f3d40;
    position: relative;
    margin: 0;
    padding: 0;
    left: 40px;
    top: 6px;
    cursor: default;
}

#price2{
    top: 81px;
}

#price3{
    top: 10px;
}

#seeMoreBtn, #seeMoreBtn2, #seeMoreBtn3{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 6px;
    top: 26px;
    left: -6px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: -2px 2px 3px rgba(255, 165, 100, 0.25);
    box-shadow: -2px 2px 3px rgba(130, 174, 167, 0.25);
    box-shadow: -2px 2px 1px rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
    border: none;
    background: transparent;
    transition: box-shadow 0.3s ease;
    height: 33px;
    width: 150px;
    left: -180px;
    top: 21px;
    pointer-events: auto;
    z-index: 5;
    position: relative;
}

#seeMoreBtn{
    left: 195px;
    top: -27px;
    transform: scale(.9);
}

#seeMoreBtn2{
    left: 190px;
    top: 46px;
    transform: scale(.9);
    width: 200px;
}

#seeMoreBtn3{
    left: 220px;
    top: -25px;
    transform: scale(.9);
}

#seeMoretBtn::before, #seeMoreBtn2::before, #seeMoreBtn3::before {
    content: "";
    position: relative;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    border-radius: inherit;
}

#view2{
    font-family: "Inter";
    font-size: 20px;
    font-weight: 400;
    color: #263131;
    line-height: 1.4;
    letter-spacing: 0.1px;
    opacity: 0.95;
    left: -12px !important;
    cursor: pointer !important;
}

#seeMoreBtn:hover::before, #seeMoreBtn2:hover::before, #seeMoreBtn3:hover::before   {
    opacity: 1;
}

#seeMoreBtn:hover, #seeMoreBtn2:hover, #seeMoreBtn3:hover{
    box-shadow: none;
}

#seeMoreBtn:hover .rightArrow, #seeMoreBtn2:hover .rightArrow, #seeMoreBtn3:hover .rightArrow {
    filter: invert(63%) sepia(15%) saturate(230%) hue-rotate(141deg) brightness(92%) contrast(90%); /* #82aea7 */
}

#merlinContainer{
    position: relative;
    background-color: red;
    height: fit-content;
}

#merlinPic1{
    
    position: relative;
    width: 100%;
}