@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');

:root{
  --c-1: #4acaa8;
  --c-2: #4ac6ca;
  --c-3: #4aa4ca;
  --c-4: #b7ca4a;
  --c-5: #ca974a;
  --accent: var(--c-5);
  --d-1: #d2f2e9;
  --d-2: #d2edf2;
  --d-3: #d2e9f2;
  --d-4: #e9f2d2;
  --d-5: #f2ebd2;
  --color: var(--d-5);
  --white: #fff;
  --black: #060606;
  --grey: #00000007;
  --transition: 0.4s ease-in-out;
  --bg: #1c1d26;
}

body{
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 17px;
    margin: 0;
    padding: 0px;
    direction: ltr;
    position: relative;
  }
  
 
*{
  box-sizing: border-box;
}

a{
  text-decoration: none;
}

p {
  margin-bottom: 6px;
  font-size: 17px;
  line-height: 1.5;
  
}


ul, ol {
  margin-bottom:  6px;
  padding-left: 22px;
}

li {
  margin-bottom: 0.5rem;
}

ul ul, ol ul, ul ol, ol ol {
  margin-bottom: 0;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

img{
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.module{
  padding: 84px 0;
}

.wrapper {
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
  padding-right:  11px;
  padding-left:  11px;
  box-sizing: border-box;
}

.avatar{
  margin-top:  28px; 
  width: 83px;
  height: 83px;
  margin-left: auto;
  margin-right: auto;

  img{
    width: 100%;
    border-radius:  50%;
    height: 100%;
    object-fit: cover;
  }
}

.author-name{
  color: var(--white);
  font-weight: 800;
  font-size: 18px;
  padding: 0 17px;
}

.author-quote{
  font-style: italic;
  margin: 0;
  padding: 0 17px;
}

.privacy-text{
word-break: break-word;
}
.privacy-text ul li,
.privacy-text ol li {
  margin-bottom: 4px;
}
.privacy-text ul,
.privacy-text ol {
  margin-bottom: 15px;
  padding-left:  19px;
  list-style: inside;
}
.privacy-text a,.privacy-text table{
color: inherit;
}
.privacy-text p{
margin-bottom:  6px;
text-indent: 3ch;
}

.nav{
  display: flex;
  flex-direction: column;
  gap: 17px;
  margin-top:  28px;
}

.nav-item{
  padding: 11px;
  transition: var(--transition);

  a{
    color: var(--black);
    transition: var(--transition);
  }

  &:hover,
  &:focus{
    background-color: var(--color);
  }
  &:hover > a,
  &:focus > a{
    color: var(--accent);
  }
}

.btn-hero{
  margin: 0 auto;
  text-align: center;
  padding: 0 17px;
}

.hero{
  background: url(uploads/2025-05/pattern-bg-xy0.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  padding:  263px 0;
}

.header-logo{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 6px;
  align-items: center;
  filter: drop-shadow(6px 4px 2px black);
  justify-content: center;
  transition: var(--transition);

  &:hover,
  &:focus{
    transform: scale(1.03);
    -webkit-transform: scale(1.03);
  }
}

.logo-img{ 
  height: 61px;

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

.logo-title{
  color: var(--white);
  font-weight: 800;
  font-size: 28px;
  text-align: center;
}

.header-mini{
  background-color: var(--accent);
  color: var(--color);
  padding: 6px 0;
}

.hm-box{
  display: flex;
  flex-direction: column;
  gap: 11px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-mini{
  display: flex;
  flex-direction: row;
  gap: 11px;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.nav-item-mini{
  transition: var(--transition);
  padding: 6px;

  a{
    color: var(--black);
    transition: var(--transition);
  }

  &:hover,
  &:focus{
    background-color: var(--color);
  }
  
  &:hover > a,
  &:focus > a{
    color: var(--accent);
  }
}

.heading{
  color: var(--accent);
  font-weight:  800;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 1.5;
  text-transform: capitalize;
  margin-bottom: 17px;
}

.bb{
  border-bottom: solid 8px #f4f4f4;
}

.row-2{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  box-sizing: border-box;
  gap: 17px;
}

.cat-row{
  gap: 0 !important;
}

.col-3{
  box-sizing: border-box;
  width: 100%;
  flex-grow: 1;
  padding: 17px;
  transition: var(--transition);

  &:hover,
  &:focus{
    box-shadow: 25px 0 19px -19px var(--accent), -25px 0 19px -19px var(--accent);
  }
}

.pcategory-box{
  display: flex;
  flex-direction: row;
  gap: 17px;
  align-items: center;
  cursor: pointer;
}

.p-category-img{
  border-radius: 100%;
  background-color: var(--accent);
  color: var(--white);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  svg{
    width: 19px;
    height: 19px;
  }
}
.flex-sectionRY{
  display: flex;
  flex-direction: column;
}
.main-row{
  display: flex;
  flex-direction: column;
  gap: 17px;
}


.main-item{
  display: flex;
  flex-grow: 1;
  border-bottom: solid 3px #f4f4f4;
  flex-direction: column;
  box-sizing: border-box;
}

.bn{
  border-bottom: none !important;
}

.main-col{
  width: 100%;
  box-sizing: border-box;
  flex-grow: 1;
  padding: 17px;
}

.main-img{
  width: 100%;
  height: 347px;
  overflow: hidden;
  display: inline-block;
  border-radius: 7px;
  transition: var(--transition);
  
  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  &:hover,
  &:focus{
    box-shadow: 25px 0 19px -19px var(--accent), -25px 0 19px -19px var(--accent);
  }
}

.main-title{
  h3{
    color: var(--black);
    transition: var(--transition);
    font-weight: 800;
  }

  &:hover > h3,
  &:focus > h3{
    color: var(--accent);
  }
}

.main-box{
  .btn-wr{
    .button-2{
      color: var(--black);
    }
  }
}

.parent {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-column-gap: 2px;
  grid-row-gap: 2px;
  height: 300px;
}

.div1 { grid-area: 1 / 1 / 2 / 2; }
.div2 { grid-area: 1 / 2 / 2 / 3; }
.div3 { grid-area: 1 / 3 / 3 / 5; }
.div4 { grid-area: 2 / 1 / 3 / 2; }
.div5 { grid-area: 2 / 2 / 3 / 3; }
.div6 { grid-area: 1 / 5 / 2 / 7; }
.div7 { grid-area: 2 / 5 / 3 / 6; }
.div8 { grid-area: 2 / 6 / 4 / 7; }
.div9 { grid-area: 4 / 5 / 5 / 7; }
.div10 { grid-area: 3 / 5 / 4 / 6; }
.div11 { grid-area: 3 / 4 / 4 / 5; }
.div12 { grid-area: 4 / 4 / 5 / 5; }
.div13 { grid-area: 3 / 3 / 5 / 4; }
.div14 { grid-area: 3 / 1 / 4 / 3; }
.div15 { grid-area: 4 / 1 / 5 / 2; }
.div16 { grid-area: 4 / 2 / 5 / 3; }

.subs-img{
  overflow: hidden;

  img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition);
  }

  &:hover > img,
  &:focus > img{
    transform: scale(1.04);
    -webkit-transform: scale(1.04);
  }
}

.d-column{
  display: flex;
  flex-direction: column;
}

.form{
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 17px;
}

.form-btn{
  .button-2{
    color: var(--black);
  }
}

.page-form-item{
  width: 100%;
}

.page-form-item > input,
.page-form-item > textarea,
.input-controlitempart,
.textarea-controlitempart{
  padding: 15px;
  width: 100%;
  border: solid 3px #f4f4f4;
  border-radius: 7px;
  box-sizing: border-box;
}

.privacy{
  color: var(--black);
  transition: var(--transition);
  display: inline-block;

  &:hover,
  &:focus{
    color: var(--accent);
  }
}

.footer{
  background: #fafafa;
  color: #c0c0c0;
  padding: 51px 0 31px 0;
}

.col-2{
  box-sizing: border-box;
  width: 100%;
  flex-grow: 1;
}

.footer-privacy-wr{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 17px;
}

.footer-privacy{
  a{
    color: #c0c0c0;
    transition: var(--transition);
  }

  &:hover > a,
  &:focus > a{
    color: var(--accent);
  }
}

.copyright{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  height: 100%;

  p{
    margin: 0;
  }
}

.com-box{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 17px;
}

.com-img{
  width: 100%;
  height: 167px;
  overflow: hidden;

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

.name{
  color: var(--accent);
  font-weight:800;
  text-align: center;
}

.com-text{
  text-align: center;
}

.foot-box{
  display: flex;
  flex-direction: column;
  height: 100%;
  gap: 17px;

  .header-logo{
    filter: drop-shadow(2px 4px 6px black);

    .logo-title{
      font-size: 25px;
    }
  }
}

.tags{
  justify-content: center;
  padding: 0 17px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  gap: 11px;
  margin-top: auto;
  margin-bottom:  19px;
}

.page-img{
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 17px;
  
  img{
    object-fit: contain;
    width: 100%;
    height: 100%;
  }
}

.price-box{
  color: var(--accent);
  font-weight: 800;
  font-size: 25px;
  line-height: 25px;
  letter-spacing: 1.5;
}

.btn-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 17px;
}

.map{
  width: 100%;
  height: 347px;

  iframe{
    overflow: hidden;
    border-radius: 7px;
    width: 100%;
    height: 100%;
    border: none;
  }
}

.contact-row{
  margin-bottom: 28px;

  .col-2{
    box-shadow: 0 1px 1px rgba(0,0,0,0.12), 0 2px 2px rgba(0,0,0,0.12);
    border-radius: 7px;
    padding: 17px;
    transition: var(--transition);
    
    &:hover,
    &:focus{
      box-shadow: 25px 0 19px -19px var(--accent), -25px 0 19px -19px var(--accent);
    }
  }
}

.contact-item{
  display: flex;
  flex-direction: column;
  gap: 17px;

  a{
    word-break: break-all;
    color: var(--black);
    font-weight: 800;
    transition: var(--transition);
  }

  &:hover > a,
  &:focus > a{
    color: var(--accent);
  }
}

.adres{
  font-weight: 800;
}



.btn-col{
  .button-2{
    color: var(--black);
  }
}

.layout{
  display: flex;
  justify-content: flex-start;
}

.paper {
	padding:  35px;
	position: relative;
	box-sizing: border-box;
  z-index: 1;
  width: fit-content;
}

.paper:before {
	background-image: radial-gradient(#E3E3D2,var(--accent));
	content: ' ';
	position: absolute;
	top: 0px;
	right: 0px;
	bottom: 0px;
	left: 0px;
	z-index: -1;
	display: block;
		filter: url("#crumple-effect")
		drop-shadow(0 2px 2px rgba(0,0,0,0.1));
}

.pop-module{
  padding: 28px 0;
}

.cp{
  .button-2{
    color: var(--black);
  }
}


@media (min-width: 576px) {
  .wrapper {
    max-width: 540px;
  }
}

@media (max-width: 767px){
  .copyright{
    border-top: solid 1px #f4f4f4;
  }
}

@media (min-width: 768px){
  .wrapper {
    max-width: 720px;
  }

  .hm-box{
    flex-direction: row-reverse;
  }

  .row-2{
    flex-direction: row-reverse;
  }

  .col-3{
    width: calc(50% - 17px);
  }

  .col-2{
    width: calc(50% - 17px);
  }

  .page-img{
    width: 300px;
    float: left;
  }

  .btn-box{
    margin-top: 17px;
    flex-direction:  row-reverse;
  }
}

@media (max-width: 991px){
  .header{
    display: none;
  }
}

@media (min-width: 992px){
  .wrapper {
    max-width: 960px;
  }

  #wrapper-box{
    padding-right: 21em;
  }

  .header-mini{
    display: none;
  }

  .col-3{
    width: calc((100% / 3) - 17px);
  }

  .header{
    background-color: var(--accent);
    position: fixed;
    top: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 17px; 
    color: var(--color);
    height: 100%;
    overflow-y: auto;
    text-align: center;
    width: 21em;
  }

  .main-item{
    flex-direction: row-reverse;
  }

  .main-col{
    width: calc(50% - 17px);
  }

  .copyright{
    align-items: end;
  }

  .page-img{
    width: 38%;
    height: 347px;
  }

  .price-box{
    font-size: 28px;
    line-height: 28px;
  }
}


@media (min-width: 1200px){
  .wrapper {
    max-width: 1170px;
  }

  #wrapper-box{
    padding-right: 23em;
  }

  .header{
    width: 23em;
  }
}


.button-1 {
  display: inline-block;
  padding: 13px 22px;
  border: 1px solid #4f4f4f;
  border-radius: 2px;
  transition: all 0.2s ease-in;
  position: relative;
  overflow: hidden;
  font-size: 17px;
  cursor: pointer;
  color: black;
  z-index: 1;
}

.button-1:before {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scaleY(1) scaleX(1.25);
  top: 100%;
  width: 140%;
  height: 180%;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button-1:after {
  content: "";
  position: absolute;
  left: 55%;
  transform: translateX(-50%) scaleY(1) scaleX(1.45);
  top: 180%;
  width: 160%;
  height: 190%;
  background-color: #39bda7;
  border-radius: 50%;
  display: block;
  transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
  z-index: -1;
}

.button-1:hover {
  color: #ffffff;
  border: 1px solid #39bda7;
}

.button-1:hover:before {
  top: -35%;
  background-color: #39bda7;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button-1:hover:after {
  top: -45%;
  background-color: #39bda7;
  transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button-2 {
  padding:  11px 17px;
  border-radius: rand_padding_vertical_small_5};
  font-size: 17px;
  font-family: inherit;
  border: none;
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: var(--white);
  z-index: 1;
  box-shadow: 6px 6px 12px #c5c5c5,
             -6px -6px 12px #ffffff;
}

.button-2::before {
  content: '';
  width: 0;
  height: 100%;
  border-radius: rand_padding_vertical_small_5};
  position: absolute;
  top: 0;
  left: 0;
  background-image: linear-gradient(to right, #0fd850 0%, #f9f047 100%);
  transition: .5s ease;
  display: block;
  z-index: -1;
}

.button-2:hover::before {
  width: 100%;
}

.button-3 {
  transition: all 0.3s ease-in-out;
  font-family: "Dosis", sans-serif;
}

.button-3 {
  padding: 6px 17px;
  border-radius: 43px;
  background-image: linear-gradient(135deg, #feb692 0%, #ea5455 100%);
  box-shadow: 0 20px 30px -6px rgba(238, 103, 97, 0.5);
  outline: none;
  cursor: pointer;
  border: none;
  font-size: 17px;
  color: white;
  display: inline-block;
}

.button-3:hover {
  transform: translateY(3px);
  box-shadow: none;
}

.button-3:active {
  opacity: 0.5;
}

.button-4 {
  padding: 16px 19px;
  font-size: 17px;
  color: #fff;
  font-weight:400;
  transition: all .2s;
  position: relative;
  border: none;
  background: #000;
  display: inline-block;
}

.button-4:before,.button-4:after {
  content: "";
  position: absolute;
  top: 50%;
  background: #ff3d00;
  height: 108%;
  width: 0;
  z-index: -1;
  transition: all .7s;
  transform: translateY(-50%);
}

.button-4:before {
  left: 0%;
}

.button-4:after {
  right: 0%;
}

.button-4:hover {
  color: #fff;
  box-shadow: #f51a1a7f 0 30px 58px -12px inset, #ff00007f 0 18px 36px -18px inset;
  z-index: 2;
}

.button-4:hover::before {
  width: 50%;
  left: 50%;
}

.button-4:hover::after {
  width: 50%;
  right: 50%;
}

.button-5 {
  display: table-cell;
  vertical-align: middle;
  border: none;
  background-color: transparent;
}

.button-5 {
  color: white;
  margin: auto;
  padding: 17px  18px;
  font-size: 16px;
  letter-spacing: 2px;
  border-radius: 0px;
  font-weight: bold;
  text-transform: uppercase;
  background-color: #031d67;
  box-shadow: 0px 15px 18px -6px rgba(35, 22, 214, 0.65);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
  position: relative;
}

.button-5:hover {
  background-color: #051749;
  box-shadow: 0px 18px 19px -8px rgba(16, 8, 119, 0.65);
  transform: scale(1.02,1.02);
}

.button-5:active {
  background-color: #051749;
  box-shadow: 0px 13px 18px -4px rgba(7, 4, 51, 0.65);
  transform: scale(0.95,0.95);
  transition: all 0.4s -0.125s;
}