section h2.h1.xl{
    font-weight: 400!important;
}

section h2.h1.xl b, section h2.h1.xl strong{
    font-weight: 700!important;
}

section#hero{
background: url('https://www.clodura.ai/wp-content/uploads/2026/03/Frame-627275.webp');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

section#hero .content-container p {
 font-size: 30px;
}

section#hero .content-container div.pill {
width: fit-content;
padding: 10px 50px;
border: 2px solid #000000;
background: #FF5500;
color: #fff;
border-radius: 33px;
font-family: DM Mono;
font-weight: 400;
font-size: 22px;
line-height: 150%;
letter-spacing: 0%;
text-align: center;
margin: 20px auto;
}

/*------------------------section2-------------------------------*/
section#copy-image.section2 .content p{
    font-size: 30px;
}

section#copy-image.section2 .cd-tagline {
    margin: 30px auto 0;
}

/*------------------------section3-------------------------------*/
section#columns.section3 .inner-section {
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 17px;
    box-shadow: 0px 6px 0px 0px #F15822;
    background: #FFFFFF80;
    padding: 40px 0px;
    position: relative;
    overflow: hidden;
}

section#columns.section3 .inner-section::before {
    content: '';
    position: absolute;
    inset: 0;
    padding: 5px;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #F15822 100%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
section#columns.section3 .inner-section .above-block .pill{
    border: 2px solid #000000;
    border-radius: 40px;
    padding: 15px 0px;
    width: 80%;
    margin: 20px auto 20px;
    font-family: DM Mono;
    font-weight: 500;
    font-size: 20px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
}

section#columns.section3 .inner-section .above-block p{
    font-size: 30px;
}

section#columns.section3 .column-wrapper {
    margin-top: 50px;
}

section#columns.simple.section3 .column .content{
    align-items: center;
}

section#columns.simple.section3 .column .content p{
    text-align: center;
}

/*--------------------------section4---------------------------------------*/

section#columns.simple.section4{
    position: relative;
}

section#columns.simple.section4 .content p{
    font-size: 30px;
}

section#columns.simple.section4 .top-content {
    padding-bottom: 50px;
}

section#columns.section4 .column-wrapper {
    margin-top: 50px;
}

 section#columns.simple.section4 .above-columns.grid.full {
        position: absolute;
        width: 100%;
        top: 20px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: space-between;
     }
/* ============ Blinking Stars ============ */

/* Left group: small red blinks, large pink fades */
  section#columns.simple.section4 .above-columns .left svg:first-child path {
  animation: cdBlinkRedSm 2.4s ease-in-out infinite;
}
  section#columns.simple.section4 .above-columns .left svg:last-child path {
  animation: cdBlinkRedLg 2.4s ease-in-out infinite;
}

/* Right group: small pink blinks, large red fades */
  section#columns.simple.section4 .above-columns .right svg:first-child path {
  animation: cdBlinkRedLg 2.4s ease-in-out infinite;
}
  section#columns.simple.section4 .above-columns .right svg:last-child path {
  animation: cdBlinkRedSm 2.4s ease-in-out infinite;
}

@keyframes cdBlinkRedSm {
  0%, 100% { fill: #FF739D; opacity: 1; }
  50%      { fill: #FFCEDC; opacity: .35; }
}

@keyframes cdBlinkRedLg {
  0%, 100% { fill: #FFCEDC; opacity: .35; }
  50%      { fill: #FF739D; opacity: 1; }
}

/**
 * Atlas Workflow Section
 * File: assets/css/custom/atlas-workflow.css
 * 
 * 6 numbered circles, alternating labels, dotted connectors,
 * blinking stars, design pill, tagline pill.
 */

/* ============ BASE ============ */
#atlas-workflow.atlas-workflow-section {
    background: #E6F3FF;
    padding: 50px 0px;
    position: relative;
    overflow: hidden;
    margin: 0;
    clear: both;
}

#atlas-workflow .aw-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 22px;
    position: relative;
    z-index: 2;
}

/* ============ BLINKING STARS ============ */
#atlas-workflow .aw-sparkles {
    position: absolute;
    z-index: 1;
    pointer-events: none;
}
#atlas-workflow .aw-sparkles--left {
    top: 30px;
    left: 40px;
}
#atlas-workflow .aw-sparkles--right {
    top: 20px;
    right: 40px;
}

#atlas-workflow .aw-star--sm {
    position: absolute;
    top: -10px;
    right: 80px;
}
#atlas-workflow .aw-star--lg {
    position: absolute;
    top: 15px;
    right: 0;
}
#atlas-workflow .aw-sparkles--left .aw-star--sm { right: auto; left: 80px; }
#atlas-workflow .aw-sparkles--left .aw-star--lg { right: auto; left: 0; }

/* Alternating blink — left group */
#atlas-workflow .aw-sparkles--left .aw-star--sm path {
    animation: awBlinkSm 2.4s ease-in-out infinite;
}
#atlas-workflow .aw-sparkles--left .aw-star--lg path {
    animation: awBlinkLg 2.4s ease-in-out infinite;
}
/* Right group — mirrored */
#atlas-workflow .aw-sparkles--right .aw-star--sm path {
    animation: awBlinkLg 2.4s ease-in-out infinite;
}
#atlas-workflow .aw-sparkles--right .aw-star--lg path {
    animation: awBlinkSm 2.4s ease-in-out infinite;
}

@keyframes awBlinkSm {
    0%, 100% { fill: #E6F3FF; opacity: .35; }
    50%      { fill: #2596FF; opacity: 1; }
}
@keyframes awBlinkLg {
    0%, 100% { fill: #2596FF; opacity: 1; }
    50%      { fill: #E6F3FF; opacity: .35; }
}

/* ============ TITLE ============ */
/* #atlas-workflow h2 {
    text-align: center;
    font-weight: 400;
    font-size: 50px;
    line-height: 130%;
    letter-spacing: 0%;
    margin-bottom: 10px;
} */
/* #atlas-workflow h2 strong { font-weight: 700; } */

#atlas-workflow .aw-subtitle {
    text-align: center;
    font-weight: 400;
    font-size: 30px;
    line-height: 140%;
    letter-spacing: 0%;
    margin-bottom: 30px;
}

/* ============ DESIGN PILL ============ */
#atlas-workflow .aw-pill-row {
    text-align: center;
    margin-bottom: 50px;
}
#atlas-workflow .aw-pill {
    display: inline-block;
    padding: 12px 40px;
    font-family: DM Mono;
    font-weight: 400;
    font-size: 26px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
    background: #2596FF;
    color: #fff;
    box-shadow: 0px 0px 11px 0px #98989840;
    border-radius: 50px;
}

#atlas-workflow .aw-pill strong{
    font-weight: 500;
}

/* ============ FLOW CONTAINER ============ */
#atlas-workflow .aw-flow-container {
    position: relative;
    padding: 50px 0;
}

#atlas-workflow .aw-circles-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    gap: 20px;
}

/* ============ STEP ============ */
#atlas-workflow .aw-step {
    position: relative;
    z-index: 2;
    text-align: center;
    flex: 1 1 auto;
    max-width: 180px;
    min-height: 115px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ============ CIRCLE ============ */
#atlas-workflow .aw-circle {
    width: 100px;
    height: 100px;
    min-width: 100px;
    min-height: 100px;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0px 0px 17px 0px rgba(168, 168, 168, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex-shrink: 0;
}
#atlas-workflow .aw-circle:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 25px 0px rgba(168, 168, 168, 0.35);
}

#atlas-workflow .aw-num {
    font-weight: 700;
    font-size: 40px;
    line-height: 1;
}

/* ============ LABELS ============ */
#atlas-workflow .aw-label {
    width: 180px;
}
#atlas-workflow .aw-label h3 {
    font-weight: 700;
    font-size: 22px;
    line-height: 130%;
    letter-spacing: 0%;
    text-align: center;
    margin-bottom: 0;
}

/* Top label — positioned above circle */
#atlas-workflow .aw-step.aw-label-top .aw-label {
    position: absolute;
    bottom: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
}

/* Bottom label — positioned below circle */
#atlas-workflow .aw-step.aw-label-bottom .aw-label {
    position: absolute;
    top: calc(100% + 15px);
    left: 50%;
    transform: translateX(-50%);
}

/* ============ CONNECTORS ============ */
#atlas-workflow .aw-connectors-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

#atlas-workflow .aw-connector {
    position: absolute;
    width: 121px;
    height: 17px;
    top: 46%;
    transform: translateY(-50%);
}
#atlas-workflow .aw-connector svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Position each connector between the 6 circles */
#atlas-workflow .aw-connector--1 { left: calc((100% / 5 * 0) + 120px); }
#atlas-workflow .aw-connector--2 { left: calc((100% / 5 * 1) + 90px); top: 52%; }
#atlas-workflow .aw-connector--3 { left: calc((100% / 5 * 2) + 60px); }
#atlas-workflow .aw-connector--4 { left: calc((100% / 5 * 3) + 30px); top: 52%; }
#atlas-workflow .aw-connector--5 { left: calc((100% / 5 * 4) + 0px); }

/* Animated dash flow */
#atlas-workflow .aw-dash {
    stroke-dasharray: 5, 5;
    animation: awDashAnim 20s linear infinite;
}
@keyframes awDashAnim {
    from { stroke-dashoffset: 1000; }
    to { stroke-dashoffset: 0; }
}


/* ============ RESPONSIVE ============ */
@media (max-width: 1100px) {
    #atlas-workflow .aw-connector { width: 100px; }
    #atlas-workflow .aw-connector--1 { left: calc((100% / 5 * 0) + 100px); }
    #atlas-workflow .aw-connector--2 { left: calc((100% / 5 * 1) + 75px); }
    #atlas-workflow .aw-connector--3 { left: calc((100% / 5 * 2) + 50px); }
    #atlas-workflow .aw-connector--4 { left: calc((100% / 5 * 3) + 25px); }
    #atlas-workflow .aw-connector--5 { left: calc((100% / 5 * 4) + 0px); }
}

@media (max-width: 1024px) {
    #atlas-workflow h2 { font-size: 36px; }
    #atlas-workflow .aw-subtitle { font-size: 20px; }
    #atlas-workflow .aw-label h3 { font-size: 18px; }
    #atlas-workflow .aw-num { font-size: 34px; }
    #atlas-workflow .aw-circle { width: 85px; height: 85px; min-width: 85px; min-height: 85px; }
    #atlas-workflow .aw-pill { font-size: 18px; padding: 10px 30px; }
}

@media (max-width: 768px) {
    #atlas-workflow.atlas-workflow-section { padding: 60px 0 40px; }
    #atlas-workflow .aw-sparkles { display: none; }
    #atlas-workflow .aw-flow-container { padding: 40px 0; }

    #atlas-workflow .aw-circles-row {
        flex-direction: column;
        gap: 80px;
    }
    #atlas-workflow .aw-step {
        max-width: 100%;
        width: 100%;
        min-height: auto;
        display: block;
    }
    #atlas-workflow .aw-circle {
        width: 100px;
        height: 100px;
        min-width: 100px;
        min-height: 100px;
        margin: 0 auto;
    }

    #atlas-workflow .aw-connectors-layer { display: none; }

    #atlas-workflow .aw-step.aw-label-top .aw-label,
    #atlas-workflow .aw-step.aw-label-bottom .aw-label {
        position: static;
        transform: none;
        margin: 15px auto 0;
        width: 100%;
        max-width: 250px;
    }

    /* Vertical connector line between stacked circles */
    #atlas-workflow .aw-step:not(:last-child)::after {
        content: '';
        position: absolute;
        bottom: -40px;
        left: 50%;
        transform: translateX(-50%);
        width: 2px;
        height: 40px;
        background: linear-gradient(to bottom, transparent, #2596FF 30%, #01E7B0 70%, transparent);
    }

    #atlas-workflow h2 { font-size: 30px; }
    #atlas-workflow .aw-subtitle { font-size: 18px; }
    #atlas-workflow .aw-pill { font-size: 16px; padding: 10px 24px; }
}

@media (max-width: 480px) {
    #atlas-workflow.atlas-workflow-section { padding: 40px 0 30px; }
    #atlas-workflow .aw-circles-row { gap: 70px; }
    #atlas-workflow .aw-circle { width: 90px; height: 90px; min-width: 90px; min-height: 90px; }
    #atlas-workflow .aw-num { font-size: 36px; }
    #atlas-workflow .aw-step:not(:last-child)::after { bottom: -35px; height: 35px; }
    #atlas-workflow .aw-label h3 { font-size: 18px; }
    #atlas-workflow h2 { font-size: 26px; }
    #atlas-workflow .aw-subtitle { font-size: 16px; }
}

/*====================Section 8=====================================*/

section#columns.simple.section8 .top-content {
    padding-bottom: 50px;
}

section#columns.simple.section8 h2.h1.xl{
    margin-bottom: 0px;
}

section#columns.section8 .inner-section{
    max-width: 1280px;
    margin: 0 auto;
    border: 2px solid #01E7B0;
    border-radius: 17px;
    background: #E7FFF9;
    padding: 40px 0px;
}

section#columns.section8 .column-wrapper {
    margin-top: 40px;
}

section#columns.simple.section8 .column {
   display: flex;
   /* justify-content: center; */
   padding-top: 20px;
   padding-left: 25%;
}

section#columns.simple.section8 .above-block p {
     font-size: 30px;
}

section#columns.simple.section8 .column .image-container{
    border: 1px solid;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 85px;
    height: 85px;
}

section#columns.simple.section8 .column h4{
    font-family: DM Mono;
    font-weight: 400;
    font-size: 30px;
    line-height: 120%;
    letter-spacing: 0%;
    vertical-align: middle;
}

@media screen and (min-width:1155px){
section#columns.simple.section8 .column-wrapper.grid.grid-large.gap-40.half {
    gap: 0px;
    grid-template-columns: repeat(12, 8.36875%);
}

section#columns.simple.section8 .column:first-child{
    border-right: 1px solid #E3E3E3;
    border-bottom: 1px solid #E3E3E3;
}

section#columns.simple.section8 .column:nth-of-type(2){
    border-bottom: 1px solid #E3E3E3;
}

section#columns.simple.section8 .column:nth-of-type(3){
    border-right: 1px solid #E3E3E3;
}

}

section#columns.simple.section8 .below-block p {
     font-size: 30px;
     padding-top: 40px;
}

section#columns.simple.section8 .cd-tagline {
    margin: 40px auto 0;
}

section#cta .above-title p{
     font-size: 30px;
}

section#cta p.lead{
     font-size: 18px;
}

section#cta p.above-cta{
    font-size: 30px;
    margin-top: 20px;
}