@import url('../input.css');

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
}

/* Small Device Restriction */
@media screen and (max-width: 768px) {
    header,
    main {
        display: none;
    }

    .mobile-overlay {
        margin: auto var(--md);
        width: calc(100% - (var(--md) * 2));
        height: 100vh;
        padding: var(--md);

        .details {
            width: 100%;
            justify-content: center;
            align-items: center;

            .img-logo {
                margin-inline: auto;
                width: 150px;
                height: 45px;

                img {
                    width: fit-content;
                    height: fit-content;
                }
            }

            h2,
            p {
                text-align: center;
                text-wrap: wrap;
            }

            h2 {
                margin: var(--xl) var(--md);
            }
        }
    }
}

@media screen and (min-width: 769px) {
    .mobile-overlay {
        display: none;
    }
}

 /* Nav Bar */
@layer header {
    header {
        width: 100%;
        padding: var(--lg) var(--xxl);
        justify-content: center;
        align-items: center;
        background-color: var(--bg);
        box-shadow: 0px 1px 4px 0px rgba(17, 24, 39, 0.05);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: inherit;
    }

    header .details {
        width: 100%;
        justify-content: space-between;
        align-items: center;
    } 

    header div .lp-logo {
        width: 133px;

        img {
            width: fit-content;
            height: fit-content;
        }
    }

    header div nav ul {
        gap: var(--lg);
    }

    header div .cta {
        gap: var(--lg);
    }
}

@layer main {
    main {
        margin-top: var(--xxl);
        justify-content: center;
        margin: 96px var(--xxl);
        padding: var(--xxl) 0px;
    }

    /* Hero Section */
    @layer hero {
        .hero {
            padding: var(--xxl) 0px;
        }

        .hero .details {
            width: 100%;
            justify-content: space-around;
            align-items: center;
        }

        .hero div .left-hero {
            width: 686px;

            .text {
                p {
                    color: var(---secondary-text);
                    margin-top: var(--md);
                }
            }

            button {
                margin-top: var(--xl);
            }
        }

        .hero div .right-hero {
            width: 387px;
            height: 270px;

            img {
                width: fit-content;
                height: fit-content;
            }
        }
    }

    /* Features & How It Work Sections */
    @layer features {
        .features {
            padding: var(--xxl) 0px;
            margin-top: var(--xxl);
        }

        .features .details {
            width: 100%;
            justify-content: center;
            align-content: start;
        }

        .features .details .section-title {
            width: fit-content;
            border-bottom: 2px solid var(--secondary-500);
            padding-bottom: var(--s);
            height: 40px;
            margin-inline: auto;
        }

        .features .details .list {
            gap: var(--lg);
            width: 100%;
            margin-top: var(--xl);
            display: flex;
            flex-wrap: wrap;
        }

        .features .details .list .list-row {
            width: 100%;
            justify-content: center;
            gap: var(--lg);
        }

        .features .details .list .list-row .content {
            width: 387px;
            height: 280px;
            padding: var(--md);
            border-radius: var(--xs);
            border: 0.5px solid var(--borders-disabled);
            background-color: white;
            align-content: center;
        }

        .features .details .list .list-row .content .details {
            width: 100%;
        }

        .features .details .list .list-row .content .details .top {
            width: 100%;
        }

        .features .details .list .list-row .content .details .top .icon {
            width: 48px;
            height: 48px;
            margin-inline: auto;
            margin-bottom: var(--xxs);
            padding: var(--xxs);

            img {
                width: fit-content;
                height: fit-content;
            }
        }

        .features .details .list .list-row .content .details .top h3 {
            text-align: center;
            margin-inline: auto;
        }

        .features .details .list .list-row .content .details .bottom {
            width: 100%;
            margin-top: var(--lg);
            p {
                margin-inline: auto;
                text-align: center;
            }
        }
    }

    /* Role Section */
    @layer role {
        .role {
            padding: var(--xxl) 0px;
            margin-top: var(--xxl);
        }

        .role .details {
            width: 100%;
            justify-content: center;
            align-content: start;
        }

        .role .details .top {
            width: fit-content;
            justify-self: center;
            margin-bottom: var(--xxl);
        }

        .role .details .top .section-title {
            width: fit-content;
            border-bottom: 2px solid var(--secondary-500);
            padding-bottom: var(--s);
            height: 40px;
            margin-inline: auto;
            margin-bottom: var(--lg);
        }

        .role .details .top p {
            text-align: center;
        }

        .role .details .bottom {
            width: 100%;
            justify-content: center;
            align-items: center;
        }

        .role .details .bottom .row {
            width: 100%;
            margin-bottom: var(--xxl);
            justify-content: center;
            gap: var(--s);
        }

        .role .details .bottom .row .details{
            width: 100%;
            justify-content: center;
        }

        .role .details .bottom .row .details .content {
            width: 588px;
            align-items: center;
            gap: var(--md);
        }

        .role .details .bottom .row .details .content .img {
            width: 215.25px;
            height: 152.25px;
            margin-block: auto;

            img {
                width: fit-content;
                height: fit-content;
            }
        }
        
        .role .details .bottom .row .details .content .text {
            width: 100%;
            height: 100%;
        }

        .role .details .bottom .row .details .content .text .top {
            width: 100%;
            justify-content: flex-start;
            margin-bottom: var(--md);

            .role-badge {
                width: fit-content;
                padding: var(--xxs) var(--s);
                border-radius: var(--xxl);
                margin-top: var(--xs);

                p {
                    color: white;
                }
            }
        }

        .role .details .bottom .row .details .content .text ul {
            width: 100%;
            list-style: outside;
        }

        .role .details .bottom hr {
            width: 900px;
            color: var(--borders-disabled);
            margin-inline: auto;
            margin-bottom: var(--xxl);
        }
    }

    /* Value Statement */
    @layer value {
        .features .details .top {
            width: fit-content;
            justify-self: center;
            margin-bottom: var(--md);

            .section-title {
                margin-bottom: var(--lg);
            }

            p {
                text-align: center;
            }
        }

        .features .details .list .list-row .value {
            width: 287px;
            height: 136px;
            flex-wrap: wrap;
        }

        .features .details .list .list-row .content .details .top .no {
            width: 24px;
            height: 24px;
            display: flex;
            padding: var(--xs);
            border-radius: 100%;
            margin-inline: auto;
            align-items: center;

            p {
                color: white;
            }
        }

        .features .details .list .list-row #value-one .details .top .no {
            background-color: var(--green-500);
        }

        .features .details .list .list-row #value-two .details .top .no {
            background-color: var(--secondary-500);
        }

        .features .details .list .list-row #value-three .details .top .no {
            background-color: var(--red-500);
        }

        .features .details .list .list-row #value-four .details .top .no {
            background-color: var(--yellow-500);
        }
    }

    /* Ad Section */
    @layer ad {
       .ad {
        padding: var(--xxl) var(--xxl);
        border-radius: var(--xs);
        margin-top: 96px;
        margin-bottom: var(--xxl);
       } 

       .ad .details {
        width: 100%;
        padding: var(--xxl) var(--lg);
        justify-content: space-around;
        align-items: center;
       }

       .ad .details .left-ad {
        width: 686px;

        .text {
            width: 100%;
            margin-bottom: var(--xl);

            h1 {
                color: white;
            }

            p {
                color: var(--borders-disabled);
                margin-top: var(--md);
            }
        }
       }

       .ad .details .right-ad {
        width: 300px;
        height: 203px;

        img {
            width: fit-content;
            height: fit-content;
        }
       }
    }

    /* Footer */
    @layer footer {
        footer {
        padding: var(--xxl);
        }

        footer .details {
            width: 100%;
            justify-items: center;

            .footer-img {
                width: 200px;
                height: 60px;
                margin-bottom: var(--xl);

                img {
                    width: fit-content;
                    height: fit-content;
                }
            }
        }
    }
}