/*  ==========  INFO  ==========  */
    /* laptop: 1200px */
    /* tablet: 960px */
    /* large-mobile: 640px */
    /* mobile: 480px */
    /* mini-mobile: 320px */
/*  ==========  END INFO  ==========  */






/*  ==========  CONTACTS  ==========  */
#contacts .contacts-inner{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 32px;
}
#contacts .text-wrap{
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 20px;
}
#contacts .text-wrap .tag{
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--color-background);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .4px;
}
#contacts .text-wrap .buttons-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

#contacts-form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
#contacts-form button{
    float: right;
}
@media screen and (max-width: 960px) {
    #contacts .contacts-inner{
        grid-template-columns: 1fr;
    }
}
@media screen and (max-width: 640px) {
    #contacts .text-wrap{
        align-items: center;
    }
    #contacts .text-wrap .buttons-wrap .button{
        width: 180px !important;
    }
}
/*  ==========  END CONTACTS  ==========  */






/*  ==========  CONTACTS GRID  ==========  */
#contacts-grid .contacts-grid-inner{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}
#contacts-grid .card{
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    box-sizing: border-box;
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--color-border);
}
#contacts-grid .card.highlight{
    background: linear-gradient(180deg, rgba(202, 214, 255, .85), rgba(238, 243, 248, .95));
}
#contacts-grid .card .icon{
    color: var(--color-accent);
}
#contacts-grid .card .title{
    font-size: 22px;
    font-weight: 500;
    color: var(--color-text-title);
}
#contacts-grid .card .text{
    font-size: 14px;
    line-height: 1.4;
    color: var(--color-text-secondary);
}
#contacts-grid .card .link{
    margin-top: auto;
    font-weight: 500;
    color: var(--color-accent);
}
@media screen and (max-width: 960px){
    #contacts-grid .contacts-grid-inner{
        grid-template-columns: 1fr 1fr;
    }
    #contacts-grid .card{
        min-height: auto;
    }
}
@media screen and (max-width: 640px){
    #contacts-grid .contacts-grid-inner{
        grid-template-columns: 1fr;
    }
}
/*  ==========  END CONTACTS GRID  ==========  */






/*  ==========  CONTACTS INFO  ==========  */
#steps .steps-inner{
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 20px;
}
#steps .info-block,
#steps .cta-card{
    padding: 32px;
    box-sizing: border-box;
    border-radius: 16px;
    border: 1px solid var(--color-border);
}
#steps .info-block .info-block{
    background: #fff;
}
#steps .info-block .steps{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}
#steps .info-block .step{
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px;
    border-radius: 12px;
    background: #eef3f8;
}
#steps .info-block .step .number{
    font-size: 28px;
    font-weight: 700;
    color: var(--color-accent);
}
#steps .info-block .step .text{
    font-size: 14px;
    color: var(--color-text-secondary);
    line-height: 1.5;
}
#steps .cta-card{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 18px;
    background: linear-gradient(135deg, #15334F 0%, #204a72 100%);
    color: #fff;
}
#steps .cta-card .title{
    font-size: 30px;
    line-height: 1.1;
    font-weight: 600;
}
#steps .cta-card .text{
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,.78);
}
#steps .cta-card .button{
    align-self: flex-start;
}
@media screen and (max-width: 960px){
    #steps .steps-inner{
        grid-template-columns: 1fr;
    }
    #steps .info-block .steps{
        grid-template-columns: 1fr;
    }
    #steps .info-block .steps .step{
        flex-direction: row;
        align-items: center;
    }
}
@media screen and (max-width: 640px){
    #steps .info-block,
    #steps .cta-card{
        padding: 24px;
    }
    #steps .cta-card .title{
        font-size: 24px;
    }
    #steps .cta-card .button{
        width: 100%;
    }
}
/*  ==========  END CONTACTS INFO  ==========  */