/* CSS Reset */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    color: #86868b!important;
}

html {
    scroll-behavior: smooth;
     scroll-padding-top: 180px; /* equal to your fixed header height */
    margin: 0!important;
    background-color: black!important;
}

/* Basic Styling */
body {
    font-family: "Inter", sans-serif;
    background-color: black;
    line-height: 200%;
}

hr {
    border-bottom: 1px solid #ccc;
}

header {
    text-align: left;
    margin:0 auto;
    padding: 5%;
    }


header.right.text {
    padding: 5%!important;
    font-weight: 600;
}

.highlight {
    color: #fff!important;
    font-weight: 600;
}

/* 2. Image Right, Text Left */
.right {
    display: flex;
    align-items: center;
}

.right img {
    flex: 1; /* 50% width */
    order: 2; /* This will put the image to the right */
    width: 60%; /* default 3:2 ratio */
    height: 33.33%;
}

.right img.aspect-1-1 {
    height: 50%;
}

.right img.aspect-2-3 {
    height: 75%;
}

.right .text {
    flex: 2; /* 50% width */
    padding-right: 2rem;
    margin-right: 5%; /* Added 5% right margin */
    text-align: center;
}


.challenge-role {
    display: flex;
    align-items: top;
}

.challenge-role .text {
    flex: 4; /* 50% width */
    margin-top: 5%;
    text-align: left;

}

.challenge-role .role {
    flex: 2; /* 50% width */
    text-align: left;
}

.black {
    background-color: #000;
    color: #fff;
}

.list {
    list-style-type: square;
    position: relative;
    padding-left: 20px!important;
    margin-bottom: 10px;
}

.list-nobullet {
    list-style-type: none;
    position: relative;
}

.list-nobullet li {
    margin:10% 0;
    border: 1px solid #fff;
    padding: 10%;
    border-radius: 10px;
    text-align: center;
    font-size: .9rem;
    font-weight: 600;
    
}

p {
    margin: 3% 0;
}

.bold {
    font-weight: 600;
}

ul {
    margin: 0!important;
    padding: 0!important;
}

.list li {
    padding-bottom: 3%;
}


.container {
    width: 100%;
    background:;
}

.navbar {
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 5%; /* Adjust as needed */
    background-color: white; /* You can change this color if needed */
    border-bottom: 1px solid #ccc; /* This line adds the border. #ccc is a light gray color */
    background-color: black;
    color: #ffffff!important;
    z-index: 9999;

}

.nav-logo {
    text-decoration: none;
    font-family: "Inter", sans-serif;
    font-size: 1.25em;;
    color: #fff!important; /* or any other color */
}

.nav-links {
    line-height: 64px;
    text-decoration: none!important;
    color: #fff!important;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    list-style-type: none;
    display: flex;
    gap: 1.5rem; /* space between links */
}

.nav-links a {
    text-decoration: none!important;
    font-family: "Inter", sans-serif;
    font-size: 1em;
    color: #fff!important; /* or any other color */
    transition: color 0.3s ease; /* Optional: for a smooth color transition */
}

.nav-links a:hover {
    color: #fafafa!important; /* Color on hover */
    text-decoration: underline!important;
}

.menu-toggle {
    display: none; /* We'll display this button only on mobile view */
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.width70 {
    width: 70%!important;
} 


main {
    width: 50%;
    margin: 0% auto!important; /* This will center the main content */
    font-size: 1.225rem;
}

section {
    margin:5rem 0!important;
}




a.primary {
  font-family: "Inter", sans-serif;  text-decoration: none!important;
    color: #333!important;
    padding: .9rem 2rem!important;
    background: #daf111!important;
    display: inline-block;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 48px;
}

a:hover.primary {
background: #333!important;
color: #fff!important;
}



footer {
    width: 100%!important;
    margin: 0 auto!important;
    display: flex!important;
}

.footer-column {
    flex: 1!important;
    margin:5% 0!important;
}

/* Perfect Fifth Typographic Scale */
h1.xl {
    font-size: 3.2em!important; /* This size is larger than the regular h1 to make it "XL". Adjust as needed. */
}
h1 { font-size: 3.137em!important; }
h2 { font-size: 2.488em!important; }
h3 { font-size: 1.976em!important; }
h4 { font-size: 1.57em!important; }
h5 { font-size: 1.25em!important; }
h6 { font-size: 1em!important; }

h1, h2, h3, h4, h5, h6 {
    font-family: "Inter", sans-serif;
    line-height: 1.2!important;
    margin: 0 0 2rem 0!important;
    color: #fff!important;
    font-weight: 600!important;
}

/* Text Alignment */
.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

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

/* ... [Previous CSS remains unchanged] ... */

/* 1. Image Left, Text Right */
.module-left {
    display: flex;
    align-items: center;
}

.module-left img {
    flex: 1; /* 50% width */
    width: 50%; /* default 3:2 ratio */
    height: 33.33%; 
}

.module-left img.aspect-1-1 {
    height: 50%;
}

.module-left img.aspect-2-3 {
    height: 75%;
}

.module-left .text {
    flex: 1; /* 50% width */
    padding-left: 2rem;
    margin-left: 5%; /* Added 5% left margin */
}

/* 2. Image Right, Text Left */
.module-right {
    display: flex;
    align-items: center;
}

.module-right img {
    flex: 1; /* 50% width */
    order: 2; /* This will put the image to the right */
    width: 50%; /* default 3:2 ratio */
    height: 33.33%;
}

.module-right video {
    flex: .5; /* 50% width */
    order: 2; /* This will put the image to the right */
}

.module-right img.aspect-1-1 {
    height: 50%;
}

.module-right img.aspect-2-3 {
    height: 75%;
}

.module-right .text {
    flex: 1; /* 50% width */
    padding-right: 2rem;
    margin-right: 5%; /* Added 5% right margin */
}

.module-full img {
    width: 100%;
    height: auto; /* Ensures the image maintains its original aspect ratio */
    display: block; /* Removes any default margins or padding from the image */
}


.label {
    color: #fff;
    opacity: 60%;
    text-transform: uppercase;
    font-size: .8rem;
    line-height: 150%;
}


@media (max-width: 1024px) {
    /* Adjust main width */
    main {
        width: 90%;
    }

    .center {
    text-align: left;
}

    .section-columns .column,
    .section-columns .column-three,
    .section-columns .column-four {
        width: 100%!important;
        margin-bottom: 2%;
    }





h1.xl {
    font-size: 2.3em!important; /* This size is larger than the regular h1 to make it "XL". Adjust as needed. */
}
h1 { font-size: 2.196em!important; }
h2 { font-size: 1.7416em!important; }
h3 { font-size: 1.3832em!important; }
h4 { font-size: 1.099em!important; }
h5 { font-size: 0.875em!important; }
h6 { font-size: 0.7em!important; }


.module-right video {
    width: 360px;
}

footer {
    text-align: left;
    margin:0;
}

.challenge-role .text {
    flex: 10; /* 50% width */
    padding-right: 2rem;
    margin-right: 5%; /* Added 5% right margin */
    text-align: left;
border:none;
}


.black {
    background-color: #000;
    color: #fff;
    padding: 5%!important;
}

.list-nobullet li {
    margin: 0 0 0 30px;
    border:none;
    padding:0px!important;
    border-radius: 0;
    font-size: 1.125rem;
    font-weight: 500;
    text-align: left;
    list-style-type: square;;
}


/* Perfect Fifth Typographic Scale */


h1.xl {
    font-size: 3.137em;
    text-align: left; /* This size is larger than the regular h1 to make it "XL". Adjust as needed. */
}
h1 { font-size: 2.488em; }
h2 { font-size: 1.976em; }
h3 { font-size: 1.57em; }

    /* Stack sections */
    .module-left, .module-right, .right, .challenge-role, footer {
        flex-direction: column;
    }

    .module-left img, .module-right img, .right img {
        /* Reset the order property for .module-right images */
        order: 0;
        /* Adjust width and height to fit the smaller viewport */
        width: 100%!important;
        padding-bottom: 2rem; /* Adjust this value depending on your desired aspect ratio. e.g., 66.67% for 3:2 */
    
    }

    .module-left .text, .module-right .text, .right .text, .challenge-role .text {
        /* Adjust padding and margins */
        padding: 1rem 0;
        margin-left: 0; 
        margin-right: 0;

        /* Left-align and vertically align to the top */
        text-align: left;
        align-self: flex-start;
    }



    /* If you have specific styles for .module-full or any other classes, you can adjust them here as well. */
}


.dark-grey {
background:rgb(29, 29, 31);
    padding: 3rem;
    border-radius: 3rem;
}

.full-black {
background:rgb(1,1,1);
    padding: 3rem;
    border-radius: 3rem;
    border: #fff solid 1px;
}

.insight-quote {
    margin-bottom: 2rem;
background:#000;
    padding: 3rem;
    border-radius: 3rem;
    border: 2px solid #86868b;
}

.lightest-grey {
    background-color: #333;
    padding: 3rem;
    border-radius: 3rem;
}

.light-grey {
    background-color: #f5f6f6;
    padding: 5%;

}

.gradient-section {
background: linear-gradient(0deg, #1D1F1D, #000 );
padding: 3rem 0;
}


/* Outcomes List */

.test-list {
    list-style-type: none;

}

.test-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    padding-bottom: 2rem;
    color: #fff!important;
}

.test-list li::before {
        content: url('images/chevron_forward_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg');
        fill: #FFFFFF!!important;
        position: absolute;
        left: 0;
        top: 3px;
    }
    

/* Outcomes List */

.outcome-list {
    list-style-type: none;

}

.outcome-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    padding-bottom: 2rem;
    color: #fff!important;
}

.outcome-list li::before {
        content: url('images/done_FILL0_wght400_GRAD0_opsz24.svg');
        fill: #FFFFFF!!important;
        position: absolute;
        left: 0;
        top: 3px;
    }

/* Hypothesis List */

.idea-list {
    list-style-type: none;
}

.idea-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 10px;
    padding-bottom: 2rem;
    color: #fff!important;

}

.idea-list li::before {
        content: url('images/lightbulb_2_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg');
        fill: #FFFFFF!!important;
        position: absolute;
        left: 0;
        top: 3px;
    }


/* Objective List */

.objectives-list {
    list-style-type: none;
}

.objectives-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    color: #fff!important;
}

.objectives-list li::before {
        content: url('images/target_FILL0_wght400_GRAD0_opsz24.svg');
        fill: #FFFFFF;
        position: absolute;
        left: 0;
        top: 3px;
    }


/* PP List */

.pp-list {
    list-style-type: none;
}

.pp-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    color: #fff!important;
}

.pp-list li::before {
        content: url('images/thumb_down_24dp_1F1F1F_FILL0_wght400_GRAD0_opsz24.svg');
        fill: #FFFFFF;
        position: absolute;
        left: 0;
        top: 3px;
    }    

/* Research List */

.research-list {
    list-style-type: none;
}

.research-list li {
    position: relative;
    padding-left: 40px;
    margin-bottom: 10px;
    color: #fff!important;
}

.research-list li::before {
        content: url('images/school_FILL0_wght400_GRAD0_opsz24.svg');
        fill: #FFFFFF;
        position: absolute;
        left: 0;
        top: 3px;
    }


.full {
    height: 300px;
}


.section-columns {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

/* For 2 columns */
.section-columns .column {
    width: 48%; /* Adjust as needed */
    margin-bottom: 2%; /* Adjust as needed */

}

.card-image-container {
    width: 100%; /* Set the container width */
    position: relative; /* Needed for absolutely positioned children */
    overflow: hidden; /* Hide overflow content */
    padding-bottom: 66.67%; /* 3:2 aspect ratio (2/3 * 100) */

}

.card-image-container img {
    position: absolute; /* Position the image absolutely */
    width: 100%; /* Ensure image fills container horizontally */
    height: auto; /* Maintain aspect ratio */
    top: 0;
    left: 0;
}

.status-tag-shipped {
  background:rgb(29, 29, 31); /* Semi-transparent dark bg */
  color: #fff!important;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  line-height: 22px;
  border-radius: 30px;
  white-space: nowrap;
  pointer-events: none; /* So it doesn’t interfere with clicks */
  z-index: 10;         /* On top of the image */
}

.status-tag-poc {
  max-height: 30px;
  background:rgb(29, 29, 31); /* Semi-transparent dark bg */
  color: white!important;
  font-weight: 600;
  font-size: 12px;
  padding: 4px 10px;
  line-height: 22px;
  border-radius: 30px;
  white-space: nowrap;
  pointer-events: none; /* So it doesn’t interfere with clicks */
  z-index: 10;         /* On top of the image */
}

.column a {
    display: inline-block;
    width: auto;
    margin-bottom: 5%!important; /* Adjust as needed */
}

/* For 3 columns */
.section-columns .column-three {
    width: 31%; /* Adjust as needed */
}

/* For 4 columns */
.section-columns .column-four {
    width: 23%; /* Adjust as needed */
    margin-bottom: 2%; /* Adjust as needed */
}


.clients {
    color: #d8d8d8;
    width: 60%;
    margin: 4% auto;
}

.tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 8px; /* Space between tags */
    margin-top: 10px; /* Space from the description or other elements */
}


/* Table */

.table-container {
  overflow-x: auto;
}

.case-table {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
}

.case-table th,
.case-table td {
  padding: 12px 20px;
  border-bottom: 1px solid #444; /* subtle divider */
}

.case-table th {
  background:rgb(29, 29, 31); /* darker header row */
  letter-spacing: 0.5px;
  line-height: 1.4;
}

.case-table tr:nth-child(even) td {
  background:rgb(29, 29, 31); /* alternating row shading */
}

.case-table tr:hover td {
  background:rgb(29, 29, 31);
}

.case-table td {
}

@media (max-width: 600px) {
  .case-table th,
  .case-table td {
    padding: 8px 10px;
    font-size: .9rem;
  }
}