/* ========== VARIABLES ========== */
:root {
    --primary-color: #1E3050;   /* dark blue */
    --accent-color: #F7A600;    /* orange */
    --light-gray: #F1F1F1;
    --white: #FFFFFF;
    --circle-size: 60px;
    --timeline-line-color: var(--accent-color);
    --font-bold: 600;
    --font-regular: 400;
    --font-light: 300;
}

/* ========== FONT STYLES ========== */
	@font-face {   
	font-family: "MontserratFull"; 
	src: url("../../assets/fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
	}
	@font-face {   
	font-family: "MontserratItalic"; 
	src: url("../../assets/fonts/Montserrat-Italic-VariableFont_wght.ttf") format("truetype");
	}
	@font-face {   
	font-family: "Nunito Sans"; 
	src: url("../../assets/fonts/NunitoSans-Italic.ttf") format("truetype");
	font-weight: normal;
	font-style: italic;
	}
	@font-face {   
	font-family: "Nunito Sans"; 
	src: url("../../assets/fonts/NunitoSans.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	}

	body {font-family: "Nunito Sans", "MontserratFull", Helvetica, Arial, sans-serif;}



/* ========== HERO SECTION ========== */
.hero {
    display: flex;
    align-items: center;
    background-color: #eef0f1;
    position: relative;
    overflow: hidden;
    height: 900px;
}
/* Orange blob behind hero image */
.hero::before {
    content: '';
    position: absolute;
    top: -19px;
    left: -152px;
    width: 900px;
    height: 900px;
    background: url('../../assets/images/Curve Shape (Right).svg') no-repeat center center;
    z-index: 0;
}

.hero .hero-image {
    flex: 1 1 40%;
    max-width: 400px;
    z-index: 1;
}

.hero .hero-image img {
    border-radius: 4px;
    display: block;
    position: relative;
    top: 20px;
    margin-left: 78px;
    mask-image:linear-gradient(to bottom, rgba(70, 70, 70, 70) 77%, transparent 94%);
}
.hero .hero-text {
    flex: 1 1 50%;
    padding-left: 40px;
    z-index: 1;
    top: -100px;
}

.hero .hero-text h1 {
    font-size: 4rem;
    font-weight: var(--font-bold);
    margin-bottom: 20px;
    color: var(--primary-color);
    margin-left: 400px;
    margin-top: -150px;

}

/* ========== TIMELINE CONTAINER ========== */
.timeline {
    position: relative;
    max-width: 1000px;
    margin-left: 400px;
    padding: 40px 20px;
    top: -400px
}
/* Vertical line in the middle */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 53%;
    width: 4px;
    background-color: var(--timeline-line-color);
    transform: translateX(-50%);
    z-index: 5;
    margin-top: 129px;
    margin-bottom: 610px;
}
/* Each timeline item */
.timeline-item {
    position: relative;
    min-height: 500px;
    padding: 20px 40px;
    display: flex;
}
/* Number circle */
.timeline-item .circle {
    position: absolute;
    top: 35px;
    left: 509px;
    transform: translateX(-50%);
    width: var(--circle-size);
    height: var(--circle-size);
    background-color: #2b73d4;
    color: #FFFFFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-bold);
    font-size: 1.5rem;
    z-index: 10;
}

/* Content box */
.content-box {
    display: flex;
}

.timeline-item .content-box {
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    width: 150%
}
.timeline-item .content-box h3 {
    font-size: 1.3rem;
    font-weight: var(--font-bold);
    margin-bottom: 10px;
    color: var(--primary-color);
    text-align: left;
}
.timeline-item .content-box p {
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: #333333;
    text-align: left;
    margin-right: 0;
}
.timeline-item .content-box a.btn {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--accent-color);
    color: var(--white);
    border-radius: 4px;
    font-weight: var(--font-bold);
    transition: background-color 0.2s ease;
}
.timeline-item .content-box a.btn:hover {
    background-color: #e08c00;
}


/* Image box */
.timeline-item .image-box {
    min-height: 300px;
    min-width: 300px;
    max-height: 400px;
}

.timeline-item .image-box img.phoneImage {
    height: 105%;

}

.text-box{
    margin-top: 20px;
    padding-right: 236px;
    margin-right: 70px;
}


.text-box.right {
    margin-left: 360px;
    padding-right: 166px;
    margin-right: 0;
}

.text-box.left {
    margin-left: 0;
    padding-right: 199px;
    margin-right: 282px;
}

.text-box.right.first {
    margin-left: 27%;
    min-height: 250px;
    padding-left: 50px;
}

.timeline-item .image-box img.stepFourImage{
    z-index: 1;
}

.timeline-item .image-box.stepFour::after {
    content: '';
    position: absolute;
    top: 16px;
    width: 400px;
    height: 400px;
    background: url('../../assets/images/CurveShapeBean.png') no-repeat;
    z-index: -1;
    background-size: contain;

}

.timeline-item .image-box img.stepFiveImage{
    z-index: 1;
}

.timeline-item .image-box.right.step-five::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 540px;
    width: 616px;
    height: 400px;
    background: url('../../assets/images/Paint Brush Vector.svg') no-repeat;
    z-index: -1;

}

.timeline-item .image-box img {
    border-radius: 6px;
    max-width: 350px;
}

.timeline-item .image-box.right {
    width: 100%;
    max-width: 400px;
    margin-left: 248px;
}

/* ========== LEFT / RIGHT POSITIONS ========== */
.timeline-item.left {
    left: 0;
    text-align: right;
}

.timeline-item.left .image-box {
    margin-left: -10px;
}

.timeline-item.right {
    text-align: left;
}
.timeline-item.right.first {
    left: 45%;
    text-align: right;
    min-width: 0;
    min-height: 50%;
}

.timeline-item.right .circle.first {
    left: 78px;
}

.timeline-item.right.first h3,p{
    margin-right: 120px;
}

.timeline-item.right.first .content-box.first {
    margin-left: -15px;
    width: 90%;
    background-color: white;
}

.timeline-item.right .image-box {
    margin-right: -10px;
}

/* Clear floats */
.timeline-item::after {
    content: '';
    display: table;
    clear: both;
}

/* ======= RESPONSIVE ======= */
/* Mobile Styles for howToApply.css */

/* Larger Tablets */
@media (max-width: 1250px) {

    .hero {
        height: auto;
        padding: 50px 20px;
    }

    .hero .hero-text h1 {
        font-size: 3rem;
        margin-left: 0;
        margin-top: 30px;
    }

}

/* Tablets */
@media (max-width: 1250px) {
    /* Hero adjustments */
    .hero {
        padding: 30px 15px;
    }

    .hero::before {
        width: 600px;
        height: 600px;
        top: -100px;
        left: -300px;
        background-size: contain;
    }

    .hero .hero-text h1 {
        font-size: 2.5rem;
        text-align: center;
    }

    .hero .hero-image img {
        margin: 0 auto;
    }

    /* Timeline adjustments */
    .timeline::before {
        left: 22px;
        margin-top: 80px;
    }

    .timeline {
        top: 0;
    }

    .timeline-item {
        flex-direction: column;
    }

    .timeline-item .circle {
        left: 10px;
        top: 25px;
    }

    .timeline-item.right.first {
        left: 0;
    }

    .timeline-item.right.first .circle.first {
        left: 10px;
    }

    .timeline-item .image-box img.stepFourImage {
        max-width: 40%;
        top: -190px;
        position: relative;
    }

    .content-box {
        flex-direction: column;
    }

    .text-box.right {
        padding-right: 96px;
    }

    .timeline-item .content-box {
        margin-left: 60px !important;
        width: calc(100% - 60px);
        max-height: 480px;
    }

    .timeline-item.right.first .content-box.first {
        margin-left: 60px;
        width: calc(100% - 60px);
    }

    .timeline-item.right.first h3,
    .timeline-item.right.first p {
        margin-right: 0;
    }

    .text-box.right.first {
        min-height: auto;
    }

    .image-box.right.third {
        margin-left: 35%;
        top: -254px;
        position: relative;
    }

    .timeline-item .image-box {
        min-height: auto;
        min-width: auto;
        margin: 0;
        order: 2;
    }

    .timeline-item .image-box.right {
        max-width: 60%;
        margin-left: 35%;
    }

    .timeline-item .image-box img {
        max-width: 70%;
        margin: 0 auto;
    }

    .timeline-item .image-box img.phoneImage {
        height: auto;
        max-height: 400px;
        margin: 0 auto;
        width: auto;
        top: -220px;
        position: relative;
    }

    .timeline-item .image-box.last {
        max-width: 40%;
        top: -320px;
        position: relative;
    }

    /* Fix decorative elements */
    .timeline-item .image-box.stepFour::after {
        left: 8%;
        width: 40%;
        top: -2%;
        background-position: center;
    }

    .timeline-item .image-box.right.step-five::after {
        left: 37%;
        width: 64%;
        background-position: center;
    }

    .btn .last{
        margin-left: 0;
        padding: 10px;
        width: 167px;
        margin-top: 20px;
    }
}
/* Tablet and below (≤ 991px) */
@media (max-width: 1150px) {
    .hero {
        flex-direction: column;
        height: auto;
        padding: 40px 10px;
    }
    .hero .hero-image,
    .hero .hero-text {
        max-width: 100%;
        margin: 0 auto;
        padding-left: 0;
    }
    .hero .hero-text h1 {
        font-size: 2.2rem;
        margin-left: 0;
        margin-top: 20px;
        text-align: center;
    }

    .timeline-item .image-box img.phoneImage {
        left: -270px;
        max-height: 470%;
        max-width: 45%;
    }

    .timeline-item .image-box img.stepFourImage {
        top: -140px;
        left: -110px;
    }

    .timeline-item .image-box img.stepFiveImage {
        left: -90px;
        position: relative;
        top: -110px;
    }

    .timeline {
        margin-left: 0;
        max-width: 98vw;
        padding: 20px 5vw;
        top: 0;
    }
    .timeline::before {
        left: 61px;
        margin-top: 60px;
        margin-bottom: 200px;
    }
    .timeline-item {
        flex-direction: column;
        min-width: 100%;
        max-width: 100%;
        padding: 25px 0;
    }
    .timeline-item .circle {
        left: 10px;
        width: 45px;
        height: 45px;
        font-size: 1.1rem;
    }
    .timeline-item .content-box {
        margin-left: 50px !important;
        width: calc(100% - 50px);
        padding: 15px;
        max-height: 470px;
    }
    .timeline-item .content-box h3 {
        font-size: 1.1rem;
    }
    .timeline-item .content-box p {
        font-size: 0.9rem;
    }
    .timeline-item .image-box,
    .timeline-item .image-box.right {
        max-width: 90vw;
        margin: 20px auto 0 auto;
    }
    .timeline-item .image-box img {
        max-width: 40%;
        top: 50px;
        position: relative;
    }
    .text-box {
        margin: 0;
        padding: 0;
    }
    .timeline-item .image-box.last {
        max-width: 110%;
        left: -110px;
        position: relative;
        top: -321px;
    }
}
@media (max-width: 575px) {
    .hero {
        flex-direction: column;
        height: auto;
        padding: 20px 5px;
    }
    .hero .hero-image,
    .hero .hero-text {
        max-width: 100%;
        margin: 0 auto;
        padding-left: 0;
    }
    .hero .hero-text h1 {
        font-size: 1.5rem;
        margin-left: 0;
        margin-top: 10px;
        text-align: center;
    }

    .content-box .fourth {
        height: 370px;
    }

    .timeline {
        margin-left: 0;
        max-width: 98vw;
        padding: 10px 2vw;
        top: 0;
    }
    .timeline::before {
        left: 22px;
    }
    .timeline-item {
        flex-direction: column;
        min-width: 100%;
        max-width: 100%;
        padding: 10px 0;
    }
    .timeline-item .circle {
        left: 10px;
        width: 36px;
        height: 36px;
        font-size: 0.9rem;
    }
    .timeline-item .content-box {
        margin-left: 40px !important;
        width: calc(100% - 40px);
        padding: 8px;
        height: 380px;
    }
    .timeline-item .content-box h3 {
        font-size: 1rem;
    }
    .timeline-item .content-box p {
        font-size: 0.85rem;
    }
    .timeline-item .image-box,
    .timeline-item .image-box.right {
        width: 60%;
        max-width: 60%;
        min-width: 0;
        margin: 10px auto 0 auto;
    }
    .timeline-item .image-box img {
        max-width: 70%;
        top: 220px;
        position: relative;
        left: -180px;
    }
    .timeline-item .image-box img.phoneImage {
        left: 80px;
        max-height: 160px;
        max-width: 40%;
        top: -70px;
    }
    .timeline-item .image-box img.stepFourImage {
        top: -16px;
        left: -197px;
        max-width: 84%;
        max-height: 100%;
    }
    .timeline-item .image-box.stepFour::after {
        left: 7%;
        width: 49%;
        top: 8%;
        background-position: center;
    }
    .timeline-item .image-box img.stepFiveImage {
        left: 48px;
        position: relative;
        top: -20px;
        max-width: 87%;
    }

    .timeline-item .image-box.right.step-five::after {
        left: 37%;
        width: 64%;
        background-position: center;
        top: 10%;
    }
    .timeline-item .image-box.last {
        max-width: 50%;
        left: 240px;
        position: relative;
        top: -228px;
    }
    .text-box,
    .text-box.right,
    .text-box.left,
    .text-box.right.first {
        margin: 0 !important;
        padding: 0 !important;
        min-height: unset;
    }
}

@media (max-width: 420px) {

    .hero-image img {
        max-height: 440px;
    }

    .timeline::before {
        left: 18px;
        top: 20px;
    }

    .timeline-item .image-box img.stepFourImage {
        left: -154px;
    }

    .timeline-item .image-box img {
        top: 284px;
        position: relative;
        left: 68px;
    }

    .timeline-item .image-box.last {
        display: none;
    }

    .timeline-item .image-box.right.step-five::after {
        left: 37%;
        width: 64%;
        background-position: center;
        top: 17%;
    }

    .timeline-item .image-box img.stepFiveImage {
        left: 48px;
        position: relative;
        top: 2px;
    }

    .timeline-item .image-box img.phoneImage {
        top: -57px;
    }
}

@media (max-width: 320px) {
    .hero-image img {
        max-height: 440px;
    }

    .btn .last {
        margin-left: 0;
    }
}