/* Jibin Varghese Portfolio */
/* CSS: Web Sep 2023+ */

/* Margins */
* {
        margin: 0;
        padding: 0;
        outline: 0;
        border: 0;
        overflow-x: hidden;
        scroll-behavior: smooth;
        color: var(--dark-grey);
}

.pattern-dots-sm {
        color: var(--light-grey);
        overflow: hidden;
}

/* Colours */
:root {
        --alt-background: #000000;
        --background: #ffffff;
        --alt-lighter-background: #303030;
        --card_background: #3d3854;
        --white: #ffffff;
        --no-grey: #f3f4f6;
        --lightest-grey: #eff1f5;
        --light-grey: #d6dae0;
        --grey: #b9bfc9;
        --medium-grey: #585858;
        --dark-grey: #3e3e45;
        --darker-grey: #181b1f;
        --no-blue: #d5ddff;
        --light-blue: #5876eb;
        --blue: #4366f5;
        --dark-blue: #173fdf;
        --red: #f8849d;
        --green: #80c75a;
        --dark-green: #57a52c;
        --light-yellow: #fef2cd;
        --dark-yellow: #846911;
        --shadow-light: rgba(255, 255, 255, 0.1);
        --shadow-dark: rgba(180, 180, 180, 0.3);
        --yellow: #f1c173;
        --peach: #f78f87;
        --gradient-peach: #f59f2e;
        --gradient-pink: #970067;
        --gradient-blue: #003c9d;
}

.dark_theme {
        --alt-background: #ffffff;
        --background: #000000;
        --alt-lighter-background: #e3e3e3;
        --card_background: #17181e;
        --white: #141414;
        --no-grey: #1b1f24;
        --lightest-grey: #1b1f24;
        --light-grey: #1b1f24;
        --grey: #5a616d;
        --medium-grey: #9da2a9;
        --dark-grey: #bfc4cc;
        --darker-grey: #f3f4f6;
        --no-blue: #141b3f;
        --light-blue: #748df1;
        --blue: #4366f5;
        --dark-blue: #173fdf;
        --red: #6b2232;
        --green: #315020;
        --dark-green: #589338;
        --light-yellow: #fef2cd;
        --dark-yellow: #723d0a;
        --shadow-light: rgba(66, 66, 66, 0);
        --shadow-dark: rgba(0, 0, 0, 0.3);
        --gradient-peach: #fabdac;
        --gradient-pink: #fcb9e7;
        --gradient-blue: #9abffa;
}

.grey {
        color: var(--medium-grey);
}

.background_grey {
        background-color: #2C2C2C;
}

.light_grey {
        color: var(--light-grey);
}

.lightest_grey_text {
        color: var(--lightest-grey);
}

/* Horizontal Alignment */
.right {
        justify-self: end;
        text-align: right;
}

.center {
        justify-self: center;
        text-align: center;
}

.left {
        justify-self: start;
        text-align: left;
}

/* Vertical Alignment */
.top {
        align-self: start;
}

.middle {
        align-self: center;
}

.bottom {
        align-self: end;
}

/* Horizontal Alignment */
.float_right {
        justify-self: end;
        position: absolute;
        top: 30%;
        right: 30%;
}

.float_left {
        justify-self: end;
        position: absolute;
        bottom: 30%;
        left: 30%;
        z-index: 1000;
}

/* Fonts */
@font-face {
        font-family: "Lato-Black";
        src: url(/fonts/Lato/Lato-Black.ttf);
}

@font-face {
        font-family: "Lato-Bold";
        src: url(/fonts/Lato/Lato-Bold.ttf);
}

@font-face {
        font-family: "Lato-Regular";
        src: url(/fonts/Lato/Lato-Regular.ttf);
}

@font-face {
        font-family: "Assistant-Bold";
        src: url(/fonts/Assistant/Assistant-Bold.ttf);
}

@font-face {
        font-family: "Assistant-Regular";
        src: url(/fonts/Assistant/Assistant-Regular.ttf);
}

@font-face {
        font-family: "PlayfairDisplay-Bold";
        src: url(/fonts/PlayfairDisplay/PlayfairDisplay-Bold.ttf);
}

@font-face {
        font-family: "PlayfairDisplay-Medium";
        src: url(/fonts/PlayfairDisplay/PlayfairDisplay-Medium.ttf);
}

@font-face {
        font-family: "Vidaloka-Regular";
        src: url(/fonts/Vidaloka/Vidaloka-Regular.ttf);
}

@font-face {
        font-family: "SpaceGrotesk-Medium";
        src: url(/fonts/SpaceGrotesk/SpaceGrotesk-Medium.ttf);
}

@font-face {
        font-family: "SpaceGrotesk-Regular";
        src: url(/fonts/SpaceGrotesk/SpaceGrotesk-Regular.ttf);
}

@font-face {
        font-family: "SpaceGrotesk-Bold";
        src: url(/fonts/SpaceGrotesk/SpaceGrotesk-Bold.ttf);
}

/* Scroll */
::-webkit-scrollbar {
        width: 4px;
        height: 4px;
        background: transparent;
        /* make scrollbar transparent */
}

::-webkit-scrollbar-track {
        background: transparent;
}

::-webkit-scrollbar-thumb {
        /* background: var(--dark-grey); */
        background: linear-gradient(to right, var(--dark-grey), var(--darker-grey));
        border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
        background: var(---dark-grey);
}

::-moz-selection {
        background: var(--light-blue);
        color: var(--just-white);
}

::selection {
        background: var(--light-blue);
        color: var(--white);
}

/* Global Values */

a {
        text-decoration: none;
        color: var(--medium-grey);
}

ul {
        list-style: none;
}

h1 {
        /* font: 10em Lato-Black; */
        font: 8.8vw Vidaloka-Regular;
        /* margin-bottom: 0.1em; */
        /* line-height: 1; */
}

h2 {
        /* font: 7em Lato-Bold; */
        font: 7vw Vidaloka-Regular;
        /* font: 8em Lato-Black; */
        margin-bottom: 0.1vw;
}

/* Title Text */
h3 {
        font: 2vw Assistant-Regular;
        /* font: 3em Vidaloka-Regular; */
        margin-bottom: 0.2vw;
}


h4 {
        /* font: 1.5vw Lato-Bold; */
        font: 1.5vw SpaceGrotesk-Bold;
        /* font: 1.6em Assistant-Regular; */
        /* font: 1.6em Vidaloka-Regular; */
        /* margin-bottom: 0.2em; */
}

/* Sub Title Text */
h5 {
        /* font: 1vw Lato-Bold; */
        font: 1vw Assistant-Bold;
        /* font: 1vw SpaceGrotesk-Bold; */
        margin-bottom: 0.3em;
}

h6 {
        font: 0.8vw Assistant-Regular;
        margin-bottom: 0.3em;
}

/* Paragraph Text */
p {
        font: 1vw Assistant-Regular;
}

/* Information Text */
small {
        font: .4vw Assistant-Regular;
        color: var(--medium-grey);
}

i {
        font-size: .5vw;
}


.vertical_text {
        /* Rotate the Text */
        /* Actual Code: Not compatible to safari and firefox */
        transform: rotate(180deg);
        -webkit-transform: rotate(180deg);
        writing-mode: vertical-rl;
        text-align: left;
}

.title_font {
        /* font: 3em PlayfairDisplay-Bold; */
        font: 2.5vw SpaceGrotesk-Bold;

}

.subtitle_font {
        /* font: 2em PlayfairDisplay-Medium; */
        /* font: 2vw Assistant-Bold; */
        font: 1.5vw SpaceGrotesk-Bold;
        /* color: var(--dark-grey); */
}

.quote_font {
        /* font: 5em Assistant-Bold; */
        font: 4.5vw SpaceGrotesk-Bold;
        /* color: var(--dark-grey); */
}

/* Vertical text for Safari and Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
        .vertical_text {
                height: 70em;
                width: 20em;
        }
}

/* Vertical text for Firefox */
@-moz-document url-prefix() {
        .vertical_text {
                height: 70em;
                width: 20em;
        }
}

/* Gradient Animation */
.gradient_animation h1 {
        /* Class Text Property */
        font: 10em Lato-Black;
        color: var(--no-grey);
        line-height: 1;
        /* Gradient on Text */
        animation: flow 8s ease-in-out infinite;
        background: -webkit-linear-gradient(-60deg,
                        var(--gradient-peach),
                        var(--gradient-peach),
                        var(--gradient-pink),
                        var(--gradient-blue),
                        var(--medium-grey),
                        var(--medium-grey),
                        /*var(--light-grey),*/
                        /*var(--gradient-blue),*/
                        var(--gradient-pink),
                        var(--gradient-peach),
                        var(--gradient-peach));
        background-size: 300%;
        /* Clipping the text */
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* filter: opacity(20%); */
        /* background-size: cover; */
}

.gradient_animation {
        /* Gradient on Text */
        color: var(--no-grey);
        animation: flow 16s ease-in-out infinite;
        background: -webkit-linear-gradient(-60deg,
                        var(--medium-grey),
                        var(--medium-grey),
                        var(--gradient-peach),
                        var(--gradient-peach),
                        var(--gradient-pink),
                        var(--gradient-blue),
                        var(--gradient-blue));
        background-size: 300%;
        /* Clipping the text */
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        /* filter: opacity(20%); */
        /* background-size: cover; */
}

.gradient_bg_animation {
        /* Gradient on Text */
        color: var(--no-grey);
        animation: flow 16s ease-in-out infinite;
        background: -webkit-linear-gradient(-60deg,
                        var(--lightest-grey),
                        var(--light-grey),
                        var(--gradient-peach),
                        var(--gradient-pink),
                        var(--gradient-blue),
                        var(--gradient-blue));
        background-size: 300%;
        /* Clipping the text */
        /* -webkit-background-clip: text; */
        /* background-clip: text; */
        /* -webkit-text-fill-color: transparent; */
        /* filter: opacity(20%); */
        /* background-size: cover; */
}

.gradient_yellow {
        background: -webkit-linear-gradient(-45deg, #ff9ba3, #fcd7a3);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.gradient_blue {
        background: -webkit-linear-gradient(-45deg, var(--dark-green), var(--blue), var(--blue));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.gradient_purple {
        background: -webkit-linear-gradient(-45deg, var(--dark-grey), var(--dark-grey), var(--dark-blue));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

.gradient_grey {
        background: -webkit-linear-gradient(-45deg, var(--lightest-grey), var(--lightest-grey));
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
}

/* flow: Keyframe goes back and forth */
@keyframes flow {
        0% {
                background-position: 0 50%;
        }

        50% {
                background-position: 100% 50%;
        }

        100% {
                background-position: 0% 50%;
        }
}

body {
        font-family: Assistant-Regular;
        font-size: 16px;
        color: var(--dark-grey);
        background-color: var(--background);
        transition: background-color 0.5s, color 0.5s;
}

mark {
        background-color: #dde2ff;
}

#red {
        color: var(--red);
}

#green {
        color: var(--green);
}

.chartContainerA {
        width: 300px;
        height: 300px;
}

.chartContainerB {
        width: 400px;
        height: 400px;
}

/* Project CSS */
.wrapper {
        /* width: 80%; */
        min-width: 1200px;
        max-width: 1400px;
        margin: 0 auto;
        animation: transitionIn 2s;
        /* border: 1px solid var(--red); */
}

@keyframes transitionIn {
        from {
                opacity: 0;
        }

        to {
                opacity: 1;
        }
}

.container {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        grid-auto-rows: minmax(2vw, auto);
        grid-gap: 2vw;
        position: relative;
}

/* Swiss Design Pattern: Vertical Grid Lines */
/* .container::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 1;
        background-image: repeating-linear-gradient(to left,
                        transparent 0,
                        transparent calc((100% - 11 * 2vw) / 12 - 0.5px),
                        var(--dark-grey) calc((100% - 11 * 2vw) / 12 - 0.5px),
                        var(--dark-grey) calc((100% - 11 * 2vw) / 12),
                        transparent calc((100% - 11 * 2vw) / 12),
                        transparent calc((100% - 11 * 2vw) / 12 + 2vw));
        opacity: 0.2;
} */

/* Ensure grid content appears above the lines */
/* .container > * {
        position: relative;
        z-index: 2;
} */

/* Video Overlay Styles */
.video-overlay-container {
        position: relative;
        width: 100%;
        height: auto;
}

.video-overlay-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        z-index: 10;
        width: 80%;
        max-width: 80vw;
}

.overlay-quote {
        color: white;
        font-size: 8vw;
        /* font-weight: 700; */
        text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
        line-height: 1.2;
        margin: 0;
        /* font-family: 'Assistant-Bold', sans-serif; */
}

/* Debugging */
/* .container div { */
/* background-color: var(--light-grey); */
/* border: 1px solid var(--red); */
/* } */

/* PageBreak */
.break {
        margin: 1em 0 0 0;
}

/* Breakpoint */
.breakpoint {
        margin: 3em 0 0 0;
}

#HeaderBreakpoint {
        margin: 4em 0 0 0;
}

/* Thick Blue Link */
.line {
        border-top: 3px solid;
        width: 100%;
}

/* Thin Blue Link */
.thin_line {
        border-top: 1px solid;
        width: 100%;
}

/* Navigation */
.navigation {
        position: fixed;
        max-width: 1920px;
        /* background-color: var(--background); */
        padding: 1em 0;
        transition: background-color 0.5s, color 0.5s;
        z-index: 1;
}

.navigation > div:nth-child(1) {
        margin-top: 3em;
        margin-left: 0;
        margin-bottom: 1.5em;
}

.navigation > div {
        margin-left: 2em;
        margin-bottom: 1em;
}


/* Project CSS Start */
/* Project Navigation */

#img_desktop {
        display: block;
        /* show by default */
}

#img2_mobile {
        display: none;
        /* hide by default */
}

@media (max-width: 759px) {

        /* mobile size */
        #img_desktop {
                display: none;
                /* hide on mobile */
        }

        #img2_mobile {
                display: block;
                /* show on mobile */
        }
}


.project_cover {
        background-size: cover;
        width: 100%;
        height: 1100px;
}

.project_cover h2 {
        /* font-style: Vidaloka-Regular; */
        font-size: 6em;
        position: relative;
        bottom: 8%;
        left: 4%;
        color: #000;
        /* left: 10%; */
}

.project_navigation {
        position: absolute;
        max-width: 1920px;
        /* background-color: var(--background); */
        padding: 1em 0;
        transition: background-color 0.5s, color 0.5s;
        z-index: 1;
}

.project_navigation p:hover {
        color: var(--blue);
        /* font-weight: 600; */
        /* color: var(--red); */
}

#sticky_navigation {
        /* position: fixed; */
        overflow: hidden;
        /* color: var(--red); */

        /* top: 0; */
        /* position:fixed; */
        /* top:0px; */
        max-width: 80%;
        /* background-color: var(--background); */
        /* padding: 1em 0; */
        /* transition: background-color 0.5s, color 0.5s; */
        /* background-color: #224CF5; */
        z-index: 1;
        /* color: #3c0029; */
        /* overflow-y: auto; */
}

.sticky {
        position: fixed;
        top: 0;
        /* width: 100%; */
}

.project_navigation > div:nth-child(1) {
        margin-top: 3em;
        margin-left: 0;
        margin-bottom: 1.5em;
}

.project_navigation > div {
        margin-left: 0em;
        margin-bottom: 1em;
}

/* Project Horizontal Scroll */
.wide-as-needed {
        /* overflow: auto; */
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;


        /* Hide scrollbar for Chrome, Safari and Opera */
        &::-webkit-scrollbar {
                display: none;
        }

        /* Hide scrollbar for IE, Edge and Firefox */
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
}


/* Toggle Button for Dark Mode */
.toggle_btn {
        color: var(--alt-background);
        cursor: pointer;
        padding: 0.1em;
}

.toggle_btn:hover {
        color: var(--darker-grey);
}

.toggle_btn i {
        font-size: 1.5em;
}

.bg_card {
        background-color: var(--white);
        border-radius: 2em 2em 5em 2em;
        text-align: left;
        padding: 2em;
        border: 1px solid var(--light-grey);
        /* box-shadow: 12px 12px 16px 0 rgba(0, 0, 0, 0.25), -8px -8px 12px 0 rgba(255, 255, 255, 0.3); */
        /* box-shadow: 0em 1em 1em var(--shadow-dark), 0em -1em 1em var(--shadow-light); */
        /* 20px 20px 60px rgba(217, 217, 217, 0.25), -20px -20px 60px rgba(255, 255, 255, 0.5); */
        /* box-shadow: 0 5px 10px rgba(154, 160, 185, 0.05), 0 15px 40px rgba(166, 173, 201, 0.2); */
        /* margin-top: 1em; */
        /* width: 100%; */
        /* height: 100%; */
}

.bg_highlight:hover {
        /* border-radius: 2em; */
        transition: 200ms ease;
        border: 1px solid var(--light-grey);
        box-shadow: 0.5em 0.5em 0em var(--light-grey);
}

.media_bg_card {
        border: 1px solid var(--lightest-grey);
        backdrop-filter: blur(8px);
        box-shadow: 0.3em 0.3em 0em var(--lightest-grey);
}

/* Full */
.full_column {
        grid-column: 1/13;
        text-align: center;
}

/* Main Segments Layout */
.full_2column {
        grid-column: 3/11;
        display: flex;
        /* justify-self: center; */
        /* border: 1px solid var(--red); */
}

.left_2column {
        grid-column: 3/7;
        display: flex;
        /* border: 1px solid var(--red); */
}

.right_2column {
        grid-column: 7/11;
        /* justify-self: start; */
        /* border: 1px solid var(--red); */
        display: flex;
}

.right_2column_image {
        width: 30%;

}

.full_textarea {
        width: 33em;
        text-align: left;
        overflow-wrap: break-word;
}

/* Main Page Card Layouts */
.card_layout_container {
        position: relative;
        /* height: 80em; */
}

#card_mode {
        width: 100%;
        min-height: 720px;
        /* border: 1px solid #7e7f80; */
        background-color: var(--card_background);
}

#card_mode .card_paneleft {
        position: absolute;
        left: 27%;
        top: 5%;
        display: none;
}

#card_mode .card_paneleft h6 {
        writing-mode: tb-rl;
        transform: rotate(-180deg);
        padding: 1em;
}

#card_mode .icon {
        position: absolute;
        right: 4%;
        top: 68%;
        width: 3.5em;
        height: 3.5em;
}

#card_mode .badge {
        position: absolute;
        right: 4%;
        top: 0%;
        width: 5em;
        height: auto;
        z-index: 1;
}

#card_mode .text_pane {
        display: flex;
        justify-content: space-between;
        padding: 2em;
        width: 90%;
        position: absolute;
        bottom: 2%;
        left: 50%;
        transform: translate(-50%, 0%);
        align-items: center;
}

#card_mode .left_side {
        width: 45%;
        height: auto;

}

#card_mode .right_side {
        width: 50%;
        height: auto;

}

/* #card_mode h4{
        font-size: 1.5em;
} */


#card_mode img,
video {
        width: 100%;
        /* min-width: 800px; */
        /* position: absolute; */
}


#card_mode .playpause i {
        color: var(--white);
}

.video-mask {
        width: 40%;
        height: 611px;
        border-radius: 25px;
        overflow: hidden;
        border: var(--dark-grey) solid 1px;
        margin: 0 auto;
}

#myimage {
        /* filter: grayscale(100%); */
        /* -webkit-filter: grayscale(100%); */
        width: 90%;
}

.greyscale img,
.greyscale object {
        filter: grayscale(100%);
        -webkit-filter: grayscale(100%);
}

/* Project Documentation Columns */
.project_full {
        grid-column: 1/13;
        /* justify-self: center; */
}

.project_full_2column {
        grid-column: 4/10;
        /* justify-self: center; */
}

.project_full_2column_showcase {
        grid-column: 3/11;
        /* justify-self: center; */
}

.project_left_2column {
        grid-column: 4/7;
        /* justify-self: center; */
}

.project_right_2column {
        grid-column: 7/10;
        /* justify-self: start; */
        text-align: left;
}

.project_left_3column {
        grid-column: 4/6;
        justify-self: start;
        text-align: left;
}

.project_middle_3column {
        grid-column: 6/8;
        justify-self: start;
        text-align: left;
}

.project_right_3column {
        grid-column: 8/10;
        justify-self: start;
        text-align: left;
}


.project_card_layout_container {
        position: relative;
        /* height: 80em; */
        width: 100%;
        min-height: 420px;
        height: auto;
        /* background-color: var(--card_background); */
}


.project_pane {
        display: flex;
        justify-content: space-between;
        padding: 1.5vw 3vw;
        /* width: 100%; */
}

.notice {
        background-color: var(--lightest-grey);
        /* color: var(--dark-yellow); */
        border-radius: 8px;
        padding: 1em 2em;
}



.project_left_side {
        width: 65%;
        height: auto;

}

.project_right_side {
        width: 30%;
        height: auto;

}

/* Home */
.shapes {
        opacity: 16%;
        z-index: -1;
        /* color: red; */
}

#aboutMeLabel {
        display: none;
}



/* Nested Cards*/
.card_container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-auto-rows: minmax(1em, auto);
        grid-gap: 2em;
        overflow-y: hidden;
        /* border: 1px solid var(--red); */
}

.card_full_2column {
        grid-column: 1/9;
        /* justify-self: center; */
}


.area {
        padding: 4em;
        display: flex;
}


/* Components */
.button {
        cursor: pointer;
        margin: auto;
        display: inline-flex;
        background-color: var(--alt-background);
        padding: 1em 2em;
        width: fit-content;
        border-radius: 0.5em;
}

.button:hover {
        background-color: var(--alt-lighter-background);
}

.button:focus {
        box-shadow: 0.5em 0.5em 1em var(--shadow-dark), -0.7em -0.7em 9em var(--shadow-light);
}

.button p {
        margin: auto;
        color: var(--white);
}

.button img,
i {
        margin: auto;
}

#view_project_button {
        width: 10em;
        height: 3em;
}

/* Social Icons from Font Awesome: fontawesome.com */
#social_button {
        width: 3em;
        height: 3em;
        margin-left: 1em;
        background-color: var(--lightest-grey);
}

#social_button:nth-child(1) {
        /* margin-right: auto; */
        margin-left: 0;
}

#social_button i {
        font-size: 1.5em;
        color: var(--medium-grey);
}

#accordion {
        width: 8em;
        height: 3em;
        color: var(--white);
        padding: 0 1em;
}

#about_me img {
        width: 70%;
        height: 50%;
        max-width: 200px;
        min-width: 154px;
}

.hide {
        /* height: 0px; */
        /* overflow: hidden; */
        /* animation: slide-up 0.6s ease; */
        display: none;
}

.slide_down {
        animation: slide-down 0.9s ease;
}

.show {
        height: auto;
        animation: slide-down 0.6s ease;
}

@keyframes slide-down {
        0% {
                opacity: 0;
                transform: translateY(5%);
                /* height: 0%; */
                /* scale: 0; */
        }

        100% {
                opacity: 1;
                /* height: 100%; */
                transform: translateY(0);
                /* scale: 100; */
        }
}

/* @keyframes slide-up {
        0% {
                opacity: 1;
                height: 100%;
                transform: translateY(0);
        }

        100% {
                opacity: 0;
                height: 0%;
                transform: translateY(-10%);
        }
} */

/* Type for Changelog */
.type {
        display: flex;
        color: white;
        border-radius: 4px;
        padding: 0.3em 1em;
        font-size: 16px;
        /* margin: auto; */
        height: 24px;
}

.new {
        background-color: var(--light-blue);
}

.improvement {
        background-color: var(--peach);
}

.fix {
        background-color: var(--yellow);
}

/* PHP Form Styling */
#form_style {
        max-width: 300px;
        min-width: 300px;
        background: var(--background);
}

#form_style ul {
        list-style: none;
}

#form_style li {
        padding: 9px 9px 9px 9px;
        border: 2px solid var(--grey);
        border-radius: 1em;
}

#form_style li:last-child {
        border: none;
        margin-bottom: 0px;
        text-align: center;
}

#form_style li > label {
        margin-top: 0px;
        text-align: start;
        /* top: 0; */
        /* left: 0; */
        padding: 2px 5px 2px 5px;
        overflow: hidden;
        color: var(--medium-grey);
}

#form_style input[type="text"],
#form_style input[type="password"],
#form_style select {
        box-sizing: border-box;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        width: 100%;
        height: 1.1em;
        font-size: 2em;
        padding: 0.2em;
        color: var(--dark-blue);
        background: var(--background);
}

#form_style input[type="text"]:focus,
#form_style input[type="password"]:focus,
#form_style select:focus {
        color: var(--dark-blue);
}

#form_style li > span {
        background: var(--background);
        display: block;
        padding: 3px;
        margin: 0 -9px -9px -9px;
        text-align: center;
}

#form_style textarea {
        resize: none;
}

#form_style input[type="submit"],
#form_style input[type="button"] {
        background: var(--dark-blue);
        border: none;
        padding: 10px 20px 10px 20px;
        max-width: 200px;
        min-width: 100px;
        display: none;
}

#form_style input[type="submit"]:hover,
#form_style input[type="button"]:hover {
        background: var(--dark-blue);
        color: var(--background);
}

.error {
        font-size: 0.9em;
        color: var(--red);
}


.card_icon {
        cursor: pointer;
        margin: auto;
        display: flex;
        background-color: var(--alt-background);
        /* border-radius: 3em; */
        /* box-shadow: 0.5em 0.5em 1em var(--shadow-dark), -0.7em -0.7em 9em var(--shadow-light); */
        width: 3em;
        height: 3em;
}

.card_icon i {
        font-size: 1.5em;
        color: var(--white);
}

.card_icon:hover {
        background-color: var(--dark-blue);
        /* background-color: var(--green); */
}

.contrast_blur {
        /* background: #3b317d; */
        background: #dde2ff;
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        color: var(--dark-grey);
        border-top: #1c1c1c solid 4px;
        /* border-radius: 1em; */
}

.pack {
        display: inline-block;
}

/* Image Comparison Slider */
.image-comparison-slider {
        position: relative;
        width: 100%;
        height: auto;
}

.comparison-image {
        width: 100%;
        height: auto;
        display: block;
}

.overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: left;
        clip-path: inset(0 10% 0 0);
}

.slider {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: col-resize;
}

.slider-handle {
        position: absolute;
        top: 50%;
        right: 6%;
        width: 40px;
        height: 40px;
        background: rgba(43, 48, 200, 0.9);
        border: 3px solid var(--white);
        border-radius: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
        box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.3);
        z-index: 10;
}

.slider-handle::before,
.slider-handle::after {
        content: '';
        position: absolute;
        top: 50%;
        width: 2px;
        height: 16px;
        background: var(--white);
        transform: translateY(-50%);
}

.slider-handle::before {
        left: 12px;
}

.slider-handle::after {
        right: 12px;
}

.rounded-video {
        border-radius: 24px 24px 0px 0px;
        width: 100%;
        margin: auto;
}

/* Hover to Zoom Effect for Images */
.zoom-container {
        overflow: hidden;
        cursor: pointer;
        transition: all 0.3s ease;
        position: relative;
}

.zoom-container img {
        transition: all 0.3s ease;
        width: 100%;
        height: auto;
        display: block;
        transform-origin: center;
}

/* Removed hover effect - now click-based only */

/* Mouse tracking zoom effect */
.zoom-container.mouse-tracking {
        cursor: pointer;
}

.zoom-container.mouse-tracking img {
        transform-origin: 0 0;
        transition: transform 0.1s ease-out;
}

.zoom-container.mouse-tracking:active {
        cursor: pointer;
}

/* Fullscreen overlay styles */
.zoom-container.fullscreen {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        background: rgba(255, 255, 255, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
}

.zoom-container.fullscreen img {
        max-width: 90vw;
        max-height: 90vh;
        width: auto;
        height: auto;
        object-fit: contain;
        transform-origin: 0 0;
        transition: transform 0.1s ease-out;
}

/* Accordion Styles - Using Portfolio Visual Language */
.collapse-content {
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
}

.collapse {
        width: 100%;
        margin-bottom: 1em;
}

.collapse a {
        display: block;
        font-size: 1rem;
        font-weight: 500;
        padding: 1.5rem 2rem;
        color: var(--medium-grey);
        position: relative;
        /* background-color: var(--card_background); */
        border: 1px solid var(--light-grey);
        border-radius: 8px;
        transition: all 0.3s ease;
        text-decoration: none;
}

.collapse a:hover {
        background-color: var(--lightest-grey);
        border-color: var(--grey);
        color: var(--medium-grey);
        text-decoration: none;
        /* transform: translateY(-2px); */
        /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
}

.collapse a.execution {
        /* border-left: 4px solid var(--alt-background); */
}

.collapse a.inapp {
        /* border-left: 4px solid var(--grey); */
}

.collapse a::before {
        content: "";
        border-top: 6px solid var(--grey);
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        position: absolute;
        top: 50%;
        right: 2rem;
        transform: translateY(-50%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.collapse a h5 {
        margin: 0 0 0.5rem 0;
        color: var(--medium-grey);
        font-weight: 600;
        font-size: 1.1em;
}

.collapse a p {
        margin: 0;
        color: var(--dark-grey);
        font-size: 0.9em;
        line-height: 1.4;
}

.inner-content {
        padding: 2rem 0;
        background: transparent;
}

.content {
        max-height: 0;
        opacity: 0;
        transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease-in-out;
        overflow: hidden;
}

.collapse.active .content {
        max-height: 5000px;
        opacity: 1;

}

.collapse.active a::before {
        transform: translateY(-50%) rotate(-180deg);
}

.collapse.active a {
        /* border-bottom-left-radius: 0; */
        /* border-bottom-right-radius: 0; */
        /* border-bottom: none; */
        background-color: var(--lightest-grey);
        border-left: 4px solid var(--alt-background);
}