body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
    background: url('https://design-gecko.com/wp-content/uploads/2024/12/body_bg1.jpg') no-repeat center center/cover;
}

.beforeAfter img:last-child {
    max-width: fit-content;
}

button {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    text-shadow: 0 0 4px #0000005e;
}

#mainList {
    margin-top: 10px;
}

.background {
background: url('../img/webp/mobile_bg_dark.jpg') no-repeat center center / cover;
}

img {
    border-radius: 5px;
}

.lists ul li::before {
    margin-left: -30px;
}

#canvasImage {
    min-height: 300px;
    height: auto;
}

#depthrImage {
    max-width: 500px !important;
}

/* Updated .new-section-reverse styles */
.new-section-reverse {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
    flex-direction: row-reverse;
    flex-wrap: wrap; /* Allow wrapping for better responsiveness */
    transition: opacity 1s ease-in-out;
    height: auto; /* Remove fixed height */
    min-height: 300px; /* Minimum height to maintain responsiveness */
    overflow: hidden; /* Hide any overflowing content */
    
}

/* Ensure images inside the .beforeAfter container are responsive */
.new-section-reverse .beforeAfter {
    height: auto;
}

.new-section p {
    font-size: 17px;
}

.social-links, .button-pair {
    transition: none; /* Disable opacity transition */
}

#sectionFollowUs, .format-info, #sectionFollowUsDepthR {
    text-align: center;
    font-weight: 600;
    padding: 0 !important;
    margin: 0 auto -15px;
}

.small-divider, .divide_home {
    color: #f4f4f43d;
    margin: auto;
}

.small-divider {
    width: 150px;
}

.divide_home {
    width: 50%;
    color: #f3f3f354;
}

.lp-section ul {
    font-weight: 100;
    font-size: 18px;
}

.lp-section h4, .new-section h4, #sectionSubtitle2 {
    font-size: 20px;
    font-weight: 100;
    text-decoration: underline;
}

#joinButton:hover, .button-pair button:hover, #joinLaserPicsButton:hover, .card button:hover {
    box-shadow: 0 0 10px #007BFF;
    transition: 0.2s;
}

.card ul, .new-section ul, .new-section-reverse ul {
    list-style: none;
    padding: 0;
    text-align: left;
    margin-bottom: 30px;
    line-height: 1.5;
}

.card ul li, .new-section ul li, .new-section-reverse ul li {
    position: relative;
    padding-left: 25px;
}

.card ul li::before, .new-section ul li::before, .new-section-reverse ul li::before {
    content: "\f005";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #007BFF;
}

.new-section button {
    width: 250px;
    margin: 5% auto 30px;
    display: block;
}

.button-container a {
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    font-size: larger;
}

.container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    overflow: hidden;
    z-index: 1;
}

.background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    animation: bg-shrink 2s forwards;
    transform: scale(1.5);
    z-index: -1;
}

@keyframes bg-shrink {
    from {
        background-size: 120%;
    }
    to {
        background-size: 100%;
    }
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0) 70%);
    pointer-events: none;
    z-index: 0;
}

.canvas-image {
    max-height: 300px;
    border-radius: 5px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

h1 {
    color: white;
    text-align: center;
    margin-top: 20px;
    font-weight: 300;
    width: 34%;
    z-index: 1;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.lists {
    display: flex;
    justify-content: space-around;
    width: 45%;
    color: white;
    margin-bottom: 20px;
    font-size: 1.2em;
    z-index: 1;
    opacity: 1;
    transition: opacity 1s ease-in-out;
}

.lists ul {
    list-style: none;
    padding: 0;
    text-align: left;
}

/* Ensure list items start with opacity 0 */
.lists ul li {
    margin: 10px 0;
}


.lists ul li::before {
    content: "\f005";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    color: #007BFF;
    position: absolute;
}

.button-container {
    margin-top: -1.5%;
    text-align: center;
    z-index: 1;
    position: relative;
}

.button-container button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 15px 30px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
    box-shadow: 0 0 10px #007BFF99;
    z-index: 1;
    text-shadow: 0px 2px 5px #000000ab;
}

.cards-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
    z-index: 1;
}

.card {
    background: white;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    width: 26%;
    text-align: center;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    z-index: 1;
    position: relative;
}

.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
}

.card-middle {
    z-index: 2;
    transform: scale(1.06);
}

.card-middle:hover {
    transform: translateY(-10px) scale(1.06);
}

.card h2 {
    margin: 20px 0;
    font-size: 1.8em;
    color: #333;
}

.card p {
    font-size: 1em;
    color: #666;
    margin-bottom: 20px;
}

.card ul {
    width: fit-content;
    margin: auto auto 20px;
}

.card ul li {
    margin: 10px 0;
}

.card ul li::before {
    content: "\f005";
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #007BFF;
}

.card button {
    background-color: #007BFF;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
}

.new-section {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 50px 0;
}

.beforeAfter {
    right: 20px;
}    

.beforeAfter img {
  border-radius: 5px;
}

.new-section .text-content, .new-section-reverse .text-content {
    max-width: 50%;
    text-align: left;
}

.new-section-reverse .text-content {
    margin-right: 20px;
}

.new-section h2, .new-section-reverse h2 {
    font-size: 2em;
    color: #333;
    margin-bottom: 10px;
    font-weight: 100;
    text-align: left;
}

.new-section h3, .new-section-reverse h3 {
    font-size: 1.5em;
    color: #333;
    margin-bottom: 20px;
}

.new-section p, .new-section-reverse p {
    font-size: 1em;
    color: #666;
    line-height: 1.5;
}

.new-section ul, .lp-section .new-section ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    list-style: none;
    padding: 0;
    margin-top: 4%;
    justify-items: center;
}

.lp-section .new-section ul {
    width: fit-content;
    margin: 30px auto;
}

.new-section ul li {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .new-section ul, .lp-section .new-section ul {
        grid-template-columns: 1fr;
    }

    .new-section-reverse {
        flex-direction: column;
    }

    .new-section-reverse .text-content {
        margin: auto;
        max-width: 90%;
        padding: 0px!important;
    }

    .new-section-reverse .beforeAfter {
        max-width: 90%;
    }

    .new-section-reverse img {
        height: auto;
    }
}

@media (max-width: 600px) {
    .new-section-reverse .text-content {
        max-width: 100%;
        padding: 0 15px;
    }

    .new-section-reverse .beforeAfter {
        max-width: 100%;
    }
}

.social-links {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px;
}

.social-links a {
    color: #333;
    font-size: 24px;
    transition: color 0.3s ease-in-out;
}

.social-links a:hover {
    color: #007BFF;
}

.button-pair {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.button-pair button, #joinLaserPicsButton {
    background-color: #007BFF;
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    border-radius: 5px;
    padding: 15px 30px;
    font-weight: 500;
    text-shadow: 0 0 4px #0000005e;
}

.button-pair .or-label {
    color: #666;
    font-size: 16px;
    font-weight: 600;
}

#sectionReverse .text-content {
    position: relative;
    z-index: 2; /* Ensure text content is on top */
}

#sectionReverse .beforeAfter {
    position: relative;
    z-index: 1; /* Ensure it is below text content */
    max-width: 450px;
}

#sectionReverse .beforeAfter img {
    display: block;
    width: 100%;
    border-radius: 5px;
}

/* Add a class for fading the images */
.fade-image {
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

/* Visible class to fade in the images */
.visible {
    opacity: 1;
}

@media (max-width: 1500px) {
    h1, .lists {
        width: 60%;
    }
}

@media (min-width: 1400px) {
    .card {
        width: 22%;
    }
}

@media (max-width: 1200px) {
    .card-middle {
        transform: scale(1);
    }
    .card-middle:hover, .card:hover {
        transform: none;
    }
}

@media (max-width: 1100px) {
    h1, .lists {
        width: 95%;
    }
    h1 {
        margin-bottom: 0;
    }
}

@media (max-width: 1000px) and (min-width: 769px) {
    .card {
        width: 42%;
        order: 2;
    }
    .card-middle {
        order: 1;
    }
    
    .beforeAfter {
        right: 0px;
    }
}


@media (min-width: 768px) {
    .background {
        background: url('../img/webp/bg_dark.jpg') no-repeat center center / cover; /* Larger image for desktops */
    }
}

@media (max-width: 768px) {
    .canvas-image {
        height: 320px;
        min-height: 320px!important;
    }

    .new-section p {
        font-size: 17px;
        margin-bottom: 10px;
    }

    .lp-section img {
        margin-right: 0px;
        margin: 0px!important;
    }
    .beforeAfter img {
    padding: 0px !important;
    margin: 0px !important;
    }  
    .new-section-reverse .text-content {
      padding-right: 0px;
    }
        
    .beforeAfter {
        right: 0;
    }        
    
    #depthrImage {
        padding-left: 0px !important;
    }
    
    .cards-container {
        justify-content: center;
    }
    .button-container {
        margin-top: -4.5%;
    }
    .background {
        transform: scale(1.8);
    }
    .lists > ul:nth-child(1) {
        display: none;
    }
    .card {
        width: 42%;
        order: 2;
    }
    .card-middle {
        order: 1;
    }
    .new-section, .new-section-reverse {
        flex-direction: column;
    }
    .new-section img, .new-section-reverse img {
        margin: 0 0 20px 0;
    }
    .new-section .text-content, .new-section-reverse .text-content {
        max-width: 80%;
    }
    .new-section ul {
        grid-template-columns: repeat(3, 1fr);
        justify-items: center;
    }
}

@media (max-width: 700px) and (min-width: 601px) {
    .card {
        width: 39%;
        order: 2;
    }
    .card-middle {
        order: 1;
    }
}

@media (max-width: 600px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }
    .beforeAfter {
        width: 80%;
    }
    .background {
        background: url('../img/webp/sm_mobile_bg_dark.jpg') no-repeat center center / cover; /* Larger image for desktops */
    }
    .card {
        width: 80%;
        order: 2;
    }  
    #mainList {
        margin: 0;
    }
    .new-section img, .lp-section img, .new-section-reverse img {
        width: 70%;
    }
    .new-section.lp-section ul {
        display: block;
        width: fit-content;
        margin: 30px auto;
    }
    .new-section.lp-section li {
        padding-bottom: 10px;
    }
    .card-middle {
        order: 1;
    }
}

@media (max-width: 480px) {
    .canvas-image {
        max-height: 230px;
        min-height: 230px!important;
    }

    .slider-top {
    max-height: 523px!important;
    min-height: 523px!important;
    }

#canvasImage {
  margin-top: 30px;
}

#mainList {
  margin-top: 10px;
}

    h1 {
        width: 85%;
        font-size: 1.2em;
    }
    .lists {
        width: 85%;
        font-size: 0.9em;
    }
    .button-container {
        bottom: 10px;
    }
    .new-section ul {
        grid-template-columns: repeat(2, 1fr); /* Adjust to 2 columns on small screens */
    }
}

@media (max-width: 400px) {
    .background {
        background: url('../img/webp/xsm_mobile_bg_dark.jpg') no-repeat center center / cover; /* Larger image for desktops */
    }
}

@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(2deg);
    }
    50% {
        transform: rotate(-2deg);
    }
    75% {
        transform: rotate(2deg);
    }
}

.wiggle {
    animation: wiggle 0.5s ease-in-out;
}

.text-fade-top {
    transition: opacity 1s ease-in-out;
}

.text-fade-top.visible {
    opacity: 1;
}

/* Grundstil für die Liste */
.lists ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lists ul li {
    opacity: 0; /* Unsichtbar starten */
    transform: translateY(10px); /* Startposition leicht verschoben */
    animation: fadeInUp 0.5s ease forwards; /* Animation */
}

/* Verzögerungen für einzelne Elemente */
.lists ul li:nth-child(1) {
    animation-delay: 0s;
}
.lists ul li:nth-child(2) {
    animation-delay: 0.5s;
}
.lists ul li:nth-child(3) {
    animation-delay: 1s;
}
.lists ul li:nth-child(4) {
    animation-delay: 1.5s;
}

.slider-top {
    max-height: 650px;
    min-height: 650px;
    height: 100%;
  }

/* Animation definiert */
@keyframes fadeInUp {
    to {
        opacity: 1; /* Sichtbar */
        transform: translateY(0); /* Zur Ausgangsposition bewegen */
    }
}


/* Ensure the button has a minimum size */
.button-container a{
    min-width: 48px; /* Ensure the button is at least 48px wide */
    min-height: 48px; /* Ensure the button is at least 48px tall */
    padding: 12px 24px; /* Add sufficient padding */
}