:root {
  --vds-blue-dark: #0b2848;
  --vds-blue: #173b63;
  --vds-blue-soft: #eef6ff;
  --vds-gold: #a98f6f;
  --vds-gold-dark: #8f7357;
  --vds-cream: #f7f1e8;
  --vds-white: #ffffff;
  --vds-gray-50: #f8fafc;
  --vds-gray-100: #f1f5f9;
  --vds-gray-200: #e2e8f0;
  --vds-gray-500: #64748b;
  --vds-gray-600: #475569;
  --vds-gray-700: #334155;
  --vds-gray-900: #0f172a;
  --vds-border: rgba(148, 163, 184, 0.35);
  --vds-border-gold: rgba(169, 143, 111, 0.35);
}

body {
  color: var(--vds-gray-900);
  background-color: var(--vds-white);
}

h1,
h2,
h3,
h4,
h5,
h6,
.home-1-banner-h1,
.service-title,
.client-name-wrap,
.nav-item-title {
  color: var(--vds-blue-dark);
}

p,
.paragraph-large,
.service-card-paragraph,
.testimonial-text,
.footer-rights-text,
.footer-contact-link,
.footer-link {
  color: var(--vds-gray-600);
}

a,
.nav-link,
.nav-item-title,
.nav-dropdown-link,
.footer-link,
.footer-rights-bottom-link {
  color: var(--vds-blue-dark);
}

a:hover,
.nav-link:hover,
.nav-link.w--current,
.nav-dropdown-link:hover,
.footer-link:hover,
.footer-rights-bottom-link:hover {
  color: var(--vds-gold);
}

.navbar-fixed,
.form-footer {
  background-color: var(--vds-blue-dark);
}

.navbar-fixed .nav-link,
.navbar-fixed .nav-item-title,
.banner-section,
.banner-section p,
.banner-section h1,
.form-footer,
.form-footer h2,
.form-footer h3,
.form-footer p,
.form-footer .footer-link,
.form-footer .footer-contact-link,
.form-footer .footer-rights-bottom-link {
  color: var(--vds-white);
}

.section,
.home-section,
.home-photo-section,
.no-space {
  background-color: var(--vds-white);
}

.label,
.project-tag,
.service-number,
.testimonials-name-designation,
.baner-slider-white-indicator {
  color: var(--vds-gold-dark);
}

.primary-button,
.w-button.primary-button,
.footer-submit {
  background-color: var(--vds-gold);
  color: var(--vds-blue-dark);
  border-color: var(--vds-gold);
}

.primary-button:hover,
.w-button.primary-button:hover,
.footer-submit:hover {
  background-color: var(--vds-gold-dark);
  color: var(--vds-white);
  border-color: var(--vds-gold-dark);
}

.primary-button .button-text,
.w-button.primary-button .button-text,
.footer-submit {
  color: inherit;
}

.link-button,
.nav-button-wrap .link-button,
.nav-button-tablet .link-button {
  background-color: var(--vds-white);
  color: var(--vds-blue-dark);
  border-color: var(--vds-border);
}

.link-button:hover,
.nav-button-wrap .link-button:hover,
.nav-button-tablet .link-button:hover {
  background-color: var(--vds-blue-soft);
  color: var(--vds-blue-dark);
  border-color: var(--vds-border);
}

.link-button .button-text {
  color: inherit;
}

.home-tab-link {
  color: var(--vds-blue-dark);
}

.home-tab-link.w--current,
.home-tab-link:hover,
.service-arrow,
.testimonials-left-arrow,
.testimonials-right-arrow,
.home-1-banner-left-arrow,
.home-1-banner-right-arrow {
  background-color: var(--vds-blue-dark);
  color: var(--vds-white);
}

.service-link-block,
.testimonials-card,
.form-block,
.text-field,
.nav-dropdown-list,
.tablet-menu {
  background-color: var(--vds-white);
  border-color: var(--vds-border);
}

.service-link-block:hover,
.testimonials-card:hover {
  border-color: var(--vds-border-gold);
}

.text-field {
  color: var(--vds-blue-dark);
}

.text-field:focus {
  border-color: var(--vds-gold);
}

.banner-section,
.home-1-banner-slider,
.banner-slide,
.banner-image-wrap,
.banner-image {
  background-color: transparent;
}

.banner-section .overlay {
  background: linear-gradient(
    90deg,
    rgba(11, 40, 72, 0.88) 0%,
    rgba(23, 59, 99, 0.74) 48%,
    rgba(11, 40, 72, 0.20) 100%
  );
}

/* Fleches slider - palette Voile du Sud uniquement */
.home-1-banner-left-arrow,
.home-1-banner-right {
  width: 50px;
  height: 50px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 50%;
  background: rgba(11, 40, 72, 0.60) !important;
  box-shadow: none;
}

.home-1-banner-left-arrow:hover,
.home-1-banner-right:hover {
  border-color: #A98F6F;
  background: #A98F6F !important;
}

.home-1-banner-left-arrow img,
.home-1-banner-right img {
  filter: brightness(0) invert(1) !important;
}

.home-1-banner-left-arrow:hover img,
.home-1-banner-right:hover img {
  filter: brightness(0) saturate(100%)
    invert(13%) sepia(31%) saturate(2224%)
    hue-rotate(179deg) brightness(92%) contrast(96%) !important;
}

/* Neutraliser toutes les couleurs heritees du template */
.home-1-banner-right,
.home-1-banner-right:hover,
.home-1-banner-right:focus,
.home-1-banner-right:active,
.home-1-banner-right::before,
.home-1-banner-right::after {
  background-image: none !important;
  color: inherit !important;
}

.home-1-banner .primary-button {
  background: #A98F6F !important;
  color: #0B2848 !important;
  min-height: 54px;
  padding: 14px 26px;
  border-radius: 999px;
}

.home-1-banner .primary-button .button-text {
  color: #0B2848 !important;
  white-space: nowrap;
}

.home-1-banner .primary-button:hover {
  background: #8F7357 !important;
  color: #ffffff !important;
}

.home-1-banner .primary-button:hover .button-text {
  color: #ffffff !important;
}

/* Point blanc du bouton hero */
.home-1-banner .primary-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #A98F6F !important;
  color: #0B2848 !important;
}

/* Cercle externe discret */
.home-1-banner .primary-button .button-spot-big {
  position: relative !important;
  display: grid !important;
  flex: 0 0 14px !important;
  width: 14px !important;
  height: 14px !important;
  place-items: center !important;
  overflow: visible !important;
  border-radius: 50% !important;
  background: transparent !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Point blanc visible */
.home-1-banner .primary-button .button-spot-small {
  display: block !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #FFFFFF !important;
  opacity: 1 !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Texte correctement espace */
.home-1-banner .primary-button .button-text {
  position: relative !important;
  z-index: 1 !important;
  color: #0B2848 !important;
  white-space: nowrap !important;
}

/* Au survol, conserver le point blanc */
.home-1-banner .primary-button:hover {
  background: #8F7357 !important;
  color: #FFFFFF !important;
}

.home-1-banner .primary-button:hover .button-text {
  color: #FFFFFF !important;
}

.home-1-banner .primary-button:hover .button-spot-small {
  background: #FFFFFF !important;
}

/* Supprime la barre blanche animee sous le bouton hero et garde seulement le point */
.home-1-banner .primary-button {
  overflow: hidden !important;
}

.home-1-banner .primary-button .button-spot-big,
.home-1-banner .primary-button .button-spot-big:hover,
.home-1-banner .primary-button:hover .button-spot-big {
  min-width: 14px !important;
  max-width: 14px !important;
  min-height: 14px !important;
  max-height: 14px !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

.home-1-banner .primary-button .button-spot-big::before,
.home-1-banner .primary-button .button-spot-big::after,
.home-1-banner .primary-button .button-spot-small::before,
.home-1-banner .primary-button .button-spot-small::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.home-1-banner .primary-button .button-spot-small,
.home-1-banner .primary-button:hover .button-spot-small {
  min-width: 10px !important;
  max-width: 10px !important;
  min-height: 10px !important;
  max-height: 10px !important;
  background: #FFFFFF !important;
  background-image: none !important;
}

.home-1-banner-h1 {
  max-width: 700px;
  font-family: "Libre Baskerville", Georgia, serif;
  font-size: clamp(46px, 4vw, 66px);
  font-weight: 700;
  line-height: 1.07;
  text-transform: none;
}

.banner-section .overlay {
  background: linear-gradient(
    90deg,
    rgba(11, 40, 72, 0.84) 0%,
    rgba(23, 59, 99, 0.62) 44%,
    rgba(11, 40, 72, 0.14) 100%
  );
}

.home-1-banner-left-arrow,
.home-1-banner-right {
  bottom: 42px;
}

.home-1-banner-left-arrow {
  right: 104px;
}

.home-1-banner-right {
  right: 42px;
}

.banner-image {
  object-fit: cover;
  object-position: 58% 48%;
  transform: scale(1.01);
}

/* Overlay : plus dense a gauche, plus transparent a droite */
.banner-section .overlay {
  background: linear-gradient(
    90deg,
    rgba(11, 40, 72, 0.82) 0%,
    rgba(11, 40, 72, 0.68) 34%,
    rgba(23, 59, 99, 0.38) 56%,
    rgba(11, 40, 72, 0.12) 78%,
    rgba(11, 40, 72, 0.03) 100%
  );
}

/* Donner un peu plus de respiration au texte */
.home-1-banner-text-wrap {
  padding-top: 38px;
}

.banner-paragraph-wrapper .paragraph-large {
  font-size: 18px;
  line-height: 1.55;
  max-width: 360px;
}

/* Lisibilite discrete des indicateurs bas */
.baner-slider-indicators-wrap {
  padding-bottom: 22px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(11, 40, 72, 0.30) 100%
  );
}

/* Section a propos - equilibre editorial */
.about-block-title-wrap h2 {
  max-width: 680px;
  font-size: clamp(42px, 3.3vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.about-block-image-wrap {
  max-width: 460px;
}

.about-block-image {
  width: 100%;
  min-height: 340px;
  object-fit: cover;
}

.about-block-bottom {
  align-items: start;
}

.about-block-bottom .label {
  margin-top: 6px;
  color: #8F7357;
}

.about-block-bottom .label::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 12px;
  background: #A98F6F;
}

.about-paragraphs-wrapper {
  gap: 34px;
}

.about-paragraph-wrap p {
  font-size: 16px;
  line-height: 1.65;
  color: #475569;
}

/* Ajustements section accastillage */
.horizontal-title-wrap h2 {
  max-width: 520px;
  font-size: clamp(42px, 3.25vw, 58px);
  line-height: 1.1;
}

.horizontal-title-wrap .label {
  margin-bottom: 18px;
}

.horizontal-title-wrap > div:last-child {
  margin-bottom: 30px;
}

.tab-overlay {
  background: linear-gradient(
    90deg,
    rgba(11, 40, 72, 0.82) 0%,
    rgba(11, 40, 72, 0.62) 34%,
    rgba(23, 59, 99, 0.24) 56%,
    rgba(11, 40, 72, 0.04) 78%,
    transparent 100%
  );
}

/* CTA Voile du Sud - suppression couleurs template */
.horizontal-title-wrap .primary-button,
.horizontal-title-wrap a.primary-button,
.home-tabs .primary-button {
  background: #A98F6F !important;
  color: #0B2848 !important;
  border: 1px solid transparent !important;
  box-shadow: 0 14px 28px rgba(169, 143, 111, 0.28) !important;
}

.horizontal-title-wrap .primary-button .button-text,
.horizontal-title-wrap a.primary-button .button-text,
.home-tabs .primary-button .button-text {
  color: #0B2848 !important;
  font-family: "Raleway", Arial, sans-serif !important;
  font-weight: 800 !important;
}

.horizontal-title-wrap .primary-button .button-spot-small,
.horizontal-title-wrap a.primary-button .button-spot-small,
.home-tabs .primary-button .button-spot-small {
  background: #FFFFFF !important;
  opacity: 1 !important;
}

.horizontal-title-wrap .primary-button:hover,
.horizontal-title-wrap a.primary-button:hover,
.home-tabs .primary-button:hover {
  background: #8F7357 !important;
  color: #FFFFFF !important;
  box-shadow: 0 16px 32px rgba(143, 115, 87, 0.34) !important;
}

.horizontal-title-wrap .primary-button:hover .button-text,
.horizontal-title-wrap a.primary-button:hover .button-text,
.home-tabs .primary-button:hover .button-text {
  color: #FFFFFF !important;
}

/* Neutraliser les couleurs rouges heritees */
.horizontal-title-wrap .primary-button::before,
.horizontal-title-wrap .primary-button::after,
.horizontal-title-wrap .primary-button:hover::before,
.horizontal-title-wrap .primary-button:hover::after {
  background-image: none !important;
  background-color: transparent !important;
}

/* =========================================================
   TYPOGRAPHIE GLOBALE - VOILE DU SUD
   ========================================================= */

:root {
  --vds-font-heading: "Libre Baskerville", Georgia, serif;
  --vds-font-body: "Raleway", Arial, sans-serif;

  --vds-h1-size: clamp(48px, 4.4vw, 72px);
  --vds-h2-size: clamp(40px, 3.3vw, 58px);
  --vds-h3-size: clamp(24px, 2vw, 34px);

  --vds-body-size: 16px;
  --vds-body-large-size: 18px;
  --vds-label-size: 13px;
}

/* Police generale */
body,
button,
input,
textarea,
select,
p,
a,
span,
div {
  font-family: var(--vds-font-body);
}

/* Titres principaux */
h1,
h2,
.home-1-banner-h1,
.about-block h2,
.horizontal-title-wrap h2,
.title-wrap h2,
.large-text,
.project-link {
  font-family: var(--vds-font-heading) !important;
  font-weight: 700 !important;
  text-transform: none !important;
  letter-spacing: -0.035em !important;
}

/* Hero */
.home-1-banner-h1 {
  max-width: 760px !important;
  font-size: var(--vds-h1-size) !important;
  line-height: 1.08 !important;
}

/* Titres de sections blanches / editoriales */
.about-block h2,
.title-wrap h2,
.horizontal-title-wrap h2 {
  max-width: 760px !important;
  font-size: var(--vds-h2-size) !important;
  line-height: 1.12 !important;
}

/* Eviter les titres trop gros et trop agressifs */
.about-block-title-wrap h2 {
  max-width: 700px !important;
  font-size: clamp(38px, 3.1vw, 54px) !important;
  line-height: 1.12 !important;
}

/* Titres secondaires */
h3,
.service-title,
.project-link,
.project-card h3,
.range-card h3 {
  font-family: var(--vds-font-body) !important;
  font-size: var(--vds-h3-size) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  text-transform: none !important;
}

/* Paragraphes */
p,
.about-paragraph-wrap p,
.service-card-paragraph,
.paragraph-large,
.section-copy {
  font-family: var(--vds-font-body) !important;
  font-size: var(--vds-body-size) !important;
  font-weight: 500 !important;
  line-height: 1.65 !important;
  letter-spacing: 0 !important;
}

/* Paragraphes du hero */
.banner-paragraph-wrapper .paragraph-large {
  font-size: var(--vds-body-large-size) !important;
  font-weight: 500 !important;
  line-height: 1.58 !important;
}

/* Labels */
.label,
.eyebrow,
.home-1-slider-number,
.baner-slider-indicators-text,
.nav-item-title,
.nav-link,
.home-tab-link {
  font-family: var(--vds-font-body) !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* Boutons */
.primary-button,
.link-button,
.primary-button .button-text,
.link-button .button-text {
  font-family: var(--vds-font-body) !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
}

.home-1-banner-slider .w-slide {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}

/* Ajustements finaux - section A propos */
.about-block-title-wrap h2 {
  max-width: 720px;
  font-size: clamp(42px, 3.1vw, 56px);
  line-height: 1.13;
  letter-spacing: -0.03em;
}

.about-block-image-wrap {
  min-height: 340px;
}

.about-block-image {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.about-block-bottom {
  margin-top: 54px;
}

.about-block-bottom .label,
.about-block-top .label {
  color: #8F7357;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.about-paragraph-wrap p {
  color: #475569;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
}

.about-block-bottom .label::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 16px;
  background: #A98F6F;
}

/* Rythme vertical - section A propos */
.about-block-bottom {
  margin-top: 34px !important;
  align-items: start !important;
}

.about-paragraphs-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 42px !important;
  align-items: start !important;
}

.about-paragraph-wrap {
  max-width: 390px !important;
}

.about-block-bottom .label {
  margin-top: 4px !important;
  align-self: start !important;
}

.about-paragraph-wrap p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
}

@media (max-width: 767px) {
  .about-block-bottom {
    margin-top: 28px !important;
  }

  .about-paragraphs-wrapper {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .about-paragraph-wrap {
    max-width: none !important;
  }
}

/* Section a propos : composition compacte */
.about-block {
  padding-top: 96px !important;
  padding-bottom: 96px !important;
}

.about-block-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) minmax(0, 0.82fr) !important;
  gap: 34px !important;
  align-items: start !important;
}

.about-block-title-wrap {
  max-width: 720px !important;
}

.about-block-title-wrap h2 {
  margin: 0 !important;
  max-width: 720px !important;
  font-size: clamp(42px, 3.15vw, 58px) !important;
  line-height: 1.1 !important;
}

.about-block-image-wrap {
  margin: 0 !important;
  min-height: 340px !important;
}

.about-block-image {
  width: 100% !important;
  height: 340px !important;
  object-fit: cover !important;
}

.about-block-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr) minmax(0, 0.82fr) !important;
  gap: 34px !important;
  align-items: start !important;
  margin-top: 34px !important;
}

.about-block-bottom .label {
  margin: 0 !important;
  padding-top: 4px !important;
  color: #8F7357 !important;
}

.about-block-bottom .label::after {
  content: "" !important;
  display: block !important;
  width: 48px !important;
  height: 2px !important;
  margin-top: 14px !important;
  background: #A98F6F !important;
}

.about-paragraphs-wrapper {
  display: grid !important;
}

.about-paragraph-wrap {
  max-width: none !important;
  margin: 0 !important;
}

.about-paragraph-wrap p {
  margin: 0 !important;
  color: #475569 !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
}

@media (max-width: 991px) {
  .about-block-top,
  .about-block-bottom {
    grid-template-columns: 1fr 1fr !important;
  }

  .about-block-title-wrap {
    grid-column: 1 / -1 !important;
  }

  .about-block-bottom .label {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 767px) {
  .about-block {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .about-block-top,
  .about-block-bottom {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .about-block-image {
    height: 260px !important;
  }
}

/* Ajustements finaux - section A propos */
.about-block-title-wrap h2 {
  max-width: 720px;
  font-size: clamp(42px, 3.1vw, 56px);
  line-height: 1.13;
  letter-spacing: -0.03em;
}

.about-block-image-wrap {
  min-height: 340px;
}

.about-block-image {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.about-block-bottom {
  margin-top: 54px;
}

.about-block-bottom .label,
.about-block-top .label {
  color: #8F7357;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.about-paragraph-wrap p {
  color: #475569;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
}

.about-block-bottom .label::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 16px;
  background: #A98F6F;
}

/* Image centrale section a propos */
@media (min-width: 992px) {
  .about-block-top {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.78fr) minmax(300px, 0.82fr);
    align-items: start;
    gap: 40px;
  }

  .vds-about-middle-image-wrap {
    max-width: 420px;
  }

  .vds-about-middle-image {
    width: 100%;
    min-height: 340px;
    object-fit: cover;
  }
}

@media (max-width: 991px) {
  .vds-about-middle-image-wrap {
    margin-top: 24px;
  }

  .vds-about-middle-image {
    width: 100%;
    min-height: 280px;
    object-fit: cover;
  }
}

.home-1-banner-slider .w-slide {
  transition-timing-function: cubic-bezier(0.65, 0, 0.35, 1) !important;
}
/* Ajustements finaux - section A propos */
.about-block-title-wrap h2 {
  max-width: 720px;
  font-size: clamp(42px, 3.1vw, 56px);
  line-height: 1.13;
  letter-spacing: -0.03em;
}

.about-block-image-wrap {
  min-height: 340px;
}

.about-block-image {
  width: 100%;
  height: 100%;
  min-height: 340px;
  object-fit: cover;
}

.about-block-bottom {
  margin-top: 54px;
}

.about-block-bottom .label,
.about-block-top .label {
  color: #8F7357;
  font-family: "Raleway", Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.about-paragraph-wrap p {
  color: #475569;
  font-size: 16px;
  line-height: 1.65;
  font-weight: 500;
}

.about-block-bottom .label::after {
  content: "";
  display: block;
  width: 46px;
  height: 2px;
  margin-top: 16px;
  background: #A98F6F;
}
/* Rythme vertical - section A propos */
.about-block-bottom {
  margin-top: 34px !important;
  align-items: start !important;
}

.about-paragraphs-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 42px !important;
  align-items: start !important;
}

.about-paragraph-wrap {
  max-width: 390px !important;
}

.about-block-bottom .label {
  margin-top: 4px !important;
  align-self: start !important;
}

.about-paragraph-wrap p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
}

@media (max-width: 767px) {
  .about-block-bottom {
    margin-top: 28px !important;
  }

  .about-paragraphs-wrapper {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }

  .about-paragraph-wrap {
    max-width: none !important;
  }
}
/* =========================================================
   RESET COMPOSITION - SECTION A PROPOS VOILE DU SUD
   Restaurer une composition compacte et equilibree.
   ========================================================= */

.home-section:has(.about-block) {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.about-block {
  display: flex !important;
  flex-direction: column !important;
  gap: 34px !important;
}

.about-block-top {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.78fr) minmax(0, 0.78fr) !important;
  align-items: start !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-block-title-wrap {
  width: auto !important;
  max-width: 660px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-block-title-wrap h2 {
  max-width: 660px !important;
  margin: 0 !important;
  font-size: clamp(42px, 3vw, 56px) !important;
  line-height: 1.12 !important;
}

.about-block-image-wrap,
.vds-about-middle-image-wrap {
  width: 100% !important;
  min-width: 0 !important;
  height: 300px !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.about-block-image,
.vds-about-middle-image {
  display: block !important;
  width: 100% !important;
  height: 300px !important;
  min-height: 0 !important;
  object-fit: cover !important;
  margin: 0 !important;
}

.about-block-bottom {
  display: grid !important;
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1.56fr) !important;
  align-items: start !important;
  gap: 28px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-block-bottom > .label.mobile-hidden {
  display: block !important;
  margin: 0 !important;
  padding-top: 4px !important;
  align-self: start !important;
}

.about-paragraphs-wrapper {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 34px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-paragraph-wrap {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.about-paragraph-wrap p {
  margin: 0 !important;
  font-size: 16px !important;
  line-height: 1.62 !important;
  color: #475569 !important;
}

.about-block-bottom > .label.mobile-hidden::after {
  content: "" !important;
  display: block !important;
  width: 46px !important;
  height: 2px !important;
  margin-top: 14px !important;
  background: #A98F6F !important;
}

@media (max-width: 991px) {
  .home-section:has(.about-block) {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  .about-block-top {
    grid-template-columns: 1fr 1fr !important;
  }

  .about-block-title-wrap {
    grid-column: 1 / -1 !important;
    max-width: 720px !important;
  }

  .about-block-bottom {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .about-block-bottom > .label.mobile-hidden {
    display: none !important;
  }

  .about-block-title-wrap .label.mobile {
    display: block !important;
  }
}

@media (max-width: 767px) {
  .home-section:has(.about-block) {
    padding-top: 52px !important;
    padding-bottom: 52px !important;
  }

  .about-block {
    gap: 24px !important;
  }

  .about-block-top,
  .about-block-bottom,
  .about-paragraphs-wrapper {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .about-block-image-wrap,
  .vds-about-middle-image-wrap,
  .about-block-image,
  .vds-about-middle-image {
    height: 240px !important;
  }

  .about-block-title-wrap h2 {
    font-size: clamp(36px, 10vw, 48px) !important;
  }
}
