@font-face {
    font-family: "Inter Light";
    src: url("../fonts/Inter-Light.ttf")
}

@font-face {
    font-family: "Inter Regular";
    src: url("../fonts/Inter-Regular.ttf")
}

@font-face {
    font-family: "Barlow";
    src: url("../fonts/Barlow-Regular.ttf")
}

@font-face {
    font-family: "Barlow Medium";
    src: url("../fonts/Barlow-Medium.ttf")
}

@font-face {
    font-family: "Barlow Semi Condensed Semi Bold";
    src: url("../fonts/Barlow-Semi-Condensed-Semi-Bold.woff")
}

@font-face {
    font-family: "Barlow Semi Condensed";
    src: url("../fonts/Barlow-Semi-Condensed.woff")
}

body {
    font-family: 'Barlow', sans-serif;
    background: #F8F8F8;
    justify-content: center;

}


/* hero */

.hero {
    background-image: url("../images/gym-background.jpg");
    background-size: cover;
    background-position: center;
    height: 60vh;
    max-height: 500px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 5%;
    box-sizing: border-box;
}

h1 {
    color: white;
    margin: 0;
    margin-bottom: 15px;
    width: 70%;
    line-height: 1.2;
    font-size: 36px;
    min-width: 200px;
}

h2 {
    color: white;
    font-size: 16px;
    width: 70%;
    line-height: 1.5;
    min-width: 200px;
    margin: 0;

}

.cta {
    margin-top: 15px;
    display: flex;
    gap: 5px;
}

.build-cta {
    color: black;
    text-decoration: none;
    background: #00FFD1;
    padding: 10px;
    border-radius: 10px;
    font-size: 16px;
    font-family: 'Barlow Medium', sans-serif;
    display: flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    justify-content: center;
    max-width: 300px;
    /* margin: 10px 0; */
}

.build-cta span {
    display: flex;
    gap:5px;
    align-items: center;
}

.build-cta:hover {
    background-color: #A1FFEE;
}

.mobile-app {
    width:auto;
    height:40px;
    background-color: #121212;
    padding: 5px;
    border-radius: 10px;
    box-sizing: border-box;
}

.mobile-app:hover {
    background-color: #363636;
}

@keyframes spin_words{

    20% {
        transform: translateY(0em);
    }
    25%{
        transform: translateY(-1.2em);
    }
    45%{
        transform: translateY(-1.2em);
    }
    50%{
        transform: translateY(-2.4em);
    }
    70%{
        transform: translateY(-2.4em);
    }
    75%{
        transform: translateY(-3.6em);
    }
    95%{
        transform: translateY(-3.6em);
    }
    100%{
        transform: translateY(-4.8em);
    }
}

.words {
    color: #00FFD1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    height:1.2em;
    font-size: 36px;

}

.hero-title {
    font-size: 70px;
    color: #FFF;
    font-family: "Barlow Semi Bold", sans-serif;
    line-height:1;
}

.hero-title > p {
    margin-top:0;
    bottom:0px;
    font-size: 70px;
    line-height:1;
}

.words > span {
    animation: spin_words 8s infinite;
}

.build-icon {
    padding-right: 2px;
    width: 12px;
}

/* sections */

section {
    display: flex;
    padding: 20px 5px;
    justify-content: center;
    /* height: 500px; */
}

section p {
    margin: 0;
    margin-bottom: 20px;
}

h3 {
    font-size: 32px;
    margin: 0;
    margin-bottom: 20px;
}

li {
    line-height: 1.2;
    margin-bottom: 15px; 
}


.section-img {
    width: 30%;
    object-fit: cover;
    max-width: 250px;
}

.build-img {
    margin-left: 5%;
    object-position: left;
}

.track-img {
    object-position: right;
    margin-right: 5%;
}

.analyse-img {
    margin-left: 5%;
    object-position: left;
}

.section-content {
    display:flex;
    flex-direction: column;
    justify-content: center;

}

.track {
    background-color: #FFF;
}

/* end */

.end {
    background-image: url("../images/deadlift.jpg");
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 0;
}

.mobile-app-download {
    width:auto;
    height:60px;
    border-radius: 10px;
    box-sizing: border-box;
}





@media only screen and (max-width:280px) {

    .build-icon {
        display: none;
    }


    }

@media only screen and (max-width:450px) {


h2 {
    display: none;

}

h1 {
    text-align: center;
    width: 100%;
}

.cta {
    justify-content: center;
}

.words {
    text-align: center;
}

}

@media only screen and (min-width:1300px) {


    h1 {
        font-size: 50px;
    }

    .words {
        font-size: 50px;
    }

    h2 {
        font-size: 22px;
    }

    .build-cta {
        font-size: 22px;
        padding: 20px 40px;
        height: 60px;
    }

    .build-icon {
        width: 15px;
        padding-right: 8px;
    }

    .mobile-app {
        height: 60px;
        padding: 10px;
    }

    .cta {
        gap: 30px;
    }

    h3 {
        font-size: 40px;
        margin-bottom: 20px;
    }

    p {
        font-size: 18px;
    }

    section p {
        margin-bottom: 30px;
    }


    .mobile-app-download {
        height:80px;
    }

    
    .end {
        gap: 10px;
    }

    .hero {
        max-height: 800px;
    }

    section {
        padding: 130px 20px;
    }

    .build-img {
        margin-left: 150px;
    }

    .track-img {
        margin-right: 150px;
    }

    .analyse-img {
        margin-left: 150px;
    }

    
    }