/*
@font-face {
    font-family: SF-Light;
    src: url(../fonts/SF-Pro-Display-Light.woff) format("woff");
    font-weight: 300;
    font-style: normal
}

@font-face {
    font-family: SF-Regular;
    src: url(../fonts/SF-Pro-Display-Regular.woff) format("woff");
    font-weight: 400;
    font-style: normal
}

@font-face {
    font-family: SF-Medium;
    src: url(../fonts/SF-Pro-Display-Medium.woff) format("woff");
    font-weight: 500;
    font-style: normal
}

@font-face {
    font-family: SF-SemiBold;
    src: url(../fonts/SF-Pro-Display-Semibold.woff) format("woff");
    font-weight: 600;
    font-style: normal
}

@font-face {
    font-family: SF-Bold;
    src: url(../fonts/SF-Pro-Display-Bold.woff) format("woff");
    font-weight: 700;
    font-style: normal
}
*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

a {
  text-decoration: none
}

li {
  list-style-type: none
}

button {
  outline: 0;
  border: none;
  background-color: transparent;
  cursor: pointer
}

input,textarea {
  outline: 0;
  border: none
}

.button_pulse_effect {
  position: relative;
  overflow: hidden
}

.button_pulse_effect * {
  pointer-events: none
}

.button_pulse_effect .cercle {
  width: 0;
  height: 0;
  position: absolute;
  border-radius: 50%
}

.button_pulse_effect .anim {
  opacity: .3;
  animation: touch .4s ease-out
}

.button_pulse_effect .touched {
  width: var(--max-size);
  height: var(--max-size);
  opacity: .2;
  margin: calc(var(--max-size)/ -2)
}

@keyframes touch {
  40% {
      opacity: .2
  }

  100% {
      width: var(--max-size);
      height: var(--max-size);
      opacity: .2;
      margin: calc(var(--max-size)/ -2)
  }
}

:root {
  --color-main: #F54C3D;
  --color-text: #FFFFFF;
  --color-black: #0C0D0D;
  --color-white: #FFFFFF;
  --color-grey-1: #49504E;
  --color-grey-2: #798682;
  --color-aquamarine: #7FFFD4;
  --color-dark-green: #182521;
  --color-blue: #3377FF;
  --color-red: #EB4747;
  --color-bg: #0C0D0D
}

* {
  /* font-family: SF-Regular; */
  color: #000000;
}

a:hover {
  color: #204aab;
  transition: all .3s
}

body {
  background-color: #ffffff;
  font-family: sans-serif;
}

.title {
  color: #000000;
  font-size: 28px;
  /* font-family: SF-SemiBold;*/
  letter-spacing: .02ch
}

.content-grid,.full-width {
  --padding-inline: 48px;
  --max-width: 950px;
  display: grid;
  grid-template-columns: [full-width-start] minmax(var(--padding-inline),1fr) [content-start] min(100% - var(--padding-inline) * 2,var(--max-width)) [content-end] minmax(var(--padding-inline),1fr) [full-width-end]
}

.content-grid>:not(.full-width),.full-width>:not(.full-width) {
  grid-column: content
}

.content-grid>.full-width,.full-width>.full-width {
  grid-column: full-width
}

.content-grid .full-width,.full-width .full-width {
  display: grid;
  grid-template-columns: inherit
}

.header {
  border-bottom: 1px solid var(--color-dark-green)
}

.header>div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 48px;
  padding: 24px 0
}

.header .logo {
  height: 25px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 36px;
  /* font-family: SF-Bold */
}

.header .logo span {
  font-size: 12px;
  /* font-family: SF-Regular; */
  line-height: 140%
}

.header .logo hr {
  height: 100%;
  width: 1px;
  background-color: #204aab;
  border: none
}

.header .search_wrapper {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px
}

.header .search_wrapper input {
  width: 100%;
  background-color: #e2e6f0;
  border-radius: 12px;
  padding: 14px 16px;
  font-size: 16px
}

.header .search_wrapper input::placeholder {
  color: var(--color-grey-2);
  font-size: inherit
}

.header .search_wrapper button {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #204aab;
  border-radius: 12px
}

.header .menu {
  height: 100%;
  display: flex;
  gap: 24px;
  font-size: 16px;
  /* font-family: SF-Medium */
}

.header .menu .dropdown button,.header .menu>a {
  height: 100%;
  display: flex;
  align-items: center
}

.header .dropdown {
  position: relative
}

.header .dropdown[data-active=true] button {
  color: #204aab;
}

.header .dropdown[data-active=true] button svg {
  transform: rotate(180deg)
}

.header .dropdown[data-active=true] button svg path {
  fill: #204aab;
}

.header .dropdown[data-active=true] ul {
  opacity: 1;
  visibility: visible;
  transform: translate(0,100%)
}

.header .dropdown button {
  display: flex;
  align-items: center;
  gap: 2px;
  transition: all .3s;
  font-size: 16px;
  /* font-family: SF-Medium */
}

.header .dropdown button:hover {
  color: #204aab;
}

.header .dropdown button:hover svg path {
  fill: #204aab
}

.header .dropdown button svg {
  transition: all .3s
}

.header .dropdown ul {
  width: 424px;
  position: absolute;
  right: 0;
  bottom: -36px;
  transform: translate(0,101%);
  background-color: #ffffff;
  border: 1px solid var(--color-dark-green);
  border-radius: 24px;
  padding: 24px 20px;
  transition: all .3s;
  z-index: 100;
  opacity: 0;
  visibility: hidden
}

.header .dropdown ul li {
  display: flex;
  width: 100%
}

.header .dropdown ul a {
  position: relative;
  width: 100%;
  white-space: nowrap;
  padding: 16px 12px;
  border-radius: 12px;
  transition: all .3s;
  font-size: 16px;
  /* font-family: SF-Medium */
}

.header .dropdown ul a:hover {
  background-color: #181c25;
  color: #3377ff;
}

.header .dropdown ul a:hover::after,.header .dropdown ul a:hover::before {
  background-color: #3377ff;
}

.header .dropdown ul a::after,.header .dropdown ul a::before {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 5px;
  height: 1px;
  background-color: #000;
}

.header .dropdown ul a::before {
  transform: translate(0,calc(-50% + 2px)) rotate(-45deg)
}

.header .dropdown ul a::after {
  transform: translate(0,calc(-50% - 2px)) rotate(45deg)
}

.card {
  display: grid;
  grid-template-rows: auto 1fr;
  align-content: start;
  gap: 16px;
  margin-bottom: 30px;
}

.card img {
  width: 100%;
  height: 100%;
  border-radius: 24px;
  object-fit: cover
}

.card>div {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  align-items: start;
  gap: 16px;
  padding: 0 12px
}

.card .label {
  width: max-content;
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  background-color: #3377fe;
  border-radius: 8px;
  padding: 4px 8px
}

.card .query {
  color: var(--color-grey-2);
  font-size: 14px
}

.card .text {
  grid-column: 1/3;
  font-size: 16px;
  /* font-family: SF-Medium; */
  line-height: 140%;
  font-weight: 800;
}

.card .date,.card .time {
  color: var(--color-grey-1);
  font-size: 14px
}

.card .date {
  text-align: end
}

.aside {
  display: flow;
  gap: 36px
}

.aside>button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  /* font-family: SF-SemiBold */
}

.aside>button span {
  padding: 12px;
  background-color: #ffffff;
}

.aside>button::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 1px;
  background-color: #000;
}

.aside .card img {
  max-height: 288px
}

.footer {
  border-top: 1px solid #03102d;
}

.footer>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 24px 0
}

.footer>div p {
  font-size: 12px
}

.footer>div nav {
  display: flex;
  gap: 24px
}

.article_page {
  display: grid;
  grid-template-columns: 1fr 35%;
  gap: 72px;
  padding: 12px 0
}

.article_page .content .top {
  display: grid;
  grid-template-columns: auto auto 1fr;
  justify-content: start;
  gap: 16px 24px;
  padding-bottom: 15px;
  margin-top: 5px;
  margin-bottom: 15px;
}

.article_page .content .top h1 {
  grid-column: 1/4
}

.article_page .content .top .label {
  width: max-content;
  color: #ffffff;
  font-size: 14px;
  text-transform: uppercase;
  background-color: #3377fe;
  border-radius: 8px;
  padding: 4px 8px;
}

.article_page .content .top .query {
  color: var(--color-grey-2);
  font-size: 14px
}

.article_page .content .top .text {
  grid-column: 1/3;
  font-size: 20px;
  /* font-family: SF-Medium; */
  line-height: 140%
}

.article_page .content .top .date,.article_page .content .top .time {
  color: var(--color-grey-1);
  font-size: 14px
}

.article_page .content b {
  display: inline-block;
  font-size: 20px;
  /* font-family: SF-Medium; */
  margin-bottom: 24px
}

.article_page .content ul, .article_page .content ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.article_page .content ul li, .article_page .content ol li {
  position: relative;
  padding-left: 20px;
  font-size: 18px;
  font-weight: 300;
  line-height: 150%;
}

.article_page .content ul li:before, .article_page .content ol li:before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  transform: translate(0, -50%);
  width: 6px;
  height: 6px;
  background-color: #000;;
  border-radius: 50%;
}

.article_page .content p {
  font-size: 18px;
  /* font-family: SF-Light; */
  font-weight: 300;
  line-height: 150%;
  margin-bottom: 24px;
}
.article_page .content a {
color: #3377fe;
}


.article_blog .content img {
  max-height: 200px;
  object-fit: cover;
}
.article_page .content img {
  width: 100%;
  border-radius: 24px;
  margin-bottom: 36px
}

@media (max-width: 1200px) {
  .article_page .content .top h1 {
      font-size:20px;
  }
}

@media (max-width: 1000px) {
  .header>div {
      grid-template-columns:auto 1fr
  }

  .header .logo {
      grid-column: 1/3;
      margin: 0 auto
  }

  .header .search_wrapper {
      grid-column: 2/3
  }

  .header .menu {
      grid-column: 1/2;
      grid-row: 2/3
  }

  .header .dropdown ul {
      right: auto;
      left: 0
  }

  .aside {
      grid-template-columns: 1fr 1fr
  }

  .aside>button {
      grid-column: 1/3
  }

  .article_page {
      grid-template-columns: 1fr
  }
}

@media (max-width: 768px) {
  .title {
      font-size:32px
  }

  .aside {
      grid-template-columns: 1fr
  }

  .aside>button {
      grid-column: auto
  }

  .article_page .content p {
      font-size: 18px;
  }
}

@media (max-width: 600px) {
  .content-grid,.full-width {
      --padding-inline:16px
  }

  .header>div {
      grid-template-columns: 1fr;
      gap: 24px
  }

  .header .logo {
      grid-column: auto
  }

  .header .search_wrapper {
      grid-column: auto
  }

  .header .menu {
      grid-column: auto;
      grid-row: auto;
      margin: 0 auto
  }

  .header .dropdown[data-active=true] ul {
      transform: translate(50%,100%)
  }

  .header .dropdown ul {
      width: 100vw;
      left: auto;
      right: 0;
      transform: translate(50%,101%);
      border-top: none;
      padding: 0 20px 24px 20px
  }
}


h2,h3{
 margin-bottom: 15px;
}