@charset "UTF-8";

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
:root { }
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body{
margin: 0;
padding: 0;
background: white;
color:black;
}
body.no-scroll{
overflow: hidden;
}
h1, h2, h3, h4, h5, a, p, span, div, button, li{ 
font-family: "Manrope", sans-serif;
}
h1 {
margin: 0px;
padding: 0px;
font-size: 2em;
padding-bottom: 15px!important;
}
h2{
margin: 0px;
padding: 0px;
padding-bottom: 15px!important;
}
h3{
margin: 0;
padding-bottom: 15px!important;
}
ul{
padding-bottom: 15px!important;
}
hr {
-webkit-box-sizing: content-box;
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-size: 1em;
}
a {
background-color: transparent;
text-decoration: none;
font-style: normal;
font-weight: 300;
text-decoration: none;
font-size: var(--normal-p-size);
}
p{
font-style: normal;
font-weight: 300;
font-size: var(--normal-p-size);
line-height: 1.2;
margin: 0px;
}
span{
font-style: normal;
font-weight: 300;
font-size: var(--normal-p-size);
line-height: 1.2;
margin: 0px;
}
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
border-bottom: none;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
display:block;
max-width:100%;
}
video{
width:100%;
}
button,
input,
optgroup,
select,
textarea {
margin: 0;
font-size: 100%;
line-height: 1.15;
padding:0px;
}
button,
input {
overflow: visible;
}
button{
cursor:pointer;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
padding: 0;
border-style: none;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
display: table;
-webkit-box-sizing: border-box;
box-sizing: border-box;
max-width: 100%;
padding: 0;
color: inherit;
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
outline-offset: -2px;
-webkit-appearance: textfield;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
font: inherit;
-webkit-appearance: button;
}
details {
display: block;
}
summary {
display: list-item;
}
ul{
list-style: none;
padding: 0px;
margin: 0px;
}
.btn{
padding: 10px 30px;
border-radius: 30px;
border: 1px solid white;
font-weight: 700;
transition: .3s;;
}
.btn:hover{
transition: .3s;;
}
.btn__white{
background: white;
color: var(--main-bg-black);
}
.btn__white:hover{
background: transparent;
}
.container{
max-width: 1170px;
margin: 0 auto;
padding: 0px 100px;
}
@media(max-width:1024px){
.container{
padding: 0px 40px;
}
}
@media(max-width:768px){
.container{
padding: 0px 20px;
}
}
.desctop{
display: block;
}
.mobile{
display: none;
}
@media(max-width:768px){
.desctop{
display: none;
}
.mobile{
display: block;
}
}
.burger{
background: transparent;
border: 0;
outline: 0;
display: grid;
gap: 6px;
}
.burger span{
width: 35px;
height: 1px;
background: black;
transition: .3s;
z-index: 123123;
}
.burger.close span{
transition: .3s;
}
.burger.close span:nth-child(2){
width: 20px;
}
.burger.close span:nth-child(3){
width: 5px;
}
header{
position: relative;
width: 100%;
padding: 30px 0px;
z-index: 1111231321;
border-bottom: 1px solid #DDDDDD;
}
@media(max-width:500px){
header{
padding: 20px 0px;
}
}
.header__flex{
display: flex;
justify-content: space-between;
align-items: center;
}
.header__nav--list{
display: flex;
gap: 30px;
align-items: center;
padding-bottom:0px!important;
}
header a{
transition: .3s;
}
header a:hover{
transition: .3s;
opacity: .5;
}
.page__grid{
display: grid;
grid-template-columns: 2fr 1fr;
gap: 40px;
}
@media(max-width:768px){
.page__grid{
grid-template-columns: 1fr;
}
}
.banner__article{
display: block;
}
.banner__article img{
width: 100%;
height: auto;
}
.banner__article .box{
position: relative;
}
.banner__article .box__content{
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
width: 100%;
box-sizing: border-box;
padding: 20px;
}
.banner__article .box__content span{
color:black;
background: white;
padding: 6px 15px;
border-radius: 30px;
display: inline-block;
margin-bottom: 10px;
font-size: 13px;
}
.banner__article .box__content .title{
color:white;
font-weight: 600;
font-size: 31px;
}
.banner .list{
display: grid;
gap: 20px;
}
section{
margin: 40px 0px;
}
section h2{
margin-bottom: 20px;
}
section h2::after{
content: '';
display: block;
width: 20px;
height: 4px;
background: #626EEF;
margin: 10px 0px 0px;
}
.grid__one .list{
display: grid;
grid-template-columns: 1fr 1fr;
gap:30px;
}
@media(max-width:768px){
.grid__one .list{
grid-template-columns:  1fr;
}
}
.grid__one .list img{
width: 100%;
max-height: 230px;
height: 100%;
object-fit: cover;
}
.grid__one--item{
box-shadow: 0 1px 2px #ddd;
}
.grid__one--item .content p, .grid__three--item .content p{
color: black;
}
.grid__one--item .content{
padding: 15px;
box-sizing: border-box;
}
.grid__one--item .content .title, .grid__three--item .content .title{
font-weight: 700;
font-size: 19px;
line-height: 1.3;
margin-bottom: 10px;
}
.grid__one--item .content .desc, .grid__three--item .content .desc{
font-weight: 400;
font-size: 13px;
line-height: 1.3;
margin-bottom: 20px;
opacity: .5;
}
.grid__two .list{
display: grid;
gap: 20px;
}
.grid__two--item a{
display: flex;
gap: 20px;
align-items: center;
}
.grid__two--item a img{
width: 100px;
height: 70px;
object-fit: cover;
}
.grid__two--item .title{
color:black;
font-weight: 700;
font-size: 17px;
margin-bottom: 10px;
}
.page__siderbar .grid__two--item .title{
font-size: 13px;
}
.grid__three .list{
display: grid;
gap:20px;
}
.grid__three--item a{
display: grid;
grid-template-columns: 2fr 3fr;
gap:20px;
}
@media(max-width:768px){
.grid__three--item a{
grid-template-columns: 1fr;
}
.grid__three--item a img{
width: 100%;
height: auto;
}
}
.link{
color: #626EEF;
font-size: 13px;
margin-bottom: 10px;
display: block;
font-weight: 400;
transition: .3s;
}
.link:hover{
opacity: .5;;
transition: .3s;
}
.btn{
color: #626EEF;
padding: 6px 10px;
border: 1px solid #626EEF;
border-radius: 0px;
display: inline-block;
font-size: 13px;
transition: .3s;
font-weight: 500;
}
.btn:hover{
transition: .3s;
color: white;
background: #626EEF;
}
.logo img{
max-width: 160px;
}
.header__nav--list a{
color: black;
font-weight: 700;
font-size: 13px;
}
footer{
background-color: #252e38;
padding: 20px;
color: #848f9a;
border-top: 5px solid #626EEF;;
}
footer p{
color: #848f9a;
text-align: center;
}
.modal{
transition: .5s;
z-index: 111;
}
.modal.active{
transition: .5s;
}
.modal__mobile-nav{
position: fixed;
height: 100vh;
width: 100%;
top:0;
left: 100%;
background: white;
}
.modal__mobile-nav.active{
left: 0;
}
.modal__mobile-nav .box{
position: relative;
margin-top: 150px;
height: 100%;
box-sizing: border-box;
align-content: flex-start;
display: grid;
gap:30px;
}
.modal_nav--list{
display: grid;
gap:10px;
}
.modal_nav--list a{
font-size: 21px;
font-weight: 700;
color: black;
}
.single h1{
margin: 20px 0px 10px;
}
.single .author{
font-weight: 500;
}
.single p{
margin-bottom: 20px;
line-height: 1.3;
}
.single img{
margin: 20px auto;
} .responsive-block {
display: grid;
grid-template-columns:repeat(3, 1fr);
gap: 20px;
max-width: 1200px;
margin:30px 0px;
}
@media(max-width:768px){
.responsive-block {
grid-template-columns:1fr;
}
} .card {
flex: 1;
text-align: left;
background: #f9f9f9;
padding: 15px;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
} .card img {
width: 100%;
height: auto;
max-height: 200px;
object-fit: cover;
border-radius: 4px;
} .card h3 {
margin: 10px 0 5px;
font-size: 1.2rem;
} .card p {
font-size: 0.9rem;
color: #666666;
margin: 0;
}
.card {
color: inherit; text-decoration: none; display: block; } @media (max-width: 768px) {
.responsive-block {
flex-direction: column;
}
.card {
display: none;
}
.card:first-child {
display: block;
}
}
.grid__three--item img{
height:auto;
}
.single__content ul {
list-style: disc;
padding-left: 15px;
display: grid;
margin: 0px;
gap: 5px;
}