:root {
     --menu-height: 60px;
     --color-primary: #162549;
     --color-secondary: #FFFFFF;
     --color-text: #6A738A;
     --color-accent: #0099D8;
 }

 html,
 body {
     height: 100%;
     margin: 0;
     font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
     font-size: 16px;
     font-weight: 500;
     color: var(--color-primary);
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
 }

 header.site-header {
     height: var(--menu-height);
     min-height: var(--menu-height);
     align-items: center;
     z-index: 50;
     position: fixed !important;
     top: 20px;
     left: 20px;
     /* background-color: #FBFBFB; */
     border-radius: 16px;
     padding: 8px 16px;
     width: 100%;
     max-width: calc(100% - 40px);
     display: flex;
     background: transparent !important;
     box-shadow: none !important;
     padding: 8px 0 !important;
 }

 header .brand {
     height: var(--menu-height);
     min-height: var(--menu-height);
     font-weight: 700;
     letter-spacing: 0.4px;
     border-radius: 16px;
     background: #fbfbfb;
     padding: 20px 12px;
     display: inline-flex;
     align-items: center;
 }

 header .brand img {
     height: 45px;
     margin-right: 20px;
 }

 header nav {
     border-radius: 16px;
     padding: 20px 12px;
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
 }

 header nav {
     height: var(--menu-height);
     min-height: var(--menu-height);
     background-color: #fbfbfbd4;
     border-radius: 20px;
     padding: 10px 20px;
 }

 header nav a {
     margin: 0 5px;
 }

 header nav a:hover {
     color: rgb(0, 153, 216) !important;
 }

 header nav a i.fa-user {
     margin-left: 20px;
 }

 main {
     width: 100%;
     top: 0;
     box-sizing: border-box;
     height: 100vh;
     overflow: hidden;
     position: absolute;
     float: left;
     z-index: 5;
 }

 .doorinfo-image {
     transition: background-image 1s ease-in-out;
 }

 .door {
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-size: cover;
     overflow: hidden;
     position: absolute;
     float: left;
     z-index: 5;
 }

 .doorinfo-selecteddoor {
     width: 100%;
     height: 100%;
     background-repeat: no-repeat;
     background-position: center top;
     /* background-size: cover; */
     background-size: contain;
     background-repeat: no-repeat;
     overflow: hidden;
     position: absolute;
     float: left;
     z-index: 5;
 }

 .left-intro {
     position: absolute;
     display: grid;
     padding: 0 !important;
     margin: 0;
     top: 0;
     left: 0;
     width: 40%;
     min-height: 30vh;
     z-index: 10000;
     padding: 20px;
     font-size: 16px;
     line-height: 1.5;
     color: var(--color-secondary);
     z-index: 11;
 }

 .left-intro::before {
     content: "";
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 80%;
     height: 100%;
     border-bottom-right-radius: 32px;
     background: linear-gradient(180deg, #162549 0%, #0D152B 100%);
 }

 .left-intro .content {
     width: calc(80% - 100px);
     display: block;
     position: relative;
     margin: 100px 50px 50px 50px;
     padding-inline-start: 0;
     padding-inline-end: 0;
     font-size: 18px;
 }

 .left-intro .content h1 {
     font-size: 30px;
     font-weight: 800;
     line-height: 62px;
     -webkit-text-stroke-width: 0px;
     stroke-width: 0px;
     -webkit-text-stroke-color: #000;
     stroke: #000;
 }

 .left-intro .content h1 span {
     color: #162549 !important;
     text-shadow: 1px 0 #fff, -1px 0 #fff, 0 1px #fff, 0 -1px #fff, 1px 1px #fff, -1px -1px #fff, 1px -1px #fff, -1px 1px #fff;

 }

 .left-intro .content a {
     background-color: #FFFFFF;
     font-family: "Plus Jakarta Sans", Sans-serif;
     font-size: 16px;
     font-weight: 500;
     line-height: 20px;
     fill: #162549;
     color: #162549;
     border-style: solid;
     border-width: 0px 0px 0px 0px;
     border-color: #FFFFFF26;
     border-radius: 999px 999px 999px 999px;
     padding: 17px 20px 17px 20px;
     text-decoration: none;
     display: inline-block;
     outline: solid 6px rgba(255, 255, 255, 0.12);
 }

 .left-intro .content a:hover {
     background-color: #0099D8;
     color: #FFFFFF;
 }

 .left-intro .content a .button-text {
     text-decoration: inherit;
     display: inline-block;
     box-sizing: border-box;
 }

 .right-intro {
     background-color: transparent;
     position: absolute;
     display: grid;
     padding: 0 !important;
     margin: 0;
     right: 0;
     top: 0;
     width: 35%;
     height: 100vh;
     z-index: 10000;
     padding: 20px;
     font-size: 16px;
     line-height: 1.5;
     color: var(--color-secondary);
     z-index: 11;
 }

 /* .right-intro::after {
     content: "";
     display: block;
     position: absolute;
     right: 0;
     bottom: 0;
     width: 35%;
     height: 100%;
     border-top-left-radius: 32px;
     background: linear-gradient(180deg, #0D152B 0%, #162549 100%);
 } */

 .right-info {
     position: absolute;
     right: 0;
     top: 0;
     width: 50%;
     height: 100%;
     padding-right: 2rem;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 1.25rem;
     pointer-events: auto;
     z-index: 100;
     align-items: flex-end;
     justify-content: flex-end;
 }

 .right-info .card {
     background-color: rgba(255, 255, 255, 0.95);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
     border: none;
     border-radius: 16px;
 }

 .right-info .card .card-header {
     font-size: 24px;
     font-weight: 800;
     line-height: 26px;
     color: var(--color-primary);
     background-color: transparent;
     border-bottom: none;
 }

 .right-info .card.projectinfo {
     bottom: 30px;
     padding: 20px;
 }

 .right-info .projectimg {
     max-width: 100%;
     max-height: 200px;
 }

 .left-cards {
     position: absolute;
     left: 0;
     top: 70%;
     transform: translateY(-50%);
     width: 40%;
     padding-left: 2rem;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 1.25rem;
     pointer-events: auto;
     z-index: 100;
     transition: opacity 0.28s ease, transform 0.28s ease;
     opacity: 1;
 }

 .left-cards .card {
     width: 45%;
     max-width: 520px;
     background-color: rgba(255, 255, 255, 0.95);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
     border: none;
     border-radius: 16px;
     transform: translateX(-36px);
 }

 .right-cards {
     position: absolute;
     right: 0;
     top: 70%;
     transform: translateY(-50%);
     width: 50%;
     padding-right: 2rem;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     gap: 1.25rem;
     pointer-events: auto;
     z-index: 100;
     transition: opacity 0.28s ease, transform 0.28s ease;
     opacity: 1;
     align-content: flex-end;
 }

 .right-cards .card {
     width: 45%;
     max-width: 520px;
     background-color: rgba(255, 255, 255, 0.95);
     box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
     border: none;
     border-radius: 16px;
     transform: translateX(-36px);
 }


 @keyframes flyIn {
     from {
         transform: translateX(-36px);
         opacity: 0;
     }

     to {
         transform: translateX(0);
         opacity: 1;
     }
 }

 .pakketcards .card {
     outline: solid 6px rgba(255, 255, 255, 0.12);
 }

 .pakketcards .card:hover {
     transform: scale(1.05) !important
 }

 .pakketcards.fly-in .card {
     animation: flyIn 420ms cubic-bezier(.2, .9, .2, 1) forwards;
 }

 .pakketcards.fly-in .card:nth-child(1) {
     animation-delay: 0ms;
 }

 .pakketcards.fly-in .card:nth-child(2) {
     animation-delay: 80ms;
 }

 .pakketcards.fly-in .card:nth-child(3) {
     animation-delay: 160ms;
 }

 .pakketcards.fly-in .card:nth-child(4) {
     animation-delay: 240ms;
 }

 .pakketcards.fly-in .card:nth-child(5) {
     animation-delay: 320ms;
 }

 .pakketcards.fly-in .card:nth-child(6) {
     animation-delay: 400ms;
 }

 .pakketcards.fly-in .card:nth-child(7) {
     animation-delay: 480ms;
 }

 .pakketcards .card::before {
     content: "";
     display: block;
     position: absolute;
     left: 0;
     top: 0;
     width: 50%;
     height: 50px;
     border-bottom-right-radius: 32px;
     background: linear-gradient(180deg, #162549 0%, #0D152B 100%);
 }

 .pakketcards .card .card-body {
     position: relative;
     max-width: 40%;
     font-size: 12px;
     color: var(--color-secondary);
     z-index: 1000;
     padding-left: 0;
 }

 .pakketcards .card .card-body h5 {
     font-size: 20px;
     font-weight: 800;
     line-height: 20px;
     margin-bottom: 14px;
     padding-left: 11px;
 }

 .pakketcards .card .card-text {
     margin: 0;
     padding: 10px;
     font-size: 14px;
     color: var(--color-secondary);
     height: 25px;
     background-color: var(--color-text);
     border-bottom: none;
     width: 211px;
     height: 100px;
 }

 /* .pakketcards .card .card-footer {
     height: auto;
     margin: 0;
     padding: 0 10px;
     font-size: 12px;
     color: var(--color-secondary);
     height: 25px;
     background-color: var(--color-text);
     border-bottom: none;
 } */

 .pakketcards .card.pakket1,
 .pakketcards .card.pakket2,
 .pakketcards .card.pakket3,
 .pakketcards .card.pakket4,
 .pakketcards .card.pakket5,
 .pakketcards .card.pakket6 {
     cursor: pointer;
     height: 150px;
     width: 477px;
     /* background-image: url(/assets/images/pakket1.png); */
     background-repeat: no-repeat;
     background-position: right top;
     background-size: contain;
 }

 .pakketcards .card.pakket1 {
     background-image: url(/assets/images/pakket1.png);
 }

 .pakketcards .card.pakket2 {
     background-image: url(/assets/images/pakket2.png);
 }

 .pakketcards .card.pakket3 {
     background-image: url(/assets/images/pakket3.png);
 }

 .pakketcards .card.pakket4 {
     background-image: url(/assets/images/pakket4.png);
 }

 .pakketcards .card.pakket5 {
     background-image: url(/assets/images/pakket5.png);
 }

 .pakketcards .card.pakket6 {
     background-image: url(/assets/images/pakket6.png);
 }

 .right-cards.pakketcards .card::before {
     left: auto;
     right: 0;
     border-bottom-left-radius: 32px;
     border-bottom-right-radius: 0;
     background: linear-gradient(180deg, #162549 0%, #0D152B 100%);
 }

 .pakketcards .card.active::before {
     background: linear-gradient(180deg, #0099D8 0%, #006089 100%) !important;
 }

 .right-cards.pakketcards .card .card-body {
     position: absolute;
     right: 20px;
 }

 .right-cards.pakketcards .card.pakket4,
 .right-cards.pakketcards .card.pakket5,
 .right-cards.pakketcards .card.pakket6 {
     background-position: left top;
 }

 .selectpakket-wrapper {
     z-index: 100;
     display: none;
     position: absolute;
     right: 32px;
     top: 5px;
     width: 300px;
     transition: all 1s linear;
 }

 .selectpakket {
     display: block;
     background-color: var(--color-accent);
     font-size: 16px;
     font-weight: 500;
     line-height: 20px;
     fill: var(--color-secondary);
     color: var(--color-secondary);
     border-radius: 999px 999px 999px 999px;
     padding: 12px 20px 12px 20px;
     text-decoration: none;
     cursor: pointer;
 }

 .selectpakket:hover {
     background-color: var(--color-primary);
 }

 .selectpakket .button-content-wrapper {
     display: flex;
     align-items: center;
     gap: 12px;
     flex-direction: row;
 }

 .selectpakket .button-icon {
     padding: 6px;
     border-radius: 999px;
     background-color: var(--color-primary);
     width: 28px;
     height: 28px;
     transition: background-color .3s ease-in-out;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .selectpakket:hover .button-icon {
     background-color: var(--color-accent);
 }

 .selectpakket .button-text {
     display: inline-block;
 }

 .donotselectpakket {
     position: absolute;
     top: 65px;
     right: 60px;
     color: var(--color-text);
     text-decoration: none;
     cursor: pointer;
     font-size: 14px;
     background-color: #ffffff69;
     border-radius: 6px;
     padding: 3px 6px;
 }

 .donotselectpakket:hover {
     background-color: var(--color-primary);
     color: var(--color-secondary);
 }

 .left-cards:has(.selected) {
     transform: none;
 }

 .right-cards:has(.selected) {
     transform: none;
 }

 .selected {
     position: fixed;
     top: 100px;
     transition: all 0.5s linear;
 }

 .right-cards .selected {
     right: 0;
 }