@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap');

* {margin: 0;padding: 0;box-sizing: border-box;}
*::after { box-sizing: border-box;}
*::before {box-sizing: border-box;}
*::selection {background-color: rgba(212, 2, 2, 0.205); color: #fff;}
*:focus-visible {outline: none;}
*::placeholder{font-family: 'Rubik', sans-serif; color: #808080;}

textarea{font-family: 'Rubik', sans-serif;}

body {background-color: #FFFFFF; font-family: 'Rubik', sans-serif; overflow-x: hidden;}

img{max-width: 100%; height: auto; object-fit: cover;}

a{text-decoration: none; color: #6F6F6E; transition: all 200ms;}
a:hover{color: #434343;}
ol{padding-left: 15px;}
p{font-size: 16px !important;}

h1{font-size: clamp(2.000rem, 1.639rem + 1.603vw, 3.563rem); line-height: 100%; font-weight: 400;} /*57px->32px*/
h2{font-size: clamp(1.625rem, 1.481rem + 0.641vw, 2.250rem); line-height: 100%; font-weight: 400;} /*36px->26px*/
h3{font-size: clamp(1.250rem, 1.077rem + 0.769vw, 2.000rem); line-height: 100%; font-weight: 400;} /*32px->20px */
h4{font-size: clamp(1.125rem, 1.010rem + 0.513vw, 1.625rem); line-height: 100%; font-weight: 400;} /*26px->18px*/
h5{font-weight: 400;}
h6{font-weight: 400;}


.container-wide{max-width: 1350px; width: 100%; margin: 0 auto; padding: 0 50px;}
.container-narrow{max-width: 1100px; padding: 0 50px; width: 100%; margin: 0 auto;}

.btn{background: #1C1C1B;border-radius: 6px;padding: 10px 25px;display: flex;justify-content: center;align-items: center;color: #fff;font-style: normal;font-weight: 400;font-size: clamp(0.813rem, 0.784rem + 0.128vw, 0.938rem) /*15px->13px*/;width: fit-content;line-height: 23px; transition: all 200ms;}

.btn.btn-arrow{padding-right: 40px; position: relative;}

.btn.btn-arrow::before{content: ''; mask-image: url(../images/icons/arrow.svg); -webkit-mask-image: url(../images/icons/arrow.svg); top: 50%; transform: translateY(-50%); right: 17px; height: 14px; width: 14px; mask-size: cover; mask-position: center center; mask-repeat: no-repeat; -webkit-mask-size: cover; -webkit-mask-position: center center; -webkit-mask-repeat: no-repeat; background: #242D42; position: absolute; transition: all 350ms;}  

.btn:hover{background: #292929; color: #fff;}

.btn.liveedit{background: #1775f1 !important;color: white !important;font-weight: 700 !important;padding: 5px 30px !important;font-size: 14px !important; width: 102px !important; height: 33px !important; margin: 10px 0; z-index: 1; position: relative;}
.btn.liveedit.absolute{position: absolute; top: 0; left: 0;}

/* icons */


.gray-frame{background: gray;padding: 10px;color: white;}
.gray-frame h1{font-size: 14px !important; max-width: 820px; margin: 0 auto; text-align: center;}

.section-title{display: flex; gap: 15px; align-items: center;}

.section-title .title{color: #FFF;text-align: center;font-size: 18px;font-family: Rubik; text-transform: uppercase;}
.section-title .bar{height: 1px; width: 40px; background-color: #ffffff;}

.section-title.dark .title{color: #242D42;}
.section-title.dark .bar{background-color: #242D42;}

@media screen and (max-width: 1600px){
    p{font-size: clamp(0.938rem, 0.847rem + 0.403vw, 1.250rem) !important; line-height: clamp(1.250rem, 1.232rem + 0.081vw, 1.313rem) !important;} 
}

@media screen and (max-width: 1024px){
    .container-wide{padding: 0 30px}

    
}

@media screen and (max-width: 500px){
    .container-wide{padding: 0 15px}
    .section-title{padding:  0;}
    .section-title .title{text-align: left;}
    .container-narrow{padding: 0 30px;}
}