/* ===============================
   How It Works Section Styles
   =============================== */


/* =======================
   Grid
   ======================= */

.howItWorks {
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;
    grid-template-rows: 300px 100px 100px 100px 100px 100px 100px;
    background-color: var(--howItWorks-bg);
    gap: 20px;
    padding: 100px 225px 100px 225px !important;
}

.howItWorksHeading {
    font-size: var(--medium-font) !important;
    font-family: Acumin-Black;
    text-align: left;
    margin-bottom: 50px;
    grid-column: 1 / span 3;
    display: block !important;
}

.howItWorksHeading > h1 {
    text-align: left !important;
}

.howItWorksHeading > h3 {
    font-size: var(--medium-font) !important;
    font-family: Acumin-Regular !important;
    color: black !important;
    line-height: 1.6;
}


.howItWorksStepsText {
    font-size: var(--big-font) !important;
    font-family: Acumin-Bold !important;
    color: var(--howItWorks-accent-color);
    font-family: Acumin-Black;
    text-align: center;
    line-height: 30px !important;
    margin-top: -5px;
}

.howItWorksSpan {
    font-size: var(--medium-font);
    margin-top: 25px !important;
}


.StepsText1 {
    grid-column: 1; /* Place in column 3 */
    grid-row: 2;    /* Place in row 1 */
}


.StepsText2 {
    grid-column: 3; /* Place in column 3 */
    grid-row: 3;    /* Place in row 2 */
}

.StepsText3 {
    grid-column: 1; /* Place in column 3 */
    grid-row: 4;    /* Place in row 3 */
}

.StepsText4 {
    grid-column: 3; /* Place in column 3 */
    grid-row: 5;    /* Place in row 4 */
}

.StepsText5 {
    grid-column: 1; /* Place in column 3 */
    grid-row: 6;    /* Place in row 5 */
}

.StepsText6 {
    grid-column: 3; /* Place in column 3 */
    grid-row: 7;    /* Place in row 6 */
}

.StepsText1, .StepsText3, .StepsText5 {
    text-align: right;
}

.StepsText2, .StepsText4, .StepsText6 {
    text-align: left;
}



.circle {
    grid-column: 2; /* Place circles in column 2 */
    border-radius: 50%;
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: var(--howItWorks-accent-color); /* Black circle */
    justify-self: center; /* Center the circles horizontally */
    position: relative;
}

.circle::before {
    content: '';
    position: absolute;
    top: 100%; /* Start the line at the bottom of the circle */
    left: 50%;
    width: 2px;
    height: 110px; /* Line between circles */
    background-color: var(--howItWorks-accent-color);
    transform: translateX(-50%);
}

 


.circle:last-child::before {
    display: none;
}



.heading {
    color: var(--howItWorks-accent-color);
    display: flex;
    justify-content: center; /* Centers content horizontally */
    align-items: center; /* Centers content vertically */
    flex-direction: column; /* Ensures content stacks vertically */
    margin-bottom: 200px;
}


.line {
    width: 10vw;
    height: 0px;
    grid-column: 2;
    border-top: 0.5px solid var(--geon-primary); /* Create a dotted line */
}

.line1 {
    margin-top: 6px;
    margin-left: 0.5vw;
}

.line2 {
    margin-top: 6px;
    margin-left: 10.5vw;
}

.line3 {
    margin-top: 6px;
    margin-left: 0.5vw;
}

.line4 {
    margin-top: 6px;
    margin-left: 11vw;
}

.line5 {
    margin-top: 6px;
    margin-left: 0.5vw;
}

.line6 {
    margin-top: 6px;
    margin-left: 11vw;
}









/* Extra Small Devices (Phones, up to 535px) */
@media only screen and (max-width: 535px) {
    .howItWorks {
        grid-template-columns: 50px 4fr !important;
        grid-template-rows: 380px 170px 170px 170px 170px 170px 170px !important;
        padding: 150px 25px !important; /* latest override */
    }

    .howItWorksStepsText {
        font-size: var(--medium-font) !important; /* latest override */
        grid-column: 2 / span 2;
        text-align: left;
    }
    
    .howItWorksSpan {
        font-size: var(--very-small-font);
        grid-column: 2;
        text-align: left;
    }

    .circle {
        grid-column: 1 !important;
    }

    .line {
        margin-left: 70px; /* latest override */
        grid-column: 1 !important;
        width: 80px !important; /* latest override */
        display: none; /* latest override */
    }

    .howItWorks > h4 {
        font-size: var(--small-font) !important;
    }

    .circle::before {
        height: 190px;
    }

    .howItWorksHeading > h3 {
        font-size: var(--very-small-font) !important;
    }

    .heading {
        margin-bottom: 50px !important;
    }
}




/* Small Devices (Portrait Tablets and Small Phones, up to 768px) */
@media only screen and (min-width: 535px) and (max-width: 768px) {

    .howItWorksStepsText {
        font-size: var(--medium-font) !important;
        grid-column: 2 / span 2; /* Spans Columns 2 and 3 */
        text-align: left;
    }
    
    .howItWorksSpan {
        font-size: var(--very-small-font);
        grid-column: 2; /* Spans Columns 2 and 3 */
        text-align: left;
    }
 
    .circle {
        grid-column: 1 !important;
    }

    .line {
        margin-left: 70px;
        grid-column: 1 !important;
        width: 80px !important;
    }

    .howItWorks {
        grid-template-columns: 150px 4fr !important;
        grid-template-rows: 380px 170px 170px 170px 170px 170px 170px !important;
        padding: 150px 25px !important;
    }

    .howItWorks > h4 {
        font-size: var(--small-font) !important;
    }

    .circle::before {
        height: 190px; /* Line between circles */
    }


    .howItWorksHeading > h3 {
        font-size: var(--small-font) !important;
    }
}


/* Medium Devices (Tablets in Landscape, 768px to 1024px) */
@media only screen and (min-width: 769px) and (max-width: 1024px) {

    .howItWorksStepsText {
        font-size: var(--medium-font) !important;
        grid-column: 2 / span 2; /* Spans Columns 2 and 3 */
        text-align: left;
        white-space: nowrap;
    }
    
    .howItWorksSpan {
        font-size: var(--very-small-font);
        grid-column: 2; /* Spans Columns 2 and 3 */
        text-align: left;
    }

    .circle {
        grid-column: 1 !important;
    }

    .line {
        margin-left: 50%;
        grid-column: 1 !important;
        width: 50% !important;
    }

    .howItWorks {
        grid-template-columns: 25% 50%;
        grid-template-rows: 350px 170px 170px 170px 170px 170px 170px !important;
        padding: 150px 75px 50px 75px !important;
    }


    .circle::before {
        height: 190px; /* Line between circles */
    }


    .howItWorksHeading > h3 {
        font-size: var(--small-font) !important;
    }

}   


/* Large Devices (Desktops, 1024px to 1200px) */
@media only screen and (min-width: 1025px) and (max-width: 1400px) {
    .howItWorksStepsText {
        grid-column: 2 / span 2; /* Spans Columns 2 and 3 */
        text-align: left;
        white-space: nowrap;
    }
    
    .howItWorksSpan {
        font-size: var(--very-small-font);
        grid-column: 2; /* Spans Columns 2 and 3 */
        text-align: left;
    }

    .circle {
        grid-column: 1 !important;
    }

    .line {
        margin-left: 50%;
        grid-column: 1 !important;
        width: 100px !important;
    }

    .howItWorks {
        grid-template-columns: 1fr 3fr;
        grid-template-rows: 300px 170px 170px 170px 170px 170px 170px !important;
        padding: 150px 75px 50px 0 !important
    }


    .circle::before {
        height: 190px; /* Line between circles */
    }


    .howItWorksHeading > h3 {
        font-size: var(--small-font) !important;
        padding-left: 100px;
    }

    .headingText {
        padding-left: 100px;
    }
}
  

/* Extra Large Devices (Large Desktops, 1200px to 1600px) */
@media only screen and (min-width: 1401px) and (max-width: 1651px) {
    .howItWorksStepsText {
        font-size: var(--medium-font) !important;
        white-space: nowrap;
    }
    
    .howItWorksSpan {
        font-size: var(--very-small-font);
    }

    .howItWorksHeading > h3 {
        font-size: var(--small-font) !important;
    }
}
  

/* Ultra Large Devices (Very Large Screens, 1600px and up) */
@media only screen and (min-width: 1651px) {
    .howItWorksStepsText {
        white-space: nowrap;
    }
    
    .howItWorksSpan {
        font-size: var(--small-font);
        margin-top: 40px !important;
    }
}
  


/*********************** EXTRA RESPONSIVE ***********************/



@media only screen and (max-width: 431px) {
    .howItWorksSpan.StepsText4 {
        margin-top: 70px !important;
    }
}


@media only screen and (max-width: 433px) {
    .howItWorksSpan.StepsText6 {
        margin-top: 70px !important;
    }
}