article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
*,
*::after,
*::before {
    box-sizing: border-box;
}
:root {
    --font-size: 10px;
    --br: 2rem;
    --z-index: 10;
    --max-size: 1200px;
    --white: #fff;
    --phone-width: 150px;
    --black: #1C1B33;
    --orange-gradient: linear-gradient(90deg, #FD7578, #FF4A4E);
    --black-gradient: linear-gradient(90deg, #2E335A, #1C1B33);
    --white-gradient: linear-gradient(90deg, #fff, #D8D8E6);
    --wrapper-padding: 0 1rem;
    --flex-direction: column;
    --justify-content: start;
    --align-items: center;
    --menu-bg: var(--black);
    --menu-transform: translateX(100%);
    --menu-padding: 4rem 1rem;
    --menu-toggle-display: block;
    --menu-position: fixed;
    --menu-width: auto;
    --wrapper-wrap: nowrap;
    --wrapper-direction: column;
    --menu-inset: 0 0 0 80px;
    --menu-item-width: 100%;
    --menu-item-close-display: block;
    --carousel-padding: 5rem;
    --section-third-height: 300px;
    --color: #fff;
}
html {
    font-size: ;
    line-height: 1.5;
    min-height: 100%;
}

body {
    background: var(--black-gradient);
    font-family: "Baloo 2", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

main, section, footer {
    border-radius: 0 0 var(--br) var(--br);
    position: relative;
    box-shadow: 0px 20px 0 0 rgba(0, 0, 0, 0.08);

}
main + section {
    margin-top: calc(-1 * var(--br));
}

section + section {
    margin-top: calc(-1 * var(--br));
}

section + footer {
    margin-top: calc(-1 * var(--br));
}

.logo {
    flex: none;
    
    &.small {
        background: url(../img/logoSmall.svg) no-repeat left center / contain;
    }

    &.large {
        background:  url(../img/logoLarge.svg) no-repeat left center / contain;
    }
}

.nav {
    width: 100%;
    max-width: var(--max-size);
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    z-index: calc(var(--z-index) + 1);
    display: flex;
    align-items: center;

    .menu-toggle {
        all: unset;
        background: #fff;
        padding: 1rem;
        margin-right: 1rem;
        display: var(--menu-toggle-display);
    }

    .logo.small {
        flex: 1;
        height: inherit;
    }

    .menu {
        background-color: var(--menu-bg);
        display: flex;
        padding: var(--menu-padding);
        position: var(--menu-position);
        flex-direction: var(--flex-direction);
        justify-content: var(--justify-content);
        align-items: var(--align-items);
        inset: var(--menu-inset);
        height: 100%;
        gap: 1rem;
        list-style: none;
        margin: 0;
        transition: all 0.3s ease-in-out;
        transform: var(--menu-transform);

        &.active {
            --menu-transform: translateX(0);
        }


        li {
            margin: 0 0.3rem;
            padding: 1rem 1.5rem;
            background: rgba(0, 0, 0, 0.08);
            border-radius: 30px;
            width: var(--menu-item-width);
            transition: all 0.2s ease-in-out;
            
            &.active {
                background: var(--orange-gradient);
                a {
                    color: var(--black);
                }
            }

            &:hover {
                background: var(--orange-gradient);
                a {
                    color: var(--black);
                }
            }

            a {
                color: var(--white);
                font-weight: 500;
                text-decoration: none;
                font-size: 1.2rem;
            }

            &.close {
                display: var(--menu-item-close-display);
                position: absolute;
                top: 10px;
                left: 10px;
                color: var(--white);
                width: auto;
            }
        }
    }
}

.section {
    padding: 2rem;
    text-align: center;
    padding-top: var(--br);

    &.first {
        z-index: calc(var(--z-index) - 1);
        background: var(--white-gradient);
        padding-top: calc(var(--br) + 50px + 5rem);

        .box {
            background-color: var(--white);
            border-radius: 50px;
            position: relative;
            padding: calc(var(--phone-height) - 7rem) 20px 20px;
            img {
                width: var(--phone-width);
                margin-top: -50px;
                filter: drop-shadow(0 40px 30px rgba(59, 38, 123, 0.7));
            }
            h1 {
                font-size: 1.8rem;
                font-weight: 900;
                line-height: 1;
                padding: 0 20px;
            }
            p {
                color: var(--black);
                font-size: 1.2rem;
                font-weight: 400;
                line-height: 1.5;
                padding: 0 20px;
            }

            &:nth-child(1) h1 {
                color: #645DC3;
            }
            &:nth-child(2) h1 {
                color: #E2286E;
            }
            &:nth-child(3) h1 {
                color: #0B0B4A;
            }
        }

        
    }
    &.second {
        z-index: calc(var(--z-index) - 2);
        background: var(--orange-gradient);
    }
    &.third {
        z-index: calc(var(--z-index) - 3);
        height: var(--section-third-height);
        background: url(../img/bggg.png) no-repeat center center / cover;
    }
}

footer {
    background: var(--black-gradient);
    border-radius: 0;
    height: 500px;
    padding-block-start: calc(var(--br) + 1rem);
    padding-block-end: 2rem;
    display: flex;

    .wrapper {
       height: 50%;
       margin: auto;
    }

    .box {
        color: var(--white);
        font-size: 1rem;
        height: fit-content;
        align-self: center;

        .logo.small {
            width: 100px;
            aspect-ratio: 1 / 1;
        }
        
        &:last-child {
            text-align: end;
        }
    }
}

.wrapper {
    max-width: var(--max-size);
    width: 100%;
    margin: 0 auto;
    padding: var(--wrapper-padding);
    display: flex;
    flex-wrap: var(--wrapper-wrap);
    flex-direction: var(--wrapper-direction);
    gap: 4rem;
    flex: 1;
}

.box {
    flex: 1;
    align-items: center;
}

.carousel {
    position: relative;
    width: 100%;
    max-width: var(--max-size);
    margin: 4rem auto;
    overflow: hidden;
    padding: var(--carousel-padding) 0;
    border-radius: 1rem;
}
.carousel-track {
    display: flex;
    transition: transform 0.5s cubic-bezier(0.77,0,0.175,1);
    will-change: transform;
}
.carousel-dots {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 0.5rem;

    .dot {
        all: unset;
        width: 0.5rem;
        height: 0.5rem;
        background-color: var(--white);
        border-radius: 50%;
        cursor: pointer;
        transition: background-color 0.2s;
        &.active {
            background-color: var(--black);
        }
    }
}
.carousel-slide {
    min-width: 100%;
    text-align: center;
    font-size: 2rem;
}
.carousel-slide:last-child {
    border-right: none;
}

.carousel-wrapper {
    width: 80%;
    height: 300px;
    background: var(--white);
    margin: auto;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;

    p {
        font-size: 0.9rem;
        color: var(--black);
        margin: 0 20px;
        text-align: center;
    }

    .quote {
        position: absolute;
        top: -80px;
        left: 50%;
        transform: translateX(-50%);
        width: 160px;
        height: 160px;
    }

    .face {
        position: absolute;
        bottom: -50px;
        right: 50%;
        transform: translateX(50%);
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
    }
}

.carousel-arrow {
    all: unset;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--white);
    border-radius: 50%;
    width: 3.5rem;
    height: 3.5rem;
    font-size: 2.5rem;
    cursor: pointer;
    z-index: 2;
    opacity: 1;
    transition: background 0.2s;
}
.carousel-arrow.left {
  left: -1rem;
}
.carousel-arrow.right {
  right: -1rem;
}
.carousel-arrow:hover {
  background: var(--black);
  color: var(--white);
}


.hero {
    background: url(../img/hero.png) no-repeat center center / cover;
    text-align: center;
    height: 100vh;
    z-index: var(--z-index);
    display: flex;
    flex-direction: column;
    padding-top: 40px;
    line-height: .9;
    

    h1 {
        span {
            font-size: 2rem;
            font-weight: 700;
            text-transform: uppercase;
            text-align: left;
            color: var(--color ,var(--white));
            text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
            display: block;

            &:first-child {
                --color: #FE6367;
            }
            &:last-child {
                --color: #4868FF;
            }
        }
    }

    p {
        font-size: 1rem;
        text-align: left;
        line-height: 1.5;
        color: var(--color ,var(--white));
    }

    .action {
        display: flex;
        justify-content: start;
        align-items: start;
        gap: 1rem;

        a {
            width: 150px;
            height: 50px;
            overflow: hidden;
            text-indent: -9999px;

            &:first-child {
                background: url(../img/AppleStore.png) no-repeat center center / cover;
            }
            &:last-child {
                background: url(../img/GoogleStore.png) no-repeat center center / cover;
            }
        }
    }

    .logo.large {
        width: 100px;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
    }
}

.hidden {
    display: none;
}



@media (min-width: 53em) {

    :root {
        --br: 5rem;
    }
    
    .wrapper {
        --wrapper-wrap: wrap;
        --wrapper-direction: row;
        --wrapper-padding: 0;
        gap: 2rem;
    }

    .nav {
        --menu-padding: 0;
        --menu-bg: transparent;
        --menu-toggle-display: none;
        --menu-position: static;
        --menu-inset: 0;
        --menu-item-width: auto;
        --flex-direction: row;
        --menu-transform: translateX(0);
        --menu-item-close-display: none;
    }

    .hero {
        .box {
            align-self: center;
        }
        h1 {
            span {
                font-size: 4rem;
            }
        }
        p {
            font-size: 2.7rem;
        }
        .logo.large {
            width: 300px;
        }
    }

    .section {
        &.first {
            --phone-width: 250px;

        }
        &.second {
            padding: 4rem 0;
        }
        &.third {
            --section-third-height: 1200px;
            padding: 4rem 0;
        }
    }

    footer {
         .wrapper {
            height: 100%;
        }
    }

    .carousel-arrow.left {
        left: 0.5rem;
    }
    .carousel-arrow.right {
        right: 0.5rem;
    }

    .carousel-wrapper {
        p {
            font-size: 1.5rem;
        }
    }

}