:root {
 --desctope:       1000px;
 --m-b:            4rem;
 --red:            #B39659;
 --color-:         #003459;
 --a-hover:        var(--color-l);
 --color-d:        #B39659;
 --color-l:        #59a2b3;
 --color-sl:       #def4ff;
 --simbol:         ProTo;
 --menu-bg-phone:  linear-gradient(180deg,rgb(0 0 0 / 84%) 0%, rgb(61 51 30) 63%);
}
@font-face {
 font-family: 'title';
 src: url('../fonts/RobotoCondensed-Bold.woff2') format('woff2'), url('../fonts/RobotoCondensed-Bold.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'regular';
 src: url('../fonts/Roboto-Regular.woff2') format('woff2'), url('../fonts/Roboto-Regular.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
table {
 --bg-th:           var(--color-);
 --color-th:        #fff;
 --bord-th:         var(--gray);
 --bg-td:           #fff;
 --bord-td:         var(--gray);
}
a {
 --color: var(--color-);
 text-decoration: none;
}
body {
 background: transparent url(../images/bg.svg) no-repeat bottom center;
 background-size: cover;
 background-attachment: fixed;
 font-family: 'regular';
}
.logo {
 display: flex;
 gap: 4rem;
 justify-content: center;
 margin: -2rem 1rem 4rem;
}
.logo img {
 max-height: 65px;
}
[class*=btn] {
 --radius: 30px;
 font-size: 1.3rem;
}
.f-size-1 {
 font-size: .9rem;
}
:is(.btn-line,*.btn-line,.btn-line>*):hover {
 --bord: solid 1px var(--color-l);
 --color: var(--color-l) !important;
}
.menu {
 text-align: right;
 margin: 2rem;
}
.lang:before {
 --f-size: 1.3rem;
}
.section :is(h1, h2, h3, h4, h5, h6) {
 padding-bottom: 1rem;
}
h1.title {
 font-family: 'title';
 --color: var(--color-);
 text-wrap: balance;
 --f-size: 60px;
 --m-b: 2rem;
}
h2 {
 text-align: center;
 --f-size: 30px;
 --color: var(--color-);
 margin-bottom: 2rem;
}
h3, .h3 {
 --f-size: 1.4rem;
 --color: var(--color-);
}
p ~ .title {
 margin-top: 3.5rem;
}
.title a, a.title , a .title {
 text-decoration: none !important;
}
footer {
 margin: 4rem 1rem 1rem;
}
footer * {
 color:var(--color-);
}
.flex-2 {
 display: flex;
 justify-content: center;
 align-items: baseline;
 gap: 1rem;
}
/*phone*/
@media (max-width: 769px) {
 .logo {
  display: block;
  margin: 1rem 1rem 4rem;
 }
 .logo img {
  max-width:250px;
  margin: auto;
 }
 .title, .box, .section {
  margin-bottom: 2rem !important;
 }
 p ~ .title {
  margin-top: .5rem;
 }
 .flex-2 {
  display: block;
 }
}
/*ipad*/
@media (min-width: 769px) and (max-width: 1024px) {
}
/*ipad portrait*/
@media  (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
}
/*notebook*/
@media only screen and (max-width: 1650px) {
}
/*square*/
@media screen and (min-width: 1025px) and (max-width: 1400px) {
}