body,
html {
    font-family: "Inter", sans-serif;
    padding-top: 30px; /* Adjust this value based on the height of the menu */
    margin: 0;
    overflow-x: hidden;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.h1 {
    font-size: 62px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 28px;
    margin-top: 0px;
}

.h2 {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
    margin-top: 0px;
}

.h2-center {
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    margin-bottom: 28px;
    margin-top: 0px;
}

.h2-ai {
    background: linear-gradient(to right, #008BFF, #B50CD3, #FA840E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Ensures proper clipping */
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    margin-top: 0px;
    margin-bottom: 0px;
}

.h2-ai-center {
    background: linear-gradient(to right, #008BFF, #B50CD3, #FA840E);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block; /* Ensures proper clipping */
    font-size: 48px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.h3 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 16px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
}

.h3-feature {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #32B0EB;
}

.h3-feature-white {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    color: #ffffff;
}


.h4 {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 0px;
    padding-bottom: 0px;
    margin-top: 16px;
}

.h5 {
    font-size: 16px;
}

@media (max-width: 768px) {
    .h1 {
        font-size: 46px;
    }

    .h2 {
        font-size: 40px;
    }

    .h2-center {
        font-size: 40px;
    }

    .h3 {
        font-size: 28px;
    }

    .h4 {
        font-size: 20px;
    }

    .h5 {
        font-size: 16px;
    }

}

.p {
    line-height: 1.5;
    margin: 0px;
}


.body-M-text {
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    margin-top: 0px;
}

.body-M-bold-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 2px; /* Reduced space after subtitle */
    margin-top: 0px;
}

.body-M-bold-text-center {
    text-align: center;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    margin-top: 0px;
}


.body-S-text {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 16px;
    margin-top: 0px;
}

.body-S-bold-text {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
}

.responsive-img {
    border-radius: 12px;
}

@media (max-width: 768px) {
    .body-text {
        font-size: 14px;
    }

    .hero-text {
        font-size: 18px;
    }

    .responsive-img {
    margin-top: 24px;
    width: 100%;       /* Makes the image narrower than full width */
    height: 400px;    /* Fixed height for a taller, cropped appearance */
    object-fit: cover; /* Ensures the image fills the container and crops extra parts */
    object-position: center; /* Centers the crop */
}
}

/* ======================= */
/*    HERO SECTION         */
/* ======================= */

.hero {
    position: relative;
    height: 700px;
    width: 100%;
    overflow: hidden;
    background: #001F3B
}

/* Specific background for the main page hero */
.hero-main {
    background-color: #030414; /* New color for the main page */
}

/* Header styles */
.menu-header {
  background-color: #001F3B;
  color: #fff;  
  padding-top: 20px;
  padding-bottom: 20px;
  display: flex; /* Make the header a flex container */
  align-items: center; /* Vertically align the logo and links */
   justify-content: space-between; /* Add this */
}

.header-inner {
  display: flex;
  align-items: center;
  width: 100%;
}

.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    overflow: hidden;
}

.hero-video video {
    width: 100%; /* Keep default width */
    height: 100%;
    object-fit: cover;
    position: absolute;
    transform: translateX(20%); /* Shift 25% to the right */
}

.hero-video-sdi video {
    width: 100%; /* Keep default width */
    height: 100%;
    object-fit: cover;
    position: absolute;
    transform: translateX(0%); /* Shift 25% to the right */
}

.hero-video-sdi-mobile video {
   display:none;
}



@media (max-width: 768px) {
.hero-video-sdi video {
   display:none;

}

.hero-video-sdi-mobile video {
   display:block;
   width: 100%; /* Keep default width */
    height: 100%;
    object-fit: cover;
    position: absolute;
    transform: translateX(-50%); /* Shift 25% to the right */
}

}

.hero-contact {
    position: relative;
    max-height: 400px;
    width: 100%;
    background-color: #001F3B;
    color: #ffffff;

}

.hero .content-container {
    position: relative;

    z-index: 2;
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: flex-start; /* Align content to the top */
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.hero .text-block {
    max-width: 50%;
    color: #ffffff;
    vertical-align: center;
    top: 120px;
}

.hero img {
    position: relative;
    max-width: 45%;
    height: auto;
    z-index: 2;
    -webkit-filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5));
    filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.5))
}

.hero-title {
    font-size: 76px;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 12px;
}

.hero-text {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    margin-top: 0px;
    margin-bottom: 42px;
}

@media (max-width: 768px) {
    .hero-title {
        font-size: 42px;
    }

    .hero-text {
        font-size: 18px;
    }



  /* Hide the canvas on mobile to remove animation visuals */
  #shapeCanvas {
    display: none;
  }

  .hero .content-container {
    max-width: 100%;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 48px;
    flex-direction: column; /* Stack text and image vertically */
    align-items: center;
    text-align: center;
    margin-top: 0px;

}

}


.caption {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.5
}


/* Existing CSS for the hero button */
.hero-button.fixed-bottom-button {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    background-color: #32B0EB;
    border: none;
    border-radius: 12px;
    padding: 0 42px;
    margin-top: 32px;
    height: 64px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.hero-button.fixed-bottom-button:hover {
    background-color: #0056c4;
}

.hero-button.fixed-bottom-button:active {
    transform: scale(0.95);
}

.hero-button:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    color: #666666
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
    .hero-button.fixed-bottom-button {
        position: fixed;     /* so it stays at screen bottom, not container bottom */
        bottom: 32px;        /* 32px from the bottom edge of the screen */
        left: 20px;             /* span from left edge... */
        right: 20px;            /* ...to right edge */
        width: calc(100% - 40px);         /* full available width */
        margin: 0;           /* no margin, so it truly spans the entire viewport width */
        max-width: 100%;     /* remove any previous max-width limit */
        transform: none;     /* no horizontal translate shift */
        z-index: 1000;       /* stay above other content */
        border-radius: 12px;    /* optional: if you want the button edges flush, remove if not */
    }
}

.primary-button {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    color: #ffffff;
    background-color: #0086FF;
    border: none;
    border-radius: 6px;
    padding: 0 24px;
    height: 48px;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    cursor: pointer;
    -webkit-transition: background-color 0.3s ease, -webkit-transform 0.1s ease;
    transition: background-color 0.3s ease, -webkit-transform 0.1s ease;
    transition: background-color 0.3s ease, transform 0.1s ease;
    transition: background-color 0.3s ease, transform 0.1s ease, -webkit-transform 0.1s ease
}

.primary-button:hover {
    background-color: #0056c4
}

.primary-button:active {
    -webkit-transform: scale(0.95);
    transform: scale(0.95)
}

.primary-button:disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    color: #666666
}


*,
:after,
:before {
    -webkit-box-sizing: inherit;
    box-sizing: inherit
}


.image-placeholder {
    width: 300px;
    height: 180px;
    background: #ccc;
    border-radius: 8px;
}


/* ================== */
/* Versatile Software Content */
/* ================== */

.versatile-content {
    margin-top: 20px;
    display: none;
    padding: 24px;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.versatile-content.active {
    display: block;
}

/* ================== */
/* Mobile Responsiveness */
/* ================== */

@media (max-width: 768px) {
    .versatile-tabs {
        flex-direction: column;
        align-items: center;
    }

    .versatile-tab {
        width: 100%;
        text-align: center;
        margin-right: 0;
        margin-bottom: 10px;
    }

    .versatile-content {
        padding: 16px;
    }
}


/* === Container & layout === */
.support-container {
  max-width: 1280px;
  margin: 0 auto;
  padding-left: 80px;
  padding-right: 80px;
  display: flex;
  flex-wrap: wrap; /* allows wrapping on smaller screens */
}

/* .col-6 => half width on desktop */
.col-6 {
  width: 50%;
  box-sizing: border-box;
}

/* On mobile, .col-6 becomes full width */
@media (max-width: 768px) {
  .col-6 {
    width: 100%;
  }
}

/* Title (left column on desktop) */
.support-title {
  /* .col-6 sets its width to 50% on desktop */
  display: flex;
  min-height: 200px; /* optional: just a placeholder height */
  /* style as needed */
}

/* Right column => .support-right-col also .col-6 (50% on desktop) */
.support-right-col {
  /* no extra rules needed unless you want more styling */
}

/* === Desktop row (icon + text) === */
.support-row {
  display: flex;         /* icon left, text right in one row */
  margin-bottom: 30px;
}  

/* Icon container: fixed ~100x100 size */
.support-icon {
  flex: 0 0 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

/* Actual icon image inherits that ~100px space */
.support-icon img {
  width: 100%;
  height: auto;   
  object-fit: contain;
}

/* Text block next to icon */
.support-text {
  flex: 1;
  padding: 10px;
  /* your background or text color if needed */
}

/* === Mobile override === */
@media (max-width: 768px) {

  /* Make container vertical */
  .support-container {
    flex-direction: column;
    padding-left: 48px;
    padding-right: 48px;
  }

  /* Each row becomes a 2-col grid: 
     icon on the left, heading+paragraph in the 2nd col */
  .support-row {
    display: grid; 
    grid-template-columns: 60px 1fr; 
    grid-template-rows: auto auto; 
    gap: 10px;
    margin-bottom: 30px;
  }

  /* Icon spans both rows in col 1 */
  .support-icon {
    grid-column: 1 / 2;
    grid-row: 1 / 3; 
    width: 50px;
    height: 50px;
    margin: 0;
  }

  /* Text (heading + paragraph) occupy col 2, rows 1–2 */
  .support-text {
    grid-column: 2 / 3;
    grid-row: 1 / 3;
    padding: 10px;
  }

  .support-title {
  /* .col-6 sets its width to 50% on desktop */
  display: flex;
  min-height: 100px; /* optional: just a placeholder height */
  /* style as needed */
}
}

.equipment-item {
    background: #F8F8F8;  /* Background color */
    border-radius: 10px;  /* Border radius */
    padding: 28px;
    display: flex;
    flex-direction: column;
    align-items: center; /* Centers both wrappers horizontally */
}

.equipment-text-wrapper {
    text-align: left;  /* Ensure text remains left-aligned */
    width: 100%;  /* Occupy full available space */
}

.equipment-image-wrapper {
    display: flex;
    justify-content: center;  /* Centers image horizontally */
    align-items: center;  /* Centers image vertically */
    height: 100%;  /* Ensures it takes the full height of its container */
    min-height: 250px;  /* Adjust height to balance layout */
}

.equipment-image-wrapper img {
    max-width: 100%;  /* Ensure image scales properly */
    max-height: 100%; /* Prevents image overflow */
    height: auto;
    padding: 50px;
    object-fit: contain;  /* Keeps the image inside the div without cropping */
}

@media (max-width: 768px) {

    .equipment-image-wrapper img {
        padding:16px;
    }
}

.image-crop {
    width: 700px; /* Adjust width to find optimal size */
    height: 700px; /* Adjust height to find optimal size */
    overflow: hidden; /* Hide the overflow part */
    border-radius: 8px; /* Optional, for rounded corners */
}

.image-crop img {
    width: 100%; /* Scale image to container width */
    height: 100%; /* Scale image to container height */
    object-fit: cover; /* Crop the image to fit */
    object-position: center; /* Center the image within the cropped area */
}

/* Overall Section Styling */
.jaw-set {
    text-align: center;
}


.row-feature {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Top Block (Single Wide Section) */
.set-block-up {
    display: flex;
    align-items: stretch;
    background: #EAF3F8;
    border-radius: 16px;
    max-width: 1200px;
    margin: 0 auto 28px auto;
    overflow: hidden;
    padding: 0;
}

.set-content {
    flex: 1;
    padding: 28px;
    text-align: left;
}

.set-content h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.set-content p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

.set-image {
    flex: 1;
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
}

.set-image-myo {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    padding: 70px;
}


.set-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

/* Bottom Blocks Layout */
.set-block-bottom-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
}

.set-block-bottom {
    background: #EAF3F8;
    border-radius: 16px;
    padding: 28px;
    flex: 1 1 calc(50% - 30px); /* Two equal columns with gap consideration */
    max-width: 585px; 
    text-align: left;
    box-shadow: none; /* No shadows as requested */
}

.set-block-bottom-myo {
    background: #EAF3F8;
    border-radius: 16px;
    padding: 28px;
    padding-bottom: 0px;
    flex: 1 1 calc(50% - 30px); /* Two equal columns with gap consideration */
    max-width: 585px; 
    text-align: left;
    box-shadow: none; /* No shadows as requested */
}

.set-block-bottom h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 16px;
}

.set-block-bottom p {
    font-size: 16px;
    color: #333;
    line-height: 1.6;
}

/* Two Images in Bottom Section */
.set-images {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}

/* Individual image sizing */
.set-image-left {
    width: 20%;
    height: 20%;
    border-radius: 8px;
}

.set-image-right {
    width: 40%;
    height: 40%;
    border-radius: 8px;
}

.set-image-single {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive Styles */
@media (max-width: 768px) {
    .set-block-up {
        flex-direction: column;
        border-radius: 0px;
    }

    .set-content {
        padding: 30px;
    }

    .set-image img {
        width: 100%;
        height: auto;
    }

    .set-block-bottom-container {
        flex-direction: column;
        gap: 20px;
    }

    .set-block-bottom {
        max-width: 100%;
        padding: 30px;
        border-radius: 0px;
    }

    .set-images {
        flex-direction: column;
        align-items: center;
    }

    .set-image-left {
        width: 40%;
        height: 40%;

    }

    .set-image-right {

        width: 40%;
        height: 40%;

    }

    .set-image-single {
        width: 100%;
    }
}

@media (max-width: 768px) {
  /* ... existing mobile styles ... */

  /* Reorder the .reverse-row columns on mobile */
  .reverse-row {
    display: flex; /* ensure it's a flex container */
    flex-direction: column; /* stack columns top-to-bottom */
  }
  .reverse-row .col-6:nth-child(1) {
    order: 2; /* the first col becomes second on mobile */
  }
  .reverse-row .col-6:nth-child(2) {
    order: 1; /* the second col becomes first on mobile */
  }
}

.sdi-studio-container {
    max-width: 1280px;
    background-color: #F8F8F8;
    padding: 40px;
    margin: 0 auto;
    margin-bottom: 0px;
    box-sizing: border-box;
}

/* Meta-container: Always 100% width */
.meta-container {
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Inner container: Restricts width to 1120px */
.inner-container {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    box-sizing: border-box;
}

.inner-container-top-menu {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* Inner container: Restricts width to 1120px */
.inner-container-bg {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    background-color: #E9F8FF;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .inner-container {
        padding-left: 24px;
        padding-right: 24px;
    }
  }

  .protocol-container {
    max-width: 1160px;
    padding: 60px;
    color: #ffffff;
    margin: 0 auto;
    margin-top: 100px;
    margin-bottom: 100px;
    background-color: #0067DB;
    border-radius: 24px;
    box-sizing: border-box;
}

.protocol-step {
    display: flex;
    align-items: top;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 30px;
}

.protocol-text {
    flex: 1;
    max-width: 50%;
}

.protocol-text h3 {
    font-size: 20px;
    font-weight: bold;
}

.protocol-text p {
    font-size: 16px;
    line-height: 1.5;
}

.protocol-image {
    flex: 1;
    max-width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.protocol-image img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

/* Responsive styles for mobile */
@media (max-width: 768px) {
  .protocol-container {
    padding-left: 24px;
    padding-right: 24px;
    border-radius: 0px;
    margin-bottom: 0px;
  }

  .protocol-step {
    /* Stack items */
    flex-direction: column;
    align-items: flex-start;

    /* Reduce gap & margin on mobile */
    gap: 0px;         /* instead of 40px */
    margin-bottom: 56px;  /* instead of 30px */
  }

  .protocol-text,
  .protocol-image {
    max-width: 100%;
  }

  .protocol-image img {
    width: 100%;
  }
}

.contact-container {
    max-width: 630px;
    margin-top: 0px;
    padding-top: 100px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;

}

@media (max-width: 768px) {
    .contact-container {
        padding-left: 24px;
        padding-right: 24px;
    }
}

.contact-list li {
    font-size: 20px;
}

/* Full-width container: Stretches 100% */
.full-width {
    width: 100%;
    padding: 0; /* Optional, if padding is not needed */
    box-sizing: border-box;
}

.full-width img {
    width: 100%;
}

.full-width-contact {
    width: 100%;
    padding: 0; /* Optional, if padding is not needed */
    padding-bottom: 128px;
    box-sizing: border-box;
    background-color: #091F39;
    color: #fff;
}

.full-width-versatile {
    width: 100%;
    padding-top: 5px; /* Optional, if padding is not needed */
    padding-bottom: 20px;
    box-sizing: border-box;
    background: linear-gradient(135deg, #32B0EB, #055B9F);
    color: #fff;
}


.full-width-bg {
    width: 100%;
    padding: 0; /* Optional, if padding is not needed */
    box-sizing: border-box;
    background-color: #E9F8FF;
}


img {
    max-width: 100%;
    height: auto;
    display: block
}

.logo img {
    height: 26px;
    width: auto
}

a {
    text-decoration: none;
    color: inherit
}

li,
ul {
    list-style: none;
    margin: 0;
    padding: 0
}

.content-container,
.section-inner {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    padding: 60px 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}


section.fullwidth-section {
    width: 100%;
}

section.fullwidth-section .section-inner {
    padding: 60px 20px;
}

.full-width {
    width: 100%;
    margin: 0;
    padding: 0; /* Optional, to remove additional spacing */
    box-sizing: border-box; /* Ensures padding doesn’t add to total width */
}

/* ============================== */
/* Made by Dentists for Dentists  */
/* ============================== */

.dent-for-dent {
    max-width: 1280px;
    margin: 0 auto;
    padding: 60px 20px;
    padding-left: 80px;
    padding-right: 80px;
    text-align: center;
}

.dent-for-dent-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columns per row */
  grid-template-rows: repeat(2, auto);   /* 2 rows total */
  gap: 20px;
}

.dent-for-dent-item {
  background: #F6F6F6;
  padding: 30px;
  text-align: left;
  height: 350px;
  box-sizing: border-box;
  overflow: hidden; /* hides any content that extends beyond 270px */
}

/* 1) Occupies column 1, row 1 */
.dent-for-dent-item:nth-of-type(1) {
  grid-column: 1 / 2; /* column 1 only */
  grid-row: 1;
}
/* 2) Occupies columns 2–3, row 1 */
.dent-for-dent-item:nth-of-type(2) {
  grid-column: 2 / 4; /* columns 2 and 3 */
  grid-row: 1;
}
/* 3) Occupies columns 1–2, row 2 */
.dent-for-dent-item:nth-of-type(3) {
  grid-column: 1 / 3; /* columns 1 and 2 */
  grid-row: 2;
}
/* 4) Occupies column 3, row 2 */
.dent-for-dent-item:nth-of-type(4) {
  grid-column: 3 / 4; /* column 3 only */
  grid-row: 2;
}


/* The block that places the image on the right */
.dent-for-dent-item.img-right {
  display: flex;
  flex-wrap: wrap;           /* allows wrapping on smaller screens if needed */
  align-items: flex-start;   /* or 'center' if you want them vertically aligned */
  justify-content: space-between;
}


.two-col-image, .img-right img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    display: block;
}

.two-col-block {
  /* Nest a new grid with 2 columns */
  display: grid;
  grid-template-columns: 1fr 1fr; 
  gap: 0;          /* no gap so the image is flush */
  padding: 0;      /* remove extra padding if needed */
  margin: 0;

}

/* Provide some padding for text if desired */
.two-col-text {
  padding: 30px;  /* or whatever margin you want for text only */
}


@media (max-width: 768px) {
    .dent-for-dent {
        padding-left: 24px;
        padding-right: 24px;
    }

  /* Single-column layout for the grid */
  .dent-for-dent-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 20px;
  }

  /* Remove the custom spanning logic */
  .dent-for-dent-item:nth-of-type(1),
  .dent-for-dent-item:nth-of-type(2),
  .dent-for-dent-item:nth-of-type(3),
  .dent-for-dent-item:nth-of-type(4) {
    grid-column: auto;
    grid-row: auto;
    height: 100%;
  }

  /* For the two-col-block, revert to stacked layout */
  .two-col-block {
    display: block; /* text first, image second */
  }
  .two-col-text {
    padding: 20px; /* or whatever */
  }

 /* Force the image to 270px, covering any extra with object-fit */
  .dent-for-dent-item.img-right img {
    display: block;
    width: 100%;         /* full device width */
    height: 100%;       /* fixed vertical size */
    object-fit: cover;   /* crop edges if the image is too tall/wide */
    margin: 0;           /* remove default spacing */
  }

}





/* ===================== */
/*       DESKTOP         */
/* ===================== */
.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #001F3B;
}

.menu-bg {
  position: fixed; /* Fixes the menu to the top of the viewport */
  top: 0; /* Aligns it to the top of the screen */
  width: 100%; /* Ensures full width */
  background: #001F3B; /* Same background as menu-header */
  z-index: 1000; /* Ensures the menu stays above other content */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Adds a subtle shadow for better visibility */
}

/* Show desktop nav inline */
.desktop-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Links */
.desktop-nav ul li a {
  color: #fff;
  text-decoration: none;
}

/* Hide the hamburger and overlay by default on desktop */
.menu-toggle,
.overlay-nav {
  display: none;
}

@media (max-width: 768px) {
    .menu-header {
        padding-left: 24px;
        padding-right: 24px;
    }
}

@media (max-width: 768px) {
  /* Hide desktop nav on mobile */
  .desktop-nav {
    display: none;
  }

/* For mobile screens */
@media (max-width: 768px) {
    .hero-video video {
        width: 100%; /* Normal width for mobile */
        height: 100%;
        object-fit: cover;
        position: absolute;
        left: 0; /* Center the video */
        transform: translateX(0); /* Remove any horizontal shifts */
    }
}

/* Default: Show desktop version, hide mobile */
.sdi-desktop-video {
  display: block;
}
.sdi-mobile-video {
  display: none;
}

/* On mobile, flip them */
@media (max-width: 768px) {
  .sdi-desktop-video {
    display: none;   /* hide desktop */
  }
  .sdi-mobile-video {
    display: block;  /* show mobile */
  }
}



  /* Show the hamburger */
  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .menu-toggle span {
    width: 25px;
    height: 3px;
    background: #fff;
    margin: 4px 0;
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
  }

  .menu-icon {
  /* So transforms consider the entire 30x30 box */
  transform-box: fill-box;
  /* We want transformations around the 15,15 center of the SVG */
  transform-origin: center;
}

  /* When menu is active, rotate lines to form a cross (X) */
.menu-toggle.active .menu-icon line:nth-child(1) {
    opacity: 0;
}

.menu-toggle.active .menu-icon line:nth-child(2) {
    transform: rotate(45deg);
    transform-origin: center;
}

.menu-toggle.active .menu-icon line:nth-child(3) {
    transform: rotate(-45deg);
    transform-origin: center;
}

.menu-toggle.active .menu-icon line:nth-child(4) {
    opacity: 0;
}

  /* The mobile overlay is hidden by default. */
  .overlay-nav {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #001F3B;
    z-index: 100;
    padding: 80px 20px 20px;
    /* optional: use flex to position links */
    flex-direction: column;
    gap: 20px;
  }

  .overlay-nav.active {
    display: block; /* or flex, depending on your layout */
  }

  /* Close button in overlay */
.close-menu {
    position: absolute;
    top: 20px;
    right: 20px; /* Ensure proper spacing from the edge */
    width: 48px;  /* Increase width */
    height: 48px; /* Increase height */
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px; /* Increase size for visibility */
    cursor: pointer;
}

  .overlay-nav ul {
    list-style: none;
  }

  .overlay-nav ul li a {
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    line-height: 2;
    text-decoration: none;
  }
}

@media (max-width: 768px) {

.overlay-nav ul {
    margin-top: 32px;
  }

.overlay-nav ul li {
    color: #fff;
    font-size: 32px;
    font-weight: 400;
    line-height: 2;
    text-decoration: none;
    margin-bottom: 42px;
  }

}


/* =============== */
/* Feature Block */
/* =============== */
/* Container for the feature block */
.feature-block-container {
    display: flex;
    flex-wrap: nowrap; /* Prevents wrapping */
    align-items: flex-start; /* Align items to the top */
    justify-content: space-between;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
    margin-top: 24px;
}

/* Title section */
.feature-title-container {
    display: flex;
    align-items: center;
    gap: 10px; /* Adjust spacing between icon and title */
}

.feature-title-container img {
    max-height: 26px;
}

/* Left column: Key Features */
.feature-content {
    flex: 1 1 50%; /* 50% width, reduces on resize */
    max-width: 600px;
    text-align: left;
}

/* Right column: Image */
.feature-image {
    flex: 1 1 50%; /* 50% width, reduces on resize */
    display: flex;
    justify-content: flex-end; /* Align image to the right */
    align-items: flex-start; /* Align to top */
    max-width: 600px;
}

/* Image styling */
.feature-image img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Factoids grid (feature list) */
.factoids-grid {
    margin-top: 10px;
}

/* Reduce spacing between subtitles and text */
.factoid {
    margin-top: 10px;
}

.factoid p {
    margin: 0px;
}

/* Divider line under Key Features */
.feature-divider {
    border: none;
    height: 1px;
    background: #32B0EB;
    margin-top: 0px;
}

/* Responsive: One column on mobile */
@media (max-width: 768px) {
    .feature-block-container {
        flex-direction: column;
        gap: 20px;
    }

    .feature-content,
    .feature-image {
        max-width: 100%;
    }

    .feature-image {
        justify-content: center;
    }
}


/************************/
/* FACESCAN SECTION     */
/************************/

.face-scan-section {
    position: relative;
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 200px auto;
    padding: 60px 40px; /* Added padding for inner spacing */
    display: flex;
    align-items: center;
    gap: 40px; /* Reduced gap to bring text and image closer */
    flex-wrap: wrap;
}

.face-scan-image img {
    width: 100%;
    max-width: 400px;
    margin-bottom: 20px;
}

.face-scan-text {
    max-width: 500px;
}

.face-scan-text h2 {
    font-size: 36px;
    margin-bottom: 20px;
}

.face-scan-text h2 span {
    color: #4b9bfd;
}

.face-scan-text p {
    font-size: 16px;
    margin-bottom: 20px;
}

.face-scan-text a {
    color: #4b9bfd;
    text-decoration: none;
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}


#shapeCanvas {
    position: absolute;
    top: 0;
    left: 20%;
    width: 100%;
    height: 100%;
    z-index: 1
}

.block {
    background-color: #ffffff; /* Set default background to white */
    border-radius: 8px; /* Optional for a cleaner look */
}

.block .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.block .row {
    margin-top: 40px;
 width: 100%;
  display: flex;
  align-items: flex-start; /* Align items to the top */
}

.block .col-6 {
  width: 48%; /* Half-width on large screens */
}

.block .image-placeholder {
  width: 100%;
  height: 150px; /* Placeholder size */
  background-color: #ccc; /* Light grey */
  border-radius: 8px; /* Match block corners */
}

/***********************/
/*  AD BLOCK          */
/***********************/

.ad-block {
    display: flex;
    align-items: stretch; /* Ensures both content and image have equal height */
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    margin-top: 0px;
    margin-bottom: 80px;
    background-color: #F8F8F8;
    border-radius: 12px;
}

/* Title aligned to the top */
.ad-title {
    margin: 0;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 32px;
}

/* Left content area */
.ad-block-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: flex-start; /* Align items to the left */
    text-align: left;
    padding: 80px 40px; /* Adjust padding as needed */
}

/* Image section with adjustable margins */
.ad-block-image {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image with customizable margins */
.ad-block-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    margin-top: 20px;
    margin-bottom:0px;
}


/* Responsive Design */
@media (max-width: 768px) {
    .ad-block {
        flex-direction: column;
        text-align: left;
        padding: 40px 20px;
        border-radius: 12px;
    }

    .learn-more-link {
        display: inline-flex; /* Ensures alignment */
        justify-content: left;
        width: 100%; /* Allows full width centering */
    }

    .ad-block-content {
        width: 100%;
        padding: 20px;
    }

    .ad-block-image {
        width: 100%;
    }
}


/***********************/
/*  CTA BLOCK          */
/***********************/

.cta-block {
    display: flex;
    align-items: stretch; /* Ensures both content and image have equal height */
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    margin-top: 80px;
    margin-bottom: 80px;
    background-color: #001F3B;
    border-radius: 12px;
}

/* Title aligned to the top */
.cta-title {
    margin: 0;
    font-size: 36px;
    font-weight: bold;
    color: #fff;
}

.cta-block p {
    color: #ffffff;
}

/* Right content area */
.cta-block-content {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center content vertically */
    align-items: flex-start; /* Align items to the left */
    text-align: left;
    padding: 80px 40px; /* Adjust padding as needed */
    margin-left: 40px;
}

/* Image with customizable margins */
.cta-block-image img {
    width: 100%;
    height: auto;
    margin-top: 40px;
    margin-left: 80px;
    margin-bottom: 0px;
}

/* Mobile Overrides */
@media (max-width: 768px) {
    .cta-block {
        flex-direction: column;       /* Stack image and text vertically */
        max-width: 100%;              /* Full-width container */
        width: 100%;
        padding: 0;                   /* Remove left/right padding */
        margin: 0;                    /* Remove auto margins */
        border-radius: 12px;             /* Full-width usually means no rounded corners */
    }
    
    .cta-block-image img {
        margin: 0;                    /* Remove extra margins */
        width: 100%;                  /* Ensure full width */
    }
    
    .cta-block-content {
        padding-top: 48px;                /* Adjust padding for mobile */
        padding-bottom: 56px;
        margin: 0;                    /* Remove left margin */
        text-align: center;           /* Center text on mobile */
        align-items: center;          /* Center content horizontally */
    }
    
    .cta-title {
        font-size: 28px;              /* Optionally reduce title size on mobile */
    }
}

/* ================ */
/* FREE ONBOARDING  */
/* ================ */

/* Free Onboarding Section */
.free-onboarding {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Each block takes 50% width on desktop */
.onboarding-block {
    flex: 1;
    max-width: 50%;
    text-align: center;
}

/* Image styles for onboarding section */
.onboarding-image {
    width: 100%;
    height: auto;
    border-radius: 8px; /* Optional rounded corners */
}

/* Text styling */
.onboarding-text {
    text-align: left;
    padding: 0px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .free-onboarding {
        flex-direction: column; /* Stack blocks vertically */
        gap: 20px;
    }

    .onboarding-block {
        max-width: 100%; /* Full width on mobile */
    }

    .onboarding-image {
        margin-bottom: 20px; /* Space between image and text */
    }
}

/* ================ */
/* Learn more links */
/* ================ */
.learn-more-link {
    font-family: "Inter", sans-serif;
    font-weight: 600; /* Semibold */
    font-size: 20px;
    color: #0086FF; /* Blue link color */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px; /* Spacing between text and circle */
    transition: color 0.3s ease; /* Optional: smooth color change */
}

.learn-more-link .arrow-circle {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 23px;
    height: 23px;
    background-color: #0086FF; /* Circle color */
    color: #FFFFFF; /* Arrow color */
    border-radius: 50%;
    font-size: 18px; /* Size of the arrow */
    line-height: 1; /* Center-align arrow inside the circle */
    text-align: center;
    font-family: "Inter", sans-serif;
    font-weight: 600; /* Match link font weight */
    transform: rotate(-90deg); /* Rotates the ↓ by 45° */
    transition: transform 0.3s ease; /* Smooth movement effect */
}

.learn-more-link:hover .arrow-circle {
    transform: rotate(-90deg) translateY(5px); /* Keep it rotated and shift right */
}

@media (max-width: 768px) {
    .learn-more-link .arrow-circle {
        display: none;
    }
}


/* Base container styling */
.inner-container .section-inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}
.h2-center {
  text-align: center;
}

/* DESKTOP layout: col1, col2, col4 in a row; col3 hidden */
.desktop-layout {
  display: flex;
  gap: 40px;
  margin-top: 40px;
  align-items: flex-end;
}
.desktop-col {
  flex: 1;
  min-width: 180px;
}
.col1 div {
  color: #888;  /* Gray for labels */
  margin-bottom: 5px;
  padding-left: 60px;
}
.col2 div, .col4 div {
  color: #000;  /* Black for spec text */
  margin-bottom: 5px;
}
.col3 {
  display: none; /* hidden on desktop */
}
.desktop-col h3 {
  font-weight: bold;
  margin-bottom: 10px;
}

/* MOBILE layout: hidden by default on larger screens */
.mobile-layout {
  display: none;
  margin-top: 40px;
  align-items: flex-end;
}
.mobile-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
   align-items: flex-end;
}
.mobile-col {
  flex: 1;
  min-width: 150px;
}
.mobile-col.col1 div,
.mobile-col.col3 div {
  color: #888;
  margin-bottom: 5px;
}
.mobile-col.col2 div,
.mobile-col.col4 div {
  color: #000;
  margin-bottom: 5px;
}
.mobile-col h3 {
  font-weight: bold;
  margin-bottom: 10px;
}

/* MEDIA QUERY: switch to mobile on smaller screens */
@media (max-width: 768px) {
  .desktop-layout {
    display: none;
  }
  .mobile-layout {
    display: block;
  }
}

.features {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 40px
}

.features .feature {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center
}

.set-items {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 40px
}

.set-item {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 calc(33.333% - 40px);
    flex: 1 1 calc(33.333% - 40px)
}

.footer {
    background-color: #0C1930;
    color: #ffffff;
    width: 100%;
}

.footer .container {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    padding: 0 20px
}

.inner-container-footer {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto; /* This actually centers the container within the page */
    }


/* Mobile adjustments for the footer */
@media (max-width: 768px) {
  /* Make all columns stack vertically */
  .inner-container-footer {
    padding-left: 24px;
    padding-right: 24px;
    padding-bottom: 100px;

  }

  .inner-container-footer .row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left; /* Ensure left alignment */

  }
  .inner-container-footer .row > [class^="col-"] {
    width: 100%;
    margin-bottom: 10px; /* Optional: add space between items */
  }
}

.footer .row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 20px
}

.footer .footer-address,
.footer .footer-contact {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    max-width: calc(33.33% - 20px)
}

.footer .footer-address {
    text-align: right
}

.footer .social-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    gap: 20px;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
}

.footer .social-icons img {
    height: 24px;
}

@media (max-width: 768px) {
    .footer .social-icons {
        display: flex;
    }

}



input,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    margin-top: 5px
}

label {
    font-weight: 500;
    display: block;
    margin-bottom: 5px
}

.grid-container {
    max-width: 1280px;
    padding-left: 80px;
    padding-right: 80px;
    margin: 0 auto;
    padding: 0 20px;
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr 20px 1fr;
    grid-template-columns: repeat(12, 1fr);
    gap: 20px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px
}

[class^=col-] {
    padding: 0 10px;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1
}

.col-1 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(8.33% - 20px);
    flex: 0 0 calc(8.33% - 20px);
    max-width: calc(8.33% - 20px)
}

.col-2 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(16.66% - 20px);
    flex: 0 0 calc(16.66% - 20px);
    max-width: calc(16.66% - 20px)
}

.col-3 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(25% - 20px);
    flex: 0 0 calc(25% - 20px);
    max-width: calc(25% - 20px)
}

.col-4 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(33.33% - 20px);
    flex: 0 0 calc(33.33% - 20px);
    max-width: calc(33.33% - 20px)
}

.col-5 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(41.66% - 20px);
    flex: 0 0 calc(41.66% - 20px);
    max-width: calc(41.66% - 20px)
}

.col-6 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(50% - 20px);
    flex: 0 0 calc(50% - 20px);
    max-width: calc(50% - 20px)
}

.col-7 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(58.33% - 20px);
    flex: 0 0 calc(58.33% - 20px);
    max-width: calc(58.33% - 20px)
}

.col-8 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(66.66% - 20px);
    flex: 0 0 calc(66.66% - 20px);
    max-width: calc(66.66% - 20px)
}

.col-9 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(75% - 20px);
    flex: 0 0 calc(75% - 20px);
    max-width: calc(75% - 20px)
}

.col-10 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(83.33% - 20px);
    flex: 0 0 calc(83.33% - 20px);
    max-width: calc(83.33% - 20px)
}

.col-11 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(91.66% - 20px);
    flex: 0 0 calc(91.66% - 20px);
    max-width: calc(91.66% - 20px)
}

.col-12 {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 calc(100% - 20px);
    flex: 0 0 calc(100% - 20px);
    max-width: calc(100% - 20px)
}

@media (max-width: 768px) {
  .block .col-6 {
    width: 100%; /* Full width on mobile */
  }

  .block .image-placeholder {
    margin-top: 10px; /* Space below text */
  }
}

@media (max-width:1024px) {
    .grid-container {
        -ms-grid-columns: (1fr)[8];
        grid-template-columns: repeat(8, 1fr)
    }
}

@media (max-width:768px) {
    .row {
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column
    }

    .col-4,
    .col-6,
    .col-8 {
        -webkit-box-flex: 100%;
        -ms-flex: 100%;
        flex: 100%;
        max-width: 100%
    }
}

@media (max-width:480px) {
    .grid-container {
        -ms-grid-columns: (1fr)[2];
        grid-template-columns: repeat(2, 1fr)
    }
}


/* Fullwidth Section with Gradient Background */
.ai-machine-computing {
   background: #001C33;
    position: relative;
    display: flex;
    flex-direction: column;  /* Stack inner sections vertically */
    overflow: hidden;
    margin-top: 0;
    padding-top: 0;
    /* Removed fixed height to allow auto wrapping of content */
}

.ai-machine-section {
    position: relative;
}

.bg-icon {
    position: absolute;
    width: 17px;   /* Adjust width to show 100% size (reduce if needed) */
    height: auto;
    z-index: 0;    /* Keep behind main content */
    pointer-events: none;
}

/* Graphic Section (SVG Container) */
#ai-wave-container {
    position: relative; /* Ensures absolute positioning within the container works as intended */
    width: 100%;
    height: 400px; /* Adjust the height as needed for your design */
    overflow: hidden;
}

/* CTA Section adjustments for desktop */
.cta-section {
    margin-top: 60px;
    text-align: center;
    min-height: 700px; /* Increase height for desktop */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


/* Mobile Responsiveness */
@media (max-width: 768px) {
    .cta-section {
         min-height: 700px; /* Increase height for mobile */
    }

    /* Graphic Section (SVG Container) */
#ai-wave-container {
    position: relative; /* Ensures absolute positioning within the container works as intended */
    width: 100%;
    height: 300px; /* Adjust the height as needed for your design */
    overflow: hidden;
    }
}

/* ==================================
   Widgets Container (Desktop)
================================== */
.widgets-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2 widgets per row */
  gap: 20px;
  margin: 40px 0;
}

/* One widget (Desktop) */
.widget {
  /* Remove fixed height so it can grow/shrink */
  display: flex;
  flex-direction: row;
  /* Align text at top */
  align-items: flex-start;
  
  /* The same background/border styles as before */
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  
  /* Some padding and gap between image & text */
  padding: 10px;
  gap: 20px;
}

.widget img {
  /* Ensure it can shrink if the container narrows */
  max-width: 50%; /* or adjust to your preference */
  height: auto;
  border-radius: 8px;
  object-fit: cover; /* if you'd like to crop the image when container is narrower */
}

/* ==================================
   Mobile Responsive
================================== */
@media (max-width: 768px) {
  .widgets-container {
    /* 1 widget per row on mobile */
    grid-template-columns: 1fr;
  }

  .widget {
    /* Stack image + text vertically */
    flex-direction: column;
    text-align: left;  /* or center if you prefer */
    gap: 10px;         /* reduce gap for mobile */
  }

  .widget img {
    /* Full width on mobile; can remove max-width if you want it narrower */
    max-width: 100%;
    margin-bottom: 0;
  }
}


/* ===================== */
/*        MOBILE         */
/* ===================== */


@media (max-width: 768px) {
    .hero {
        height: 100vh; /* Full viewport height */
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        justify-content: left; /* Center content vertically */
        align-items: center;
        background: #0C1930; /* Dark background */
        color: white; /* Adjust text color for contrast */
        text-align: center; /* Center text */
    }


    .hero .text-block {
        max-width: 90%;
        order: 1; /* Ensure text appears first */
        text-align: left;

    }

    .hero img {
        order: 2; /* Ensure image appears after text */
        max-width: 65%;
        height: auto;
        margin-top: 20px;
    }

    .hero .primary-button {
        order: 3; /* Ensure button appears after the image */
    }
}


/* Mobile Adjustments for Face Scan */
/* Mobile-friendly adjustments */
@media (max-width: 768px) {
    .face-scan-section {
        flex-direction: column; /* Stack content vertically */
        text-align: center; /* Center-align text on mobile */
        gap: 20px; /* Reduce gap between elements */
    }

    .face-scan-image,
    .face-scan-text {
        width: 100%; /* Make image and text full width */
        padding: 0 20px; /* Adjust padding for smaller screens */
    }

    .face-scan-text {
        margin-top: 20px; /* Add spacing between image and text */
    }

    /* Corner elements positioning for mobile */
    .face-scan-section > div[style*="position: absolute;"]:nth-child(1) {
        top: 32px !important;
        left: 32px !important;
        right: auto;
        bottom: auto;
    }

    .face-scan-section > div[style*="position: absolute;"]:nth-child(2) {
        top: 32px !important;
        right: 32px !important;
        left: auto;
        bottom: auto;
    }

    .face-scan-section > div[style*="position: absolute;"]:nth-child(3) {
        bottom: 32px !important;
        left: 32px !important;
        top: auto;
        right: auto;
    }

    .face-scan-section > div[style*="position: absolute;"]:nth-child(4) {
        bottom: 32px !important;
        right: 32px !important;
        top: auto;
        left: auto;
    }
}





@media (max-width: 768px) {


    .hero-section {
        position: relative;
        min-height: 100vh; /* Ensures it takes full screen height */
        display: flex;
        flex-direction: column;
        justify-content: flex-end; /* Aligns button to bottom */
    }

    .hero {
    background-color: #0C1930;
}

}


        .block .col-5,
    .block .col-7 {
        width: 100%; /* Full width for both columns on mobile */
    }
}