@font-face {
    font-family: SF-Light;
    src: url('../fonts/sf-pro/SF-Pro-Display-Light.otf');
}
@font-face {
    font-family: SF-Regular;
    src: url('../fonts/sf-pro/SF-Pro-Display-Regular.otf');
}
@font-face {
    font-family: SF-Medium;
    src: url('../fonts/sf-pro/SF-Pro-Display-Medium.otf');
}
@font-face {
    font-family: SF-Semibold;
    src: url('../fonts/sf-pro/SF-Pro-Display-Semibold.otf');
}
@font-face {
    font-family: Semibold;
    src: url('../fonts/RoadRadio/roadradio_bold.otf');
}
@font-face {
    font-family: Dewi-Ultrabold;
    src: url('../fonts/Dewi/RFDewiExpanded-Ultrabold.woff2');
}

:root{
    --black: #333333;
    --main: #220A0A;
    --light-gray: #D1D1D1;
    --gray: #7A7A7A;
    --dewi: "Dewi-Ultrabold", sans-serif;
    --fw400: "SF-Regular", sans-serif;
    --fw500: "SF-Medium", sans-serif;
    --fw600: "SF-Semibold", sans-serif;
    --fw700: "Semibold", sans-serif;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}



.container{
	max-width: 1430px;
    margin: 0 auto;
    padding: 0 15px;
}
.body{
    font-family: "SF-Light", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--black);
}

.btn{
    border: 1px solid var(--main);
    background-color: var(--main);
    border-radius: 10px;
    padding: 0 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    height: 61px;
    font-family: var(--fw400);
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    transition: 0.3s;
}
.btn:hover{
    background-color: #fff;
    color: var(--main);
}
/*.btn:hover svg path{
    fill: var(--main);
    stroke: var(--main);
}*/
.btn2{
    border: 1px solid #fff;
    background-color: transparent;
}
.btn3{
    background-color: transparent;
    color: var(--main);
}
.btn3:hover, .btn2:hover{
    background-color: var(--main);
    color: #fff;
    border-color: var(--main);
}

.header_page .btn2:hover{
    color: #fff;
}
.btn3:hover svg path{
    fill: #fff;
    stroke: #fff;
}
h1, .h2, .h3{
    font-family: var(--dewi);
    text-transform: uppercase;
}
.h2{
    font-size: 60px;
    text-align: center;
}
.h3{
    font-size: 40px;
    text-align: center;
}
.mb{
    margin-bottom: 110px;
}
.mb15{
    margin-bottom: 15px;
}
.bold{
    font-family: var(--fw700);
}

.input {
    height: 61px;
    width: 100%;
    outline: none;
    background-color: #f1f1f1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 30px;
    font-size: 16px;
    color: var(--black);
    border-radius: 10px;
    border: none;
    margin-bottom: 16px;
}


.the_content{
    margin-top: 50px;
}
.the_content p, .the_content h3, .the_content h4, .the_content ul{
    margin-bottom: 10px;
    font-size: 20px;
    line-height: 125%;
}
.the_content h2{
    margin-bottom: 30px;
    font-weight: 500;
}
.the_content h3, .the_content h4{
    font-weight: 500;
}
.the_content ul{
    padding-left: 20px;
}
.the_content li::marker {
  color: #CD5C4C ;
}
.the_content li:not(:last-child) {
  margin-bottom: 5px;
}

.the_content td{
    border-color: rgba(68, 68, 68, 0.25);
    padding: 20px 30px;
}

.the_content td a{
    text-decoration: none;
    margin: 0 5px;
}
.the_content table{
    margin-bottom: 40px;
}