/*
This file describes styles that are 768px width and smaller
 */
@media all and (max-width: 768px) {

    .main-block .content >*{
        text-align: center
    }
    .text-after-title{
        padding: 0 15%;
        font-size: 1.5rem
    }
   .header .container > .logo img {
        width: 65px
    }
    .header-mobile-wrap .logo{
        width: 50px
    }
    .subtitle {
        font-size: 1.4rem;
        letter-spacing: 4px;
        gap: 8px
    }

    .contact__title{
        padding: 0
    }
    .diamond .line-1, .diamond .line-2 {
        width: 160px
    }
    .founder__title h2{
        text-align: center;
        line-height: 1.2
    }
    .founder__title h2 + div{
        text-align: center
    }
    .founder__photo .quote{
        font-size: 1.4rem;
        left: -47px;
        width: 200px;
        line-height: 1.25
    }
    .founder__name span:first-child {
        font-size: 2.2rem
    }
    .founder__title h2 + div {
        margin-top: 7px
    }
    .founder__photo {
        margin-top: 20px
    }
    .flip-back {
        padding: var(--size-1)
    }
    .founder__title{
        min-height: auto
    }
    .call{
        right: var(--size-2);
        bottom: var(--size-2)
    }
    .call img{
        height: 20px
    }
    .call-animation {
        width: 52px;
        height: 52px
    }
    @keyframes play
    {
        0% {
            transform: scale(1);
        }
        15% {
            box-shadow: 0 0 0 5px rgba(170, 147, 126, 0.4);
        }
        25% {
            box-shadow: 0 0 0 7px rgba(170, 147, 126, 0.4), 0 0 0 18px rgba(170, 147, 126, 0.2);
        }
        25% {
            box-shadow: 0 0 0 9px rgba(170, 147, 126, 0.4), 0 0 0 22px rgba(170, 147, 126, 0.2);
        }
    }

}
@media all and (max-width: 600px){
    h1 {
        font-size: 8rem
    }
    h2 {
        font-size: 2.8rem;
        letter-spacing: 6px
    }
    h3 {
        font-size: 2rem;
        letter-spacing: 3px
    }
    .flip-front .content, .services__item .content{
        border: 2px solid var(--gold)
    }
    .services__btns{
        flex-direction: column;
        align-items: flex-start
    }
    .flip-front .content, .services__item .content{
        padding: var(--size-2) var(--size-1)
    }
    .flip-button, .popup__close{
        font-size: 1rem
    }
    .flip-button:before, .popup__close:before{
        bottom: -1px
    }
    .flip-button{
        margin-top: 10px
    }
   
   
}
@media all and (max-width: 480px){
   
    .subtitle {
        font-size: 1.2rem
    }
    .slide {
        width: 260px;
        height: 260px
    }
    .slides .round-text{
        width: 100px;
        right: -10px;
        top: -10px
    }

    .slides{
        height: 333.25px;
        width: 333.25px
    }
    .nav label {
        width: 14px;
        height: 14px;
        margin: 0 7px
    }
    .founder__photo .img-container {
        width: 260px;
        height: 260px
    }
    .founder__name {
        width: 280px;
        height: 95px
    }
    .diamond .line-1, .diamond .line-2{
        width: 100px
    }

    .services__item .content{
        width: calc(100% - 24px)
    }
    .flip-front .content >p, .services__item .content >p{
        font-size: 1.4rem
    }
}

@media all and (max-width: 360px){
    .slide {
        width: 200px;
        height: 200px
    }
    h3 {
        font-size: 1.8rem;
        letter-spacing: 4px
    }
    .flip-front .content >p, .services__item .content >p {
        font-size: 1.2rem
    }
    .flip-button, .popup__close {
        font-size: 1.2rem;
        letter-spacing: 2px
    }
    .flip-front .content, .services__item .content {
        padding: var(--size-1)
    }
    .flip-button {
        margin-top: 7px
    }
    .flip-front .content >p, .services__item .content >p{
        margin-top: 2px
    }
    .slides .round-text {
        width: 90px
    }
    .slides {
        height: 256.34px;
        width: 256.34px
    }
    .slides .round-text {
        right: -15px;
        top: -15px
    }
    .nav label {
        width: 12px;
        height: 12px;
        margin: 0 6px
    }
    .services__item {
        height: 260px
    }
    .founder__photo .img-container {
        width: 200px;
        height: 200px
    }
    .founder__photo .quote{
        position: static;
        margin-top: 12px
    }
   
}