/* Reset and Base Styles */

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: "Montserrat";

    line-height: 1.6;

    color: #001f4b;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



/* Typography */

h1, h2, h3 {

    font-family: "Montserrat";

    font-weight: 700;

    line-height: 1.2;

}



h1 {

    font-size: 2.5rem;

    margin-bottom: 1rem;

}



h2 {

    font-size: 2rem;

    margin-bottom: 2rem;

    text-align: center;

}



h3 {

    font-size: 1.25rem;

    margin-bottom: 0.5rem;

}



p {

    font-size: 1rem;

    line-height: 1.5;

}



/* Buttons */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 12px 24px;

    border: none;

    border-radius: 41px;

    font-family: "Montserrat";

    font-weight: 500;

    font-size: 1.125rem;

    text-decoration: none;

    cursor: pointer;

    transition: all 0.3s ease;

    min-width: 180px;

    height: 61px;

}



.btn-primary {

    background-color: #315bda;

    color: white;

}



.btn-primary:hover {

    background-color: #2544b8;

    transform: translateY(-2px);

}



.btn-secondary {

    background-color: transparent;

    color: #315bda;

    border: 2px solid #315bda;

}



.btn-secondary:hover {

    background-color: #315bda;

    color: white;

    transform: translateY(-2px);

}



/* Hero Section */

.hero {

    background-color: #d1f4e4;

    padding: 1rem 0 0;

    border-radius: 15px;

    margin: 4%;

}



.hero-content {

    text-align: center;

    margin-bottom: 2rem;

}



.hero-title {

    font-size: 2rem;

    margin-bottom: 1.5rem;

    color: #315bda;

}



.title-highlight {

    color: #001f4b;

}



.hero-subtitle {

    font-size: 1.05rem;

    color: #333333;

    margin-bottom: 2rem;

    margin-left: auto;

    margin-right: auto;

}



.hero-ctas {

    display: flex;

    flex-direction: column;

    gap: 4rem;

    align-items: center;

}



.hero-images {

    margin-top: 2rem;

}



.image-grid {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 1rem;

    position: relative;

}



.hero-img {

    border-radius: 8px;

    object-fit: cover;

    width: 100%;

}



.hero-img-1 {

    width: 100%;

    max-width: 285px;

    height: 105px;

    order: 1;

}



.hero-img-2 {

    width: 100%;

    max-width: 530px;

    height: 544px;

    order: 2;

}



.hero-img-3 {

    max-width: 499px;

    height: 331px;

    order: 3;

}



.hero-img-4 {

    width: 100%;

    max-width: 231px;

    height: 72px;

    order: 4;

}



.hero-img-5 {

    width: 100%;

    max-width: 331px;

    height: 98px;

    order: 5;

}



.hero-img-6 {

    width: 72px;

    height: 72px;

    order: 6;

}



/* Sections */

.section {

    padding: 3rem 0;

}



.section-title {

    text-align: center;

    margin-bottom: 3rem;

    color: #001f4b;

    font-size: 40px;

}



/* Section 1: Features */

.section-1 {

    background-color: white;

}



.features-grid {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.feature-card {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    text-align: left;

    padding: 1.5rem;

    background-color: white;

    border-radius: 8px;

}



.feature-icon {

    position: relative;

    margin-bottom: 1rem;

}



.icon-bg {

    width: 53px;

    height: 52px;

    background-color: #315bda;

    border-radius: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.feature-title {

    font-size: 1.125rem;

    font-weight: 700;

    margin-bottom: 0.5rem;

    color: #000f26;

}



.feature-description {

    font-size: 1rem;

    color: #000f26;

    line-height: 1.4;

}



/* Section 2: Image Showcase */

.section-2 {

    background-color: #ffe5f2;

    border-radius: 15px;

    margin: 4%;

}



.image-showcase {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    align-items: center;

}



.showcase-img {

    border-radius: 8px;

    object-fit: cover;

    width: 100%;

}



.showcase-img-1 {

    max-width: 698px;

    height: 370px;

}



.showcase-img-2 {

    height: 340px;

}



/* Section 3: Benefits */

.section-3 {

    background-color: white;

}



.benefits-content {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.benefits-image {

    display: flex;

    justify-content: center;

}



.benefits-main-img {

    width: 100%;

    max-width: 440px;

    height: 415px;

    border-radius: 13px;

    object-fit: cover;

}



.benefits-grid {

    margin: 2rem;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.benefit-card {



    align-items: flex-start;

    gap: 1rem;

    padding: 1rem;

    background-color: white;

    border-radius: 8px;

}



.benefit-icon {

    position: relative;
    flex-shrink: 0;
    padding-bottom: 20px;

}



.benefit-title {

    font-size: 1.125rem;

    font-weight: 700;

    color: #000f26;

    margin-bottom: 0.25rem;

}



.benefit-description {

    font-size: 1rem;

    color: #000f26;

    line-height: 1.4;

}



/* Section 4: Final CTA */

.section-4 {

    background-color: white;

    text-align: center;

}



.cta-buttons {

    display: flex;

    flex-direction: column;

    gap: 3rem;

    align-items: center;

}



/* Footer */

.footer {

    background-color: #3dc198;

    padding: 10rem 0;

    text-align: center;

}



.footer-logo {

    display: flex;

    justify-content: center;

}



.footer-logo svg {

    max-width: 300px;

    height: auto;

}



/* Tablet Styles */

@media (min-width: 768px) {

    .container {

        padding: 0 40px;

    }

    

    h1 {

        font-size: 3rem;

    }

    

    h2 {

        font-size: 2.5rem;

    }

    

    .hero-title {

        font-size: 2.5rem;

    }

    

    .hero-subtitle {

        font-size: 1.05rem;

    }

    

    .hero-ctas {

        flex-direction: row;

        justify-content: center;

    }

    

    .features-grid {

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

        gap: 2rem;

    }

    

    .image-showcase {

        flex-direction: row;

        justify-content: center;

        align-items: flex-start;

    }

    

    .benefits-content {

        flex-direction: row;

        align-items: flex-start;

        gap: 3rem;

    }

    

    .benefits-grid {

        flex: 1;

    }

    

    .cta-buttons {

        flex-direction: row;

        justify-content: center;

    }

}



/* Desktop Styles */

@media (min-width: 1024px) {

    .container {

        padding: 0 60px;

    }

    

    h1 {

        font-size: 3.5rem;

    }

    

    h2 {

        font-size: 3rem;

    }

    

    .hero {

        padding: 4rem 0 0;

    }

    

    .hero-title {

        font-size: 3rem;

    }

    

    .hero-img-1 {

        grid-column: 2 / 6;

        grid-row: 1 / 2;

    }

    

    .hero-img-2 {

        grid-column: 3 / 6;

        grid-row: 2 / 4;

    }

    

    .hero-img-3 {

        grid-column: 1 / 3;

        grid-row: 2 / 4;

    }

    

    .hero-img-4 {

        grid-column: 6 / 7;

        grid-row: 2 / 5;

    }

    

    .hero-img-5 {

        grid-column: 5 / 7;

        grid-row: 3 / 5;

    }

    

    .hero-img-6 {

        grid-column: 5 / 7;

        grid-row: 2 / 3;

    }

    

    .features-grid {

        grid-template-columns: repeat(3, 1fr);

    }

    

    .benefits-grid {

        display: grid;

        grid-template-columns: repeat(2, 1fr);

        gap: 2rem;

    }

    

    .section {

        padding: 3rem 0;

    }

}



/* Large Desktop Styles */

@media (min-width: 1440px) {

    .container {

        max-width: 1400px;

    }

    

    .hero {

        margin: 2rem 15rem 0rem;

    }

    

    .section-2 {

        margin: 2rem 15rem 0;

    }

}

.benefit-icon img {
  width: 28px;
  height: 28px;
  display: block;
  object-fit: contain;
}