@import url('https://fonts.googleapis.com/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Shadows+Into+Light&display=swap');

body{
    direction: initial;
    font-family: 'Wix Madefor Text', sans-serif !important;
    font-size: 16px;
    margin: 0;
    padding: 0;
}

a {
    word-break: break-all;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}


*, *::before, *::after {
    box-sizing: border-box;
  }

  :root {
    --color: #ef4f4f;
    --accent: #257A3E;
    --light: #f0e4d7;
  }
  
  .structure-box {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    max-width: 1310px;
	  margin: 0 auto;
  }
  
  button {
    border: none;
  }
  
  p {
    padding: 0;
    margin: 0;
    padding-top: 5px;
    padding-bottom: 5px;
  }

  li {
    margin: 6px 0;
  }
  
  
  ul {
    padding: 0;
    margin: 0;
  }
  
  img {
    max-width: 100%;
  }

  .header-crown-contact-bg {
    background-color: var(--color);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .header-crown-contact {
    display: flex;
    gap: 23px;
    flex-direction: row;
    align-items: center;
    justify-content: start;
  }

  .hcc-item {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
    font-size: 15px;
    font-weight: 400;
    color: #fff;
    line-height: 1;
}
  
  .hcc-item-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid;
  }

  .hcc-item-icon svg {
    width: 27px;
    height: 27px;
    fill: #fff;
  }

  .hcc-item-link {
    word-break: break-all;
  }

  .hcc-item:hover .hcc-item-icon {
    background-color: var(--accent);
    border-color: var(--accent);
  } 

  .header-crown-nav-bg {
    background-color: var(--light);
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .header-crown-nav {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    justify-content: start;
  }

  .hcn-logo {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  
  .hcn-logo img {
    width: 55px;
    height: 55px;
  }

  .hcn-logo h3 {
    font-size: 27px;
    margin: 0;
    text-transform: inherit;
  }

  .hcn-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
  }

  .hcn-link {
    text-transform: inherit;
    font-size: 18px;
    font-weight: 600;
    transition: all ease 0.4s;
  }

  .hcn-link:hover {
    color: var(--accent);
  }

  .hcn-downmenu {
    display: inline-block;
    position: relative;
    text-align: center;
  }
  
  .hcn-downmenu input[type="checkbox"]  {
    display: none;
  }
  
  .hcn-downmenu input[type="checkbox"]:checked ~ .hcn-downmenu-list {
    opacity: 1;
    max-height: 400px;
    padding: .6rem 0;
  }
  
  .hcn-downmenu input[type="checkbox"]:checked ~ .hcn-downbtn {
    z-index: 99;
    box-shadow: 0 0 0 2px #e2e3e3ba;
    position: relative;
  }
  
  .hcn-downbtn {
    text-transform: inherit;
    font-weight: 600;
    font-size: 18px;
    color: #000;
    transition: all ease 0.4s;
    position: relative;    
    display: inline-block;
    cursor: pointer;
  }

    .hcn-downbtn:hover {
      color: var(--accent);
    }
    
  .hcn-downmenu-list {
  position: absolute;
  top: calc(100% + 0.4rem);
  width: 280px;
  padding: 0;
  margin: 0;
  transition: all 0.3s ease;
  background: #f8fff7;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  z-index: 99;
  }
  
  .hcn-downmenu-link {
    list-style: none;
  }
  
  .hcn-downmenu-link a {
    display: block;
    color: #555;
    text-decoration: none;
    padding: 6px;
    transition: all 0.3s ease;
  }
  
  .hcn-downmenu-link a:hover {
    background: #eee;
  }

  .header-crown-banner-wrapper {
    position: relative;
    z-index: 0;
    overflow: hidden;
  }

  .header-crown-banner-bg {
    background-image: url(uploads/transparent-background_2024-11-12_02-27-310.webp);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    animation: kenburns-top 10s ease-out infinite alternate both;
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
  }

  @keyframes kenburns-top {
    0% {
      transform: scale(1) translateY(0);
      transform-origin: 50% 16%;
    }
    100% {
      transform: scale(1.25) translateY(-15px);
      transform-origin: top;
    }
  }

  .header-crown-banner {
    padding-top: 239px;
    padding-bottom: 239px;
  }

  .hnb-title {
    width: 60%;
    padding: 45px 51px;
    background-color: var(--color);
    border-radius: 151px 151px 151px 30px;
  }

  .hnb-title h2 {
    overflow: hidden;
    color: #fff;
    font-size: 27px;
    font-weight: 600;
    line-height: 1.7;
    text-transform: capitalize;
    text-indent: 25px;
    animation: slide-in-left 2s cubic-bezier(0.470, 0.000, 0.745, 0.715) both;
  }

  @keyframes slide-in-left {
    0% {
      transform: translateX(-1000px);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  .hnb-decor {
    position: absolute;
    top: 80px;
    left: 45%;
    z-index: -1;
    width: 310px;
    height: 310px;
    padding: 25px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--accent) 0%, rgba(218,209,211,1) 100%);
    animation: rotate-90-cw 12s linear infinite both;
  }

  @keyframes rotate-90-cw {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  .company-overview {
  position: relative;
  z-index: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #0a1b16;
  overflow: hidden;
  padding: 51px 0;
}

.company-overview-content {
  padding: 45px 51px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 51px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 100%);
  border-radius:  5px;
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.23) inset, 0 1px 0 0 rgba(255, 255, 255, 0.66) inset, 0 4px 16px rgba(0, 0, 0, 0.12);
  z-index: 1;
}

.company-overview-info {
  width: 60%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: justify;
}

.company-overview-title, .how-order-sidebar-title {
  font-size: 31px;
  font-weight: 600;
  color: #fff;
  margin: 0;
  margin-bottom: 45px;
}

.company-overview-info p {
  color: #fff;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.7;
}

.how-order-sidebar {
  width: 37%;
  display: none;
}

.how-order-sidebar-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.how-order-sidebar-item1, .how-order-sidebar-item2, .how-order-sidebar-item3 {
  position: relative;
  background-image: url(uploads/transparent-background_2024-11-12_02-27-311.webp);
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}

.how-order-sidebar-item2 {
  background-image: url(uploads/transparent-background_2024-11-12_02-27-312.webp);
}

.how-order-sidebar-item3 {
  background-image: url(uploads/transparent-background_2024-11-12_02-27-313.webp);
}

.hosi-overlay {
  padding: 15px 25px;
  min-height: 100px;
  background: #000000b5;
  display: flex;
  border-radius: 5px;
}

.hosi-overlay p {
  border-radius: 5px;
  position: absolute;
  top: 0;
  right: 0;
  color: #fff;
  padding: 6px 15px;
  margin: 6px;
  letter-spacing: 2px;
  font-size: 0.8rem;
  font-weight: 600;
  background: linear-gradient(90deg, var(--accent) 0%, rgba(218,209,211,1) 100%);
  box-shadow: inset 2px -2px 20px rgba(214, 214, 214, 0.2), inset -3px 3px 3px rgba(255, 255, 255, 0.4);
}

.hosi-overlay h2 {
  color: #fff;
  font-weight: 400;
  font-size: 15px;
  margin: 0;
  margin-top: auto;
}

.circles-company-overview {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.circles-company-overview li {
    position: absolute;
    display: block;
    list-style: none;
    width: 27px;
    height: 27px;
    background-color: var(--accent);
    background-image: linear-gradient( 225deg, var(--accent) 0%, var(--color) 50%, var(--light) 100%);
    animation: animate 25s linear infinite;
    bottom: -150px;
}
.circles-company-overview li:nth-child(1) {
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}
.circles-company-overview li:nth-child(2) {
    left: 10%;
    width: 27px;
    height: 27px;
    animation-delay: 2s;
    animation-duration: 12s;
}
.circles-company-overview li:nth-child(3) {
    left: 70%;
    width: 27px;
    height: 27px;
    animation-delay: 4s;
}
.circles-company-overview li:nth-child(4) {
    left: 40%;
    width: 55px;
    height: 55px;
    animation-delay: 0s;
    animation-duration: 18s;
}
.circles-company-overview li:nth-child(5) {
    left: 65%;
    width: 27px;
    height: 27px;
    animation-delay: 0s;
}
.circles-company-overview li:nth-child(6) {
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}
.circles-company-overview li:nth-child(7) {
    bottom: -165px;
    left: 35%;
    width: 111pxpx;
    height: 111pxpx;
    animation-delay: 7s;
}
.circles-company-overview li:nth-child(8) {
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}
.circles-company-overview li:nth-child(9) {
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}
.circles-company-overview li:nth-child(10) {
    left: 85%;
    width: 111pxpx;
    height: 111pxpx;
    animation-delay: 0s;
    animation-duration: 11s;
}
@keyframes animate {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
      border-radius: 50%;
    }
  
    100% {
      transform: translateY(-1000px) rotate(720deg);
      opacity: 0;
      border-radius: 30%;
    }
}

.rand-company-img {
  width: 37%;
  display: none;
}

.rand-company-img img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 30%;
}


.product-portfolio-bg {
  padding-top: 45px;
  padding-bottom: 45px;
  background: #0a1b16;
}

.product-portfolio-title {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
  background-clip: text;
  white-space: nowrap;
  margin-bottom: 45px;
}

.product-portfolio-title h2 {  
  color: #fff;
  font-size: 100px;
  font-weight: 900;
  padding: 0;
  margin: 0;
  line-height: 1;
  text-align: center;
}

.product-portfolio-list {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: auto;
  flex-wrap: wrap;
}

.product-portfolio-card {
  width: 31%;
  height: auto;
  background: var(--light);
  border-radius: 20px;
  padding: 23px;
  overflow: hidden;
  display: flex;
  gap:  6px;
  flex-direction: column;
}

.product-portfolio-card:hover{
  outline: 2px dashed #000; 
  outline-offset: -10px; 
}

.ppc-img {
  width: 100%;
}

.ppc-img img{
  width: 100%;
  height: 300px;
  object-fit: contain;
  border-radius: 20px;
}

.ppc-title {
  text-align: center;
  color: #000;
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  margin-bottom: 15px;
}

.ppc-info-block, .ppc-options {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.ppc-info-item {
  padding: 3px;
  border: 1px solid var(--color);
  font-size: 12px;
  color: var(--color);
}

.ppc-description {
  color: #000000e1;
  padding: 15px 0;
  font-size: 15px;
}

.ppc-options-link {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
}

.ppc-options-link p {
  padding-bottom: 6px;
  letter-spacing: 1px;
  font-size: 12px;
  padding-right: 10px;
  text-transform: uppercase;
}

.ppc-options-link svg {
  width: 15px;
  transform: translateX(-8px);
  transition: all 0.3s ease;
}

.ppc-options-link:hover svg {
  transform: translateX(0);
}

.ppc-options-link:active svg {
  transform: scale(0.9);
}

.ppc-options-link p {
  position: relative;
  color: black;
}

.ppc-options-link p:after {
  content: "";
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #000000;
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}

.ppc-options-link:hover .ppc-options-link p:after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

.additional-information{
  background-color: #0a1b16;
} 
.additional-information-container {
  color: #fff;
  gap: 25px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-end;
  padding-top: 51px;
  padding-bottom: 25px;
  margin: auto;
}

.col-additional-information {
  width: 30%;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
}

.logo-additional-information {
  justify-content: center;
  display: flex;
  flex-direction: row;
  gap: 6px;
  align-items: center;
}

.logo-additional-information img {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.logo-additional-information h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 0;
  color: var(--light);
}

.additional-information-social {
  display: flex;
  flex-direction: column-reverse;
  gap: 6px;
  align-items: center;
  justify-content: center;
}

.additional-information-copyright {
  font-size: 15px;
  color: #f0e4d788;
}

.additional-information-social {
  width: 47%;
}

.additional-information-social svg {
  width: 65px;
  height: 65px;
  background-color: #121212;
  fill: var(--light);
  padding: 6px;
  border-radius: 4px;
}

.additional-information-pay-cont {
  display: flex;
  flex-direction:  row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}

.additional-information-pay {
  width: 47%;
  display: flex;
  flex-direction: column-reverse;
}

.additional-information-pay img {
  height: 55px;
  object-fit: contain;
}

.col2, .col3 {
  background-color: #121212;
  border-radius:  20px;
  padding: 40px;
  gap: 23px;
}

.col-additional-information-link {
  font-size: 18px;
}

.col-additional-information-link:hover {
  text-decoration: underline dashed;
}

.faq-guide-section {
  padding-top: 120px;
  padding-bottom: 45px;
  background: linear-gradient(180deg, #0a1b16 0%, rgba(218,209,211,0) 60%);
}

.faq-guide {
  display: flex;
  flex-direction: row;
  gap: 45px;
  align-items: center;
  justify-content: center;
}

.faq-guide-decor {
  width: 40%;
  position: relative;
}

.faq-guide-decor-img {
  border-radius: 290px 290px 94px 298px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 500px;
}

.faq-guide-decor-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 2s ease;
  transform: scale(1.001);
}

.faq-guide-decor-img:before {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 1;
  z-index: 3;
  transform: rotate(5deg);
  top: -10%;
  right: 51%;
  bottom: -10%;
  left: 50%;
  background: rgba(255, 255, 255, 0.3);
}

.faq-guide-decor-img:after {
  content: "";
  position: absolute;
  pointer-events: none;
  opacity: 1;
  z-index: 3;
  transform: rotate(5deg);
  top: 50%;
  right: -10%;
  bottom: 50%;
  left: -10%;
  background: rgba(255, 255, 255, 0.6);
}

.faq-guide-decor-img:hover img {
  transform: scale(1.05);
}

.faq-guide-decor-img:hover:before {
  left: 0;
  right: 0;
  opacity: 0;
  transition: all 900ms linear;
}

.faq-guide-decor-img:hover:after {
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: all 900ms linear;
}

.fgd-circle {
  position: absolute;
  left: 0;
  top: -10%;
  z-index: -1;
  width: 315px;
  height: 315px;
  border: 60px solid var(--accent);
  border-radius: 50%;
  animation: jumpping 6s infinite linear;
}

@keyframes jumpping {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  40% {
    transform: translate3d(0, var(--jump-y, 20px), var(--jump-x, 0));
  }
}

.faq-guide-title {
  font-size: 29px;
  color: #fff;
  margin: 0;
  margin-bottom: 25px;
  font-weight: 600;
}

.faq-guide-accordeon {
  width: 52%;
}

.faq-guide-list {
  display: flex;
  flex-direction: column-reverse;
}

.faq-gi-input:checked ~ .faq-gi-answer {
  border: 3px solid transparent;
  border-radius: 30px 50px 30px 30px;
  border-color: #8d8d8d;
  max-height: 1000px;
  padding-top: 15px;
  margin-bottom: 15px;
  transition: max-height 1s ease-in, margin .3s ease-in, padding .3s ease-in;
}

.faq-gi-input:checked ~ .faq-gi-label {
  background: var(--color);
  color: var(--light);
  cursor: pointer;
}

.faq-gi-input:checked ~ .faq-gi-label::before {
  color: var(--light);
  background-color: var(--accent);
}

.faq-gi-input {
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  margin: -1;
  overflow: hidden;
  position: absolute;
  left: -9999px;
}

.faq-guide-item {
  margin-bottom: 15px;
  transition: all ease 0.4s;
}

.faq-gi-label {
  border-radius: 30px 50px 30px 50px;
  background-color: var(--light);
  color: #000;
  font-size: 18px;
  font-weight: 500;
  padding: 15px 60px 15px 35px;
  margin: -3px;
  transition: all ease 0.4s;
  cursor: pointer;
  display: block;
  position: relative;
  text-align: center;
}

.faq-gi-label:hover {
  background: var(--color);
  color: var(--light);
  cursor: pointer;
}

.faq-gi-label::before {
  content: "\2B9F";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 55px;
  height: 55px;
  line-height: 40px;
  font-weight: 400;
  text-align: center;
  margin-top: -25px;
  background-color: var(--light);
  color: #000;
  font-size: 18px;
  border-radius: 50%;
  transition: all ease 0.4s;
}

.faq-gi-label:hover::before {
  color: var(--light);
  background-color: var(--accent);
}

.faq-gi-answer {
  background: inherit;
  line-height: 1.8em;
  margin-bottom: 23px;
  margin-top: -25px;
  border-top: 1px dashed #eee;
  border-radius: 13px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .15s ease-out, margin-bottom .3s ease-out, padding .3s ease-out;
}

.faq-gi-answer p {
  margin: 0;
  padding: 23px 23px;
  font-size: 15px;
}

.customer-satisfaction {
  background-image: url(uploads/transparent-background_2024-11-12_02-27-311.webp);
}

.customer-satisfaction-overlay {
  background-color: #00000056;
  padding-top: 45px;
  padding-bottom: 119px;
}

.customer-satisfaction svg, .faq-guide-accordeon svg {
  width: 80px;
  height: 80px;
  fill: var(--color);
  display: flex;
  margin: auto;
  margin-bottom: 25px;
  padding: 10px;
  background: linear-gradient(0deg, #ffffff87 0%, rgba(218,209,211,0) 100%);
  border-radius: 50%;
}

.faq-guide-accordeon svg {
  margin-left: 0;
}

.customer-satisfaction-title {
  font-size: 31px;
  font-weight: 600;
  color: #fff;
  text-align: center;
  margin: 0;
  margin-bottom: 45px;
}

.customer-satisfaction-wrapper {
  display: flex;
  flex-direction: column;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
}

.customer-satisfaction-wrapper p {
  display: flex;
  font-size:  27px;
  font-weight: 600;
  color: #fff;
  padding: 15px 40px;
  border-radius: 20px;
  background: linear-gradient(0deg, #ef4f4f94 0%, rgba(218,209,211,0) 100%);
}

.purchase-portal-bg {
  background-color: #ef4f4fad;
}

.purchase-portal-opimg {
  background-image: url(uploads/bgopacity_2024-11-24_02-270.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 45px;
  padding-bottom: 45px;
}

.purchase-portal {
  display: flex;
  gap: 45px;
  flex-direction:  row;
  justify-content: center;
}

.purchase-portal-title {
  width: 40%;
}

.purchase-portal-title svg {
  width: 80px;
  height: 80px;
  fill: var(--color);
  display: flex;
  margin: auto;
  margin-bottom: 25px;
  padding:  10px;
  background: linear-gradient(0deg, #ffffff87 0%, rgba(218,209,211,0) 100%);
  border-radius: 50%;
}

.purchase-portal-title h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: inherit;
  color: #000;
  margin: 0;
  margin-bottom: 25px;
}

.purchase-portal-txt {
  font-size: 19px;
  line-height: 1.7;
  text-indent: 20px;
}

.purchase-portal-form-wrapper {
  width: 55%;
}

.purchase-portal-form {
  display: flex;
  flex-direction: column;
  gap:  10px;
  background-color: var(--light);
  padding: 51px;
  padding-inline: 25px;
  border-radius: 20px;
  box-shadow: 4px 4px var(--accent);
}

.input-main__holder-part, .textarea-main__holder-part {
  padding: 6px;
  border-radius: 4px;
  border-style: double;
  border-color: black;
  font-size: 15px;
  box-shadow: 2px 3px rgb(0, 2, 65);
  font-style: italic;
}

.purchase-portal-btn {
  display: flex;
  justify-content: center;
}

.perk-section-bg {
  padding-top: 51px;
  padding-bottom: 51px;
  background-color: var(--light);
}

.perk-section-title, .perk-section-final {
  display: none;
  font-size: 29px;
  font-weight: 800;
  text-align: center;
  margin: 0px;
}

.perk-section-final {
  display:  none;
}

.perk-list {
  display: flex;
  gap: 15px;
  flex-direction: row;
  margin: 29px 0;
}

.perk-card {
  width: 25%;
  height: 500px;
  position: relative;
  z-index: 0;
  overflow: hidden;
  border-radius: 20px 20px 0 0;
}

.perk-card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.perk-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.2);
  transition: 0.35s 0.35s transform cubic-bezier(0.1, 0.72, 0.4, 0.97);
}

.perk-card:hover .perk-card-img img {
  transform: scale(1);
}

.perk-card-content {
  text-align: center;
  background-color: var(--color);
  padding: 15px 60px 15px;
  position: absolute;
  top: 80%;
  left: 0;
  z-index: 1;
  border-radius: 170px 170px 0 0;
}

.perk-card:hover .perk-card-content {
  top: auto;
  bottom: 0;
}

.perk-card-title {
  font-size: 19px;
  padding-top: 10px;
  color: #fff;
  margin: 0;
  margin-bottom: 15px;
}

.perk-card-txt {
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}

.perk-card-icon {
  background-color: #fff;
  border-radius: 13px 50px 13px 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  top: -75px;
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  width: 100px;
  height: 100px;
}

.perk-card-icon svg{
  width: 70px;
  height: 70px;
  fill: #000;
}

.custom2 .perk-card-icon {
  border-radius: 13px 13px 13px 50px;
}

.custom3 .perk-card-icon {
  border-radius: 50px 13px 13px 13px;
}

.custom4 .perk-card-icon {
  border-radius: 13px 13px 50px 13px;
}

.section-wrapper {
  display: flex;
  flex-direction: column-reverse;
}

.product-focus-page {
  padding-top: 51px;
  padding-bottom: 51px;
}

.product-focus-img-sidebar {
  padding: 45px;
  background-color: #257A3E56;
  border-radius: 20px;
  display: flex;
  flex-direction: row;
  gap: 45px;
  align-items: center;
  justify-content: center;
}

.product-focus-img {
  width: 60%;
  height: 500px;
  object-fit: contain;
}

.product-focus-content-entry {
  margin: 29px 0;
  display: flex;
  flex-direction:  row;
  gap: 45px;
  justify-content: center;
}

.product-focus-title-price {
  width: 60%;
}

.product-focus-info {
  width: 40%;
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.product-focus-title {
  font-size: 29px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  margin-bottom: 15px;
}

.product-focus-price {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  justify-content: start;
  font-size: 49px;
  color: var(--color);
  font-weight: 600;
}

.product-focus-price svg {
  width: 55px;
  height: 55px;
  fill: var(--color);
}

.product-focus-info-item {
  width: 30%;
  display: flex;
  flex-direction: column;
  gap: 13px;
  align-items: center;
  border-bottom: 2px solid var(--accent);
  background: rgba(0,0,0,0.5); color: #fff;
  border-radius: 13px;
  padding: 10px;
}

.product-focus-info-item svg {
  width:  27px;
  height:  27px;
  fill: var(--color);
}

.product-focus-info-item p {
  padding: 0;
  font-size: 16px;
}

.product-focus-textwrapper {
  display: flex;
  flex-direction: column;
  gap: 29px;
}

.product-focus-order {
  display: flex;
  justify-content: center;
  
}

.pfo-form {
  background-color: var(--light);
  border-radius: 20px;
  padding: 29px 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 15px;
}

.pfo-form .input-main__holder-part {
  width: 20%;
}

.pfo-form .textarea-main__holder-part {
  width: 20%;
}
.pfo-form label {
  width: 20%;
}

.pfo-form-submt {
  display: flex;
  align-items: center;
  gap: 15px;
}

.product-focus-desc {
  font-size: 23px;
  font-weight: 600;
  padding: 15px;
  position: relative;
}

.product-focus-desc::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 1px;
  bottom: 0;
  background-color: var(--accent);
}

.product-focus-text {
  padding-left: 20px;
  font-size: 15px;
  line-height: 1.7;
}



.best-recommendation{
  padding: 45px 0;
  background-color: #000;
}

.best-recommendation-title{
  font-size: 27px;
  font-weight: 600;
  color: var(--light);
  text-align: center;
  margin: 0;
  margin-bottom: 25px;
}

.best-recommendation-list {
  display: flex;
  flex-direction: row;
  gap: 15px;
  align-items: center;
  justify-content: center;
}

.best-recommendation-item {
  position: relative;
  width: 47%;
}

.best-recommendation-content {
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: absolute;
  left: 0;
  top: 65%;
  transform: translateY(-50%);
  width: 55%;
  color: #000;
  background: #f0e4d777;
  border-radius: 20px;
  padding: 29px;
  z-index: 2;
}

.best-recommendation-content h2 {
  font-size: 19px;
  font-weight: 600;
  margin: 0px;
  color: var(--accent);
}
 
.best-recommendation-hero {
  height: 100%;
  display: flex;
  justify-content: end;
}

.best-recommendation-hero-img {
  height: 350px;
  border-radius: 20px;
  width: 50%;
  object-fit: cover;
}

.connect-section {
  padding-top: 51px;
  padding-bottom: 51px;
}

.connect-section-formblock {
  position: relative;
  display: flex;
  justify-content: start;
}

.connect-section-form {
  width: 70%;
  padding: 29px  45px;
  border-radius: 20px;
  box-shadow: rgba(6, 24, 44, 0.4) 0px 0px 0px 2px, rgba(6, 24, 44, 0.65) 0px 4px 6px -1px, rgba(255, 255, 255, 0.08) 0px 1px 0px inset;
  background: rgba(0,0,0,0.5); color: #fff;
}

.cs-formbody {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cs-form-input-group {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.25;
}

.cs-form-input-group label {
  display: block;
  color: rgba(156, 163, 175, 1);
  margin-bottom: 6px;
}

.cs-form-input-group input {
  width: 100%;
  border-radius: 5px;
  border: 1px solid rgba(55, 65, 81, 1);
  outline: 0;
  background-color: rgba(17, 24, 39, 1);
  padding: 6px 10px;
  color: rgba(243, 244, 246, 1);
}

.cs-form-input-group input:focus {
  border-color: rgba(167, 139, 250);
}

.connect-section-form-img {
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
  width: 45%;
  height: 500px;
  background-color: var(--accent);
  border-radius: 200px 200px 60px 241px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.connect-section-form-img img {
  width: 100%;
  height: 400px;
  object-fit: contain;
  margin-bottom: -25px;
}

.connect-section-contacts {
  padding-top: 45px;
  padding-bottom: 45px;
}

.cs-contact-title {
  font-size: 45px;
  font-weight: 600;
  text-align: center;
  margin: 0;
  margin-bottom: 45px;
}

.cs-contact-list {
  display: flex;
  flex-direction:  row;
  gap: 25px;
  justify-content: center;
}

.cs-contact-item {
  width: 32%;
  padding: 25px 15px;
  border: 3px solid var(--color);
  border-radius: 29px;
  text-align: center;
  margin-bottom: 15px;
  transition: all ease 0.4s;
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.cs-contact-item:hover {
  border-color: var(--accent);
}

.cs-contact-item-pic {
  width: 120px;
  height: 120px;
  line-height: 120px;
  background-color: var(--color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all ease 0.4s;
}

.cs-contact-item:hover .cs-contact-item-pic {
  background-color: var(--accent);
}

.cs-contact-item-pic svg {
  width: 90px;
  height: 90px;
  object-fit: contain;
  fill: #fff;
}

.cs-contact-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.connect-section-wrapper {
  display: flex;
  flex-direction: column-reverse;
}

.data-privacy-page {

  padding-top: 45px;
  padding-bottom: 45px;
  background: rgba(0,0,0,0.5); color: #fff;
}

.data-privacy {
  overflow: hidden;
  word-break: break-all;
}

.data-privacy-title {
  margin: 45px 0;
  font-size:  31px;
  font-weight:  600;
  text-align: center;
}

.data-privacy-text {
  line-height: 1.7;
  word-break: break-all;
}




.button-1 {
  padding: 10px 6px;
  border-radius: 50px;
  background-color: transparent;
  border: 2px solid #000814;
  overflow: hidden;
  position: relative;
  font-size: 15px;
  font-weight: 500;
  text-transform: inherit;
  transition: 300ms ease;
}

.button-1::before {
  content: "";
  position: absolute;
  z-index: -1;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background-color: #003566;
  top: 100%;
  left: 0;
  transition: 500ms ease;
}

.button-1:hover {
  color: #000;
  letter-spacing: 3px;
}

.button-1:hover::before {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.button-2 {
  background-color: #257A3E56;
  border-radius: 50px;
  box-shadow: inset 4px 4px 10px #bcbcbc, inset -4px -4px 10px #ffffff;
  color: #4d4d4d;
  cursor: pointer;
  font-size: 15px;
  padding: 10px 10px;
  transition: all 0.2s ease-in-out;
  border: 2px solid rgb(206, 206, 206);
}

.button-2:hover {
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

.button-2:focus {
  outline: none;
  box-shadow: inset 2px 2px 5px #bcbcbc, inset -2px -2px 5px #ffffff, 2px 2px 5px #bcbcbc, -2px -2px 5px #ffffff;
}

.button-3 {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 15px 23px;
  font-size: 15px;
  background-color: #1a1a1a;
  cursor: pointer;
  color: white;
  transition: border-color 0.25s;
}

.button-3:hover {
  border-color: var(--color);
}

.button-3:focus,
.button-3:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

.button-4 {
  outline: none;
  display: inline-block;
  border: 1px solid #fff;
  padding: 6px 10px;
  border-radius: 5px;
  background: #257A3E32;
  color: #000;
  font-size: 15px;
  transition: .3s;
  cursor: pointer;
  position: relative;
}

.button-4::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 5px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  width: 0px;
  height: 0px;
  opacity: 0;
  transition: .3s;
}

.button-4::after {
  content: '';
  position: absolute;
  right: 5px;
  bottom: 5px;
  border-bottom: 2px solid #fff;
  border-right: 2px solid #fff;
  width: 0px;
  height: 0px;
  opacity: 0;
  transition: .3s;
}

.button-4:hover {
  box-shadow: 4px 4px 10px rgb(184, 184, 184);
  transform: translateY(-5px);
}

.button-4:hover::after, .button3:hover::before {
  height: 20px;
  width: 20px;
  opacity: 1;
}

.button-5 {
  display: inline-block;
  padding: 6px 15px;
  font-size: 15px;
  color: rgb(0, 0, 0);
  background: transparent;
  border-radius: 50px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border-style: solid;
  border: none;
}

.button-5:before,
.button-5:after {
  content: "";
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  pointer-events: none;
}

.button-5:before {
  left: 90%;
  background: linear-gradient(130deg, rgb(6, 193, 255), rgb(255, 255, 255), rgba(253, 28, 197, 0.985));
  z-index: -1;
  transition: left 0.3s ease-in-out;
}

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

.button-5:after {
  right: 90%;
  background: linear-gradient(130deg, rgb(6, 193, 255), rgb(255, 255, 255), rgba(253, 28, 197, 0.985));
  z-index: -1;
  transition: right 0.3s ease-in-out;
}

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




@media (max-width: 1200px) {

  .structure-box {
    max-width: 1140px;
  }

  .perk-card-content {
    padding-left: 30px;
    padding-right: 30px;
  }

  .perk-card-title {
    font-size: 16px;
  }

  .perk-card {
    height: 350px;
  }






}


@media (max-width: 992px) {
 
  .structure-box {
    max-width: 960px;
  }

  .product-portfolio-title h2 {
    font-size: 60px;
  }

  .hnb-title h2 {
    font-size: 22px;
  }

  .perk-list {
    flex-wrap: wrap;
  }

  .perk-card {
    width: 45%;
  }

  .company-overview-content {
    padding: 40px 30px;
    gap: 20px;
  }

  .hosi-overlay {
    padding: 15px;
  }

  .product-portfolio-list {
    flex-wrap: wrap;
  }

  .product-portfolio-card {
    width: 45%;
  }

  .faq-guide {
    position: relative;
    z-index: 0;
  }

  .faq-guide-decor {
    position: absolute;
    z-index: -1;
    width: 90%;
    display: flex;
    margin: auto;
  }

  .purchase-portal {
    flex-direction: column;
    gap: 20px;
  }

  .purchase-portal-title, .purchase-portal-form-wrapper, .faq-guide-accordeon {
    width: 100%;
  }

  .faq-guide-decor-img {
    height: 400px;
  }

  .faq-guide-title {
    color: #000;
  }

  .faq-gi-answer p {
    background-color: #ffffffbe;
  }
 
  .best-recommendation-list {
    flex-direction: column;
  }

  .pfo-form {
    flex-direction: column;
    width: 100%;
  }

  .product-focus-content-entry {
    flex-direction: column;
  }
  
  .product-focus-title-price, .product-focus-info {
    width: 100%;
  }
  
  .product-focus-price {
    font-size: 18px;
  }
  
  .product-focus-info {
    gap: 10px;
  }
  
  .product-focus-info-item {
    width: 29%;
    padding: 10px;
  }
  
  .product-focus-info-item p {
    font-size: 12px;
  }

  .pfo-form .input-main__holder-part, .pfo-form label {
    width: 100%;
  }
  .pfo-form .textarea-main__holder-part {
    width: 100%;
  }
  .cs-contact-list {
    flex-direction: column;
  }
.best-recommendation-item {
  width: 100%;
}
  

  

 

}


@media(max-width: 767px)  {

  .connect-section-form {
    width: 85%;
  }

  .connect-section-form-img {
    width: 80%;
    height: 480px;
  }

  .product-focus-img-sidebar .how-order-sidebar {
    display: none;
  }  

  .structure-box {
    max-width: 720px;
  }

  .header-crown-nav {
    flex-direction: column;
  }

  .hnb-title {
    width: 90%;
  }

  .header-crown-banner {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .perk-section-title, .perk-section-final {
    font-size: 18px;
  }
  
  .company-overview-content {
    flex-direction: column;
  }

  .how-order-sidebar, .company-overview-info {
    width: 100%;
  }

  .product-portfolio-card {
    width: 100% !important;
  }

  .faq-gi-label {
    font-size: 16px;
  }

  .customer-satisfaction-wrapper p {
    font-size: 18px;
  }

  .customer-satisfaction-title {
    font-size: 22px;
  }

  .additional-information-container {
    flex-direction: column;
  }

  .col-additional-information {
    width: 100%;
    flex-direction: column;
    align-items: center;
  }

  .logo-additional-information {
    justify-content: center;
  }

  .perk-card-content {
    width: 100%;
  }


}


@media(max-width: 576px) {
  .hcn-logo h3 {
    text-transform: none;
  }

  .product-focus-img {
    height: auto;
  }

  .connect-section-form, .connect-section-form-img {
    width: 100%;
  }

  .best-recommendation-hero-img {
    display: none !important;
  }

 .structure-box {
    max-width: 540px;
  }

  .product-portfolio-title h2 {
    font-size: 25px;
  }

  .hcn-downbtn, .hcn-link {
    font-size: 12px;
    text-transform: none;
  }

  .hcn-list {
    flex-wrap: wrap;
    width: 100%;
    justify-content: start;
    gap: 5px;
    align-items: baseline;
  }

  .hnb-title {
    padding: 40px 15px;
  }

  .hnb-title h2 {
    font-size: 16px;
}

.perk-card {
  width: 100%;
}

.company-overview-title, .how-order-sidebar-title {
  font-size: 22px !important;
}

.company-overview-info p {
  font-size: 16px !important;
}

.product-portfolio-card {
  flex-direction: column !important;
}

.ppc-img img {
  height: 230px;
}

.faq-guide-section {
  padding-top: 80px;
}

.fgd-circle {
  width: 290px;
    height: 290px;
    top: -20%;
    border: 40px;
}

.purchase-portal-txt {
  font-size: 16px;
}

.customer-satisfaction-wrapper {
  flex-direction: column;
}

.best-recommendation-content {
  position: static;
  transform: none;
  width: 100% !important;
  padding: 15px;
  font-size: 14px;
}

.best-recommendation-content h2 {
  font-size: 16px;
}

.header-crown-contact-bg {
  display: none;
}

.hcn-downmenu-list {
  width: 200px;
}

.hcn-downmenu-link a {
  font-size: 12px;
}

.pfo-form-submt {
  flex-direction: column;
}


}
@media(max-width: 400px) {
  .hcn-list {
    flex-direction: column;
  }
}