body{
    margin: 0;
    background-color: var(--primary-color);
    overflow-x: hidden;
}
a{
    text-decoration: none;
}
p{
    margin: 0px;
}
:root{
    --primary-color: #f6f4e0;
    --secondary-color: #6d9584;
    --accent-color: #ea614f;
    --dark-color: #2a2a2a;
    --white-color: #eef5e9;

    --light-color: #f7f3e1;

    --commisioner-font: "Commissioner", sans-serif;
    --lora-font: "Lora", serif;
}
.rnd-btn{
    border-radius: calc(infinity * 1px);
}
.mobile-downwards{
    flex-direction: row;
}
.small-text{
    font-size: 16px;
}
@media (max-width: 768px) {
    .mobile-downwards{
        flex-direction: column;
    }
    .small-text{
        font-size: 14px;
    }
}
/* .vh-col-1 { height: 8.333333%; }
.vh-col-2 { height: 16.666667%; }
.vh-col-3 { height: 25%; }
.vh-col-4 { height: 33.333333%; }
.vh-col-5 { height: 41.666667%; }
.vh-col-6 { height: 50%; }
.vh-col-7 { height: 58.333333%; }
.vh-col-8 { height: 66.666667%; }
.vh-col-9 { height: 75%; }
.vh-col-10 { height: 83.333333%; }
.vh-col-11 { height: 91.666667%; }
.vh-col-12 { height: 100%; } */

.commissioner {
  font-family: "Commissioner", sans-serif;
}
.lora {
  font-family: "Lora", serif;
}

.m-h{
    margin: 3em 0px !important;
}
.m-h2{
    margin: 5em 0px !important;
}
.m-h25{
    margin: 5.5em 0px !important;
}
.m-h3{
    margin: 10em 0px !important;
}
.m-h35{
    margin: 15em 0px !important;
}
.m-h4{
    margin: 20em 0px !important;
}

.pd-h{
    padding: 3em 0px;
}
.pd-hb{
    padding: 5em 0px;
}
.pd-w{
    padding: 0px 3em;
}
.pd-lb{
    padding-left: 6.5em;
}
.pd-rb{
    padding-right: 1em;
}

/* COLORS */

.bg-pr{
    background-color: var(--primary-color);
}
.bg-sec{
    background-color: var(--secondary-color);
}
.bg-bl{
    background-color: var(--dark-color);
}
.bg-acc{
    background-color: var(--accent-color);
}
.txt-pr{
    color: var(--primary-color);
}
.txt-sec{
    color: var(--secondary-color) !important;
}
.txt-bl{
    color: var(--dark-color);
}
.txt-wh{
    color: var(--white-color);
}
.txt-acc{
    color: var(--accent-color);
}

/* BUTTONS */

.btn-pr {
    background-color: var(--primary-color);
    color: var(--dark-color);
    border-radius: calc(infinity * 1px);
    transition: all 0.3s ease;
}

.btn-pr:hover {
    background-color: #e8e5d0;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Secondary button */
.btn-sec {
    background-color: var(--secondary-color);
    color: var(--white-color);
    border-radius: calc(infinity * 1px);
    padding: 1em 2em;
    transition: all 0.3s ease;
}

.btn-sec:hover {
    background-color: #5d8474;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* Accent button */
.btn-acc {
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: calc(infinity * 1px);
    padding: 0.7em 3em;
    transition: all 0.3s ease;
}

.btn-acc:hover {
    background-color: #e05746;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

.btn-acc-out {
    /* background-color: var(--accent-color); */
    border: 3px solid var(--accent-color);
    color: var(--accent-color);
    border-radius: calc(infinity * 1px);
    padding: 0.4em 3em;
    transition: all 0.3s ease;
    font-size: 14px;

    padding: 0.5em 0; 
    
    /* Добавляем флекс для идеального центрирования текста */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.btn-acc-out:hover {
    /* background-color: #e05746; */
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* White (outline) button */
.btn-wh {
    color: var(--dark-color);
    border: var(--dark-color) solid 1px;
    border-radius: calc(infinity * 1px);
    padding: 0.5em 2em;
    font-size: 14px;
    transition: all 0.3s ease;
    background-color: transparent;
}

.btn-wh:hover {
    background-color: var(--dark-color);
    color: var(--white-color);
    transform: scale(1.03);
}

/* Black button */
.btn-bl {
    background-color: var(--dark-color);
    color: var(--white-color);
    border-radius: calc(infinity * 1px);
    padding: 1em 2em;
    transition: all 0.3s ease;
}

.btn-bl:hover {
    background-color: #1a1a1a;
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

/* TEXT */

.bold{
    font-weight: 600;
}
.italic{
    font-style: italic;
}