/*
 Theme Name:   Twenty Twenty-Two Child
 Theme URI:    https://
 Description:  Child theme для Twenty Twenty-Two
 Author:       Alex K
 Template:     twentytwentytwo
 Version:      1.0.0
 Text Domain:  twentytwentytwo-child

/* ==== */

@font-face {
    font-family: "Inter";
    font-display: swap;
    src: url("/wp-content/themes/twentytwentytwo-child/fonts/Inter-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    font-display: swap;
    src: url("/wp-content/themes/twentytwentytwo-child/fonts/Inter-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Quicksand";
    font-display: swap;
    src: url("/wp-content/themes/twentytwentytwo-child/fonts/Quicksand-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Quicksand";
    font-display: swap;
    src: url("/wp-content/themes/twentytwentytwo-child/fonts/Quicksand-Light.ttf") format("truetype");
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: "Quicksand";
    font-display: swap;
    src: url("/wp-content/themes/twentytwentytwo-child/fonts/Quicksand-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

body,
h1, h2, h3, h4, h5, h6,
.wp-block-paragraph,
.wp-block-heading {
    font-family: "Quicksand", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}


.advantages__list .advantages__item {
  grid-column: auto / span 1 !important;
  grid-row: auto / span 1 !important;
}


.advantages__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 48px 32px;
}

.advantages__item {
  min-width: 0;
}

img.advantages__man {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}


@media (max-width: 1024px) {
  .advantages__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .advantages__list {
    grid-template-columns: 1fr;
  }

  .advantages__item {
    text-align: center;
  }

  img.advantages__man {
    margin: 0 auto;
  }
}

@media (min-width: 1340px) {
  .advantages__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .advantages__list .advantages__item {
    min-width: 0;
  }

  .advantages__list img.advantages__man {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

.trending__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: clamp(320px, 60vw, 400px);
}

@media (min-width: 768px) {

  .design__item {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    row-gap: 24px;
    align-items: center;
  }

  .design__item .design__img {
    grid-column: 1 !important;
    grid-row: 1 / 3 !important; 
  }

  .design__item .design__title {
    grid-column: 2 !important; 
    grid-row: 1 !important;     
	align-self: end;
  }

  .design__item .design__desc {
    grid-column: 2 !important; 
    grid-row: 2 !important;     
	align-self: start !important;
	margin-top: 0px;
  }

  .design__item:nth-child(even) .design__img {
    grid-column: 2 !important;
    grid-row: 1 / 3 !important;
  }

  .design__item:nth-child(even) .design__title {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .design__item:nth-child(even) .design__desc {
    grid-column: 1 !important;
    grid-row: 2 !important;
  }
}

.btn.about-us__btn {
  background: none !important;
  padding: 0 !important;
}
.btn.about-us__btn a {
  display: inline-block;
  padding: 16px 24px;      
  background: #ffe101;    
  border-radius: 24px;
  color: #333;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  transition: background-color 0.2s ease-in-out;
}


.btn.about-us__btn a:hover {
  background-color: #ffe93f;
}
.btn.about-us__btn a {
    white-space: nowrap;
}

@media (min-width: 768px) {
    .about-us__btn {
        max-width: none !important; 
    }
}

@media (max-width: 767px) {
  .btn.about-us__btn {
    width: 100%;
  }

  .btn.about-us__btn a {
    width: 100%;
    display: block;     
    text-align: center;      
  }
}

@media (min-width: 768px) {
  .btn.about-us__btn {
    width: auto;           
	max-width: none !important;
    display: inline-block;
  }

  .btn.about-us__btn a {
    width: auto;
    display: inline-flex;         
    justify-content: center;
    align-items: center;
	white-space: nowrap;
  }
}
@media (min-width: 1340px) {
  .btn.about-us__btn {
    margin-left: 0 !important;
    margin-right: auto !important;
  }
}

html,
body,
.wp-site-blocks {
    background-color: #F4F7FB;
}
body {
    background: #F4F7FB !important;
}

a,
a:visited,
.entry-content a,
.wp-block a,
.wp-block-navigation__link,
.wp-block-post-title a,
.woocommerce a {
    text-decoration: none !important;
}

@media (min-width: 1340px) {
    .creation__img {
        grid-column: 1 / 2;
    }
    .creation__desc {
        grid-column: 2 / 3;
        max-width: 700px;      
        align-self: start;     
    }
}

.creation__headline:before {
    background-image: none !important;
    background-color: #35a7ff !important;
}

.colors__color--yellow,
.colors__color--geel {
  width: 194px;
  transform: rotate(-15deg);
}
.colors__color--yellow .colors__bg,
.colors__color--geel .colors__bg {
  background-color: #fee101;
  height: 194px;
}

.colors__color--red,
.colors__color--rood {
  width: 114px;
  margin-top: 50px;
}
.colors__color--red .colors__title,
.colors__color--rood .colors__title {
  font-size: 20px;
  line-height: 25px;
}
.colors__color--red .colors__bg,
.colors__color--rood .colors__bg {
  background-color: #ff3c38;
  height: 104px;
}

.colors__color--blue,
.colors__color--blauw {
  width: 148px;
  margin-left: 100px;
  margin-top: 14px;
}
.colors__color--blue .colors__bg,
.colors__color--blauw .colors__bg {
  background-color: #35a7ff;
  height: 142px;
}
@media (min-width: 768px) {

  .colors__color--yellow,
  .colors__color--geel {
    width: 273px;
    margin-left: 38px;
    margin-top: 26px;
  }
  .colors__color--yellow .colors__bg,
  .colors__color--geel .colors__bg {
    height: 280px;
  }

  .colors__color--red,
  .colors__color--rood {
    width: 240px;
    margin-right: 34px;
    margin-top: 44px;
  }
  .colors__color--red .colors__title,
  .colors__color--rood .colors__title {
    font-size: 24px;
    line-height: 30px;
  }
  .colors__color--red .colors__bg,
  .colors__color--rood .colors__bg {
    height: 248px;
  }

  .colors__color--blue,
  .colors__color--blauw {
    width: 190px;
    margin-left: 258px;
    transform: rotate(-15deg);
  }
  .colors__color--blue .colors__bg,
  .colors__color--blauw .colors__bg {
    height: 190px;
  }
}

.logotype__images{
  width: 100%;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.logotype,
.logotype__container{
  overflow: visible;
}
.logotype__images img{
  display: block;
  width: 100%;
  height: auto;
}

@media (max-width: 492px) {
  .footer__bottom-right {
    gap: 12px;       
  }

  .footer__link {
    font-size: 14px;      
  }
}

.woocommerce img, .woocommerce-page img { max-width: 100%; height: auto; }