body{
    font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #1D1E1F;
    padding: 0;
    margin: 0;
    width: 100%;
}

a{
    color: #F24D47;
    text-decoration: none;
}

sup{
    font-weight: normal;
    font-size: 0.5em;
}

h2{
    text-align: center;
}

/* Nav */

nav{
    padding: 1em;
}

nav ul{
    list-style: none;
    margin: 0;
    opacity: 0.7;
}

/* Utils */

.right-text{
    text-align: right;
}

.center-text{
    text-align: center;
}

/* Forms */

form{
    line-height: 1.2em;
}

input{
    border: none;
    border-bottom: #1D1E1F 3px solid;
    background-color: transparent;
    font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-style: italic;
    min-width: 50%;
}

.beta-grid input{
    color: #fff;
}

.beta-grid input::placeholder {
    opacity: 0.5;
    color: #fff;
  }

button{
    text-align: center;
    display: inline-block;
    background-image: linear-gradient(259deg, #F14D50 0%, #F84C02 100%);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50), inset -20px 20px 64px 0 rgba(255,255,255,0.20);
    border: none;
    border-radius: 8px;
    padding: 1em 2em;
    transition: box-shadow background-image 0.2s ease-in-out;
    color: #fff;
    font-weight: bold;
    font-size: 1em;
}

/* Hero */

p.hero-text{
    max-width: 40%;
    text-shadow: #1D1E1F 1px 1px 1px;
}

div.trusted-by{
    margin: 3em 0;
}

.logo>img{
    height: 61px;
}

.hero-cta{
    text-align: center;
}
/* Sections */

section{
    margin: auto;
    width: 100%;
    background-color: #fff;
}

.container, .hero{
    padding: 2em;
}

section#hero{
    background-image: url('./images/heroimage.jpg');

    @supports (background-image: url('./images/heroimage.webp')) {
        background-image: url('./images/heroimage.webp');
    }

    background-position: bottom right;
    background-repeat: no-repeat;
    background-size: contain;
}

.awards-badges{
    background-image: url('./images/awards.png');

    @supports (background-image: url('./images/awards.webp')) {
        background-image: url('./images/awards.webp')
    }

    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    min-width: 20%;
}

@media (-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    section#hero{
        background-image: url('./images/heroimage@2x.jpg');

        @supports (background-image: url('./images/heroimage@2x.webp')) {
            background-image: url('./images/heroimage@2x.webp');
        }
    }

    .awards-badges{
        background-image: url('./images/awards@2x.png');

        @supports (background-image: url('./images/awards@2x.webp')) {
            background-image: url('./images/awards@2x.webp')
        }
    }
}

section#hero, footer{
    background-color: #1D1E1F;
    color: #fff;
}

section#awards, section#stats, section#beta{
    background-color: #F24D47;
    color: #fff;
}

section#cases, section#why-me{
    background-image: url("./images/Folio.jpg");
    @supports (background-image: url('./images/Folio.webp')) {
        background-image: url('./images/Folio.webp')
    }

    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
}

header>nav, .hero-grid, .services-grid, .beta-grid, .awards-grid, .brand-design-grid, .testimonials-grid, .domains-grid, .stats-grid, .cases-grid, .contacts-grid, .footer-grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
    align-items: center;
    max-width: 100%;
    gap: 2em;
}

.awards-grid, .footer-grid, .beta-grid{
    justify-content: space-around;
}

nav>.logo, nav>ul, .services-item, .beta-item, .awards-item, .testimonials-item, .brand-design-item, .domains-item, .stats-item, .cases-item, .brand-design-item, .contacts-item, .footer-item{
    order: 0;
    align-self: stretch;
    /* max-width: 50%; */
}

.trusted-by-grid{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    max-width: 100%;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
}

.beta-item{
    max-width: 768px;
}

.trusted-by-item{
    order: 0;
    max-width: 40%;
}

.testimonials-grid{
    justify-content: space-around;
}

.cases-item{
    max-width: 45%;
}

.testimonials-item{
    max-width: 40%;
    text-align: center;
    background-color: #fafafa;
    padding: 1em 2em;
    border-radius: 8px;
    border: #F14D50 1px solid;
    align-self: start;
}

.testimonials-item h1, .testimonials-item h2, .testimonials-item h3{
    margin: 0;
}

.testimonials-text{
    text-align: justify;
    text-indent: 1em;
}

#why-me p{
    line-break: auto;
    text-indent: 1em;
}

/* On Mobile */
@media screen and (max-width: 768px) {
    .hero-grid, .services-grid, .awards-grid, .brand-design-grid, .testimonials-grid, .domains-grid, .stats-grid, .cases-grid, .contacts-grid, .footer-grid, .beta-grid{
        flex-direction: column;
    }

    .desktop-only{
        display: none;
    }

    p.hero-text{
        max-width: 100%;
        background-color: rgba(0,0,0,0.50);
        text-shadow: none;
    }

    .logo{
        max-width: 50%;
    }

    .testimonials-item, .cases-item{
        max-width: 100%;
    }
}

.brand-design-item{
    max-height: 128px;
    text-align: center;
}

.brand-design-item h3, .brand-design-item p{
    transform: translateY(-3em);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    border-radius: 8px;
    background-color: #fff;
    max-width: 128px;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50), inset -20px 20px 64px 0 rgba(255,255,255,0.20);
}

.brand-design-item:hover h3{
    opacity: 1;
}

.services-item, .stats-item{
    min-width: 30%;
    text-align: center;
}

.stats-item h3{
    font-size: 3em;
    margin-bottom: 0;
    font-weight: bold;
}

.domains-item{
    min-width: 20%;
    text-align: center;
}

.contacts-item{
    min-width: 45%;
    padding-top: 2em;
}

/* Call-To-Action */

section.cta{
    text-align: center;
    padding: 2em 0;
}

span.cta-btn{
    display: inline-block;
    background-image: linear-gradient(259deg, #F14D50 0%, #F84C02 100%);
    box-shadow: 0 2px 4px 0 rgba(0,0,0,0.50), inset -20px 20px 64px 0 rgba(255,255,255,0.20);
    border-radius: 8px;
    padding: 1em 2em;
    transition: box-shadow background-image 0.2s ease-in-out;
}

span.cta-btn:hover{
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.50), inset -20px 20px 64px 0 rgba(255,255,255,0.20);
}

span.cta-btn:active{
    box-shadow: 0 0 2px 0 rgba(0,0,0,0.50);
}

span.cta-btn a{
    color: #fff;
    font-weight: bold;
    font-size: 1.2em;
}

/* Clutch */

.clutch-widget{
    background-color: #fff;
    width: 120px;
    margin: auto;
}

/* Footer */
.copyrights{
    text-align: center;
    opacity: 0.7;
}
.copyrights a{
    font-size: 0.5em;
    opacity: 0.5;
}

footer ul{
    list-style: none;
    margin: 0;
    padding: 0;
}