* {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: "Martian Grotesk";
    src: url('fonts/MartianGrotesk-StdRg.otf');
    src: url('fonts/MartianGrotesk-StdRg.woff2') format('woff2'),
         url('fonts/MartianGrotesk-StdRg.ttf') format('truetype');
}

@font-face {
    font-family: "Martian Grotesk Bold";
    src: url('fonts/MartianGrotesk-sWdBd.otf');
    src: url('fonts/MartianGrotesk-sWdBd.woff2') format('woff2'),
         url('fonts/MartianGrotesk-sWdBd.ttf') format('truetype');
}

@font-face {
    font-family: "Martian Grotesk Black";
    src: url('fonts/MartianGrotesk-sWdBl.otf');
    src: url('fonts/MartianGrotesk-sWdBl.woff2') format('woff2'),
         url('fonts/MartianGrotesk-sWdBl.ttf') format('truetype');
}

@font-face {
    font-family: "Graphik Regular";
    src: url('fonts/Graphik-Regular-Web.otf');
    src: url('fonts/Graphik-Regular-Web.woff2') format('woff2'),
         url('fonts/Graphik-Regular-Web.ttf') format('truetype');
}

@font-face {
    font-family: "Graphik Medium";
    src: url('fonts/Graphik-Medium-Web.otf');
    src: url('fonts/Graphik-Medium-Web.woff2') format('woff2'),
         url('fonts/Graphik-Medium-Web.ttf') format('truetype');
}

@font-face {
    font-family: "Graphik Bold";
    src: url('fonts/Graphik-Bold-Web.otf');
    src: url('fonts/Graphik-Bold-Web.woff2') format('woff2'),
         url('fonts/Graphik-Bold-Web.ttf') format('truetype');
}


body {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px;
    font-family: "Graphik Regular";
}


/* Photo */
.photo {
    margin: 0 0 30px 0;
}

@media screen and (max-width: 950px) {
    .photo {
        width: 150px;
        height: 150px;
    }
}


/* Titles */
h1 {
    font-size: 2.8rem;
    line-height: 4rem;
    padding: 0 0 10px 0;
    font-family: "Martian Grotesk Black";
    max-width: 900px;
    margin: 0 auto;
}

@media screen and (max-width: 950px) {
    h1 {
        font-size: 2.1rem;
        line-height: 2.8rem;
    }
}


h2 {
    font-size: 2.8rem;
    line-height: 4rem;
    padding: 0 0 10px 0;
    font-family: "Martian Grotesk Black";
}

@media screen and (max-width: 950px) {
    h2 {
        font-size: 2.1rem;
        line-height: 2.8rem;
    }
}



h3 {
    font-size: 2rem;
    line-height: 2.5rem;
    font-family: "Martian Grotesk Black";
}

@media screen and (max-width: 950px) {
    h3 {
        font-size: 1.4rem;
        line-height: 2.2rem;
    }
}


/* Text */
p {
    font-size: 1.4rem;
    line-height: 2.2rem;
    padding: 0px 0 15px 0;
}

@media screen and (max-width: 950px) {
    p {
        font-size: 1.2rem;
        line-height: 1.9rem;
    }
}


a {
    color: #000000;
    text-decoration: none;
    border-bottom: 2px solid rgba(183, 225, 231, 1);
    transition: 0.3s;
}

a:hover {
    color: rgba(236, 103, 103, 1);
    border-bottom: 2px solid rgba(236, 103, 103, 1);
    transition: 0s;
}

b {
    font-family: "Graphik Bold";
}

.nobr {
    white-space: nowrap; 
}


/* About */
.hey {
    margin: 40px 0 60px 0;
    text-align: center;
}


@media screen and (max-width: 950px) {
    .hey {
        margin: 10px 0 20px 0;
    }
}

.about {
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    grid-template-rows: 1fr; 
    grid-column-gap: 50px;
    grid-row-gap: 0px;
}

@media screen and (max-width: 950px) {
    .about {
        display: block;
        margin-bottom: 40px;
    }
}

.about__main {
    grid-area: 1 / 1 / 2 / 4;
}

@media screen and (max-width: 950px) {
    .about__main {
        max-width: 640px;
        margin: 0 auto 20px auto;
        padding-bottom: 20px;   
    }
}

.about__side {
    grid-area: 1 / 4 / 2 / 6;
}

.contacts {
    border: 1px solid rgba(0, 0, 0, .05);
    background: linear-gradient(0.12turn, rgba(183, 225, 231, .2), rgba(217, 211, 163, .2));
    border-radius: 15px;
    padding: 20px 20px 7px 20px;
}

.contacts p {
    line-height: 2rem !important;
}

@media screen and (max-width: 950px) {
    .contacts {
        max-width: 400px;
        margin: 0 auto;
        text-align: center;
    }

    .contacts p {
        line-height: 1.8rem !important;
    }
}

@property --d {
    syntax: '<angle>';
    inherits: false;
    initial-value: 180deg;
  }

.mail-button {
    color: rgba(0, 0, 0, .8);
    border-radius: 100px;
    padding: 20px 30px;
    background: linear-gradient(var(--d), #B7E1E7 0%, #D9D3A3 var(--p, 150%)), #B7E1E7;
    font-family: "Martian Grotesk";
    font-size: 1.4rem;
    line-height: 1.4rem;
    display: inline-block;
    position: relative;
    margin: 10px 0 20px 0;
    border-bottom: 3px solid #94B7AA !important;
    text-align: center;
    transition: 0.3s;
}

a:hover.mail-button {
    color: rgba(0, 0, 0, 1);
    --d: 190deg;
    --p: 110%;
    transform: scale(104%);
    border-bottom: 3px solid #AAB69B !important;
    transition: 0.3s;
}

.contacts__bigger {
    text-align: center;
    padding: 40px 20px 27px 20px;
    max-width: 640px;
    margin: 0 auto;
    background: none;
    border: 0;
}

@media screen and (max-width: 950px) {
    .contacts__bigger {
        padding: 20px 20px 7px 20px;
    }
}



/* Cases */
.cases {
    margin: 100px 0 60px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media screen and (max-width: 950px) {
    .cases {
        margin: 80px 0 60px 0;
        gap: 20px;
    }
}

.cases__main-title {
    text-align: center;
    background: -webkit-linear-gradient(160deg, #C1BD69, #B0DBE1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin: 0 0 20px 0;
    opacity: 1;
}

@media screen and (max-width: 950px) {
    .cases__main-title {
        margin: 0 0 5px 0;
    }
}

.cases__one {
    text-align: center;
    padding: 2em 2em 4em 2em;
    /* background: rgba(0,0,0,0.05); */
    background: linear-gradient(0.12turn, rgba(183, 225, 231, .2), rgba(217, 211, 163, .2));
    border-radius: 2em;
}

@media screen and (max-width: 950px) {
    .cases__one {
        padding: 1.5em 1.5em 2em 1.5em;
    }
}

.cases__title {
    padding: 60px 0 10px 0;
    text-align: center;
}

@media screen and (max-width: 950px) {
    .cases__title {
        padding: 35px 0 5px 0;
    }
}

.cases__info {
    text-align: center;
    opacity: .5;
    margin: 0 0 10px 0;
}

.cases__description {
    max-width: 640px;
    margin: 0 auto 0 auto;
    text-align: center;
}

@media screen and (max-width: 950px) {
    .cases__description {
        text-align: left;
    }
}


.cases__image {
    max-width: 100%;
    margin-bottom: -80px;
}

@media screen and (max-width: 950px) {
    .cases__image {
        margin-bottom: -30px;
    }
}

.cases__image--logo {
    margin: 30px 0 0 0;
}


.with-border {
    border: 2px solid rgba(0, 0, 0, .1);
    border-radius: 8px;
}

.cases__links {
    padding: 20px 0 10px 0;
    display: flex;
    justify-content: center;
    gap: 10px;
}

@media screen and (max-width: 950px) {
    .cases__links {
        padding: 15px 0 10px 0;
    }
}

@media screen and (max-width: 375px) {
    .cases__links {
        flex-direction: column;
    }
}

a.case-link {
    border: none;
    text-wrap: nowrap;
    font-size: 1.2em;
    background: rgba(150, 150, 150, 0.2);
    /* color: #2c80ff; */
    border-radius: 100px;
    padding: 0.75em 1.5em;
    transition: 0.3s;
}

a.case-link:hover {
    color: rgba(236, 103, 103, 1);
    background: rgba(236, 103, 103, 0.2);
    transition: 0s;
}

.testimonial {
    text-align: center;
    padding: 2em 3em 1em 3em;
    border-radius: 2em;
    margin: 0px 100px 0 100px;
    position: relative;
}

.testimonial p {
    font-size: 1.2rem;
    line-height: 2.1rem;
    padding: 0px 0 15px 0;
    max-width: 740px;
    margin: 0 auto;
}

.testimonial__author {
   top: 0px;
}

.testimonial__photo {
    margin-top: 10px;
    margin-bottom: 10px;
    width: 70px;
    height: 70px;
    border-radius: 1000px;
}

.testimonial:before {
    content: "";
    background: url( 'images/testimonial.svg');
    width: 100px;
    height: 128px;
    display: inline-block;
    position: absolute;
    top: 20px;
    left: -100px;
    z-index: -1;
}

.testimonial:after {
    content: "";
    background: url( 'images/testimonial.svg');
    width: 100px;
    height: 128px;
    display: inline-block;
    position: absolute;
    top: 20px;
    right: -100px;
    transform: rotate(180deg);
    z-index: -1;
}

@media screen and (max-width: 950px) {
    .testimonial {
        text-align: left;
        padding: 1.5em 1.5em .5em 1.5em;
        margin: 0 auto 0 auto;
        max-width: 640px;
    }

    .testimonial p {
        font-size: 1rem;
        line-height: 1.8rem;
        padding: 0px 0 15px 0;
    }

    .testimonial__photo {
        display: inline-block;
        width: 50px;
        height: 50px;
        margin-right: 10px;
        margin-bottom: 0;
    }

    .testimonial__author {
        top: -5px;
        display: inline-block;
        position: relative;
    }

    .testimonial:before, .testimonial:after {
        display: none;
    }
}


/* Footer */
.footer {
    font-size: 1rem;
    line-height: 1.8rem;
    margin: 60px 0 15px 0;
    color: rgba(0, 0, 0, .3);
    text-align: center;
}

.metsarme {
    font-size: 1rem;
}


/* DARK MODE */
@media (prefers-color-scheme: dark) {
    body {
        background: black;
        color: white;
    }

    a {
        color: white;
        border-bottom: 2px solid rgb(110 237 255)
    }

    .cases__one {
        background: linear-gradient(0.12turn, rgba(183, 225, 231, .1), rgba(217, 211, 163, .1))
    }

    .testimonial:before, .testimonial:after {
        opacity: .07;
    }
    
    .footer {
        color: rgb(255 255 255 / 50%)
    }
}