@charset "utf-8";
/* CSS Document */

/*
Montserrat
Thin 		100
ExtraLight 	200
Light 		300
Regular 	400
Medium 		500
SemiBold 	600
Bold 		700
ExtraBold 	800
Black 		900
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Oswald:wght@200..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');


body 				{color: #333333; /*background-color: #001e40;*/   font-family: "Jost", sans-serif;overflow-x: hidden;}

h1, h2, h3, h4, h5	{color: #193867; font-weight: 700;font-family: "Jost", sans-serif;}
h1					{}
h2					{}
h3					{}
h4					{}
h5					{}

strong				{font-weight: 600;}

a					{text-decoration:none; color: #193867; transition: 0.5s;font-family: "Jost", sans-serif;}
a:hover				{text-decoration:none; color: #333333;}
a:visited			{text-decoration:none;}
a:focus,a:hover		{text-decoration:none;}

:root {
	--def-padding : 5rem;}

.navbar-toggler-icon 	{background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

:root {
	--def-padding : 5rem;
	--blue-color : #00458a;
}

.page					{}
.navbar-brand{display:flex;align-items:center;}
.dm-logo{width:300px !important;height:auto !important;}
.menu-area {position: fixed;top: 0;left: 0;width: 100%;z-index: 9999;}
.dm-navbar-inner {display: flex;align-items: center;justify-content: space-between;}
.dm-nav-actions {display: flex;align-items: center;gap: 18px;}
.quick-call {font-size: 12px;font-weight: 600;color: #c7a252;text-decoration: none;letter-spacing: .8px;}
.quick-call:hover {color: #111;}
.dm-menu-btn {width: 42px;height: 42px;border: 1px solid rgba(190,150,55,.55);border-radius: 50%;background: rgba(255,255,255,.45);display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 5px;padding: 0;}
.dm-menu-btn span {width: 18px;height: 2px;background: #b89436;border-radius: 10px;}
.dm-offcanvas-menu {width: min(460px, 92vw);background:radial-gradient(circle at 85% 12%, rgba(212,175,55,.18), transparent 34%),linear-gradient(145deg, #ffffff 0%, #f9f5eb 100%);border-left: 1px solid rgba(212,175,55,.28);transition: transform .65s cubic-bezier(.22, 1, .36, 1);}
.dm-offcanvas-header {padding: 28px 32px;}
.offcanvas-logo {width: 230px;height: auto;display: block;}

.dm-close-btn {position: relative;width: 44px;height: 44px;border: 1px solid rgba(190,150,55,.55);border-radius: 50%;background: rgba(255,255,255,.72);flex-shrink: 0;}
.dm-close-btn span {position: absolute;left: 12px;top: 21px;width: 20px;height: 2px;background: #b89436;}
.dm-close-btn span:first-child {transform: rotate(45deg);}
.dm-close-btn span:last-child {transform: rotate(-45deg);}
.dm-offcanvas-body {padding: 20px 36px 42px;}
.dm-offcanvas-links {list-style: none;margin: 0;padding: 0;}
.dm-offcanvas-links li {overflow: hidden;border-bottom: 1px solid rgba(0,0,0,.08);}
.dm-offcanvas-links a {display: flex;justify-content: space-between;align-items: center;padding: 20px 0;color: #111;text-decoration: none;font-size: clamp(26px, 3vw, 42px);font-weight: 400;letter-spacing: 1px;line-height: 1;transform: translateX(22px);opacity: 0;transition: .55s ease;}
.dm-offcanvas-menu.show .dm-offcanvas-links a {transform: translateX(0);opacity: 1;}
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(1) a { transition-delay: .08s; }
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(2) a { transition-delay: .14s; }
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(3) a { transition-delay: .20s; }
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(4) a { transition-delay: .26s; }
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(5) a { transition-delay: .32s; }
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(6) a { transition-delay: .38s; }
.dm-offcanvas-menu.show .dm-offcanvas-links li:nth-child(7) a { transition-delay: .44s; }

.dm-offcanvas-links a::after {content: "→";font-size: 22px;color: #b89436;opacity: 0;transform: translateX(-12px);transition: .35s ease;}
.dm-offcanvas-links a:hover {color: #b89436;}
.dm-offcanvas-links a:hover::after {opacity: 1;transform: translateX(0);}
.register-menu-link {color: #b89436 !important;}
.offcanvas-backdrop.show {opacity: .28;backdrop-filter: blur(6px);}

@media (max-width: 575px) {
.quick-call {font-size: 10px;}
.dm-nav-actions {gap: 10px;}
.dm-menu-btn {width: 38px;height: 38px;}
.offcanvas-logo {width: 190px;}
.dm-offcanvas-links a {font-size: 28px;padding: 17px 0;}}

.dm-offcanvas-menu{z-index: 9999;}
.dm-offcanvas-header {position: relative;display: flex;align-items: center;justify-content: space-between;gap: 18px;padding: 28px 32px 18px;}
.offcanvas-brand {display: block;width:300px;max-width: calc(100% - 70px);flex-shrink: 0;}
.offcanvas-logo {display: block;width: 100%;height: auto;}
.dm-close-btn {position: relative;width: 46px;height: 46px;min-width: 46px;border: 1px solid rgba(190,150,55,.55);border-radius: 50%;background: rgba(255,255,255,.72);flex-shrink: 0;}
.dm-close-btn span {position: absolute;left: 12px;top: 21px;width: 20px;height: 2px;background: #b89436;}
.dm-close-btn span:first-child {transform: rotate(45deg);}
.dm-close-btn span:last-child {transform: rotate(-45deg);}
.dm-offcanvas-body {padding: 35px 36px 42px;}
.dm-offcanvas-links a {font-size: 20px;}

.menu-area.scrolled{background: rgb(255 255 255 / 0%); backdrop-filter: blur(22px);-webkit-backdrop-filter: blur(22px);border-bottom: 1px solid rgba(255,255,255,.08);box-shadow: 0 12px 40px rgba(0,0,0,.18);}
.menu-area.scrolled .dm-navbar-inner{min-height: 80px;   /* Optional: reduce height on scroll */transition: all .4s ease;}


/* ===============================
   MAIN HERO SECTION
================================ */

.top-dm-banner-info {position: relative;overflow: hidden;min-height: 900px;padding: 120px 0 180px;display: flex;align-items: center;background: url("../images/wb-top-banner.png") center center / cover no-repeat;}

.top-dm-banner-info::before {content: "";position: absolute;inset: 0;background:
    radial-gradient(circle at 74% 35%, rgba(207, 184, 141, .18), transparent 34%),
    radial-gradient(circle at 18% 22%, rgba(255, 255, 255, .55), transparent 30%);pointer-events: none;z-index: 1;}

.padding-left-right {position: relative;z-index: 2;width: 100%;padding-left: 8vw;padding-right: 8vw;}

.left-side {position: relative;z-index: 10;padding-top: 70px;}

.top-dm-banner-heading {margin-bottom: clamp(45px, 8vw, 120px);}
.hero-title {display: flex;align-items: center;gap: 14px;flex-wrap: nowrap;white-space: nowrap;margin: 0;line-height: 1.05;font-size: clamp(38px, 4.6vw, 78px);font-weight: 900;text-transform: uppercase;color: #000;}

.title-static {display: inline-block;color: #000 !important;opacity: 0;transform: translateY(18px);animation: titleWriteIn 1.2s ease forwards;}
.title-changing {position: relative;display: inline-block;width: 4.3ch;height: 1.08em;overflow: hidden;flex-shrink: 0;}
.title-changing span {position: absolute;left: 0;top: 0;color: #cfb88d;opacity: 0;white-space: nowrap;transform: translateY(100%);animation: changeTitleWord 12s ease-in-out infinite;}

.title-changing span:nth-child(1) { animation-delay: 0s; }
.title-changing span:nth-child(2) { animation-delay: 3s; }
.title-changing span:nth-child(3) { animation-delay: 6s; }
.title-changing span:nth-child(4) { animation-delay: 9s; }

@keyframes titleWriteIn {
  0% {
    opacity: 0;
    transform: translateY(18px);
    clip-path: inset(0 100% 0 0);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);
  }
}

@keyframes changeTitleWord {
  0% {
    opacity: 0;
    transform: translateY(100%);
  }

  8%, 24% {
    opacity: 1;
    transform: translateY(0);
  }

  32%, 100% {
    opacity: 0;
    transform: translateY(-100%);
  }
}

.top-dm-banner-heading h6 {font-size: clamp(15px, 1.2vw, 22px);color: #777;font-weight: 400;margin: 14px 0 0;}
.top-dm-banner-content {max-width: 640px;}
.top-dm-banner-content h4 {font-size: 13px;color: #8a8a8a;margin-bottom: 10px;font-weight: 500;letter-spacing: 1.8px;text-transform: uppercase;}
.top-dm-banner-content h2 {font-size: 25px;line-height: 1.22;color: #111;/*font-weight: 400;*/margin-bottom: 22px;font-family: "Josefin Sans", sans-serif;}
.top-dm-banner-content h2 strong{font-size: 35px;font-weight:800;color:#cfb88d;}
.top-dm-banner-content h2 span{color:#cfb88d;}

.top-dm-banner-content p {font-size: 18px;line-height: 30px;color: #828282;margin: 0;}
.dm-visual-wrap {position: relative;width: 100%;min-height: 760px;}
.animation-card {position: relative;width: 100%;min-height: 700px;display: flex;align-items: center;justify-content: center;overflow: visible;}
.eagle-main-wrap {position: absolute;top: -90px;right: -4%;z-index: 6;width: min(750px, 50vw);display: flex;justify-content: center;align-items: center;}
.eagle-img {width: 100%;height: auto;display: block;transform-origin: center center;animation: eaglePremiumFloat 6s ease-in-out infinite;filter: drop-shadow(0 30px 38px rgba(90, 64, 20, .24));will-change: transform;}

@keyframes eaglePremiumFloat {
  0%, 100% {
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate3d(-10px, -14px, 0) scale(1.018) rotate(.3deg);
  }
}

.eagle-icons-row {position: absolute;left: 55%;top: 60%;z-index: 5;width: min(500px, 75%);height: 190px;transform: translateX(-50%);pointer-events: none;}
.eagle-gold-icon {position: absolute;width: var(--size);height: auto;object-fit: contain;opacity: 0;filter: drop-shadow(0 16px 20px rgba(120, 82, 16, .22));animation: slowIconFadeZoom 12s ease-in-out infinite;animation-delay: var(--delay);will-change: transform, opacity;}

.icon-1  { --size: 45px; left: 2%;  bottom: 28px; --delay: 0s; }
.icon-2  { --size: 45px; left: 12%; bottom: 82px; --delay: -1.2s; }
.icon-3  { --size: 45px; left: 23%; bottom: 34px; --delay: -2.4s; }
.icon-4  { --size: 45px; left: 35%; bottom: 88px; --delay: -3.6s; }
.icon-5  { --size: 45px; left: 47%; bottom: 26px; --delay: -4.8s; }
.icon-6  { --size: 45px; left: 59%; bottom: 86px; --delay: -6s; }
.icon-7  { --size: 45px; left: 70%; bottom: 34px; --delay: -7.2s; }
.icon-8  { --size: 45px; left: 79%; bottom: 80px; --delay: -8.4s; }
.icon-9  { --size: 45px; left: 89%; bottom: 34px; --delay: -9.6s; }
.icon-10 { --size: 45px; left: 43%; bottom: -18px; --delay: -10.8s; }

@keyframes slowIconFadeZoom {
  0%, 100% {
    opacity: 0;
    transform: translateY(36px) scale(.55);
    filter: blur(4px) drop-shadow(0 16px 20px rgba(120, 82, 16, .22));
  }

  25% {
    opacity: 1;
    transform: translateY(6px) scale(.95);
    filter: blur(0) drop-shadow(0 16px 20px rgba(120, 82, 16, .22));
  }

  55% {
    opacity: 1;
    transform: translateY(-10px) scale(1.08);
  }

  80% {
    opacity: .65;
    transform: translateY(-22px) scale(.92);
  }
}

.top-dm-banner-info .container-fluid,
.top-dm-banner-info .row{position: relative;z-index: 2;}

/* Robot between hero and next section */
.robot-card {position: absolute;left: 55%;bottom: -150px;transform: translateX(-50%);z-index: 8;width: min(550px, 50vw);pointer-events: none;animation: robotPremiumFloat 7s ease-in-out infinite;}

.robot-img {width: 100%;height: auto;display: block;filter: drop-shadow(0 28px 35px rgba(0, 0, 0, .22));}

@keyframes robotPremiumFloat {
  0%, 100% {
    transform: translateX(-50%) translateY(0) scale(1);
  }

  50% {
    transform: translateX(-50%) translateY(-18px) scale(1.03);
  }
}

@media (max-width: 1399px) {
.eagle-main-wrap {width: min(850px, 58vw);right: -2%;}
.dm-visual-wrap {min-height: 690px;}
.animation-card {min-height: 650px;}
.top-dm-banner-info {min-height: 820px;padding-bottom: 160px;}
.robot-card {width: min(500px, 50vw);left: 64%;bottom: -80px;}}

@media (max-width: 1199px) {
.hero-title {font-size: clamp(36px, 4.4vw, 62px);}
.eagle-main-wrap {top: -45px;width: min(720px, 58vw);}
.dm-visual-wrap {min-height: 620px;}
.animation-card {min-height: 600px;}
.top-dm-banner-info {min-height: 760px;}
.robot-card {width: 280px;left: 65%;bottom: -70px;}}

@media (max-width: 991px) {
.top-dm-banner-info {min-height: auto;padding: 90px 0 180px;}
.left-side {text-align: center;padding-top: 0;}
.top-dm-banner-heading {margin-bottom: 20px;}
.top-dm-banner-content {margin: 0 auto 20px;}
.hero-title {justify-content: center;font-size: clamp(34px, 7vw, 58px);gap: 10px;}
.dm-visual-wrap {min-height: 620px;}
.animation-card {min-height: 560px;}
.eagle-main-wrap {top: -10px;right: 50%;transform: translateX(50%);width: min(680px, 95vw);}
.eagle-icons-row {top: 390px;left: 50%;width: min(540px, 94%);}
.robot-card {left: 50%;bottom: -65px;width: 250px;}}

@media (max-width: 767px) {
.top-dm-banner-info {padding: 70px 0 120px;}
.padding-left-right {padding-left: 22px;padding-right: 22px;}
.hero-title {font-size: clamp(30px, 8vw, 44px);}
.top-dm-banner-content p {font-size: 14px;line-height: 1.7;}
.dm-visual-wrap {min-height: 520px;}
.animation-card {min-height: 470px;}
.eagle-main-wrap {width: 112vw;top: 0;}
.eagle-icons-row {top: 310px;width: 70%;height: 140px;}
.eagle-gold-icon {width: calc(var(--size) * .65);}
.robot-card {width: 190px;left: 50%;bottom: -50px;}}

@media (max-width: 575px) {
.top-dm-banner-info {padding: 80px 0 200px;}
.padding-left-right {padding-left: 18px;padding-right: 18px;}
.hero-title {font-size: clamp(25px, 7.4vw, 36px);gap: 7px;}
.title-changing {width: 4.2ch;}
.top-dm-banner-heading {margin-bottom: 5px;}
.top-dm-banner-heading h6 {font-size: 14px;}
.top-dm-banner-content h2 {font-size: 18px;text-align: center;display: block;}
.top-dm-banner-content p {font-size: 13.8px;}
.dm-visual-wrap {min-height: 450px;}
.animation-card {min-height: 400px;}
.eagle-main-wrap {width: 100vw;top: -20px;}
.eagle-icons-row {top: 255px;height: 120px;}
.eagle-gold-icon {width: calc(var(--size) * 1.0);}
.robot-card {width: 155px;bottom: -42px;}
.section-two-intro-video{padding-bottom: 0rem!important;}}

.section-two-intro-video{ padding-top: var(--def-padding); padding-bottom: var(--def-padding);background-color:#efefef;}
.section-two-intro-video .row{position:relative;}
.video-section-intro-content h2{color:#757575;text-transform: uppercase;}
.video-section-intro-content span{display: block;}
.video-section-intro-content span.diff-color{color:#cfbb95;}

/* Common circle style */
.video-section-icon .circle-img{position: absolute;display: block;height: auto;object-fit: contain;opacity: .9;filter: drop-shadow(0 18px 28px rgba(0,0,0,.16));animation: appleOrb 14s ease-in-out infinite;}
.circle-deco-top{animation: appleOrb 14s ease-in-out infinite;}
.circle-deco-video-left{animation: floatingPlanet 10s ease-in-out infinite;}
.circle-deco-right-small{animation: luxuryBreath 6s ease-in-out infinite;}
.circle-deco-bottom-right{animation: blurOrb 15s ease-in-out infinite;}

@keyframes appleOrb{
  0%{
    transform:translate3d(0,0,0) scale(1);
    opacity:.4;
  }
  20%{
    transform:translate3d(10px,-15px,0) scale(1.05);
    opacity:1;
  }
  40%{
    transform:translate3d(22px,-5px,0) scale(1.1);
    opacity:.8;
  }
  60%{
    transform:translate3d(8px,12px,0) scale(1.03);
    opacity:1;
  }
  80%{
    transform:translate3d(-10px,5px,0) scale(.98);
    opacity:.7;
  }
  100%{
    transform:translate3d(0,0,0) scale(1);
    opacity:.4;
  }
}

@keyframes floatingPlanet{
  0%,100%{
    transform:translateY(0) translateX(0) rotate(0deg);
  }
  25%{
    transform:translateY(-15px) translateX(6px) rotate(3deg);
  }
  50%{
    transform:translateY(-25px) translateX(0) rotate(0deg);
  }
  75%{
    transform:translateY(-10px) translateX(-6px) rotate(-3deg);
  }
}

@keyframes luxuryBreath{
  0%,100%{
    transform:scale(.9);
    opacity:.3;
  }
  50%{
    transform:scale(1.15);
    opacity:1;
  }
}

@keyframes blurOrb{
  0%,100%{
    transform:translateY(0) scale(1);
    filter:blur(2px);
    opacity:.35;
  }
  50%{
    transform:translateY(-25px) scale(1.12);
    filter:blur(.5px);
    opacity:.8;
  }
}


.section-two-intro-video{position:relative;overflow:hidden;}
.video-section-icon{position:absolute;inset:0;z-index:5;pointer-events:none;}
.circle-deco{position:absolute;display:block;object-fit:contain;will-change:transform, opacity;backface-visibility:hidden;}

/* Desktop Large */
.circle-deco-top{width:80px;top:-36px;left:68%;animation:appleOrb 14s ease-in-out infinite;}
.circle-deco-video-left{width:42px;top:26%;eft:7%;animation:floatingPlanet 10s ease-in-out infinite;}
.circle-deco-right-small{width:18px;top:35%;right:0;animation:luxuryBreath 6s ease-in-out infinite;}
.circle-deco-bottom-right{width:140px;right:-50px;bottom:-42px;filter:blur(1.5px);animation:blurOrb 15s ease-in-out infinite;}

/* Laptop */
@media(max-width:1399px){
.circle-deco-top{width:70px;left:67%;}
.circle-deco-video-left{width:36px;left:6%;}
.circle-deco-bottom-right{width:120px;}}

/* Tablet */
@media(max-width:991px){
.circle-deco-top{width:58px;top:-28px;left:60%;}
.circle-deco-video-left{width:32px;top:22%;left:5%;}
.circle-deco-right-small{width:15px;top:30%;right:8px;}
.circle-deco-bottom-right{width:100px;right:-38px;bottom:-30px;}}

/* Mobile */
@media(max-width:575px){
.circle-deco-top{ width:44px;top:-20px;left:56%;}
.circle-deco-video-left{width:24px;top:18%;left:5%;}
.circle-deco-right-small{ width:12px;top:26%;right:8px;}
.circle-deco-bottom-right{width:78px;right:-28px;bottom:-22px;}}


/* Right Side Column */
.video-section-intro-content{position:relative;z-index:2;text-align:left;}
.video-section-intro-content h2{font-size:clamp(40px,4vw,80px);font-weight:700;line-height:1.1;}
.diff-color{color:#00d4ff;}

@media(max-width:767px){
.video-section-intro-content h2{font-size:42px;}}

.dm-video-card{ position:relative; width:100%;max-width:900px;margin:0 auto;border-radius:16px;overflow:hidden;background:#ddd;box-shadow:0 35px 80px rgba(0,0,0,.12);}
.dm-video{width:100%;height:420px;display:block;object-fit:cover;}
.dm-video-overlay{position:absolute;inset:0;z-index:3;opacity:0;visibility:hidden;transition:.5s ease;}
.dm-video-overlay.active{opacity:1;visibility:visible;}
.overlay-poster{width:100%;height:100%;object-fit:cover;display:block;}
.dm-video-controls{position:absolute;left:24px;right:24px;bottom:22px;z-index:10;display:flex;align-items:center;gap:18px;}
.dm-play-btn,
.dm-fullscreen-btn{width:42px;height:42px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.16);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(8px);}
.dm-play-btn i,
.dm-fullscreen-btn i{font-size:22px;}
.dm-video-progress{flex:1;height:2px;background:rgba(255,255,255,.55);cursor:pointer;position:relative;}
.dm-video-progress span{position:absolute;left:0;top:0;height:100%;width:0%;background:#fff;}

@keyframes premiumVideoFloat{
  0%,100%{
    transform:translateY(0) scale(1);
  }

  50%{
    transform:translateY(-10px) scale(1.01);
  }
}

@media(max-width:991px){
  .dm-video-loop-section{
    padding:70px 0;
  }

  .dm-video{
    height:360px;
  }
}

@media(max-width:575px){
  .dm-video-loop-section{
    padding:50px 0;
  }

  .dm-video-card{
    border-radius:14px;
  }

  .dm-video{
    height:240px;
  }

  .dm-video-controls{
    left:14px;
    right:14px;
    bottom:14px;
    gap:12px;
  }

  .dm-play-btn,
  .dm-fullscreen-btn{
    width:34px;
    height:34px;
  }

  .dm-play-btn i,
  .dm-fullscreen-btn i{
    font-size:18px;
  }
}

.featured-projects{
  position:relative;
 padding-top: var(--def-padding); padding-bottom: var(--def-padding);
  background:#fff;
  overflow:hidden;
}


/* Thumbnail Area */
.dmThumbSwiper{
  width:100%;
  padding:10px 10px 50px!important;
  overflow:hidden;
}

.dmThumbSwiper .swiper-wrapper{
  align-items:center;
}

.dmThumbSwiper .swiper-slide{
  height:auto;
  display:flex;
  justify-content:center;
}

/* Card */
.dm-thumb-card{
  width:200px;
  height:150px;
  background:#fff;
  border-radius:18px;
  padding:16px 12px 12px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  cursor:pointer;
  border:1px solid rgba(0,0,0,.04);
  box-shadow:0 10px 28px rgba(0,0,0,.08);
  transition:.45s cubic-bezier(.22,1,.36,1);
}

.dm-thumb-card:hover,
.dm-thumb-card.active{
  transform:translateY(-8px) scale(1.04);
  border-color:#cfb88d;
  box-shadow:0 22px 45px rgba(0,0,0,.14);
}

.dm-thumb-logo{
  width:100%;
  height:72px;
  object-fit:contain;
  display:block;
}

.dm-thumb-line{
  width:70%;
  height:1px;
  background:#1f1f1f;
  opacity:.8;
}

.dm-thumb-icons{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
}

.dm-thumb-icons a{
  color:#9b9b9b;
  font-size:16px;
  transition:.35s ease;
}

.dm-thumb-icons a:hover{
  color:#111;
  transform:translateY(-3px) scale(1.15);
}

/* Main Slider */
.dmMainSwiper{
  width:100%;
  padding-bottom:36px;
  overflow:hidden;
}

.dm-preview-card{
  width:100%;
  height:100%;
  border-radius:20px;
  overflow:hidden;
  border: 2px solid #cfb88d;    
  padding:20px;
  /*box-shadow:0 24px 60px rgba(0,0,0,.14);*/
}

.dm-preview-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.04);
  transition:1.2s cubic-bezier(.22,1,.36,1);
  border-radius:20px;   
}

.dmMainSwiper .swiper-slide-active .dm-preview-card img{
  transform:scale(1);
}

/* Pagination */
.dm-showcase-pagination{
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:11px;
}

.dm-showcase-pagination .swiper-pagination-bullet{
  width:8px;
  height:8px;
  border-radius:0;
  background:#cfcfcf;
  opacity:1;
}

.dm-showcase-pagination .swiper-pagination-bullet-active{
  background:#000;
}

.dm-thumb-card{margin-top: 1rem;}
/* Laptop */
@media(max-width:1399px){
  .dm-showcase-section .container-fluid{
    padding-left:36px;
    padding-right:36px;
  }

  .dm-thumb-card{
    width:112px;
    height:134px;
  }

}

/* Tablet */
@media(max-width:991px){
  .dm-showcase-section{
    padding:55px 0 45px;
  }

  .dm-showcase-section .container-fluid{
    padding-left:24px;
    padding-right:24px;
  }

  .dm-thumb-card{
    width:200px;
    height:120px;
    padding:14px 10px 10px;
  }

  .dm-thumb-logo{
    height:62px;
  }

  .dm-preview-card{
    height:280px;
  }
}

/* Mobile */
@media(max-width:575px){
  .dm-showcase-section{
    padding:42px 0 36px;
  }

  .dm-showcase-section .container-fluid{
    padding-left:16px;
    padding-right:16px;
  }

  .dmThumbSwiper{
    padding-bottom:30px;
  }

  .dm-thumb-card{
    width:200px;
    height:120px;
    border-radius:14px;
  }

  .dm-thumb-logo{
    height:50px;
  }

  .dm-thumb-icons{
    gap:9px;
  }

  .dm-thumb-icons a{
    font-size:14px;
  }

  .dm-preview-card{
    height:100%;
    border-radius:10px!important;
  }
}

/* =========================
   Tablet (992px and below)
========================= */
@media (max-width:991.98px){

.dm-preview-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    min-height:520px;
}

.dm-preview-card .project-bg{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    display:block;
}

.dm-preview-card .project-info{
    position:absolute;
    left:30px;
    right:30px;
    bottom:30px;
    padding:30px;
    border-radius:20px;
    background:rgba(12,12,12,.72);
    backdrop-filter:blur(12px);
}

.project-logo{
    max-width:170px;
    margin-bottom:18px;
}

.project-info h4{
    font-size:28px;
    margin-bottom:12px;
}

.project-info p{
    font-size:15px;
    line-height:1.7;
}

.project-info a{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:10px;
}
}


/* =========================
   Mobile (768px and below)
========================= */
@media (max-width:767.98px){

.dm-preview-card{
    min-height:auto;
    display:flex;
    flex-direction:column;
    border-radius:20px;
}

.dm-preview-card .project-bg{
    position:relative;
    width:100%;
    height:auto;
    display:block;
    object-fit:cover;
}

.dm-preview-card .project-info{
    position:relative;
    left:0;
    right:0;
    bottom:0;
    margin:0;
    /*border-radius:0 0 20px 20px;*/
    padding:25px 20px;
    background:#0f1015;
}

.project-logo{
    width:150px;
    max-width:100%;
    margin-bottom:15px;
}

.project-info h4{
    font-size:22px;
    margin-bottom:10px;
}

.project-info p{
    font-size:14px;
    line-height:1.7;
    margin-bottom:18px;
}

.project-info a{
    font-size:14px;
}
}


/* =========================
   Small Mobile
========================= */
@media (max-width:480px){

.dm-preview-card{
    border-radius:16px;
}

.dm-preview-card .project-info{
    padding:20px 16px;
}

.project-logo{
    width:130px;
}

.project-info h4{
    font-size:20px;
}

.project-info p{
    font-size:13px;
}

}


/* ===========================
   PORTFOLIO CARD
=========================== */

.dm-preview-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    width:100%;
    background:#f5f5f5;
}

.project-bg{
    width:100%;
    display:block;
    transition:all .8s ease;
}

.dm-preview-card:hover .project-bg{
    transform:scale(1.03);
}

/* ===========================
   INFO CARD
=========================== */

.project-info{
    position:absolute;
    left:30px;
    bottom:80px;

    width:400px;
    max-width:calc(100% - 60px);

    padding:22px;

    background:rgba(255,255,255,.92);
    backdrop-filter:blur(18px);

    border-radius:18px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.12);

    transition:.4s ease;
}

.dm-preview-card:hover .project-info{
    transform:translateY(-5px);
}

.project-logo{
    height:50px;
    width:auto;
    margin-bottom:15px;
    display:block;
}

.project-info h4{
    margin:0 0 8px;
    font-size:22px;
    font-weight:700;
    color:#111;
}

.project-info p{
    margin:0;
    color:#666;
    line-height:1.7;
    font-size:14px;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

.project-info a{
    display:inline-flex;
    align-items:center;
    gap:8px;

    margin-top:15px;

    font-size:14px;
    font-weight:600;
    color:#111;
    text-decoration:none;
}

.project-info a i{
    font-size:12px;
    transition:.3s;
}

.project-info a:hover i{
    transform:translateX(4px);
}

/* ===========================
   LAPTOP
=========================== */

@media (max-width:1366px){

    .project-info{
        width:330px;
        padding:20px;
    }

    .project-info h4{
        font-size:20px;
    }
}

/* ===========================
   TABLET
=========================== */

@media (max-width:991px){

    .project-info{
        width:300px;
        left:20px;
        bottom:20px;
        padding:18px;
    }

    .project-logo{
        height:42px;
    }

    .project-info h4{
        font-size:18px;
    }

    .project-info p{
        font-size:13px;
    }
}

/* ===========================
   MOBILE
=========================== */

@media (max-width:767px){

    .project-info{
        left:15px;
        right:15px;
        bottom:15px;

        width:auto;
        max-width:none;

        padding:16px;
        border-radius:14px;
    }

    .project-logo{
        height:36px;
        margin-bottom:10px;
    }

    .project-info h4{
        font-size:17px;
        margin-bottom:6px;
    }

    .project-info p{
        font-size:12px;
        line-height:1.6;
        -webkit-line-clamp:2;
    }

    .project-info a{
        margin-top:10px;
        font-size:13px;
    }
}

/* ===========================
   SMALL MOBILE
=========================== */

@media (max-width:480px){

    .project-info{
        padding:14px;
    }

    .project-logo{
        height:30px;
    }

    .project-info h4{
        font-size:16px;
    }

    .project-info p{
        font-size:11px;
    }
}


.dm-orbit-area{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:40px 0;
}

.dm-orbit-box{
    position:relative;
    width:min(700px,90vw);
    height:min(700px,90vw);
}

/* Static Ring */

.dm-ring{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

/* Center Icon */

.dm-center-icon{
    position:absolute;
    top:50%;
    left:50%;

    width:130px;
    height:130px;

    transform:translate(-50%,-50%);
    z-index:5;
}

.dm-center-icon img{
    width:100%;
    display:block;

    animation:
    dmFloat 4s ease-in-out infinite,
    dmPulse 3s ease-in-out infinite;
}

/* Floating */

@keyframes dmFloat{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }
}

/* Premium Pulse */

@keyframes dmPulse{

    0%,100%{
        filter:
        drop-shadow(0 0 0 rgba(212,175,55,.2));
    }

    50%{
        filter:
        drop-shadow(0 0 25px rgba(212,175,55,.6));
    }
}

/* Desktop */

@media(min-width:1400px){

    .dm-center-icon{
        width:150px;
        height:150px;
    }
}

/* Laptop */

@media(max-width:1366px){

    .dm-center-icon{
        width:120px;
        height:120px;
    }
}

/* Tablet */

@media(max-width:991px){

    .dm-center-icon{
        width:95px;
        height:95px;
    }
}

/* Mobile */

@media(max-width:575px){

    .dm-orbit-box{
        width:320px;
        height:320px;
    }

    .dm-center-icon{
        width:70px;
        height:70px;
    }
}

.features-section{padding-top: var(--def-padding); padding-bottom: var(--def-padding);background-image: url("../images/features-background.png");}
.dm-orbit-wrapper{
    position:relative;
    width:100%;
    max-width:650px;
    margin:auto;
}

.features-section h4{color: #5a5a5a99;font-weight: 400;}
.featured-projects h4{color: #5a5a5a99;font-weight: 400;}
.features-point-content{margin-top: 3rem;}

.orbit-img{
    width:100%;
    display:block;
}

/* Center Position */

.dm-center-icon{
    position:absolute;
    top:36%;
    left:58%;

    transform:translate(-50%, -50%);

    width:37%;
    z-index:10;
}

.dm-center-icon img{
    width:100%;
    display:block;

    animation:dmRotate 12s linear infinite;
}

/* Only icon rotates */

@keyframes dmRotate{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* Laptop */

@media(max-width:1366px){
    .dm-center-icon{
        width:20%;
    }
}

/* Tablet */

@media(max-width:991px){
    .dm-center-icon{
        width:18%;
    }
}

/* Mobile */

@media(max-width:575px){
    .dm-center-icon{
        width:16%;
    }
}

.ai-feature-list{
    padding:0;
    margin:0;
    list-style:none;
}

.ai-feature-list li{
    position:relative;
    padding-left:38px;
    margin-bottom:18px;

    font-size:16px;
    line-height:1.8;
    color:#333;
    font-weight:500;
}

/* Arrow Icon */

.ai-feature-list li::before{
    content:"➜";
    position:absolute;
    left:0;
    top:2px;

    color:#d4af37;
    font-size:18px;
    font-weight:700;

    transition:.3s ease;
}

.ai-feature-list li:hover::before{
    transform:translateX(5px);
}

/* Mobile */

@media(max-width:767px){

    .ai-feature-list li{
        font-size:15px;
        padding-left:32px;
        margin-bottom:14px;
    }

    .ai-feature-list li::before{
        font-size:16px;
    }
}
.ai-feature-list{
    list-style:none;
    padding:0;
    margin:0;
}

.ai-feature-list li{
    position:relative;
    padding:18px 20px 18px 55px;
    margin-bottom:12px;
    background:#fff;
    border:1px solid #ececec;
    border-radius:12px;
    font-size:18px;
    line-height:1.7;
    color:#767676;
    transition:all .35s ease;
    cursor:pointer;
}

/* Arrow */

.ai-feature-list li::before{
    content:"➜";
    position:absolute;
    left:18px;
    top:50%;
    transform:translateY(-50%);
    width:24px;
    height:24px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:#b4955c;
    color:#fff;

    font-size:12px;
    transition:.35s ease;
}

/* Full LI Hover */

.ai-feature-list li:hover{
    transform:translateX(10px);
    border-color:#b4955c;

    box-shadow:
    0 10px 25px rgba(212,175,55,.15);

    background:#fffdf8;
}

/* Arrow Hover */

.ai-feature-list li:hover::before{
    transform:translateY(-50%) rotate(-45deg);
    background:#111;
}

/* Mobile */

@media(max-width:767px){

    .ai-feature-list li{
        padding:15px 15px 15px 50px;
        font-size:14px;
    }
}


.services-section{padding-top: var(--def-padding); padding-bottom: var(--def-padding);}

.services-heading {
  margin: 0 auto 45px;
}

h1 {
  color: #444;
  font-size: clamp(35px, 5vw, 55px);
  font-weight: 400;
  margin-bottom: 12px;
  text-transform: uppercase;
}

.services-heading p {
  color: #999999;
  font-size: 20px;
  line-height: 1.7;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.service-card {
  grid-column: span 4;
  position: relative;
  /*aspect-ratio: 16 / 10;*/
  overflow: hidden;
  border-radius: 0;
  background: #111;
  isolation: isolate;
}

.service-large {
  grid-column: span 6;
  aspect-ratio: 16 / 7;
}

.service-wide {
  grid-column: span 8;
}

.service-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s ease, filter .9s ease;
}

.service-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.72), rgba(0,0,0,.36), rgba(0,0,0,.75)),
    radial-gradient(circle at center, rgba(255,255,255,.08), transparent 55%);
  z-index: 1;
  transition: opacity .5s ease;
}

.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,255,255,.14);
  z-index: 3;
  pointer-events: none;
}

.service-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: clamp(22px, 3vw, 42px);
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
}

.service-overlay h4 {
  color: #fff;
  font-size: clamp(15px, 1.4vw, 22px);
  font-weight: 500;
  margin-bottom: 8px;
  text-shadow: 0 4px 22px rgba(0,0,0,.85);
}

.service-overlay p {
  color: rgba(255,255,255,.9);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.6;
  margin-bottom: 14px;
  text-shadow: 0 4px 18px rgba(0,0,0,.9);
}

.service-overlay span {
  width: 42px;
  height: 1px;
  background: rgba(255,255,255,.55);
  margin-bottom: 16px;
  transition: width .4s ease;
}

.service-overlay a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 118px;
  min-height: 38px;
  padding: 10px 22px;
  border-radius: 50px;
  background: #fff;
  color: #111;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: all .35s ease;
}

.service-card:hover img {
  transform: scale(1.08);
  filter: saturate(1.15) contrast(1.08);
}

.service-card:hover::before {
  opacity: .9;
}

.service-card:hover .service-overlay span {
  width: 75px;
}

.service-card:hover .service-overlay a {
  background: #d6b45d;
  color: #fff;
  transform: translateY(-3px);
}

.explore-more {
  text-align: center;
  margin-top: 45px;
}

.explore-more a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 36px;
  border-radius: 50px;
  background: #d6b45d;
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  transition: all .35s ease;
}

.explore-more a:hover {
  background: #fff;
  color: #111;
  transform: translateY(-4px);
}

/* Laptop */
@media (max-width: 1199px) {
  .service-card,
  .service-large,
  .service-wide {
    grid-column: span 6;
    aspect-ratio: 16 / 9;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .services-section {
    padding: 70px 0;
  }

  .padding-left-right-services {
    padding: 0 20px;
  }

  .services-grid {
    gap: 15px;
  }

  .service-card,
  .service-large,
  .service-wide {
    grid-column: span 6;
    aspect-ratio: 4 / 3;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .services-section {
    padding: 55px 0;
  }

  .padding-left-right-services {
    padding: 0 12px;
  }

  .services-heading {
    margin-bottom: 30px;
  }

  .services-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .service-card,
  .service-large,
  .service-wide {
    grid-column: span 1;
    aspect-ratio: 16 / 11;
  }

  .service-overlay {
    padding: 22px;
  }

  .service-overlay a {
    min-width: 105px;
    min-height: 35px;
    font-size: 12px;
  }
}
.padding-left-right-services{padding-left:2rem;padding-right:2rem;}
.services-footer{
    margin-top:10px;
    padding-top:15px;
    border-top:1px solid rgba(255,255,255,.08);

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.services-footer-content span{
    color:#b7b7b7;
    font-size:14px;
    letter-spacing:2px;
    text-transform:uppercase;
}

.services-footer-content h3{
    color:#999999;
    font-size:34px;
    font-weight:400;
    margin-top:10px;
}

.services-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 25px;
    border-radius:60px;
    background:#b4955c;
    color:#fff;
    text-decoration:none;
    font-weight:400;
    transition:.4s;
	font-size:18px;
}

.services-btn:hover{
    background:#2a2d32cc;
    color:#fff;
    transform:translateY(-5px);
}

.services-btn i{
    transition:.4s;
}

.services-btn:hover i{
    transform:translateX(6px);
}

@media(max-width:991px){

.services-footer{
    justify-content:center;
    text-align:center;
}

.services-footer-content h3{
    font-size:18px;
}

}


.dm-friends-section {
  position: relative;
  padding-top: var(--def-padding); padding-bottom: var(--def-padding);
  background:
    radial-gradient(circle at top left, rgba(214,180,93,.18), transparent 35%),
    linear-gradient(135deg, #050505 0%, #111 45%, #050505 100%);
  overflow: hidden;
}


.dm-friends-head span {
  display: inline-block;
  margin-bottom: 14px;
  color: #d6b45d;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dm-friends-head h1{color:#957a4a;}
.dm-friends-head h4 {
  color: #A2A2A2;
  font-size: 20px;
  line-height: 1.8;
  font-weight:500;	
}

.dm-friends-wrapper {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
}

.dm-friend-card {
  grid-column: span 4;
  position: relative;
  min-height: 310px;
  padding: 28px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: all .45s ease;
}

.dm-friend-card.featured {
  background:
    linear-gradient(135deg, rgba(214,180,93,.25), rgba(255,255,255,.06));
}

.dm-friend-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.16), transparent);
  transform: translateX(-120%);
  transition: .7s ease;
}

.dm-friend-card:hover::before {
  transform: translateX(120%);
}

.dm-friend-card:hover {
  transform: translateY(-10px);
  border-color: rgba(214,180,93,.55);
  box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

.dm-friend-logo {
  width: 160px;
  height: 130px;
  margin-bottom: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  padding: 22px;
}

.dm-friend-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dm-friend-content {
  position: relative;
  z-index: 2;
}

.dm-friend-content h4 {
  color: #fff;
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 12px;
}

.dm-friend-content p {
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 24px;
}

.dm-friend-content a {
  display: inline-flex;
  align-items: center;
  color: #d6b45d;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.dm-friend-content a::after {
  content: "→";
  margin-left: 10px;
  transition: .35s ease;
}

.dm-friend-content a:hover::after {
  transform: translateX(6px);
}

/* Laptop */
@media (max-width: 1199px) {
  .dm-friend-card {
    grid-column: span 4;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .dm-friends-section {
    padding: 80px 22px;
  }

  .dm-friend-card {
    grid-column: span 6;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .dm-friends-section {
    padding: 60px 14px;
  }

  .dm-friends-head {
    margin-bottom: 35px;
  }

  .dm-friends-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dm-friend-card {
    grid-column: span 1;
    min-height: auto;
    padding: 24px;
  }

  .dm-friend-logo {
    width: 100px;
    height: 100px;
    margin-bottom: 25px;
  }

  .dm-friend-content h4 {
    font-size: 21px;
  }
}




.dm-friends-section {
  position: relative;
  padding-top: var(--def-padding); padding-bottom: var(--def-padding);
  background: #333333;
  overflow: hidden;
  isolation: isolate;
}


/* Video */

.dm-video-friends{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    object-fit:cover;

    opacity:.18;

    z-index:1;
}

/* Black overlay */

.dm-video-overlay{
    position:absolute;
    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(4,4,4,.90),
    rgba(4,4,4,.82),
    rgba(4,4,4,.94));

    z-index:2;
}




.dm-friends-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: linear-gradient(rgb(255 255 255 / 50%) 1px, #00000082 1px), linear-gradient(90deg, rgb(255 255 255 / 50%) 1px, #00000000 1px);
  background-size: 58px 58px;
  mask-image: radial-gradient(circle at center, black 20%, transparent 75%);
  animation: dmGridMove 18s linear infinite;
}

@keyframes dmGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 58px 58px;
  }
}

.dm-friends-section::after {
  content: "";
  position: absolute;
  top: -30%;
  left: -20%;
  width: 60%;
  height: 160%;
  z-index: -1;
  background: linear-gradient(90deg, transparent, rgba(214,180,93,.12), transparent);
  transform: rotate(18deg);
  animation: dmScan 9s ease-in-out infinite;
}

@keyframes dmScan {
  0% {
    transform: translateX(-80%) rotate(18deg);
    opacity: 0;
  }

  35% {
    opacity: 1;
  }

  70% {
    opacity: .45;
  }

  100% {
    transform: translateX(230%) rotate(18deg);
    opacity: 0;
  }
}

.dm-ai-orbits {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}

.dm-ai-orbits span {
  position: absolute;
  width: 260px;
  height: 260px;
  border: 2px solid rgb(214 180 93 / 50%);
  border-radius: 50%;
  animation: dmOrbitFloat 10s ease-in-out infinite alternate;
}

.dm-ai-orbits span::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 42px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d6b45d;
  box-shadow: 0 0 24px rgba(214,180,93,.85);
}

.dm-ai-orbits span:nth-child(1) {
  top: 13%;
  left: 6%;
}

.dm-ai-orbits span:nth-child(2) {
  right: 9%;
  top: 1%;
  width: 190px;
  height: 190px;
  animation-delay: 2s;
}

.dm-ai-orbits span:nth-child(3) {
  right: 18%;
  bottom: 8%;
  width: 310px;
  height: 310px;
  animation-delay: 4s;
}

@keyframes dmOrbitFloat {
  from {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: .35;
  }

  to {
    transform: translate3d(28px, -28px, 0) rotate(40deg);
    opacity: .75;
  }
}



.dm-friends-head span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: #d6b45d;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.dm-friends-head span::before,
.dm-friends-head span::after {
  content: "";
  width: 32px;
  height: 1px;
  background: rgba(214,180,93,.7);
}

.dm-friends-head h2 {
  color: #fff;
  font-size: clamp(42px, 5.4vw, 82px);
  font-weight: 900;
  letter-spacing: -2px;
  margin-bottom: 16px;
}

.dm-friends-head p {
  color: rgba(255,255,255,.72);
  font-size: 17px;
  line-height: 1.8;
}

.dm-friends-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 22px;
  z-index: 2;
}

.dm-friend-card {
  grid-column: span 4;
  position: relative;
  min-height: 340px;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: transform .45s ease, border-color .45s ease, box-shadow .45s ease;
  animation: dmCardReveal .8s ease both;
}

.dm-friend-card:nth-child(1) { animation-delay: .05s; }
.dm-friend-card:nth-child(2) { animation-delay: .15s; }
.dm-friend-card:nth-child(3) { animation-delay: .25s; }
.dm-friend-card:nth-child(4) { animation-delay: .35s; }
.dm-friend-card:nth-child(5) { animation-delay: .45s; }
.dm-friend-card:nth-child(6) { animation-delay: .55s; }

@keyframes dmCardReveal {
  from {
    opacity: 0;
    transform: translateY(35px) scale(.97);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dm-friend-card.featured {
  background:
    linear-gradient(135deg, rgba(214,180,93,.26), rgba(255,255,255,.075));
  border-color: rgba(214,180,93,.38);
}

.dm-card-shine {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.18) 45%, transparent 70%);
  transform: translateX(-130%);
  transition: .8s ease;
}

.dm-friend-card:hover .dm-card-shine {
  transform: translateX(130%);
}

.dm-friend-card:hover {
  transform: translateY(-12px);
  border-color: rgba(214,180,93,.6);
  box-shadow:
    0 28px 80px rgba(0,0,0,.48),
    inset 0 1px 0 rgba(255,255,255,.15);
}

.dm-friend-logo {
  position: relative;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background:#000;*/
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 20px 55px rgba(0,0,0,.24);
  transition: transform .45s ease, box-shadow .45s ease;
}

.dm-friend-logo::after {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(214,180,93,.25);
  opacity: 0;
  transform: scale(.9);
  transition: .45s ease;
}

.dm-friend-card:hover .dm-friend-logo {
  transform: translateY(-8px) scale(1.04);
  box-shadow: 0 24px 60px rgba(214,180,93,.22);
}

.dm-friend-card:hover .dm-friend-logo::after {
  opacity: 1;
  transform: scale(1);
}

.dm-friend-logo img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.dm-friend-content {
  position: relative;
  z-index: 2;
}

.dm-sector {
  display: inline-block;
  margin-bottom: 13px;
  color: #d6b45d;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.7px;
  text-transform: uppercase;
}

.dm-friend-content h4 {
  color: #fff;
  font-size: 25px;
  font-weight: 850;
  margin-bottom: 12px;
}

.dm-friend-content p {
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.75;
  margin-bottom: 24px;
}

.dm-friend-content a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.dm-friend-content a::after {
  content: "↗";
  color: #d6b45d;
  transition: transform .35s ease;
}

.dm-friend-content a:hover::after {
  transform: translate(5px, -5px);
}

@media (max-width: 1199px) {
  .dm-friend-card {
    grid-column: span 4;
    min-height: 330px;
  }
}

@media (max-width: 991px) {
  .dm-friends-section {
    padding: 85px 0;
  }

  .dm-friends-wrapper {
    gap: 18px;
  }

  .dm-friend-card {
    grid-column: span 6;
    min-height: 320px;
  }
}

@media (max-width: 575px) {
  .dm-friends-section {
    padding: 65px 0;
  }

  .dm-friends-head {
    margin-bottom: 36px;
  }

  .dm-friends-head span {
    letter-spacing: 1.5px;
    font-size: 11px;
  }

  .dm-friends-head span::before,
  .dm-friends-head span::after {
    width: 18px;
  }

  .dm-friends-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .dm-friend-card {
    grid-column: span 1;
    min-height: auto;
    padding: 24px;
  }

  .dm-friend-logo {
    width: 104px;
    height: 104px;
    margin-bottom: 42px;
  }

  .dm-friend-content h4 {
    font-size: 22px;
  }

  .dm-friend-content p {
    font-size: 14px;
  }
}

.friends-info h5{color:#d6b45d;font-weight:400;}
.friends-info span{color:#fff;}



.dm-success-section {}

.dm-success-section {
  position: relative;padding-top: var(--def-padding); padding-bottom: var(--def-padding);background-color:#ededed;overflow: hidden;isolation: isolate;}

.dm-success-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(212, 184, 118, .18), transparent 32%),
    radial-gradient(circle at 90% 80%, rgba(56, 93, 128, .16), transparent 34%),
    linear-gradient(135deg, #f8f6f1 0%, #ffffff 52%, #f4efe8 100%);
}

.padding-left-right {
  position: relative;
  /*padding-left: 55px;
  padding-right: 55px;*/
}

.dm-success-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(8px);
  opacity: .45;
  animation: dmFloat 9s ease-in-out infinite;
}

.dm-success-bg span:nth-child(1) {
  width: 120px;
  height: 120px;
  background: #d2b36d;
  top: 12%;
  left: 7%;
}

.dm-success-bg span:nth-child(2) {
  width: 180px;
  height: 180px;
  background: #385d80;
  right: 5%;
  top: 20%;
  animation-delay: 1.5s;
}

.dm-success-bg span:nth-child(3) {
  width: 90px;
  height: 90px;
  background: #c7b28a;
  right: 20%;
  bottom: 10%;
  animation-delay: 3s;
}

.dm-ai-orbits span {
  position: absolute;
  border: 1px solid rgba(56, 93, 128, .15);
  border-radius: 50%;
  animation: dmRotate 22s linear infinite;
}

.dm-ai-orbits span:nth-child(1) {
  width: 420px;
  height: 420px;
  top: -160px;
  right: -130px;
}

.dm-ai-orbits span:nth-child(2) {
  width: 260px;
  height: 260px;
  left: -100px;
  bottom: -90px;
  animation-duration: 18s;
}

.dm-success-layout {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(360px, .65fr);
  gap: 36px;
  align-items: stretch;

  z-index: 2;
  margin-top:3rem;	
}

.dm-preview-frame {
  position: relative;
  /*min-height: 700px;*/
  /*height: 100%;*/
  overflow: hidden;
  border-radius: 34px;
  background: #111;
  box-shadow: 0 35px 90px rgba(0, 0, 0, .18);
}

.dm-preview-frame::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 26px;
  z-index: 4;
  pointer-events: none;
}

.dm-preview-frame img#storyImage {
  transform: scale(1.04);
  transition: transform .9s ease, opacity .45s ease;
}

.dm-preview-frame.is-changing img#storyImage {
  opacity: 0;
  transform: scale(1.1);
}

.dm-preview-gradient {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86), rgba(0,0,0,.45), rgba(0,0,0,.05)),
    linear-gradient(0deg, rgba(0,0,0,.55), transparent 55%);
  z-index: 1;
}

.dm-preview-number {
  position: absolute;
  top: 34px;
  right: 42px;
  z-index: 5;
  font-size: clamp(60px, 8vw, 120px);
  font-weight: 900;
  line-height: 1;
  color: rgba(255,255,255,.13);
}

.dm-preview-content {
  position: absolute;
  left: 30px;
  bottom: 55px;
  z-index: 5;
  transition: all .45s ease;
}

.dm-preview-frame.is-changing .dm-preview-content {
  opacity: 0;
  transform: translateY(22px);
}

.dm-preview-logo {
  width: 140px;
  min-height: 70px;
  padding: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.92);
  border-radius: 18px;
  margin-bottom: 24px;
}

.dm-preview-logo img {
  max-width: 100%;
  max-height: 48px;
}

.dm-preview-content span {
  display: inline-block;
  color: #d6b56c;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.dm-preview-content h3 {
  margin: 0;
  color: #fff;
  font-size: 24px;
  line-height: 1.06;
  font-weight: 400;
  letter-spacing: 0px;
}

.dm-preview-content p {
  margin: 20px 0 30px;
  color: rgba(255,255,255,.82);
  font-size: 17px;
  line-height: 1.8;
  width:90%;
}

.dm-preview-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 100px;
  background: #fff;
  color: #111;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  transition: all .35s ease;
}

.dm-preview-btn:hover {
  background: #d6b56c;
  color: #111;
  transform: translateY(-3px);
}

.dm-success-tabs {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.dm-story-tab {
  position: relative;
  width: 100%;
  min-height: 140px;
  padding: 26px 28px;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 26px;
  background: rgba(255,255,255,.68);
  backdrop-filter: blur(18px);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(0,0,0,.06);
  transition: all .45s ease;
}

.dm-story-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(214,181,108,.18), transparent);
  transform: translateX(-100%);
  transition: .7s ease;
}

.dm-story-tab:hover::before,
.dm-story-tab.active::before {
  transform: translateX(100%);
}

.dm-story-tab:hover,
.dm-story-tab.active {
  transform: translateX(-8px) scale(1.02);
  background: #111;
  border-color: #111;
  box-shadow: 0 28px 65px rgba(0,0,0,.2);
}

.dm-tab-count {
  display: block;
  color: #b28a38;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-bottom: 14px;
}

.dm-tab-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: rgba(0,0,0,.1);
  margin-bottom: 18px;
  position: relative;
  overflow: hidden;
}

.dm-tab-divider::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(90deg, transparent, #d6b56c, transparent);
  animation: dmLineMove 2.4s linear infinite;
}

.dm-story-tab.active .dm-tab-divider,
.dm-story-tab:hover .dm-tab-divider {
  background: rgba(255,255,255,.16);
}

.dm-tab-logo {
  width: 135px;
  height: 46px;
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.dm-tab-logo img {
  max-width: 100%;
  max-height: 100px;
  object-fit: contain;
  filter: none;
  transition: .35s ease;
}

/*.dm-story-tab.active .dm-tab-logo img,
.dm-story-tab:hover .dm-tab-logo img {
  filter: brightness(0) invert(1);
}*/

.dm-story-tab p {
  margin: 0;
  color: #666;
  font-size: 15px;
  line-height: 1.65;
  transition: .35s ease;
}

.dm-story-tab.active p,
.dm-story-tab:hover p {
  color: rgba(255,255,255,.76);
}

@keyframes dmFloat {
  0%, 100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-28px) scale(1.08);
  }
}

@keyframes dmRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dmLineMove {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(260%);
  }
}

/* Laptop */
@media (max-width: 1399px) {
  .padding-left-right {
    padding-left: 35px;
    padding-right: 35px;
  }

  .dm-success-layout {
    grid-template-columns: 1.2fr .8fr;
    gap: 28px;
  }

  .dm-preview-frame,
  .dm-preview-frame img#storyImage {
    min-height: 590px;
  }

  .dm-story-tab {
    min-height: 128px;
    padding: 22px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .dm-success-section {
    padding: 80px 0;
  }

  .padding-left-right {
    padding-left: 22px;
    padding-right: 22px;
  }

  .dm-success-head {
    margin-bottom: 38px;
  }

  .dm-success-layout {
    grid-template-columns: 1fr;
  }

  .dm-preview-frame,
  .dm-preview-frame img#storyImage {
    min-height: 540px;
  }

  .dm-success-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .dm-story-tab:hover,
  .dm-story-tab.active {
    transform: translateY(-6px) scale(1.01);
  }
}

/* Mobile */
@media (max-width: 575px) {
  .dm-success-section {
    padding: 60px 0;
  }

  .padding-left-right {
    padding-left: 5px;
    padding-right: 5px;
  }


  .dm-preview-frame {
    border-radius: 24px;
  }

  .dm-preview-frame,
  .dm-preview-frame img#storyImage {
    min-height: 100%;
  }

  .dm-preview-frame::before {
    inset: 10px;
    border-radius: 18px;
  }

  .dm-preview-number {
    top: 24px;
    right: 24px;
    font-size: 58px;
  }

  .dm-preview-content {
    left: 24px;
    right: 24px;
    bottom: 50px;
    max-width: none;
  }

  .dm-preview-logo {
    width: 125px;
    min-height: 58px;
    padding: 10px;
    margin-bottom: 15px;
  }

  .dm-preview-content p {
    font-size: 14px;
    line-height: 1.65;
	display: none;  
  }

  .dm-success-tabs {
    grid-template-columns: 1fr;
  }

  .dm-story-tab {
    min-height: auto;
    padding: 22px;
    border-radius: 20px;
  }
}

.dm-success-head{
    position:relative;
    margin:0 auto 70px;
    z-index:5;
}

/* Floating Glow */

.dm-success-head::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    background:radial-gradient(circle,#d8b46a55 0%,transparent 70%);
    top:-80px;
    left:50%;
    transform:translateX(-50%);
    animation:headGlow 5s ease-in-out infinite;
    z-index:-1;
}

@keyframes headGlow{

0%,100%{
transform:translateX(-50%) scale(1);
opacity:.5;
}

50%{
transform:translateX(-50%) scale(1.2);
opacity:1;
}

}

/* Badge */

.dm-head-badge{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:10px 20px;
    border-radius:100px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    box-shadow:0 15px 35px rgba(0,0,0,.06);
    margin-bottom:28px;
}

.dm-head-badge span{
    width:10px;
    height:10px;
    border-radius:50%;
    background:#d7b36a;
    animation:pulse 1.8s infinite;
}


@keyframes pulse{

0%,100%{
transform:scale(1);
opacity:1;
}

50%{
transform:scale(1.8);
opacity:.4;
}

}

/* Heading */

.dm-main-head h1{
font-size:clamp(48px,6vw,50px);
font-weight:400;
line-height:.95;
margin-bottom:28px;}



.dm-main-head h1 span{
margin-top:10px;
background:linear-gradient(90deg,#385d80,#d4ae62,#385d80);
background-size:250%;
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

animation:gradientMove 5s linear infinite;

}

@keyframes gradientMove{

to{
background-position:250%;
}

}

/* Description */

.dm-main-head p{
font-size:20px;
line-height:1.9;
color:#666;
margin:auto;
font-weight:500;	

}

/* Animated Line */

.dm-head-line{

margin:45px auto 0;
height:2px;
background:#ececec;
overflow:hidden;
position:relative;

}

.dm-head-line span{

position:absolute;
width:90px;
height:100%;
background:linear-gradient(90deg,transparent,#d7b36a,transparent);
animation:lineMove 2.5s linear infinite;

}

@keyframes lineMove{

from{
left:-90px;
}

to{
left:220px;
}

}

/* Tablet */

@media(max-width:991px){

.dm-main-head h1{
font-size:45px;
}

.dm-main-head p{
font-size:16px;
}

}

/* Mobile */

@media(max-width:575px){

.dm-main-head h1{
font-size:22px;
letter-spacing:-1px;
font-weight:600;    
}

.dm-main-head p{
font-size:15px;
line-height:1.7;
}

.dm-head-line{
width:150px;
}

}

.dm-main-head{margin-bottom: 2rem;}

.dm-friends-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  align-items: stretch;    
}

.dm-friend-pro-card {
  position: relative;
  overflow: hidden;
  min-height: 410px;
  padding: 28px;
  border-radius: 30px;
  background: #000;
  border: 1px solid #b4955c;
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
  backdrop-filter: blur(16px);
  transition: .45s ease;
}

.dm-friend-pro-card::before {
  content: "“";
  position: absolute;
  right: 24px;
  bottom: -34px;
  font-size: 180px;
  line-height: 1;
  font-family: Georgia, serif;
  color: rgba(255,255,255,.045);
  pointer-events: none;
}

.dm-friend-pro-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, rgba(0,229,255,.75), transparent 40%, rgba(151,93,255,.75));
  opacity: 0;
  transition: .45s ease;

  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.dm-friend-pro-card:hover::after,
.dm-friend-pro-card.featured::after {
  opacity: 1;
}

.dm-friend-pro-card:hover {
  transform: translateY(-12px);
  background:
    linear-gradient(180deg, rgba(0,229,255,.12), rgba(255,255,255,.05));
  box-shadow: 0 36px 100px rgba(0,229,255,.12);
}

.dm-friend-pro-card.featured {
  background:
    radial-gradient(circle at top right, rgba(0,229,255,.22), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
}

.dm-friend-top {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 86px 1fr auto;
  gap: 16px;
  align-items: center;
}

.dm-friend-top{
    display:grid;
    grid-template-columns:130px 1fr auto;
    gap:22px;
    align-items:center;
}

.dm-friend-logo-box{
    width:130px;
    height:110px;
    background:#fff;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:18px;
    position:relative;
    overflow:hidden;
    box-shadow:
        0 10px 30px rgba(0,0,0,.15),
        inset 0 0 0 1px rgba(0,0,0,.05);
}

.dm-friend-logo-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at top right,
        rgba(0,229,255,.12),
        transparent 55%);
    opacity:0;
    transition:.4s;
}

.dm-friend-pro-card:hover .dm-friend-logo-box::before{
    opacity:1;
}

.dm-friend-logo-box img{
    width:100%;
    height:70px;
    object-fit:contain;
    object-position:center;
    transition:.45s;
    filter:contrast(1.05);
}

.dm-friend-pro-card:hover .dm-friend-logo-box img{
    transform:scale(1.08);
}
.dm-friend-meta h4{color:#fff;font-weight:400;}
.dm-sector {
  display: block;
  color: #c7a252;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 800;
  margin-bottom: 7px;
}

.dm-friend-meta h4 {
  margin: 0;
  font-size: 25px;
  line-height: 1.1;
}

.dm-card-number {
  font-size: 34px;
  font-weight: 900;
  color: rgb(255 255 255 / 44%);
}

.dm-tab-divider {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 1px;
  margin: 28px 0 24px;
  overflow: hidden;
  background: rgba(255,255,255,.12);
}

.dm-tab-divider::before {
  content: "";
  position: absolute;
  top: 0;
  left: -35%;
  width: 35%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #000000, transparent);
  animation: dmDividerMove 2.4s ease-in-out infinite;
}

.dm-friend-pro-card p {
  position: relative;
  z-index: 2;
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: 16px;
  line-height: 1.75;
}

.dm-client-info {
  position: relative;
  z-index: 2;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.1);
}

.dm-client-info h5 {
  margin: 0 0 7px;
  color: #fff;
  font-size: 17px;
}

.dm-client-info span {
  display: block;
  color: #c7a252;
  font-size: 14px;
  line-height: 1.5;
}

/* Animations */
@keyframes dmFriendsGrid {
  from {
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  to {
    background-position: 0 0, 0 0, 58px 58px, 58px 58px;
  }
}

@keyframes dmDividerMove {
  0% {
    left: -35%;
  }

  100% {
    left: 100%;
  }
}

/* Laptop */
@media (max-width: 1366px) {
  .dm-friends-premium-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (max-width: 991px) {
  .dm-friends-section {
    padding: 80px 0;
  }

  .dm-friends-head h2 {
    letter-spacing: -2px;
  }

  .dm-friend-pro-card {
    min-height: auto;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .dm-friends-section {
    padding: 60px 0;
  }

  .dm-friends-container {
    width: 90%;
  }

  .dm-friends-head {
    margin-bottom: 35px;
  }

  .dm-friends-head h2 {
    font-size: 42px;
    line-height: 1;
  }

  .dm-friends-head p {
    font-size: 15px;
  }

  .dm-friends-premium-grid {
    grid-template-columns: 1fr;
  }

  .dm-friend-pro-card {
    padding: 22px;
    border-radius: 24px;
  }

  .dm-friend-top {
    grid-template-columns: 72px 1fr;
  }

  .dm-card-number {
    position: absolute;
    top: 0;
    right: 0;
    font-size: 28px;
  }

  .dm-friend-logo-box {
    width: 72px;
    height: 72px;
    border-radius: 18px;
  }

  .dm-friend-meta h4 {
    font-size: 22px;
  }
}






.ai-footer-section {
  position: relative;
    overflow: hidden;
    padding-top: var(--def-padding);padding-bottom: 2rem;
    background: radial-gradient(circle at 15% 20%, rgba(212, 184, 118, .18), transparent 32%), radial-gradient(circle at 90% 80%, rgba(56, 93, 128, .16), transparent 34%), linear-gradient(135deg, #f8f6f1 0%, #ffffff 52%, #f4efe8 100%);
}

.ai-grid-bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 229, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, .06) 1px, transparent 1px);
  background-size: 54px 54px;
  mask-image: radial-gradient(circle at center, black 0%, transparent 75%);
  animation: aiGridMove 18s linear infinite;
}

.ai-footer-section::before {
  content: "";
  position: absolute;
  width: 620px;
  height: 620px;
  right: -180px;
  top: -160px;
  border-radius: 50%;
  border: 1px solid rgba(0, 229, 255, .18);
  box-shadow:
    0 0 0 80px rgba(0, 229, 255, .025),
    0 0 0 160px rgba(0, 229, 255, .018);
  animation: aiRotate 18s linear infinite;
}

.ai-footer-section::after {
  content: "";
  position: absolute;
  left: -120px;
  bottom: 120px;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,130,255,.28), transparent 68%);
}

.ai-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .55;
}

.ai-glow-1 {
  width: 420px;
  height: 420px;
  background: #f1d78fd1;
  top: 12%;
  left: 5%;
}

.ai-glow-2 {
  width: 380px;
  height: 380px;
  background: #f1c068;
  right: 8%;
  bottom: 10%;
}

.ai-footer-container {
  position: relative;
  z-index: 5;
  width: min(1520px, 92%);
  margin: auto;
}

.ai-footer-main {
  display: grid;
  grid-template-columns: 1.08fr .92fr;
  gap: 70px;
  align-items: center;
}

.ai-badge {
  width: fit-content;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  color: #92f4ff;
  font-size: 13px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 28px;
}

.ai-badge span {
  width: 9px;
  height: 9px;
  background: #00e5ff;
  border-radius: 50%;
  box-shadow: 0 0 18px #00e5ff;
}

.ai-footer-content h2 {
  margin: 0;
  max-width: 850px;
  font-size: clamp(46px, 6vw, 98px);
  line-height: .94;
  letter-spacing: -4px;
  font-weight: 900;
}

.ai-footer-content h2 strong {
  display: block;
  color: transparent;
  background: linear-gradient(90deg, #00e5ff, #ffffff, #b082ff);
  -webkit-background-clip: text;
  background-clip: text;
}

.ai-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
  margin-top: 34px;
}

.ai-service-tags span {
  padding: 12px 17px;
  border-radius: 999px;
  background-color:#c7a252;
  border: 1px solid rgba(255,255,255,.1);
  color: #000;
  font-size: 14px;
  transition: .35s ease;
}

.ai-service-tags span:hover {
  color: #fff;
  background: #000;
  transform: translateY(-5px);
}

.ai-contact-line {
  display: flex;
  flex-wrap: wrap;
  /*gap: 20px;*/
  margin-top: 34px;
}

.ai-contact-line a {
  color: #000;
  text-decoration: none;
  font-weight: 400;
  margin-right:15px;
}

.ai-contact-line a:hover {
  color: #000;
}

/* Form */
.ai-form-card {
  position: relative;
  padding: 42px;
  border-radius: 34px;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 35px 100px rgba(0,0,0,.35);
  backdrop-filter: blur(18px);
    margin-top:5rem;
}

.ai-form-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 34px;
  padding: 1px;
  /*-background: linear-gradient(135deg, rgba(0,229,255,.8), transparent, rgba(176,130,255,.8));*/
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.ai-form-header span {
  color: #c3a24c;
  text-transform: uppercase;
  font-size: 15px;
  letter-spacing: 2px;
  font-weight: 500;
}

.ai-form-header h3 {
  margin: 12px 0 30px;
  font-size: 22px;
  line-height: 1;
  color:#5E5C5C;font-weight:500;    
}

.ai-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.ai-field {
  position: relative;
}

.ai-field.full {
  grid-column: 1 / -1;
}

.ai-field input,
.ai-field textarea {
  width: 100%;
  border: 0;
  outline: 0;
  height: 62px;
  border-radius: 16px;
  background: rgb(89 91 91);
  color: #fff;
  padding: 22px 18px 8px;
  font-size: 15px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}

.ai-field textarea {
  height: 145px;
  resize: none;
}

.ai-field label {
  position: absolute;
  left: 18px;
  top: 21px;
  color: rgba(255,255,255,.48);
  font-size: 14px;
  pointer-events: none;
  transition: .25s ease;
}

.ai-field input:focus,
.ai-field textarea:focus {
  box-shadow: inset 0 0 0 1px #c7a252;
  background: #c7a252;
}

.ai-field input:focus + label,
.ai-field input:valid + label,
.ai-field textarea:focus + label,
.ai-field textarea:valid + label {
  top: 8px;
  font-size: 14px;
  color: #333;
  font-weight: 400;
}

.ai-submit-btn {
  margin-top: 22px;
  width: 100%;
  height: 64px;
  border: 0;
  border-radius: 17px;
  background: linear-gradient(90deg, #c3a24c, #c3a24c);
  color: #061018;
  font-weight: 500;
  font-size: 20px;
  cursor: pointer;
  transition: .35s ease;
}

.ai-submit-btn span {
  display: inline-block;
  margin-left: 10px;
  transition: .35s ease;
}

.ai-submit-btn:hover {
  transform: translateY(-5px);
  box-shadow: 0 22px 45px rgba(0,229,255,.22);
}

.ai-submit-btn:hover span {
  transform: translate(6px, -6px);
}

/* Offices */
.ai-office-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.ai-office-card {
  position: relative;
  padding: 28px;
  min-height: 245px;
  border-radius: 28px;
  background: rgb(2 2 2 / 80%);
  border: 1px solid rgba(255,255,255,.1);
  transition: .4s ease;
}

.ai-office-card:hover {
  background: rgb(2 2 2 / 80%);
  transform: translateY(-10px);
}

.ai-office-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ai-office-top img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
}

.ai-office-top span {
  font-size: 35px;
  font-weight: 400;
  color: rgba(255,255,255,.13);
}

.ai-office-card h4{color:#fff;}

.ai-office-card h4 {
  margin: 20px 0 10px;
  font-size: 25px;
}

.ai-office-card p {
  color: rgba(255,255,255,.62);
  line-height: 1.6;
}

.ai-office-card a {
  color: #c3a24c;
  text-decoration: none;
  font-weight: 400;
}

/* Bottom */
.ai-footer-bottom {
  margin-top: 65px;
  padding: 35px;
  border-radius: 30px;
  background: rgb(35 31 32);
  border: 1px solid rgba(255,255,255,.1);
  display: grid;
  grid-template-columns: 1.1fr 1fr 1.2fr 1.4fr;
  gap: 35px;
  align-items: center;
}

.ai-foot-box h4 {
  margin: 0 0 24px;
  color: #d8c39f;
  text-transform: uppercase;
  font-size: 24px;
}

.ai-event-logo{width: 100%;}

.ai-iso-box {
  text-align: center;
}

.ai-iso-logo {
  max-width: 170px;
  animation: aiIsoPulse 4s ease-in-out infinite;
}

.ai-social {
  display: flex;
  flex-wrap: wrap;
  gap: 13px;
}

.ai-social img {
  width: 42px;
  height: 42px;
}

.ai-social a {
  transition: .35s ease;
}

.ai-social a:hover {
  transform: translateY(-7px) scale(1.08);
}

.ai-copy img {
  width: 43px;
  margin-bottom: 12px;
}

.ai-copy p {
  margin: 7px 0;
  color: rgba(255,255,255,.72);
  line-height: 1.5;
  font-size: 16px;
}

.ai-copy a {
  color: rgba(255,255,255,.78);
  text-decoration: none;
}

.ai-copy a:hover {
  color: #00e5ff;
}

/* Animations */
@keyframes aiGridMove {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 54px 54px;
  }
}

@keyframes aiRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes aiIsoPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.04);
    filter: drop-shadow(0 0 18px rgba(0,229,255,.35));
  }
}

/* Laptop */
@media (max-width: 1366px) {
  .ai-footer-main {
    gap: 45px;
  }

  .ai-office-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Tablet */
@media (max-width: 991px) {
  .ai-footer-section {
    padding-top: 70px;
  }

  .ai-footer-main {
    grid-template-columns: 1fr;
  }

  .ai-footer-content h2 {
    letter-spacing: -2px;
  }

  .ai-footer-bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile */
@media (max-width: 575px) {
  .ai-footer-section {
    padding: 55px 0 28px;
  }

  .ai-footer-container {
    width: 90%;
  }

  .ai-footer-content h2 {
    font-size: 46px;
    line-height: .98;
  }

  .ai-footer-content p {
    font-size: 16px;
  }

  .ai-form-card {
    padding: 26px 18px;
    border-radius: 24px;
  }

  .ai-form-grid {
    grid-template-columns: 1fr;
  }

  .ai-office-grid,
  .ai-footer-bottom {
    grid-template-columns: 1fr;
  }

  .ai-footer-bottom {
    text-align: center;
  }

  .ai-social {
    justify-content: center;
  }
}




.video-section-intro-content{
    display:flex;
    align-items:center;
    min-height:250px;
    overflow:hidden;
}

.dm-title{
    flex-wrap:wrap;
    gap:18px;
    font-size:clamp(42px,6vw,90px);
    font-weight:800;
    line-height:1.1;
    letter-spacing:-2px;
    perspective:1200px;
}

.dm-title span{
    display:block;
    opacity:0;
    transform:
        translateY(120px)
        rotateX(-90deg)
        scale(.8);
    filter:blur(15px);
    animation:wordReveal .9s cubic-bezier(.2,.9,.2,1) forwards,
              floatText 4s ease-in-out infinite;
}

.dm-title span:nth-child(1){
    animation-delay:.1s,1s;
}
.dm-title span:nth-child(2){
    animation-delay:.35s,1.2s;
}
.dm-title span:nth-child(3){
    animation-delay:.6s,1.4s;
}
.dm-title span:nth-child(4){
    animation-delay:.85s,1.6s;
}

.diff-color{
    color:#d8b45a;
}

@keyframes wordReveal{

    0%{
        opacity:0;
        transform:
        translateY(120px)
        rotateX(-90deg)
        scale(.8);

        filter:blur(15px);
    }

    60%{
        opacity:1;
    }

    100%{
        opacity:1;
        transform:
        translateY(0)
        rotateX(0)
        scale(1);

        filter:blur(0);
    }

}

@keyframes floatText{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-8px);
    }

}


@media only screen and (max-width:1500px){
.dm-center-icon{top:38%;left:58%;width:38%;}
.robot-card{bottom: -180px;}}

@media only screen and (max-width:1366px){
.dm-center-icon{top:35%;}}

@media only screen and (max-width:1280px){
.dm-center-icon{top:36%;}}

@media only screen and (max-width:1024px){
.dm-center-icon{top:40%;}}

@media only screen and (max-width:768px){
.ai-feature-list li{font-size:17px;}
.dm-center-icon{top:38%;}
.dm-friend-pro-card{padding:15px;}
.dm-sector{font-size:10px;}
.dm-friend-meta h4{font-size:16px;}
.dm-client-info h5{font-size:14px;font-weight:400;}
.dm-title span{display: inline-block;}
.video-section-intro-content {min-height: 130px;}
.padding-left-right-services{padding-left: 0.5rem;padding-right: 0.5rem;}
.top-dm-banner-mobile{display:block!important;}
.top-dm-banner-desktop{display:none;}
.top-dm-banner-heading h6{font-size: clamp(18px, 1.2vw, 22px);}
.robot-card{width:450px;}
.top-dm-banner-content p{font-size:18px;}
.top-dm-banner-content h4{font-size:20px;}
.robot-card{bottom:-220px;}
.dm-offcanvas-links a{font-size: clamp(20px, 3vw, 25px);}}   

@media only screen and (max-width:475px){
.features-section{background-size: cover;}
.dm-center-icon{top: 33%;}
.dm-logo{width:190px!important;}
.video-section-intro-content h2{font-size:25px;}
.robot-card{bottom: -250px;}
.dm-preview-btn{padding: 5px 15px;font-weight:400;}}


/* ================================
   RESPONSIVE HERO SECTION
================================ */

.top-dm-banner-mobile{display:none;}

/* ==============================
   DESIGN MASTER AI PRELOADER
============================== */
/* ===============================
   DESIGN MASTER SUPER AI LOADER
================================ */

#dmAiLoader {position:fixed;inset:0;z-index:999999;overflow:hidden;display:grid;place-items:center;background:#f8f6f1;transition:opacity .9s ease, visibility .9s ease;}
#dmAiLoader.hide {opacity:0;visibility:hidden;}

/* AI BACKGROUND */
.dm-ai-bg {position:absolute;inset:0;overflow:hidden;background:radial-gradient(circle at 50% 45%, rgba(186,154,98,.22), transparent 28%),radial-gradient(circle at 20% 20%, rgba(13,53,95,.08), transparent 30%),radial-gradient(circle at 80% 80%, rgba(207,184,141,.20), transparent 35%),linear-gradient(135deg,#fffdf8 0%,#f8f4ec 48%,#ffffff 100%);}
.dm-ai-bg::before {content:"";position:absolute;inset:-35%;background:conic-gradient(from 180deg,transparent,rgba(186,154,98,.20),transparent,rgba(13,53,95,.10),transparent,rgba(207,184,141,.18),transparent);filter:blur(75px);animation:dmBgRotate 13s linear infinite;}
.dm-ai-bg::after {content:"";position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0%,rgba(255,255,255,.18) 42%,rgba(244,239,232,.60) 100%),linear-gradient(180deg,rgba(255,255,255,.16),transparent 22%,rgba(13,53,95,.04));}

/* FUTURISTIC PERSPECTIVE GRID */
.dm-ai-grid {position:absolute;inset:-80%;background-image:linear-gradient(rgba(186,154,98,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(186,154,98,.10) 1px,transparent 1px),linear-gradient(rgba(13,53,95,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(13,53,95,.035) 1px,transparent 1px);background-size:80px 80px,80px 80px,22px 22px,22px 22px;transform:perspective(900px) rotateX(64deg) translateY(130px);transform-origin:center;animation:dmGridFlow 9s linear infinite;opacity:.75;}

/* AI RAIN */
.dm-ai-rain {position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden;}
.dm-ai-rain span {position:absolute;top:-170px;width:1px;height:145px;background:linear-gradient(180deg,transparent,rgba(186,154,98,.78),rgba(13,53,95,.28),transparent);box-shadow:0 0 12px rgba(186,154,98,.42),0 0 24px rgba(13,53,95,.10);opacity:.50;animation:dmAiRainFall 5.8s linear infinite;}
.dm-ai-rain span:nth-child(1) {left:6%;animation-delay:0s;animation-duration:5.4s;}
.dm-ai-rain span:nth-child(2) {left:13%;animation-delay:.8s;animation-duration:6.2s;}
.dm-ai-rain span:nth-child(3) {left:21%;animation-delay:.2s;animation-duration:5.7s;}
.dm-ai-rain span:nth-child(4) {left:29%;animation-delay:1.1s;animation-duration:6.8s;}
.dm-ai-rain span:nth-child(5) {left:37%;animation-delay:.5s;animation-duration:5.9s;}
.dm-ai-rain span:nth-child(6) {left:45%;animation-delay:1.5s;animation-duration:7s;}
.dm-ai-rain span:nth-child(7) {left:53%;animation-delay:.3s;animation-duration:6.1s;}
.dm-ai-rain span:nth-child(8) {left:61%;animation-delay:1s;animation-duration:5.5s;}
.dm-ai-rain span:nth-child(9) {left:68%;animation-delay:.6s;animation-duration:6.6s;}
.dm-ai-rain span:nth-child(10) {left:75%;animation-delay:1.8s;animation-duration:7.2s;}
.dm-ai-rain span:nth-child(11) {left:82%;animation-delay:.4s;animation-duration:5.8s;}
.dm-ai-rain span:nth-child(12) {left:89%;animation-delay:1.2s;animation-duration:6.4s;}
.dm-ai-rain span:nth-child(13) {left:96%;animation-delay:.9s;animation-duration:6.9s;}
.dm-ai-rain span:nth-child(14) {left:34%;animation-delay:2.1s;animation-duration:7.4s;}
.dm-ai-rain span:nth-child(15) {left:72%;animation-delay:2.4s;animation-duration:7.6s;}

/* CONTENT */
.dm-loader-content {position:relative;z-index:10;width:min(92vw,760px);text-align:center;padding:clamp(26px,5vw,58px);}

/* LOGO CLEAR AND FULL */
.dm-logo-box {position:relative;width:clamp(300px,48vw,560px);max-width:94vw;margin:0 auto 34px;display:flex;align-items:center;justify-content:center;}
.dm-logo-box img {width:100%;height:auto;object-fit:contain;position:relative;z-index:3;animation:dmLogoBreath 3.2s ease-in-out infinite;filter:drop-shadow(0 0 30px rgba(186,154,98,.38)) drop-shadow(0 26px 45px rgba(13,53,95,.14));}

/* vertical logo scan only */
.dm-logo-scan {position:absolute;left:4%;right:4%;top:0;height:3px;background:linear-gradient(90deg,transparent,#f8e8bc,#ba9a62,transparent);box-shadow:0 0 28px rgba(186,154,98,.48);animation:dmLogoScan 3.2s ease-in-out infinite;z-index:5;}

/* TITLE */
.dm-ai-title {margin:0;color:#ba9a62;font-size:clamp(24px,5vw,52px);font-weight:900;letter-spacing:clamp(3px,.9vw,8px);text-shadow:0 0 26px rgba(186,154,98,.22);animation:dmTitlePulse 3.5s ease-in-out infinite;}

/* TYPEWRITER TAGLINE */
.dm-ai-tagline {min-height:24px;margin:16px 0 34px;color:rgba(13,53,95,.76);font-size:clamp(11px,1.5vw,14px);letter-spacing:clamp(2px,.5vw,4px);text-transform:uppercase;}
.dm-ai-tagline::after {content:"";display:inline-block;width:8px;height:1em;margin-left:6px;background:#ba9a62;box-shadow:0 0 14px rgba(186,154,98,.44);animation:dmCursorBlink .8s infinite;}

/* PROGRESS */
.dm-ai-progress {width:min(430px,78vw);height:4px;margin:0 auto;border-radius:50px;background:rgba(13,53,95,.12);overflow:hidden;}
.dm-ai-progress span {display:block;width:0%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#0d355f,#ba9a62,#ead8b3);box-shadow:0 0 22px rgba(186,154,98,.46);animation:dmLoaderProgress 3s ease forwards;}
.dm-ai-count {margin-top:15px;color:#0d355f;font-size:13px;font-weight:800;letter-spacing:2px;}

/* ANIMATIONS */
@keyframes dmBgRotate {to {transform:rotate(360deg) scale(1.08);}}
@keyframes dmGridFlow {from {background-position:0 0,0 0,0 0,0 0;}to {background-position:0 340px,340px 0,0 110px,110px 0;}}
@keyframes dmAiRainFall {0% {transform:translateY(-170px);opacity:0;}14% {opacity:.72;}100% {transform:translateY(calc(100vh + 190px));opacity:0;}}
@keyframes dmLogoBreath {0%,100% {transform:translateY(0) scale(1);filter:brightness(1) drop-shadow(0 0 30px rgba(186,154,98,.38)) drop-shadow(0 26px 45px rgba(13,53,95,.14));}50% {transform:translateY(-10px) scale(1.025);filter:brightness(1.08) drop-shadow(0 0 42px rgba(186,154,98,.52)) drop-shadow(0 30px 55px rgba(13,53,95,.18));}}
@keyframes dmLogoScan {0% {top:4%;opacity:0;}15% {opacity:1;}85% {opacity:1;}100% {top:96%;opacity:0;}}
@keyframes dmTitlePulse {0%,100% {transform:translateY(0);color:#ba9a62;}50% {transform:translateY(-5px);color:#0d355f;text-shadow:0 0 30px rgba(186,154,98,.34);}}
@keyframes dmCursorBlink {0%,45% {opacity:1;}46%,100% {opacity:0;}}
@keyframes dmLoaderProgress {to {width:100%;}}

/* RESPONSIVE */
@media (max-width:768px) {
.dm-logo-box {width:420px;}
}

@media (max-width:480px) {
.dm-loader-content {width:94vw;padding:26px 16px;}
.dm-logo-box {width:320px;margin-bottom:28px;}
.dm-ai-title {line-height:1.25;}
.dm-ai-tagline {line-height:1.7;}
.dm-ai-rain span {height:110px;opacity:.45;}
}

@media (max-width:360px) {
.dm-logo-box {width:285px;}
.dm-ai-title {font-size:22px;}
}

@media only screen and (max-width:1024px){
.project-info{bottom:25px;}}

@media only screen and (max-width:768px){
.project-info{bottom:10px;}}

@media only screen and (max-width:475px){
.features-point-content{margin-top: 0rem;}
.dm-preview-content h3{font-size: 15px;margin-bottom: 1rem;}}

@media only screen and (max-width:360px){
.dm-center-icon{top:35%;}
.ai-social{gap:9px;}}


/*==============================
 Tablet
===============================*/
@media (max-width:991.98px){

.dm-friend-top{
    align-items:center;
    gap:18px;
}

.dm-friend-logo-box{
    width:90px;
    height:90px;
    min-width:90px;
    padding:12px;
    border-radius:18px;
}

.dm-friend-logo-box img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.dm-friend-meta h4{
    font-size:22px;
}

.dm-sector{
    font-size:13px;
}

}


/*=========================
 Tablet & Mobile
=========================*/
@media (max-width:991.98px){

.dm-friend-top{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
}

.dm-friend-logo-box{
    width:150px;
    height:110px;
    min-width:110px;
    padding:12px;
    border-radius:20px;
}

.dm-friend-logo-box img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.dm-friend-meta{
    order:2;
}

.dm-friend-meta h4{
    font-size:24px;
    margin-top:8px;
    margin-bottom:6px;
}

.dm-sector{
    display:block;
    font-size:13px;
    margin-bottom:4px;
}

.dm-card-number{
    order:3;
    position:static;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:44px;
    height:44px;
    border-radius:50%;
    margin-top:5px;
}

}


/* ==============================
   Tablet + Mobile Layout
============================== */
@media (max-width: 991.98px) {

  .dm-success-layout {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }

  /* Tabs come first */
  .dm-success-tabs {
    order: -1;
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 8px 4px 18px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .dm-success-tabs::-webkit-scrollbar {
    height: 4px;
  }

  .dm-success-tabs::-webkit-scrollbar-track {
    background: rgba(255,255,255,.08);
    border-radius: 20px;
  }

  .dm-success-tabs::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #d6b46a, #ffffff);
    border-radius: 20px;
  }

  .dm-story-tab {
    flex: 0 0 260px;
    min-width: 260px;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    scroll-snap-align: start;
  }

  .dm-story-tab .dm-tab-divider {
    width: 100%;
  }

  .dm-tab-logo {
    height: 46px;
    display: flex;
    align-items: center;
  }

  .dm-tab-logo img {
    max-height: 42px;
    max-width: 145px;
    object-fit: contain;
  }

  .dm-story-tab p {
    font-size: 13px;
    line-height: 1.5;
    margin-top: 12px;
  }

  .dm-success-preview {
    width: 100%;
  }
}


/* ==============================
   Mobile Fine Tuning
============================== */
@media (max-width: 575.98px) {

  .dm-success-layout {
    gap: 22px;
  }

  .dm-success-tabs {
    gap: 12px;
    padding-bottom: 14px;
  }

  .dm-story-tab {
    flex: 0 0 220px;
    min-width: 220px;
    padding: 18px 16px;
  }

  .dm-tab-count {
    font-size: 13px;
  }

  .dm-tab-logo {
    height: 40px;
  }

  .dm-tab-logo img {
    max-height: 80px;
    max-width: 125px;
  }

  .dm-story-tab p {
    font-size: 12.5px;
  }
}


.ai-office-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.ai-office-card {
  position: relative;
  overflow: hidden;
  padding: 28px;
  min-height: 245px;
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    #101010;
  border: 1px solid rgba(195,162,76,.22);
  box-shadow: 0 22px 55px rgba(0,0,0,.22);
  transition: .45s ease;
}

.ai-office-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(195,162,76,.20), transparent 35%),
    linear-gradient(120deg, transparent, rgba(255,255,255,.06), transparent);
  opacity: 0;
  transition: .45s ease;
}

.ai-office-card:hover,
.ai-office-card.active {
  transform: translateY(-10px);
  border-color: rgba(195,162,76,.65);
  box-shadow: 0 28px 70px rgba(195,162,76,.18);
}

.ai-office-card:hover::before,
.ai-office-card.active::before {
  opacity: 1;
}

.ai-office-glow {
  position: absolute;
  width: 140px;
  height: 140px;
  right: -55px;
  bottom: -55px;
  border-radius: 50%;
  background: rgba(195,162,76,.18);
  filter: blur(35px);
}

.ai-office-top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}

.ai-flag-wrap {
  width: 66px;
  height: 66px;
  padding: 9px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ai-flag-wrap img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.ai-office-top span {
  font-size: 50px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px rgba(195,162,76,.55);
}

.ai-office-card h4 {
  position: relative;
  z-index: 2;
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 12px;
}

.ai-office-card p {
  position: relative;
  z-index: 2;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 22px;
}

.ai-office-actions {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ai-office-actions a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  transition: .3s ease;
}

.ai-office-actions a i {
  color: #c3a24c;
  margin-right: 7px;
}

.ai-office-actions a:hover {
  color: #c3a24c;
}

.ai-location-btn {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c3a24c, #f3d97a);
  color: #111 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(195,162,76,.35);
  animation: aiMapPulse 2s infinite;
}

.ai-location-btn i {
  margin: 0 !important;
  color: #111 !important;
  font-size: 19px;
}

@keyframes aiMapPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(195,162,76,.45);
  }
  70% {
    box-shadow: 0 0 0 14px rgba(195,162,76,0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(195,162,76,0);
  }
}

/* Fancybox iframe size */
.fancybox__content {
  border-radius: 22px !important;
  overflow: hidden;
}

/* Responsive */
@media (max-width: 1199px) {
  .ai-office-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 575px) {
  .ai-office-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .ai-office-card {
    padding: 24px;
    border-radius: 22px;
  }

  .ai-office-actions {
    align-items: flex-start;
  }

  .ai-office-actions a {
    font-size: 14px;
  }
}


.dm-chat-widget {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  width: 128px;
  height: 128px;
}

.dm-chat-btn {
  position: relative;
  width: 128px;
  height: 128px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  animation: dmFloat 4s ease-in-out infinite;
}

.dm-chat-rings span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(195, 162, 76, .45);
  animation: dmRing 2.8s linear infinite;
}

.dm-chat-rings span:nth-child(2) {
  animation-delay: .8s;
}

.dm-chat-rings span:nth-child(3) {
  animation-delay: 1.6s;
}

.dm-chat-glow {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(195,162,76,.45), transparent 65%);
  filter: blur(12px);
  animation: dmGlow 2.4s ease-in-out infinite;
}

.dm-agent-wrap {
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: linear-gradient(145deg, #181818, #050505);
  border: 2px solid rgba(195,162,76,.55);
  overflow: hidden;
  box-shadow:
    0 22px 45px rgba(0,0,0,.35),
    inset 0 0 25px rgba(195,162,76,.16);
}

.dm-agent,
.dm-agent-smile {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: .45s ease;
}

.dm-agent-smile {
  opacity: 0;
  transform: scale(.94);
}

.dm-chat-btn:hover .dm-agent {
  opacity: 0;
  transform: scale(1.08);
}

.dm-chat-btn:hover .dm-agent-smile {
  opacity: 1;
  transform: scale(1);
}

.dm-quote-badge{
    position:absolute;
    right:-15px;
    bottom:-8px;

    background:linear-gradient(135deg,#d6b45a,#f4df95);

    color:#111;

    padding:10px 18px;

    border-radius:50px;

    display:flex;
    align-items:center;
    gap:8px;

    font-size:13px;
    font-weight:400;

    white-space:nowrap;

    box-shadow:
        0 15px 35px rgba(195,162,76,.35);

    animation:quotePulse 2.5s infinite;
}

.dm-quote-badge i{
    font-size:16px;
}
.dm-chat-tooltip {
  position: absolute;
  right: 112px;
  top: 26px;
  min-width: 185px;
  padding: 13px 18px;
  border-radius: 18px 18px 4px 18px;
  background: rgba(12,12,12,.92);
  border: 1px solid rgba(195,162,76,.35);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  animation: dmTooltip 4s ease-in-out infinite;
}

.dm-chat-tooltip span {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid #c3a24c;
  animation: dmTyping 4s steps(22) infinite;
}

.dm-chat-panel {
  position: absolute;
  right: 0;
  bottom: 148px;
  width: 305px;
  padding: 18px;
  border-radius: 26px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
    #101010;
  border: 1px solid rgba(195,162,76,.28);
  box-shadow: 0 30px 80px rgba(0,0,0,.38);
  opacity: 0;
  visibility: hidden;
  transform: translateY(25px) scale(.94);
  transition: .45s cubic-bezier(.22,1,.36,1);
}

.dm-chat-widget.panel-open .dm-chat-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.dm-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.dm-panel-head h4 {
  color: #fff;
  margin: 0 0 4px;
  font-size: 20px;
}

.dm-panel-head p {
  color: rgba(255,255,255,.62);
  margin: 0;
  font-size: 14px;
}

.dm-panel-head button {
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
}

.dm-panel-body {
  display: grid;
  gap: 10px;
}

.dm-panel-body a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  border-radius: 16px;
  background: rgba(255,255,255,.06);
  color: #fff;
  text-decoration: none;
  font-size: 15px;
  transition: .35s ease;
}

.dm-panel-body a i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c3a24c, #f4dd83);
  color: #111;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-panel-body a:hover {
  transform: translateX(-5px);
  background: rgba(195,162,76,.16);
}

@keyframes dmFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes dmRing {
  0% {
    transform: scale(.75);
    opacity: .75;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes dmGlow {
  0%, 100% {
    opacity: .45;
    transform: scale(.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}

@keyframes dmBadgeSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes dmTooltip {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-7px);
  }
}

@keyframes dmTyping {
  0% {
    width: 0;
  }
  45%, 70% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

@media (max-width: 575px) {
  .dm-chat-widget {
    right: 18px;
    bottom: 18px;
    width: 105px;
    height: 105px;
  }

  .dm-chat-btn {
    width: 105px;
    height: 105px;
  }

  .dm-agent-wrap {
    inset: 14px;
  }

  /*.dm-quote-badge {
    width: 48px;
    height: 48px;
  }*/

  .dm-chat-tooltip {
    right: 92px;
    top: 18px;
    min-width: 155px;
    font-size: 12px;
    padding: 11px 14px;
  }

  .dm-chat-panel {
    width: 280px;
    right: -4px;
    bottom: 125px;
  }
.dm-preview-card img{width:55%;}
.featured-projects h4{color:#444;}
.project-info p{color:#444;}
.project-info{border-radius: 0px!important;background: transparent!important;box-shadow: none;}
.dm-quote-badge{bottom:-25px;}
.ai-form-card{margin-top: 0rem;}
.ai-submit-btn{height:50px;}}


@media only screen and (max-width:1700px){
.eagle-main-wrap{width: min(650px, 50vw);}
.eagle-icons-row{top:50%;}
.robot-card{left: 55%;bottom: -150px;}
.dm-center-icon{top:38%;}}

@media only screen and (max-width:1500px){
.eagle-main-wrap{width: min(570px, 50vw);}
.eagle-icons-row{top:40%;}
.robot-card{left: 65%;bottom: -50px;}}

@media only screen and (max-width:1366px){
.robot-card{bottom:-100px;}
.dm-center-icon{top:35%;}}

@media only screen and (max-width:1280px){
.dm-center-icon{top:37%;}}

@media only screen and (max-width:1024px){
.dm-center-icon{top:40%;}}

@media only screen and (max-width:768px){
.eagle-main-wrap{width: min(550px, 80vw);}
.eagle-icons-row{top:60%;}
.robot-card{bottom:-200px;}}

@media only screen and (max-width:475px){
.robot-card{bottom:-250px;left:50%;}
.dm-center-icon{top:33%;}
.icon-1  { --size: 35px; left: 2%;  bottom: 28px; --delay: 0s; }
.icon-2  { --size: 35px; left: 12%; bottom: 82px; --delay: -1.2s; }
.icon-3  { --size: 35px; left: 23%; bottom: 34px; --delay: -2.4s; }
.icon-4  { --size: 35px; left: 35%; bottom: 88px; --delay: -3.6s; }
.icon-5  { --size: 35px; left: 47%; bottom: 26px; --delay: -4.8s; }
.icon-6  { --size: 35px; left: 59%; bottom: 86px; --delay: -6s; }
.icon-7  { --size: 35px; left: 70%; bottom: 34px; --delay: -7.2s; }
.icon-8  { --size: 35px; left: 79%; bottom: 80px; --delay: -8.4s; }
.icon-9  { --size: 35px; left: 89%; bottom: 34px; --delay: -9.6s; }
.icon-10 { --size: 35px; left: 43%; bottom: -18px; --delay: -10.8s; }}

#storyImage{width:100%;height:100%;/* Optional */}



/****INNERPAGE CSS STARTS HERE****/
.about-dm-innerpage-section{
  position:relative;
  /*min-height:360px;*/
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  isolation:isolate;
  padding:80px 20px;
  background:#f7f4ed;
}

/* Banner image */
.about-dm-banner-img{
  position:absolute;
  inset:0;
  width:100%;
  /*height:100%;
  object-fit:cover;*/
  object-position:center;
  z-index:-5;
  /*opacity:.42;
  filter:brightness(1.08) contrast(1.04) saturate(1.05);*/
  transform:scale(1.03);
  animation:dmBannerSoftZoom 14s ease-in-out infinite alternate;
}

/* Soft premium overlay */
.dm-soft-overlay{
  position:absolute;
  inset:0;
  z-index:-2;
  /*background:
    linear-gradient(
      90deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.72) 45%,
      rgba(255,255,255,.88) 100%
    ),
    radial-gradient(circle at 18% 60%, rgba(186,154,98,.22), transparent 32%),
    radial-gradient(circle at 82% 35%, rgba(255,255,255,.55), transparent 34%);*/
}

/* Background circles */
.dm-bg-circle{
  position:absolute;
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  z-index:-1;
  opacity:0.3;
  filter:drop-shadow(0 22px 42px rgba(80,65,35,.14));
}

.dm-circle-white{
  width:150px;
  right:7%;
  top:50%;
  transform:translateY(-50%);
  animation:dmWhiteCircleFloat 7s ease-in-out infinite alternate;
}

.dm-circle-gold{
  width:120px;
  left:7%;
  bottom:-70px;
  opacity:0.3;
  animation:dmGoldCircleFloat 8s ease-in-out infinite alternate;
}

/* Content */
.about-dm-content{
  position:relative;
  z-index:4;
  text-align:center;
  max-width:760px;
}

.about-dm-content span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 18px;
  margin-bottom:14px;
  border-radius:50px;
  background:rgba(255,255,255,.78);
  border:1px solid rgba(186,154,98,.28);
  color:#9d7a3f;
  font-size:13px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}

.about-dm-content h1{
  margin:0;
  color:#161616;
  font-size:clamp(40px, 2.5vw, 45px);
  line-height:1;
  font-weight:600;
}

.about-dm-content p{
  margin:18px auto 0;
  color:rgba(20,20,20,.72);
  font-size:20px;
  line-height:1.7;
}

/* Animations */
@keyframes dmBannerSoftZoom{
  from{transform:scale(1.03);}
  to{transform:scale(1.08);}
}

@keyframes dmWhiteCircleFloat{
  0%{
    transform:translateY(-50%) translateX(0) rotate(-5deg) scale(1);
  }
  100%{
    transform:translateY(-50%) translateX(-24px) rotate(8deg) scale(1.04);
  }
}

@keyframes dmGoldCircleFloat{
  0%{
    transform:translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  100%{
    transform:translateY(-22px) translateX(26px) rotate(12deg) scale(1.06);
  }
}

/* Laptop */
@media(max-width:1199px){
  .about-dm-innerpage-section{
    min-height:330px;
    padding:70px 20px;
  }

  .dm-circle-white{
    width:260px;
    height:260px;
    right:4%;
  }

  .dm-circle-gold{
    width:210px;
    height:210px;
    left:4%;
  }
}

/* Tablet */
@media(max-width:991px){
  .about-dm-innerpage-section{
    min-height:300px;
    padding:62px 18px;
  }

  .dm-circle-white{
    width:220px;
    height:220px;
    right:-45px;
    opacity:.42;
  }

  .dm-circle-gold{
    width:180px;
    height:180px;
    left:-55px;
    bottom:-55px;
    opacity:.28;
  }

  .about-dm-content h1{
    font-size:52px;
  }

  .about-dm-content p{
    font-size:16px;
  }
}

/* Mobile */
@media(max-width:575px){
  .about-dm-innerpage-section{
    min-height:260px;
    padding:52px 16px;
  }

  .dm-circle-white{
    width:165px;
    height:165px;
    right:-70px;
    top:46%;
    opacity:.35;
  }

  .dm-circle-gold{
    width:145px;
    height:145px;
    left:-70px;
    bottom:-42px;
    opacity:.24;
  }

  .about-dm-content span{
    font-size:10px;
    padding:7px 13px;
    margin-bottom:12px;

    letter-spacing:.12em;
  }

  .about-dm-content h1{
    font-size:40px;
    letter-spacing:-1px;
  }

  .about-dm-content p{
    margin-top:14px;
    font-size:14.5px;
    line-height:1.6;
  }
}

.dm-about-corporate-section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:90px 0;
  background:
    radial-gradient(circle at 8% 18%, rgba(186,154,98,.16), transparent 30%),
    radial-gradient(circle at 92% 80%, rgba(13,53,95,.10), transparent 32%),
    linear-gradient(135deg, #fffdf8 0%, #f8f4ec 52%, #ffffff 100%);
}

/* background animated shapes */
.dm-about-bg-shape{
  position:absolute;
  border-radius:50%;
  z-index:-1;
  pointer-events:none;
  opacity:.55;
  filter:blur(.2px);
}

.dm-about-shape-one{
  width:360px;
  height:360px;
  left:-160px;
  top:80px;
  background:rgba(186,154,98,.18);
  animation:dmShapeFloatOne 8s ease-in-out infinite alternate;
}

.dm-about-shape-two{
  width:280px;
  height:280px;
  right:-120px;
  bottom:70px;
  background:rgba(13,53,95,.10);
  animation:dmShapeFloatTwo 9s ease-in-out infinite alternate;
}

/* content */
.dm-about-content{
  position:relative;
  max-width:880px;
}

.dm-about-label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:9px 18px;
  margin-bottom:18px;
  border-radius:50px;
  background:#ffffff;
  border:1px solid rgba(186,154,98,.35);
  color:#9f7d42;
  font-size:13px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
  box-shadow:0 12px 35px rgba(186,154,98,.12);
}

.dm-about-label::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:50%;
  background:#ba9a62;
  box-shadow:0 0 0 6px rgba(186,154,98,.15);
}

.dm-about-content h2{
  margin:0 0 24px;
  color:#444;
  font-size:clamp(34px, 2.5vw, 40px);
  line-height:1.08;
  font-weight:400;
  letter-spacing:-2px;
}

.dm-about-content p{
  margin:0 0 15px;
  color:#4b5563;
  font-size:18px;
  line-height:1.85;
  font-weight:500;
}

.dm-about-content p:first-of-type{
  color:#6b3f27;
  font-size:21px;
  font-weight:500;
}

/* highlight boxes */
.dm-about-highlights{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:32px;
}

.dm-about-highlights div{
  position:relative;
  overflow:hidden;
  padding:15px 15px;
  border-radius:22px;
  /*background:rgba(255,255,255,.82);*/
  border:1px solid rgba(186,154,98,.18);
  box-shadow:0 18px 42px rgba(31,41,55,.08);
  transition:.35s ease;
}

.dm-about-highlights div::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(186,154,98,.16), transparent 60%);
  opacity:0;
  transition:.35s ease;
}

.dm-about-highlights div:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 55px rgba(31,41,55,.12);
}

.dm-about-highlights div:hover::before{
  opacity:1;
}

.dm-about-highlights strong{
  position:relative;
  display:block;
  color:#ba9a62;
  font-size:32px;
  line-height:1;
  font-weight:900;
  margin-bottom:8px;
}

.dm-about-highlights span{
  position:relative;
  color:#374151;
  font-size:14px;
  font-weight:800;
}

/* image column */
.dm-about-image-wrap{
  position:relative;
  max-width:520px;
  margin-left:auto;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.dm-about-image-card{
  position:relative;
  width:100%;
  transform:rotate(1.5deg);
  animation:dmImageFloat 7s ease-in-out infinite alternate;
}

.dm-about-image-card::before{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
}

.dm-about-image-card img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transform:scale(1.04);
  transition:.6s ease;
}

.dm-about-image-card:hover img{
  transform:scale(1.1);
}

/* floating mini cards */
.dm-about-floating-card{
  position:absolute;
  z-index:5;
  min-width:170px;
  padding:15px 18px;
  border-radius:18px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(186,154,98,.22);
  box-shadow:0 18px 42px rgba(31,41,55,.12);
  backdrop-filter:blur(14px);
}

.dm-about-floating-card strong{
  display:block;
  color:#0d355f;
  font-size:19px;
  font-weight:900;
  margin-bottom:4px;
}

.dm-about-floating-card span{
  display:block;
  color:#6b7280;
  font-size:13px;
  font-weight:700;
}

.dm-card-one{
  left:-10px;
  top:120px;
  animation:dmMiniCardOne 5s ease-in-out infinite alternate;
}

.dm-card-two{
  right:-5px;
  bottom:130px;
  animation:dmMiniCardTwo 5.5s ease-in-out infinite alternate;
}

.dm-about-circle-ring{
  position:absolute;
  width:190px;
  height:190px;
  right:20px;
  top:55px;
  border-radius:50%;
  border:1px dashed rgba(186,154,98,.45);
  animation:dmRingRotate 18s linear infinite;
  z-index:-1;
}

/* animations */
@keyframes dmShapeFloatOne{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(40px,30px,0) scale(1.08);}
}

@keyframes dmShapeFloatTwo{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-35px,-28px,0) scale(1.1);}
}

@keyframes dmImageFloat{
  from{transform:translateY(0) rotate(1.5deg);}
  to{transform:translateY(-16px) rotate(-1deg);}
}

@keyframes dmMiniCardOne{
  from{transform:translateY(0);}
  to{transform:translateY(-14px);}
}

@keyframes dmMiniCardTwo{
  from{transform:translateY(0);}
  to{transform:translateY(14px);}
}

@keyframes dmRingRotate{
  from{transform:rotate(0deg);}
  to{transform:rotate(360deg);}
}

/* Laptop */
@media(max-width:1199px){
  .dm-about-corporate-section{
    padding:78px 0;
  }

  .dm-about-content h2{
    font-size:46px;
  }

  .dm-about-image-wrap{
    min-height:500px;
  }

  .dm-about-image-card{
    max-width:385px;
  }
}

/* Tablet */
@media(max-width:991px){
  .dm-about-corporate-section{
    padding:70px 0;
  }

  .dm-about-content{
    max-width:100%;
  }

  .dm-about-content h2{
    max-width:720px;
    font-size:42px;
  }

  .dm-about-image-wrap{
    min-height:430px;
    margin:36px auto 0;
  }

  .dm-about-image-card{
    max-width:360px;
    aspect-ratio:1 / 1.05;
  }

  .dm-card-one{
    left:10%;
    top:50px;
  }

  .dm-card-two{
    right:10%;
    bottom:60px;
  }
}

/* Mobile */
@media(max-width:575px){
  .dm-about-corporate-section{
    padding:54px 0;
  }

  .dm-about-label{
    font-size:11px;
    padding:8px 14px;
    margin-bottom:16px;
    letter-spacing:.09em;
  }

  .dm-about-content h2{
    font-size:24px;
    line-height:1.15;
    letter-spacing:-1px;
    margin-bottom:20px;
  }

  .dm-about-content p,
  .dm-about-content p:first-of-type{
    font-size:15px;
    line-height:1.75;
  }

  .dm-about-highlights{
    grid-template-columns:1fr;
    margin-top:26px;
  }

  .dm-about-highlights div{
    padding:18px 16px;
    border-radius:18px;
  }

  .dm-about-highlights strong{
    font-size:28px;
  }

  .dm-about-image-wrap{
    min-height:360px;
    margin-top:28px;
  }

  .dm-about-image-card{
    max-width:285px;
    border-radius:26px;
  }

  .dm-about-floating-card{
    min-width:135px;
    padding:12px 14px;
    border-radius:15px;
  }

  .dm-about-floating-card strong{
    font-size:16px;
  }

  .dm-about-floating-card span{
    font-size:11px;
  }

  .dm-card-one{
    left:0;
    top:34px;
  }

  .dm-card-two{
    right:0;
    bottom:42px;
  }

  .dm-about-circle-ring{
    width:140px;
    height:140px;
    right:0;
    top:35px;
  }
}

.dm-about-highlights{
    display:flex;
    gap:22px;
    margin-top:45px;
    flex-wrap:wrap;
}

.dm-highlight-card{
    flex:1;
    min-width:180px;
    display:flex;
    align-items:center;
    gap:18px;
    padding:22px 24px;
    background:#fff;
    border-radius:18px;
    position:relative;
    overflow:hidden;
    transition:.45s;
    border:1px solid rgba(186,154,98,.18);
    box-shadow:
        0 12px 30px rgba(15,35,55,.08),
        inset 0 1px 0 rgba(255,255,255,.7);
}

.dm-highlight-card::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius:18px;
    background:linear-gradient(135deg,#ba9a62,#d8be8f,#ffffff);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;
    opacity:.45;
}

.dm-highlight-card:hover{
    transform:translateY(-8px);
    box-shadow:
        0 22px 45px rgba(0,0,0,.12);
}

.dm-highlight-card:hover .dm-highlight-icon{
    transform:rotate(-8deg) scale(1.08);
}

.dm-highlight-icon{
    width:68px;
    height:68px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    color:#fff;
    background: linear-gradient(135deg, #9b6e34, #1d1d1e);
    box-shadow:0 12px 25px rgba(13,53,95,.35);
    transition:.45s;
    flex-shrink:0;
}

.dm-highlight-content{
    display:flex;
    flex-direction:column;
}

.dm-highlight-content strong{
    font-size:35px;
    font-weight:500;
    line-height:30px;
    color:#444;
}

.dm-highlight-content span{
    margin-top:8px;
    font-size:15px;
    color:#666;
    font-weight:500;
    line-height:1.5;
}
@media (max-width:991px){

.dm-about-highlights{
    gap:16px;
}

.dm-highlight-card{
    min-width:calc(50% - 8px);
}

}

@media (max-width:575px){

.dm-about-highlights{
    flex-direction:column;
}

.dm-highlight-card{
    width:100%;
    min-width:100%;
    padding:18px;
}

.dm-highlight-icon{
    width:58px;
    height:58px;
    font-size:24px;
}

.dm-highlight-content strong{
    font-size:28px;
}

.dm-highlight-content span{
    font-size:14px;
}

}
.dm-about-premium-section{
  position:relative;
  padding:100px 0;
  overflow:hidden;
  background:#070707;
  isolation:isolate;
}

.dm-about-premium-bg{
  position:absolute;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(circle at 15% 20%, rgba(186,154,98,.28), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(0,170,110,.20), transparent 35%),
    linear-gradient(135deg, #080808 0%, #151515 50%, #090909 100%);
}

.dm-about-premium-section:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.dm-about-premium-wrap{
  position:relative;
  padding:55px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:30px;
  background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px);
  box-shadow:0 35px 90px rgba(0,0,0,.45);
}

.dm-about-intro{
  max-width:880px;
  margin-bottom:45px;
}

.dm-small-title{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  padding:9px 18px;
  border-radius:50px;
  color:#ba9a62;
  font-size:13px;
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  background:rgba(186,154,98,.12);
  border:1px solid rgba(186,154,98,.35);
}

.dm-about-intro h2{
  margin:0 0 20px;
  color:#fff;
  font-size:clamp(32px, 2.5vw, 40px);
  font-weight:400;
  line-height:1.1;
  letter-spacing:-1.5px;
}

.dm-about-intro p{
  margin:0;
  color:rgba(255,255,255,.78);
  font-size:18px;
  line-height:1.8;
}

.dm-about-intro strong{
  font-weight:500;
}

.dm-premium-card{
  position:relative;
  height:100%;
  padding:38px;
  border-radius:26px;
  overflow:hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.10), rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);
  transition:all .45s ease;
}

.dm-premium-card:before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  top:-70px;
  right:-70px;
  border-radius:50%;
  background:rgba(186,154,98,.18);
  filter:blur(10px);
  transition:.45s ease;
}

.dm-premium-card:hover{
  transform:translateY(-10px);
  border-color:rgba(186,154,98,.45);
  box-shadow:0 30px 70px rgba(0,0,0,.35);
}

.dm-premium-card:hover:before{
  transform:scale(1.25);
  background: rgb(137 117 22 / 18%);
}

.dm-card-icon{
  width:64px;
  height:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:26px;
  border-radius:20px;
  color:#111;
  font-size:28px;
  background:linear-gradient(135deg, #ba9a62, #f2d99d);
  box-shadow:0 15px 35px rgba(186,154,98,.28);
}

.dm-premium-card h4{
  margin:0 0 16px;
  color:#fff;
  font-size:26px;
  font-weight:800;
}

.dm-premium-card p{
  margin:0;
  color:rgba(255,255,255,.72);
  font-size:16px;
  line-height:1.8;
}

/* Responsive */
@media(max-width:991px){
  .dm-about-premium-section{
    padding:75px 0;
  }

  .dm-about-premium-wrap{
    padding:38px;
    border-radius:24px;
  }

  .dm-about-intro{
    margin-bottom:30px;
  }

  .dm-premium-card{
    padding:32px;
  }
}

@media(max-width:575px){
  .dm-about-premium-section{
    padding:55px 0;
  }

  .dm-about-premium-wrap{
    padding:26px 18px;
    border-radius:20px;
  }

  .dm-about-intro h2{
    font-size:30px;
    letter-spacing:-.8px;
  }

  .dm-about-intro p{
    font-size:15px;
    line-height:1.7;
  }

  .dm-premium-card{
    padding:26px 22px;
    border-radius:20px;
  }

  .dm-card-icon{
    width:56px;
    height:56px;
    font-size:24px;
    border-radius:17px;
  }

  .dm-premium-card h4{
    font-size:22px;
  }

  .dm-premium-card p{
    font-size:15px;
  }
}

.dm-animated-line {
  position: relative;
  width: 180px;
  height: 4px;
  margin: 18px 0;
  border-radius: 50px;
  overflow: hidden;
  background: rgba(186, 154, 98, 0.18);
}

.dm-animated-line::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    transparent,
    #ba9a62,
    #ffffff,
    #00aa6e,
    transparent
  );
  animation: dmLineMove 2.4s ease-in-out infinite;
}

.dm-animated-line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(186, 154, 98, 0.45),
    transparent
  );
  filter: blur(8px);
  animation: dmLineGlow 2.4s ease-in-out infinite;
}

@keyframes dmLineMove {
  0% {
    transform: translateX(-120%);
  }
  100% {
    transform: translateX(260%);
  }
}

@keyframes dmLineGlow {
  0%, 100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

/* Center version */
.dm-animated-line.center {
  margin-left: auto;
  margin-right: auto;
}

/* Mobile */
@media (max-width: 575px) {
  .dm-animated-line {
    width: 130px;
    height: 3px;
  }
}

.hero-title{
  margin:0;
  font-weight:800;
  line-height:1.12;
  color:#101010;
}

.years-highlight{
  position:relative;
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin-left:10px;
  color:#ba9a62;
  animation:yearsFloat 3.5s ease-in-out infinite;
}

.years-highlight::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:4px;
  border-radius:10px;
  background:linear-gradient(90deg,transparent,#ba9a62,transparent);
  transform:scaleX(0);
  transform-origin:left;
  animation:underlineGrow 1.4s ease forwards .5s;
}

.years-number{
  position:relative;
  display:inline-block;
  font-size:clamp(50px,7vw,98px);
  font-weight:950;
  line-height:.9;
  letter-spacing:-4px;
  background:linear-gradient(
    110deg,
    #8c6b2f 0%,
    #ba9a62 28%,
    #fff1b8 45%,
    #ba9a62 62%,
    #8c6b2f 100%
  );
  background-size:220% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:goldShimmer 5s ease-in-out infinite;
}

.years-number::after{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  right:2px;
  top:8px;
  background:#fff4c7;
  border-radius:50%;
  box-shadow:0 0 18px #ba9a62;
  opacity:0;
  animation:sparkleMove 5s ease-in-out infinite;
}

.years-text{
  font-size:clamp(18px,2vw,28px);
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:3px;
  color:#0d355f;
}

@keyframes goldShimmer{
  0%,70%{background-position:0% center;}
  100%{background-position:200% center;}
}

@keyframes underlineGrow{
  to{transform:scaleX(1);}
}

@keyframes sparkleMove{
  0%,68%{
    opacity:0;
    transform:translate(-40px,25px) scale(.4);
  }
  75%{
    opacity:1;
    transform:translate(-12px,8px) scale(1);
  }
  84%{
    opacity:1;
    transform:translate(8px,-6px) scale(.7);
  }
  92%,100%{
    opacity:0;
    transform:translate(24px,-18px) scale(.3);
  }
}

@keyframes yearsFloat{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-3px);}
}

@media(max-width:575px){
  .hero-title{
    text-align:center;
    letter-spacing:-1px;
  }

  .years-highlight{
    display:flex;
    justify-content:center;
    margin:14px auto 0;
  }
}










.dm-luxe-projects-section {
  position: relative;
  overflow: hidden;
padding-top: var(--def-padding); padding-bottom: var(--def-padding);	
  background:
    linear-gradient(180deg, #ffffff 0%, #fbf8f1 45%, #ffffff 100%);
  isolation: isolate;
}

/* ================= BACKGROUND ================= */

.dm-luxe-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  /*overflow: hidden;*/
  pointer-events: none;
}

.dm-luxe-bg::before {
  content: "";
  position: absolute;
  inset: 6%;
  background-image:
    linear-gradient(rgba(13, 53, 95, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 53, 95, .045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 70%);
  animation: dmLuxeGridMove 22s linear infinite;
}

.dm-luxe-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(186, 154, 98, .16), transparent 35%),
    radial-gradient(circle at 50% 55%, rgba(13, 53, 95, .09), transparent 45%);
  animation: dmLuxeSpotlight 6s ease-in-out infinite alternate;
}

.dm-bg-orb {
  position: absolute;
  width: 360px;
  height: 360px;
  border-radius: 50%;
  filter: blur(22px);
  opacity: .34;
  animation: dmLuxeOrbFloat 10s ease-in-out infinite alternate;
}

.dm-bg-orb-one {
  left: -130px;
  top: 120px;
  background: radial-gradient(circle, rgba(186, 154, 98, .55), transparent 68%);
}

.dm-bg-orb-two {
  right: -130px;
  bottom: 80px;
  background: radial-gradient(circle, rgba(13, 53, 95, .32), transparent 70%);
  animation-delay: 1.4s;
}

.dm-bg-orb-three {
  left: 48%;
  top: 4%;
  background: radial-gradient(circle, rgba(186, 154, 98, .26), transparent 70%);
  animation-delay: 2.2s;
}

@keyframes dmLuxeGridMove {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(46px);
  }
}

@keyframes dmLuxeSpotlight {
  from {
    opacity: .55;
    transform: scale(1);
  }

  to {
    opacity: .9;
    transform: scale(1.08);
  }
}

@keyframes dmLuxeOrbFloat {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(42px, -28px, 0) scale(1.12);
  }
}

/* ================= SCROLL REVEAL ================= */

.dm-luxe-heading,
.dm-luxe-slider-wrap {
  opacity: 0;
  transform: translateY(65px);
  transition:
    opacity .9s ease,
    transform 1s cubic-bezier(.19, 1, .22, 1);
}

.dm-luxe-projects-section.is-visible .dm-luxe-heading,
.dm-luxe-projects-section.is-visible .dm-luxe-slider-wrap {
  opacity: 1;
  transform: translateY(0);
}

.dm-luxe-projects-section.is-visible .dm-luxe-slider-wrap {
  transition-delay: .18s;
}

/* ================= HEADING ================= */

.dm-luxe-heading {
  max-width: 760px;
  margin: 0 auto 58px;
  text-align: center;
}

.dm-luxe-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: #ba9a62;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.dm-luxe-kicker::before,
.dm-luxe-kicker::after {
  content: "";
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ba9a62);
}

.dm-luxe-kicker::after {
  background: linear-gradient(90deg, #ba9a62, transparent);
}

.dm-luxe-heading h2 {
  margin: 0;
  color: #0d355f;
  font-size: clamp(34px, 5vw, 68px);
  font-weight: 950;
  line-height: 1.02;
  letter-spacing: -2.2px;
}

.dm-luxe-heading p {
  max-width: 620px;
  margin: 18px auto 0;
  color: rgba(13, 53, 95, .70);
  font-size: 16px;
  line-height: 1.78;
}

/* ================= SWIPER ================= */

.dm-luxe-slider-wrap {
  position: relative;
}

.dmLuxeProjectSwiper {
  overflow: visible;
  padding: 44px 0 68px;
}

.dmLuxeProjectSwiper .swiper-wrapper {
  align-items: center;
}

.dmLuxeProjectSwiper .swiper-slide {
  width: 330px;
  height: 305px;
  opacity: .62;
  transform: scale(.84);
  filter: saturate(.85);
  transition:
    opacity .55s ease,
    transform .65s cubic-bezier(.19, 1, .22, 1),
    filter .55s ease;
}

.dmLuxeProjectSwiper .swiper-slide-prev,
.dmLuxeProjectSwiper .swiper-slide-next {
  opacity: .82;
  transform: scale(.91);
  filter: saturate(1);
}

.dmLuxeProjectSwiper .swiper-slide-active {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1.08);
}

/* ================= CARD ================= */

.dm-luxe-card {
  --mx: 50%;
  --my: 50%;

  position: relative;
  height: 100%;
  padding: 34px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  text-align: center;
  text-decoration: none;
  border-radius: 34px;
  overflow: hidden;
  background:
    radial-gradient(circle at var(--mx) var(--my), rgba(186, 154, 98, .20), transparent 34%),
    linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(255, 255, 255, .78));
  border: 1px solid rgba(13, 53, 95, .12);
  /*box-shadow:
    0 28px 75px rgba(13, 53, 95, .12),
    inset 0 1px 0 rgba(255, 255, 255, .9);*/
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}

/* rotating border */
.dm-luxe-card::before {
  content: "";
  position: absolute;
  inset: -3px;
  z-index: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 72deg,
    rgba(186, 154, 98, .95) 112deg,
    rgba(255, 255, 255, .9) 138deg,
    rgba(13, 53, 95, .95) 178deg,
    transparent 238deg,
    transparent 360deg
  );
  opacity: 0;
  animation: dmLuxeBorderSpin 4.2s linear infinite;
}

/* clean card surface */
.dm-luxe-card::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: 33px;
  background:
    radial-gradient(circle at 50% 0%, rgba(186, 154, 98, .19), transparent 42%),
    linear-gradient(145deg, #ffffff 0%, #fbf8f1 100%);
}

/* moving scan */
.dm-card-scan {
  position: absolute;
  top: -80%;
  left: -70%;
  z-index: 3;
  width: 60%;
  height: 260%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, .88),
    transparent
  );
  transform: rotate(24deg);
  opacity: 0;
  pointer-events: none;
}

.dm-active-pulse {
  position: absolute;
  inset: 18px;
  z-index: 1;
  border-radius: 28px;
  border: 1px solid rgba(186, 154, 98, .18);
  opacity: 0;
  pointer-events: none;
}

.swiper-slide-active .dm-luxe-card::before {
  opacity: 1;
}

.swiper-slide-active .dm-luxe-card {
  border-color: rgba(186, 154, 98, .42);
  /*box-shadow:
    0 42px 95px rgba(13, 53, 95, .23),
    0 15px 42px rgba(186, 154, 98, .20),
    inset 0 1px 0 rgba(255, 255, 255, .95);*/
  animation: dmActiveCardBreath 2.8s ease-in-out infinite;
}

.swiper-slide-active .dm-card-scan {
  animation: dmLuxeScan 3.1s ease-in-out infinite;
}

.swiper-slide-active .dm-active-pulse {
  animation: dmLuxePulseFrame 2.6s ease-in-out infinite;
}

@keyframes dmLuxeBorderSpin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes dmLuxeScan {
  0% {
    left: -80%;
    opacity: 0;
  }

  20% {
    opacity: .85;
  }

  50% {
    left: 120%;
    opacity: .65;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes dmActiveCardBreath {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-7px);
  }
}

@keyframes dmLuxePulseFrame {
  0%, 100% {
    opacity: .16;
    transform: scale(.96);
  }

  50% {
    opacity: .48;
    transform: scale(1.03);
  }
}

/* ================= LOGO STAGE ================= */

.dm-logo-stage {
  position: relative;
  z-index: 4;
  width: 205px;
  height: 138px;
  display: grid;
  place-items: center;
}

.dm-logo-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(186, 154, 98, .15), transparent 52%),
    rgba(255, 255, 255, .92);
  border: 1px solid rgba(186, 154, 98, .24);
  box-shadow:
    0 18px 42px rgba(13, 53, 95, .09),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  transform: rotate(-3deg);
  transition: all .55s cubic-bezier(.19, 1, .22, 1);
}

.dm-logo-ring {
  position: absolute;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  border: 1px dashed rgba(186, 154, 98, .58);
  opacity: 0;
  transform: scale(.8);
  pointer-events: none;
}

.dm-logo-stage img {
  position: relative;
  z-index: 5;
  max-width: 165px;
  max-height: 82px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 16px rgba(13, 53, 95, .10))
    brightness(1.04)
    contrast(1.05);
  transition: all .6s cubic-bezier(.19, 1, .22, 1);
}

.dm-logo-dot {
  position: absolute;
  z-index: 6;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  opacity: 0;
}

.dot-a {
  top: 15px;
  right: 38px;
  background: #ba9a62;
  box-shadow: 0 0 18px rgba(186, 154, 98, .9);
}

.dot-b {
  left: 34px;
  bottom: 20px;
  background: #0d355f;
  box-shadow: 0 0 18px rgba(13, 53, 95, .55);
}

.dot-c {
  right: 34px;
  bottom: 18px;
  background: #ffffff;
  border: 2px solid #ba9a62;
  box-shadow: 0 0 18px rgba(186, 154, 98, .55);
}

.swiper-slide-active .dm-logo-stage::before {
  transform: rotate(0deg) scale(1.07);
  border-color: rgba(186, 154, 98, .44);
}

.swiper-slide-active .dm-logo-ring {
  opacity: 1;
  animation: dmLogoRingRotate 5s linear infinite;
}

.swiper-slide-active .dm-logo-stage img {
  transform: scale(1.13);
  animation: dmLogoFloatPremium 2.8s ease-in-out infinite;
}

.swiper-slide-active .dm-logo-dot {
  opacity: 1;
  animation: dmDotPremiumPulse 1.8s ease-in-out infinite;
}

.swiper-slide-active .dot-b {
  animation-delay: .35s;
}

.swiper-slide-active .dot-c {
  animation-delay: .7s;
}

@keyframes dmLogoRingRotate {
  from {
    transform: scale(.92) rotate(0deg);
  }

  to {
    transform: scale(.92) rotate(360deg);
  }
}

@keyframes dmLogoFloatPremium {
  0%, 100% {
    transform: translateY(0) scale(1.13);
  }

  50% {
    transform: translateY(-9px) scale(1.16);
  }
}

@keyframes dmDotPremiumPulse {
  0%, 100% {
    transform: scale(1);
    opacity: .7;
  }

  50% {
    transform: scale(1.75);
    opacity: 1;
  }
}

/* ================= TEXT ================= */

.dm-luxe-info {
  position: relative;
  z-index: 4;
}

.dm-luxe-info h4 {
  margin: 0 0 12px;
  color: #0d355f;
  font-size: 25px;
  font-weight: 400;
  line-height: 1.2;
  /*letter-spacing: -.4px;*/
}

.dm-luxe-info span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: #ba9a62;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: .4px;
  opacity: .65;
  transform: translateY(8px);
  transition: all .45s ease;
}

.dm-luxe-info span i {
  font-size: 15px;
}

.swiper-slide-active .dm-luxe-info span {
  opacity: 1;
  transform: translateY(0);
}

/* ================= HOVER ================= */

.dm-luxe-card:hover {
  border-color: rgba(186, 154, 98, .5);
  box-shadow:
    0 46px 100px rgba(13, 53, 95, .24),
    0 18px 48px rgba(186, 154, 98, .22);
}

.dm-luxe-card:hover .dm-logo-stage img {
  filter:
    drop-shadow(0 16px 22px rgba(13, 53, 95, .16))
    brightness(1.07)
    contrast(1.07);
}

/* ================= BOTTOM CONTROLS ================= */

.dm-luxe-slider-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 4px;
}

.dm-luxe-prev,
.dm-luxe-next {
  width: 50px;
  height: 50px;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #0d355f;
  background: #ffffff;
  box-shadow:
    0 16px 38px rgba(13, 53, 95, .14),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: all .35s ease;
}

.dm-luxe-prev:hover,
.dm-luxe-next:hover {
  color: #ffffff;
  background: #0d355f;
  transform: translateY(-4px);
}

.dm-luxe-progress {
  position: relative;
  width: min(430px, 48vw);
  height: 4px;
  overflow: hidden;
  border-radius: 30px;
  background: rgba(13, 53, 95, .12);
}

.dm-luxe-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #0d355f, #ba9a62);
  transition: width .45s ease;
}

/* ================= RESPONSIVE ================= */

@media (max-width: 1199px) {
  .dm-luxe-projects-section {
    padding: 95px 0;
  }

  .dmLuxeProjectSwiper .swiper-slide {
    width: 305px;
    height: 285px;
  }

  .dm-logo-stage {
    width: 188px;
    height: 126px;
  }

  .dm-logo-stage img {
    max-width: 152px;
    max-height: 76px;
  }
}

@media (max-width: 991px) {
  .dm-luxe-projects-section {
    padding: 78px 0;
  }

  .dm-luxe-heading {
    margin-bottom: 36px;
  }

  .dmLuxeProjectSwiper {
    padding: 28px 0 54px;
  }

  .dmLuxeProjectSwiper .swiper-slide {
    width: 285px;
    height: 265px;
  }

  .dm-logo-stage {
    width: 176px;
    height: 116px;
  }

  .dm-logo-stage img {
    max-width: 140px;
    max-height: 70px;
  }

  .dm-luxe-info h4 {
    font-size: 20px;
  }
}

@media (max-width: 575px) {
  .dm-luxe-projects-section {
    padding: 62px 0;
  }

  .dm-luxe-kicker {
    font-size: 11px;
    letter-spacing: 1.4px;
    gap: 8px;
  }

  .dm-luxe-kicker::before,
  .dm-luxe-kicker::after {
    width: 22px;
  }

  .dm-luxe-heading h2 {
    font-size: 34px;
    letter-spacing: -1px;
  }

  .dm-luxe-heading p {
    font-size: 14px;
    line-height: 1.65;
  }

  .dmLuxeProjectSwiper .swiper-slide {
    width: 258px;
    height: 248px;
  }

  .dm-luxe-card {
    padding: 26px 22px;
    border-radius: 28px;
    gap: 22px;
  }

  .dm-luxe-card::after {
    border-radius: 27px;
  }

  .dm-logo-stage {
    width: 158px;
    height: 104px;
  }

  .dm-logo-stage::before {
    border-radius: 24px;
  }

  .dm-logo-stage img {
    max-width: 128px;
    max-height: 62px;
  }

  .dm-logo-ring {
    width: 96px;
    height: 96px;
  }

  .dm-luxe-info h4 {
    font-size: 18px;
  }

  .dm-luxe-info span {
    font-size: 12px;
  }

  .dm-luxe-prev,
  .dm-luxe-next {
    width: 44px;
    height: 44px;
  }

  .dm-luxe-progress {
    width: 42vw;
  }
}


.services-btn-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 45px;
  text-align: center;
}

.services-btn-portfolio {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  min-width: 185px;
  padding: 15px 32px;
  overflow: hidden;
  border-radius: 50px;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: .4px;
  background: #b4955c;
  box-shadow:
    0 18px 42px rgba(13, 53, 95, .25),
    0 8px 20px rgba(186, 154, 98, .18),
    inset 0 1px 0 rgba(255, 255, 255, .28);
  transition: all .45s cubic-bezier(.19, 1, .22, 1);
}

.services-btn-portfolio::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -2;
  border-radius: inherit;
  background: #b4955c;
}

.services-btn-portfolio::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -70%;
  z-index: -1;
  width: 55%;
  height: 260%;
  background: #b4955c;
  transform: rotate(24deg);
  opacity: 0;
  transition: all .75s ease;
}

.services-btn-portfolio span,
.services-btn-portfolio i {
  position: relative;
  z-index: 2;
}

.services-btn-portfolio i {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #0d355f;
  background: #ffffff;
  font-size: 15px;
  transition: all .45s ease;
}

.services-btn-portfolio:hover {
  color: #ffffff;
  transform: translateY(-5px);
  box-shadow:
    0 26px 62px rgba(13, 53, 95, .32),
    0 12px 30px rgba(186, 154, 98, .28),
    inset 0 1px 0 rgba(255, 255, 255, .36);
}

.services-btn-portfolio:hover::after {
  left: 120%;
  opacity: 1;
}

.services-btn-portfolio:hover i {
  transform: translateX(5px) rotate(-35deg);
  color: #ffffff;
  background: #ba9a62;
}

.services-btn-portfolio:active {
  transform: translateY(-2px) scale(.98);
}

/* Mobile */
@media (max-width: 575px) {
  .services-btn-wrap {
    margin-top: 32px;
  }

  .services-btn-portfolio {
    min-width: 165px;
    padding: 13px 24px;
    font-size: 14px;
  }

  .services-btn-portfolio i {
    width: 29px;
    height: 29px;
    font-size: 14px;
  }
}

.dm-store-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.dm-store-links a {
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 112px;
  padding: 9px 13px;
  border-radius: 50px;
  text-decoration: none;
  color: #0d355f;
  background: rgba(255, 255, 255, .92);
  border: 1px solid rgba(186, 154, 98, .34);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  box-shadow:
    0 10px 24px rgba(13, 53, 95, .10),
    inset 0 1px 0 rgba(255, 255, 255, .85);
  transition: all .35s ease;
}

.dm-store-links a i {
  color: #ba9a62;
  font-size: 15px;
  transition: all .35s ease;
}

.dm-store-links a:hover {
  color: #ffffff;
  background: #0d355f;
  border-color: #0d355f;
  transform: translateY(-4px);
  box-shadow:
    0 16px 34px rgba(13, 53, 95, .20),
    0 8px 22px rgba(186, 154, 98, .18);
}

.dm-store-links a:hover i {
  color: #ba9a62;
  transform: scale(1.12);
}

/* Override old span style only for store buttons */
.dm-luxe-info .dm-store-links span {
  display: inline;
  opacity: 1;
  transform: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: 0;
}

/* Mobile */
@media (max-width: 575px) {
  .dm-store-links {
    gap: 7px;
    margin-top: 10px;
  }

  .dm-store-links a {
    min-width: 100px;
    padding: 8px 10px;
    font-size: 11px;
  }

  .dm-store-links a i {
    font-size: 14px;
  }
}

.dm-luxe-projects-section {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* Keep all main content above background image */
.dm-luxe-projects-section .padding-left-right,
.dm-luxe-projects-section .container-fluid,
.dm-luxe-slider-wrap,
.services-btn-wrap {
  position: relative;
  z-index: 5;
}
.project-overview-img img{position: absolute;right: 0;width: 30%;opacity: 0.3;top:0rem;}



.dm-logo-clean-marquee {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 18px 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Smooth side fade without adding background */
.dm-ai-logo-row {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding: 14px 0;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    #000 8%,
    #000 92%,
    transparent 100%
  );
}

.dm-ai-logo-row + .dm-ai-logo-row {
  margin-top: 12px;
}

.dm-ai-logo-track {
  display: flex;
  align-items: center;
  gap: 24px;
  width: max-content;
  will-change: transform;
  animation: dmLogoScrollLeft 34s linear infinite;
}

.dm-ai-logo-row.reverse .dm-ai-logo-track {
  animation-name: dmLogoScrollRight;
  animation-duration: 60s;
}

.dm-ai-logo-stage:hover .dm-ai-logo-track {
  animation-play-state: paused;
}

/* Premium logo tile */
.dm-ai-logo-unit {
  position: relative;
  flex: 0 0 auto;
  width: 300px;
  height: 120px;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 24px;

  box-shadow:
    0 18px 42px rgba(0, 0, 0, .18),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  transform: translateZ(0);
  transition:
    transform .45s ease,
    box-shadow .45s ease,
    border-color .45s ease;
}

/* Elegant animated shine on each logo card */
.dm-ai-logo-unit::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent 0%,
    transparent 38%,
    rgba(186, 154, 98, .22) 48%,
    rgba(255, 255, 255, .85) 50%,
    rgba(186, 154, 98, .18) 54%,
    transparent 66%,
    transparent 100%
  );
  transform: translateX(-135%);
  animation: dmLogoCardShine 5.5s ease-in-out infinite;
  pointer-events: none;
}

/* Thin premium border glow */
.dm-ai-logo-unit::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 18px;
  border: 1px solid rgba(13, 53, 95, .08);
  pointer-events: none;
}

.dm-ai-logo-unit img {
  position: relative;
  z-index: 2;
  max-width: 100%;
  max-height: 85px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter:
    drop-shadow(0 10px 14px rgba(13, 53, 95, .14))
    saturate(1.05);
  transition:
    transform .45s ease,
    filter .45s ease;
}

.dm-ai-logo-unit:hover {
  transform: translateY(-8px) scale(1.045);
  border-color: rgba(186, 154, 98, .75);
  box-shadow:
    0 28px 65px rgba(0, 0, 0, .28),
    0 0 35px rgba(186, 154, 98, .20),
    inset 0 1px 0 rgba(255, 255, 255, .96);
}

.dm-ai-logo-unit:hover img {
  transform: scale(1.08);
  filter:
    drop-shadow(0 14px 18px rgba(13, 53, 95, .22))
    saturate(1.14)
    contrast(1.04);
}

/* Marquee animations */
@keyframes dmLogoScrollLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@keyframes dmLogoScrollRight {
  from {
    transform: translateX(-50%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes dmLogoCardShine {
  0%, 58% {
    transform: translateX(-135%);
  }
  100% {
    transform: translateX(135%);
  }
}

/* Laptop */
@media (max-width: 1199px) {
  .dm-ai-logo-unit {
    width: 235px;
    height: 110px;
    padding: 24px 30px;
  }

  .dm-ai-logo-track {
    gap: 20px;
  }
}

/* Tablet */
@media (max-width: 991px) {
  .dm-logo-clean-marquee {
    padding: 12px 0;
  }

  .dm-ai-logo-row {
    padding: 11px 0;
  }

  .dm-ai-logo-unit {
    width: 210px;
    height: 100px;
    padding: 22px 26px;
    border-radius: 20px;
  }

  .dm-ai-logo-unit img {
    max-height: 56px;
  }
}

/* Mobile */
@media (max-width: 575px) {
  .dm-ai-logo-row {
    padding: 9px 0;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
  }

  .dm-ai-logo-row + .dm-ai-logo-row {
    margin-top: 6px;
  }

  .dm-ai-logo-track {
    gap: 14px;
    animation-duration: 25s;
  }

  .dm-ai-logo-row.reverse .dm-ai-logo-track {
    animation-duration: 29s;
  }

  .dm-ai-logo-unit {
    width: 170px;
    height: 84px;
    padding: 16px 20px;
    border-radius: 17px;
  }

  .dm-ai-logo-unit::after {
    inset: 6px;
    border-radius: 13px;
  }

  .dm-ai-logo-unit img {
    max-height: 44px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  .dm-ai-logo-track,
  .dm-ai-logo-unit::before {
    animation: none;
  }
}

/* ==============================
   Corporate AI Portfolio
================================ */

.dm-corp-portfolio {
  position: relative;
  padding: 80px 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 12% 8%, rgba(186, 154, 98, 0.16), transparent 28%),
    radial-gradient(circle at 90% 12%, rgba(13, 53, 95, 0.14), transparent 30%),
    linear-gradient(135deg, #f7f9fc 0%, #ffffff 45%, #f3efe7 100%);
}

.dm-corp-ai-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgba(13, 53, 95, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 53, 95, 0.045) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.8;
  mask-image: radial-gradient(circle at center, #000 35%, transparent 80%);
}

/* Main Card */
.dm-corp-card {
  position: relative;
  height: 100%;
  padding: 14px;
  border-radius: 30px;
  background:
    linear-gradient(#ffffff, #ffffff) padding-box,
    linear-gradient(135deg, rgba(13, 53, 95, 0.32), rgba(186, 154, 98, 0.55), rgba(13, 53, 95, 0.24)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 22px 55px rgba(13, 53, 95, 0.13),
    0 8px 20px rgba(186, 154, 98, 0.08);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.45s ease, box-shadow 0.45s ease;
  animation: dmCorpFadeUp 0.8s ease both;
}

.dm-corp-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 34px 80px rgba(13, 53, 95, 0.22),
    0 15px 34px rgba(186, 154, 98, 0.15);
}

/* Animated Corner Glow */
.dm-corp-card::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(186, 154, 98, 0.26), transparent 68%);
  filter: blur(4px);
  opacity: 0.9;
  pointer-events: none;
  transition: transform 0.5s ease;
}

.dm-corp-card:hover::before {
  transform: scale(1.22);
}

/* Screenshot Preview */
.dm-corp-preview {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  background: #eef3f8;
  border: 1px solid rgba(13, 53, 95, 0.10);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65);
}

/* Browser Bar */
.dm-preview-bar {
  height: 38px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  gap: 7px;
  background:
    linear-gradient(180deg, #102f4b 0%, #0d355f 100%);
}

.dm-preview-bar i {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
}

.dm-preview-bar i:nth-child(1) {
  background: #ba9a62;
}

.dm-preview-bar i:nth-child(2) {
  background: rgba(255,255,255,0.60);
}

.dm-preview-bar i:nth-child(3) {
  background: rgba(255,255,255,0.35);
}

/* Image must remain fully visible */
.dm-preview-image {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(186, 154, 98, 0.10), transparent 32%),
    linear-gradient(135deg, #f8fafc, #ffffff);
  overflow: hidden;
}

.dm-preview-image::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(13, 53, 95, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 53, 95, 0.045) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity: 0.45;
  pointer-events: none;
}

/* Animated scan line */
.dm-preview-image::after {
  content: "";
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(186, 154, 98, 0.20),
    rgba(255, 255, 255, 0.42),
    transparent
  );
  transform: skewX(-18deg);
  animation: dmScanMove 4.8s ease-in-out infinite;
  pointer-events: none;
}

.dm-corp-portfolio .project-bg {
  position: relative;
  z-index: 2;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  filter: drop-shadow(0 16px 24px rgba(13, 53, 95, 0.14));
  transition: transform 0.6s ease, filter 0.6s ease;
}

.dm-corp-card:hover .project-bg {
  transform: scale(1.025);
  filter:
    drop-shadow(0 20px 30px rgba(13, 53, 95, 0.20))
    saturate(1.05)
    contrast(1.03);
}

/* Content Area */
.dm-corp-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 20px;
  padding: 26px 10px 8px;
  align-items: start;
}

/* Logo Box */
.dm-corp-logo {
  width: 112px;
  height: 86px;
  padding: 15px;
  border-radius: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(145deg, #ffffff, #f7f8fa);
  border: 1px solid rgba(13, 53, 95, 0.10);
  box-shadow:
    0 15px 35px rgba(13, 53, 95, 0.14),
    inset 0 0 0 1px rgba(255,255,255,0.7);
}

.dm-corp-logo img {
  width: 100%;
  max-width: 88px;
  height: auto;
  max-height: 56px;
  object-fit: contain;
  display: block;
}

/* Text */
.dm-corp-text {
  min-width: 0;
}

.dm-corp-tag {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 6px 12px;
  border-radius: 50px;
  color: #0d355f;
  background: rgba(186, 154, 98, 0.15);
  border: 1px solid rgba(186, 154, 98, 0.32);
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  text-transform: uppercase;
}

.dm-corp-text h4 {
  margin: 0 0 9px;
  color: #0d355f;
  font-size: 25px;
  line-height: 1.18;
  font-weight: 400;
}

.dm-corp-text p {
  margin: 0;
  color: #5c6878;
  font-size: 14.5px;
  line-height: 1.65;
}

/* Button */
.dm-corp-btn {
  grid-column: 2;
  width: fit-content;
  min-height: 45px;
  margin-top: 18px;
  padding: 12px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 50px;
  color: #ffffff;
  background:
    linear-gradient(135deg, #0d355f, #174b7e);
  text-decoration: none;
  font-size: 15px;
  font-weight:500;
  box-shadow: 0 14px 28px rgba(13, 53, 95, 0.22);
  transition: transform 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.dm-corp-btn i {
  font-size: 12px;
  transition: transform 0.35s ease;
}

.dm-corp-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  background:
    linear-gradient(135deg, #ba9a62, #d4b678);
  box-shadow: 0 17px 34px rgba(186, 154, 98, 0.30);
}

.dm-corp-btn:hover i {
  transform: translateX(4px);
}

/* ==============================
   Responsive
================================ */

@media (max-width: 1199px) {
  .dm-corp-content {
    grid-template-columns: 100px 1fr;
    gap: 18px;
  }

  .dm-corp-logo {
    width: 100px;
    height: 80px;
  }

  .dm-corp-logo img {
    max-width: 78px;
  }

  .dm-corp-text h4 {
    font-size: 23px;
  }
}

@media (max-width: 991px) {
  .dm-corp-portfolio {
    padding: 65px 0;
  }

  .dm-corp-card {
    padding: 12px;
    border-radius: 26px;
  }

  .dm-corp-preview {
    border-radius: 21px;
  }

  .dm-preview-bar {
    height: 34px;
  }

  .dm-preview-image {
    padding: 10px;
  }

  .dm-corp-content {
    grid-template-columns: 88px 1fr;
    gap: 15px;
    padding: 22px 6px 6px;
  }

  .dm-corp-logo {
    width: 88px;
    height: 72px;
    border-radius: 18px;
    padding: 12px;
  }

  .dm-corp-logo img {
    max-width: 68px;
    max-height: 48px;
  }

  .dm-corp-text h4 {
    font-size: 21px;
  }

  .dm-corp-text p {
    font-size: 13.5px;
    line-height: 1.6;
  }

  .dm-corp-btn {
    margin-top: 15px;
  }
}

@media (max-width: 767px) {
  .dm-corp-portfolio {
    padding: 55px 0;
  }

  .dm-corp-content {
    grid-template-columns: 82px 1fr;
  }

  .dm-corp-logo {
    width: 82px;
    height: 68px;
  }

  .dm-corp-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 575px) {
  .dm-corp-portfolio {
    padding: 45px 0;
  }

  .dm-corp-card {
    padding: 10px;
    border-radius: 22px;
  }

  .dm-corp-preview {
    border-radius: 18px;
  }

  .dm-preview-bar {
    height: 32px;
    padding: 0 12px;
  }

  .dm-preview-bar i {
    width: 8px;
    height: 8px;
  }

  .dm-preview-image {
    aspect-ratio: 16 / 10;
    padding: 8px;
  }

  .dm-corp-content {
    grid-template-columns: 74px 1fr;
    gap: 13px;
    padding: 20px 4px 4px;
  }

  .dm-corp-logo {
    width: 74px;
    height: 64px;
    border-radius: 16px;
    padding: 10px;
  }

  .dm-corp-logo img {
    max-width: 60px;
    max-height: 42px;
  }

  .dm-corp-tag {
    font-size: 9px;
    padding: 5px 10px;
  }

  .dm-corp-text h4 {
    font-size: 20px;
  }

  .dm-corp-text p {
    font-size: 13px;
    line-height: 1.55;
  }

  .dm-corp-btn {
    min-height: 44px;
    font-size: 13px;
  }
}

/* ==============================
   Animations
================================ */

@keyframes dmCorpFadeUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes dmScanMove {
  0% {
    left: -45%;
    opacity: 0;
  }
  18% {
    opacity: 1;
  }
  55% {
    left: 115%;
    opacity: 1;
  }
  100% {
    left: 115%;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dm-corp-card,
  .dm-preview-image::after {
    animation: none;
  }

  .dm-corp-card,
  .project-bg,
  .dm-corp-btn {
    transition: none;
  }
}

/* ================================
   AI PREMIUM PORTFOLIO DESIGN
================================ */

/* ================================
   CLEAN AI PREMIUM PORTFOLIO
   Light Background + Full Image
================================ */

.dm-clean-portfolio-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0;
  background:
    radial-gradient(circle at 8% 12%, rgba(207, 184, 141, 0.18), transparent 28%),
    radial-gradient(circle at 92% 10%, rgba(13, 53, 95, 0.12), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ef 100%);
  isolation: isolate;
}

.dm-clean-bg-grid {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.42;
  background-image:
    linear-gradient(rgba(13, 53, 95, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(13, 53, 95, 0.045) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(circle at center, #000 0%, transparent 78%);
}

/* Heading */
.dm-clean-portfolio-head {
  max-width: 820px;
  margin: 0 auto 38px;
  text-align: center;
}

.dm-clean-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 9px 17px;
  border-radius: 999px;
  color: #9f7c39;
  background: #ffffff;
  border: 1px solid rgba(186, 154, 98, 0.32);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 16px 40px rgba(13, 53, 95, 0.08);
}

.dm-clean-label::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ba9a62;
  box-shadow: 0 0 0 7px rgba(186, 154, 98, 0.16);
}

.dm-clean-portfolio-head h2 {
  margin: 0;
  color: #0d355f;
  font-size: clamp(34px, 5vw, 62px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.055em;
}

.dm-clean-portfolio-head p {
  max-width: 650px;
  margin: 18px auto 0;
  color: rgba(18, 31, 48, 0.72);
  font-size: 16px;
  line-height: 1.75;
}

/* Tabs */
.dm-clean-tabs-wrap {
  width: fit-content;
  max-width: 100%;
  margin: 0 auto 42px;
  padding: 9px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(13, 53, 95, 0.10);
  box-shadow:
    0 22px 60px rgba(13, 53, 95, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
}

.dm-clean-tab {
  position: relative;
  overflow: hidden;
  border: 0;
  outline: none;
  cursor: pointer;
  min-height: 45px;
  padding: 11px 22px;
  border-radius: 999px;
  background: transparent;
  color: rgba(13, 53, 95, 0.75);
  font-size: 15px;
  font-weight: 500;
  transition: 0.35s ease;
}

.dm-clean-tab::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d355f, #174d82);
  border-radius: inherit;
  opacity: 0;
  transform: scale(0.85);
  transition: 0.35s ease;
  z-index: 0;
}

.dm-clean-tab::after {
  content: "";
  position: absolute;
  top: -90%;
  left: -35%;
  width: 36%;
  height: 280%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.48), transparent);
  transform: rotate(25deg) translateX(-170%);
  z-index: 2;
}

.dm-clean-tab {
  z-index: 1;
}

.dm-clean-tab.active {
  color: #ffffff;
  box-shadow: 0 14px 34px rgba(13, 53, 95, 0.22);
}

.dm-clean-tab.active::before {
  opacity: 1;
  transform: scale(1);
}

.dm-clean-tab.active::after {
  animation: dmCleanTabShine 1.1s ease;
}

.dm-clean-tab:hover {
  transform: translateY(-2px);
}

.dm-clean-tab,
.dm-clean-tab::before {
  isolation: isolate;
}

.dm-clean-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dm-clean-tab {
  color: rgba(13, 53, 95, 0.78);
}

.dm-clean-tab.active {
  color: #ffffff;
}

.dm-clean-tab.active {
  position: relative;
}

.dm-clean-tab.active {
  z-index: 3;
}

@keyframes dmCleanTabShine {
  from {
    transform: rotate(25deg) translateX(-170%);
  }
  to {
    transform: rotate(25deg) translateX(420%);
  }
}

/* Grid */
.dm-clean-project-grid {
  align-items: stretch;
}

.dm-clean-project-item {
  transition: opacity 0.35s ease, transform 0.35s ease, filter 0.35s ease;
}

.dm-clean-project-item.dm-hide {
  display: none;
}

.dm-clean-project-item.dm-show {
  animation: dmCleanReveal 0.55s ease both;
}

@keyframes dmCleanReveal {
  from {
    opacity: 0;
    transform: translateY(22px) scale(0.97);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* Card */
.dm-clean-project-card {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 34px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(13, 53, 95, 0.11);
  box-shadow:
    0 28px 80px rgba(13, 53, 95, 0.12),
    inset 0 1px 0 rgba(255,255,255,0.95);
  transition: 0.45s ease;
}

.dm-clean-project-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 0%, rgba(207,184,141,0.18), transparent 28%),
    radial-gradient(circle at 95% 15%, rgba(13,53,95,0.10), transparent 30%);
  opacity: 0;
  transition: 0.45s ease;
  pointer-events: none;
}

.dm-clean-project-card:hover {
  transform: translateY(-10px);
  border-color: rgba(186, 154, 98, 0.38);
  box-shadow:
    0 36px 95px rgba(13, 53, 95, 0.17),
    0 18px 42px rgba(186, 154, 98, 0.10);
}

.dm-clean-project-card:hover::before {
  opacity: 1;
}

/* Full image browser frame */
.dm-clean-screen {
  position: relative;
  margin: 16px;
  overflow: hidden;
  border-radius: 26px;
  background: #f2f4f7;
  border: 1px solid rgba(13, 53, 95, 0.10);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    0 16px 45px rgba(13, 53, 95, 0.10);
}

.dm-clean-browser-bar {
  height: 38px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(180deg, #ffffff, #eef1f5);
  border-bottom: 1px solid rgba(13, 53, 95, 0.08);
}

.dm-clean-browser-bar span {
  width: 9px;
  height: 9px;
  display: block;
  border-radius: 50%;
}

.dm-clean-browser-bar span:nth-child(1) {
  background: #ff6b6b;
}

.dm-clean-browser-bar span:nth-child(2) {
  background: #f4c542;
}

.dm-clean-browser-bar span:nth-child(3) {
  background: #45c486;
}

/* Most important part: full image visible */
.dm-clean-image-box {
  position: relative;
  padding: 14px;
  background:
    linear-gradient(135deg, #f9fafc, #eef2f7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.dm-clean-image-box::after {
  content: "";
  position: absolute;
  inset: 14px;
  border-radius: 18px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(13, 53, 95, 0.06);
}

.dm-clean-image-box img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  object-position: center center;
  border-radius: 18px;
  transition: transform 0.55s ease, filter 0.55s ease;
}

/* small zoom only, image remains full */
.dm-clean-project-card:hover .dm-clean-image-box img {
  transform: scale(1.025);
  filter: saturate(1.06) contrast(1.03);
}

/* Content */
.dm-clean-content {
  position: relative;
  padding: 8px 28px 28px;
}

.dm-clean-logo {
  width: 118px;
  height: 76px;
  margin-bottom: 18px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(13, 53, 95, 0.10);
  box-shadow: 0 18px 44px rgba(13, 53, 95, 0.12);
}

.dm-clean-logo img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.dm-clean-category {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(186, 154, 98, 0.13);
  color: #9d7a39;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.dm-clean-content h3 {
  margin: 0 0 10px;
  color: #0d355f;
  font-size: 25px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.035em;
}

.dm-clean-content p {
  margin: 0;
  min-height: 78px;
  color: rgba(18, 31, 48, 0.72);
  font-size: 15px;
  line-height: 1.72;
}

/* Button */
.dm-clean-btn {
  position: relative;
  overflow: hidden;
  margin-top: 24px;
  min-height: 54px;
  width:45%;	
  padding: 14px 16px 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  border-radius: 18px;
  text-decoration: none;
  color: #ffffff;
  background: #0d355f;
  font-size: 16px;
  font-weight: 500;
  transition: 0.35s ease;
}

.dm-clean-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0d355f 0%, #174f86 55%, #ba9a62 130%);
  opacity: 1;
  z-index: 0;
}

.dm-clean-btn::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -40%;
  width: 34%;
  height: 260%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.36), transparent);
  transform: rotate(25deg) translateX(-180%);
  transition: 0.7s ease;
  z-index: 1;
}

.dm-clean-btn span,
.dm-clean-btn i {
  position: relative;
  z-index: 2;
}

.dm-clean-btn i {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  transition: 0.35s ease;
}

.dm-clean-btn:hover {
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 18px 38px rgba(13, 53, 95, 0.22);
}

.dm-clean-btn:hover::after {
  transform: rotate(25deg) translateX(430%);
}

.dm-clean-btn:hover i {
  transform: translateX(4px);
  background: rgba(255,255,255,0.24);
}

/* Responsive */
@media (max-width: 1199px) {
  .dm-clean-image-box {
    height: 330px;
  }
}

@media (max-width: 991px) {
  .dm-clean-portfolio-section {
    padding: 78px 0;
  }

  .dm-clean-tabs-wrap {
    border-radius: 28px;
  }

  .dm-clean-tab {
    flex: 1 1 calc(33.333% - 9px);
  }

  .dm-clean-image-box {
    height: 290px;
  }

  .dm-clean-content p {
    min-height: 104px;
  }
}

@media (max-width: 767px) {
  .dm-clean-portfolio-section {
    padding: 60px 0;
  }

  .dm-clean-portfolio-head {
    text-align: left;
    margin-bottom: 30px;
  }

  .dm-clean-portfolio-head p {
    font-size: 15px;
  }

  .dm-clean-tabs-wrap {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    width: 100%;
    padding: 8px;
    border-radius: 999px;
    scrollbar-width: none;
  }

  .dm-clean-tabs-wrap::-webkit-scrollbar {
    display: none;
  }

  .dm-clean-tab {
    flex: 0 0 auto;
    min-height: 42px;
    padding: 10px 17px;
    font-size: 13px;
    white-space: nowrap;
  }

  .dm-clean-project-card {
    border-radius: 26px;
  }

  .dm-clean-screen {
    margin: 11px;
    border-radius: 22px;
  }

  .dm-clean-browser-bar {
    height: 34px;
  }

  .dm-clean-image-box {
    height: 250px;
    padding: 10px;
  }

  .dm-clean-content {
    padding: 8px 20px 22px;
  }

  .dm-clean-logo {
    width: 104px;
    height: 68px;
    border-radius: 19px;
  }

  .dm-clean-content h3 {
    font-size: 22px;
  }

  .dm-clean-content p {
    min-height: auto;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .dm-clean-portfolio-head h2 {
    font-size: 32px;
  }

  .dm-clean-image-box {
    height: 220px;
  }

  .dm-clean-logo {
    width: 96px;
    height: 62px;
  }

  .dm-clean-btn {
    min-height: 50px;
    border-radius: 16px;
  }
}

/* FIX: Active tab text visibility */
.dm-clean-tab {
  position: relative;
  isolation: isolate;
  color: rgba(13, 53, 95, 0.78) !important;
}

.dm-clean-tab::before {
  z-index: -1;
}

.dm-clean-tab.active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d355f, #174d82);
}

.dm-clean-tab.active::before {
  opacity: 0 !important;
}

.dm-clean-tab::after {
  pointer-events: none;
}

/* =========================================================
   WEB DEVELOPMENT INNER-PAGE SECTION
========================================================= */

.dm-webdev-section {
    --dm-navy: #102842;
    --dm-navy-light: #27445f;
    --dm-gold: #b89a62;
    --dm-gold-light: #d8c39b;
    --dm-text: #506071;
    --dm-border: rgba(16, 40, 66, 0.11);
    --dm-soft-bg: #f7f5f1;

    position: relative;
    width: 100%;
    padding: clamp(75px, 8vw, 130px) 0;
    background:
        radial-gradient(
            circle at 85% 35%,
            rgba(184, 154, 98, 0.11),
            transparent 31%
        ),
        linear-gradient(180deg, #ffffff 0%, #fbfaf8 100%);
    overflow: hidden;
    isolation: isolate;
}

.dm-webdev-section,
.dm-webdev-section * {
    box-sizing: border-box;
}

/* Main container */

.dm-webdev-container {
    position: relative;
    z-index: 3;
    width: min(1240px, calc(100% - 60px));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: center;
    gap: clamp(55px, 7vw, 105px);
}

/* =========================================================
   BACKGROUND DETAILS
========================================================= */

.dm-webdev-pattern {
    position: absolute;
    inset: 0;
    z-index: -3;
    opacity: 0.28;
    pointer-events: none;
    background-image:
        linear-gradient(
            rgba(16, 40, 66, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(16, 40, 66, 0.035) 1px,
            transparent 1px
        );
    background-size: 58px 58px;
    mask-image: linear-gradient(
        90deg,
        transparent,
        black 40%,
        black 100%
    );
    -webkit-mask-image: linear-gradient(
        90deg,
        transparent,
        black 40%,
        black 100%
    );
}

.dm-webdev-glow {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(10px);
}

.dm-glow-one {
    width: 320px;
    height: 320px;
    top: -160px;
    right: 8%;
    background: rgba(184, 154, 98, 0.09);
}

.dm-glow-two {
    width: 220px;
    height: 220px;
    left: -120px;
    bottom: -80px;
    background: rgba(16, 40, 66, 0.055);
}

/* =========================================================
   CONTENT
========================================================= */

.dm-webdev-content {
    position: relative;
    max-width: 570px;
}

.dm-webdev-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 21px;
    color: var(--dm-gold);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 2.1px;
    text-transform: uppercase;
}

.dm-eyebrow-icon {
    position: relative;
    width: 34px;
    height: 10px;
    display: inline-flex;
    align-items: center;
}

.dm-eyebrow-icon::before {
    content: "";
    width: 100%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--dm-gold)
    );
}

.dm-eyebrow-icon span {
    position: absolute;
    right: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dm-gold);
    box-shadow: 0 0 0 5px rgba(184, 154, 98, 0.13);
    animation: dmEyebrowPulse 2.5s ease-in-out infinite;
}

/* Heading */

.dm-webdev-title {
    margin: 0;
    color: var(--dm-navy);
    font-family: "Segoe UI", Arial, sans-serif;
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -2.8px;
}

.dm-title-small {
    display: block;
    margin-bottom: 8px;
    color: var(--dm-gold);
    font-size: clamp(21px, 2vw, 29px);
    font-weight: 500;
    line-height: 1;
    letter-spacing: 7px;
}

.dm-title-main {
    display: block;
    font-size: clamp(48px, 5vw, 77px);
}

.dm-webdev-title-line {
    position: relative;
    width: 122px;
    height: 3px;
    margin: 29px 0 31px;
    background: rgba(184, 154, 98, 0.2);
    overflow: hidden;
}

.dm-webdev-title-line span {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        var(--dm-gold),
        var(--dm-gold-light)
    );
    transform-origin: left;
    animation: dmLineGrow 1.3s ease forwards;
}

/* Description */

.dm-webdev-description {
    max-width: 555px;
    margin: 0;
    color: var(--dm-text);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: clamp(17px, 1.45vw, 20px);
    font-weight: 400;
    line-height: 1.85;
}

/* Principles */

.dm-webdev-principles {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 22px;
    margin-top: 35px;
}

.dm-webdev-principle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--dm-navy);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-weight: 650;
    line-height: 1.4;
}

.dm-principle-icon {
    width: 25px;
    height: 25px;
    flex: 0 0 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(184, 154, 98, 0.38);
    border-radius: 50%;
    background: rgba(184, 154, 98, 0.08);
}

.dm-principle-icon svg {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: var(--dm-gold);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Signature text */

.dm-webdev-signature {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 37px;
}

.dm-signature-line {
    width: 44px;
    height: 1px;
    flex: 0 0 44px;
    background: var(--dm-gold);
}

.dm-webdev-signature p {
    margin: 0;
    color: #7c8792;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 13px;
    font-style: italic;
    line-height: 1.6;
}

/* =========================================================
   IMAGE AREA
========================================================= */

.dm-webdev-visual {
    position: relative;
    width: 100%;
    padding: 18px 18px 32px 0;
}

.dm-webdev-visual::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 74%;
    height: 84%;
    border-radius: 28px;
    background:
        linear-gradient(
            145deg,
            rgba(184, 154, 98, 0.18),
            rgba(184, 154, 98, 0.035)
        );
    transform: translate(18px, -18px);
    z-index: -1;
}

.dm-webdev-image-frame {
    position: relative;
    padding: 11px;
    border: 1px solid rgba(16, 40, 66, 0.12);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.86);
    box-shadow:
        0 35px 80px rgba(16, 40, 66, 0.13),
        0 10px 25px rgba(16, 40, 66, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.dm-webdev-image-wrap {
    position: relative;
    width: 100%;
    height: clamp(440px, 44vw, 580px);
    border-radius: 20px;
    background: #eae8e3;
    overflow: hidden;
    isolation: isolate;
}

/*
   IMAGE POSITION CONTROL

   Change object-position when needed:
   center center;
   center top;
   60% center;
*/

.dm-webdev-image {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center center;
    transform: scale(1.015);
    transition:
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.6s ease;
}

.dm-webdev-image-frame:hover .dm-webdev-image {
    transform: scale(1.055);
    filter: saturate(1.04) contrast(1.02);
}

/* Subtle overlay keeps image clear */

.dm-webdev-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(7, 25, 43, 0.38) 100%
        ),
        linear-gradient(
            90deg,
            rgba(16, 40, 66, 0.05),
            transparent 45%
        );
}

/* Moving image reflection */

.dm-webdev-image-shine {
    position: absolute;
    z-index: 3;
    top: -35%;
    left: -70%;
    width: 45%;
    height: 170%;
    pointer-events: none;
    opacity: 0.22;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.7),
        transparent
    );
    transform: rotate(18deg);
    animation: dmImageShine 7s ease-in-out infinite;
}

/* Image caption */

.dm-webdev-image-caption {
    position: absolute;
    z-index: 5;
    left: 25px;
    right: 25px;
    bottom: 24px;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 17px 20px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-radius: 15px;
    background: rgba(10, 31, 51, 0.74);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.dm-caption-status {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #d6bd8b;
    box-shadow:
        0 0 0 6px rgba(214, 189, 139, 0.13),
        0 0 18px rgba(214, 189, 139, 0.65);
    animation: dmStatusPulse 2.3s ease-in-out infinite;
}

.dm-webdev-image-caption div {
    min-width: 0;
}

.dm-webdev-image-caption small,
.dm-webdev-image-caption strong {
    display: block;
    font-family: "Segoe UI", Arial, sans-serif;
}

.dm-webdev-image-caption small {
    margin-bottom: 4px;
    color: rgba(255, 255, 255, 0.62);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.dm-webdev-image-caption strong {
    color: #ffffff;
    font-size: clamp(14px, 1.4vw, 17px);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.2px;
}

/* Floating code element */

.dm-webdev-floating-code {
    position: absolute;
    z-index: 6;
    top: 25px;
    right: 24px;
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 16px;
    color: #ffffff;
    background: rgba(16, 40, 66, 0.54);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: dmCodeFloat 4.5s ease-in-out infinite;
}

.dm-webdev-floating-code span {
    font-family: Consolas, Monaco, monospace;
    font-size: 19px;
    font-weight: 700;
}

/* Decorative index beneath image */

.dm-webdev-image-index {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 18px;
    padding-right: 4px;
}

.dm-webdev-image-index span {
    color: var(--dm-gold);
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.dm-webdev-image-index div {
    width: 45px;
    height: 1px;
    background: rgba(16, 40, 66, 0.22);
}

.dm-webdev-image-index small {
    color: #89939d;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
}

/* Image frame corners */

.dm-frame-corner {
    position: absolute;
    z-index: 10;
    width: 28px;
    height: 28px;
    pointer-events: none;
}

.dm-corner-top-left {
    top: -5px;
    left: -5px;
    border-top: 2px solid var(--dm-gold);
    border-left: 2px solid var(--dm-gold);
    border-radius: 6px 0 0;
}

.dm-corner-top-right {
    top: -5px;
    right: -5px;
    border-top: 2px solid var(--dm-gold);
    border-right: 2px solid var(--dm-gold);
    border-radius: 0 6px 0 0;
}

.dm-corner-bottom-left {
    bottom: -5px;
    left: -5px;
    border-bottom: 2px solid var(--dm-gold);
    border-left: 2px solid var(--dm-gold);
    border-radius: 0 0 0 6px;
}

.dm-corner-bottom-right {
    right: -5px;
    bottom: -5px;
    border-right: 2px solid var(--dm-gold);
    border-bottom: 2px solid var(--dm-gold);
    border-radius: 0 0 6px;
}

/* =========================================================
   SCROLL REVEAL
========================================================= */

.dm-motion-ready .dm-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.dm-motion-ready .dm-reveal.dm-visible {
    opacity: 1;
    transform: translateY(0);
}

.dm-motion-ready .dm-webdev-visual.dm-reveal {
    transition-delay: 0.14s;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes dmEyebrowPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(184, 154, 98, 0.13);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 8px rgba(184, 154, 98, 0.06);
    }
}

@keyframes dmLineGrow {
    from {
        transform: scaleX(0);
    }

    to {
        transform: scaleX(1);
    }
}

@keyframes dmImageShine {
    0%,
    30% {
        left: -70%;
    }

    55%,
    100% {
        left: 140%;
    }
}

@keyframes dmStatusPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.22);
    }
}

@keyframes dmCodeFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-7px);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-webdev-container {
        width: min(1120px, calc(100% - 50px));
        gap: 55px;
    }

    .dm-webdev-title {
        letter-spacing: -2px;
    }

    .dm-webdev-image-wrap {
        height: 510px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-webdev-section {
        padding: 85px 0;
    }

    .dm-webdev-container {
        width: min(760px, calc(100% - 44px));
        grid-template-columns: 1fr;
        gap: 55px;
    }

    .dm-webdev-content {
        max-width: 680px;
    }

    .dm-webdev-description {
        max-width: 660px;
    }

    .dm-webdev-visual {
        max-width: 730px;
        padding-right: 0;
    }

    .dm-webdev-visual::before {
        width: 80%;
        transform: translate(15px, -16px);
    }

    .dm-webdev-image-wrap {
        height: auto;
        aspect-ratio: 16 / 11;
        /*min-height: 480px;*/
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-webdev-section {
        padding: 68px 0;
    }

    .dm-webdev-container {
        width: calc(100% - 34px);
        gap: 43px;
    }

    .dm-webdev-eyebrow {
        align-items: flex-start;
        margin-bottom: 17px;
        font-size: 10px;
        letter-spacing: 1.6px;
    }

    .dm-eyebrow-icon {
        margin-top: 3px;
    }

    .dm-webdev-title {
        letter-spacing: -1.5px;
    }

    .dm-title-small {
        margin-bottom: 7px;
        font-size: 18px;
        letter-spacing: 5px;
    }

    .dm-title-main {
        font-size: clamp(39px, 12.3vw, 58px);
        line-height: 0.98;
    }

    .dm-webdev-title-line {
        width: 92px;
        margin: 24px 0 25px;
    }

    .dm-webdev-description {
        font-size: 16px;
        line-height: 1.75;
    }

    .dm-webdev-principles {
        display: grid;
        grid-template-columns: 1fr;
        gap: 13px;
        margin-top: 28px;
    }

    .dm-webdev-principle {
        width: 100%;
    }

    .dm-webdev-signature {
        align-items: flex-start;
        margin-top: 29px;
    }

    .dm-signature-line {
        margin-top: 10px;
    }

    .dm-webdev-visual {
        padding: 10px 0 22px;
    }

    .dm-webdev-visual::before {
        top: -2px;
        right: -5px;
        width: 77%;
        height: 76%;
        border-radius: 20px;
        transform: translate(6px, -10px);
    }

    .dm-webdev-image-frame {
        padding: 7px;
        border-radius: 21px;
    }

    .dm-webdev-image-wrap {
        /*min-height: 420px;*/
        /*aspect-ratio: 4 / 5;*/
        border-radius: 15px;
    }

    .dm-webdev-image-caption {
        left: 15px;
        right: 15px;
        bottom: 0px;
        min-height: 72px;
        padding: 14px 15px;
        border-radius: 12px;
    }

    .dm-webdev-image-caption strong {
        font-size: 14px;
    }

    .dm-webdev-floating-code {
        top: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
        border-radius: 13px;
    }

    .dm-webdev-floating-code span {
        font-size: 16px;
    }

    .dm-webdev-image-index {
        justify-content: flex-start;
        margin-top: 15px;
    }

    .dm-frame-corner {
        width: 22px;
        height: 22px;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-webdev-container {
        width: calc(100% - 28px);
    }

    .dm-title-main {
        font-size: 39px;
    }

    .dm-webdev-image-wrap {
        min-height: 385px;
    }

    .dm-webdev-image-caption {
        gap: 11px;
    }

    .dm-webdev-image-caption small {
        letter-spacing: 1px;
    }

    .dm-webdev-image-index small {
        letter-spacing: 1px;
    }
}

/* =========================================================
   REDUCED MOTION ACCESSIBILITY
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-webdev-section *,
    .dm-webdev-section *::before,
    .dm-webdev-section *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .dm-motion-ready .dm-reveal {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   MOBILE APP DEVELOPMENT SECTION
========================================================= */

.dm-mobileapp-section {
    background:
        radial-gradient(
            circle at 82% 38%,
            rgba(184, 154, 98, 0.13),
            transparent 31%
        ),
        linear-gradient(
            180deg,
            #fbfaf8 0%,
            #ffffff 100%
        );
}

/* Mobile heading requires slightly controlled sizing */

.dm-mobileapp-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-mobileapp-section .dm-title-main {
    font-size: clamp(44px, 4.6vw, 72px);
}

/* Bootstrap phone icon */

.dm-mobile-floating-icon i {
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
}

/* Better image position for phone or app mockup images */

.dm-mobileapp-section .dm-webdev-image {
    object-position: center center;
}

/* Slightly taller visual area for mobile device mockups */

.dm-mobileapp-section .dm-webdev-image-wrap {
    height: clamp(460px, 46vw, 600px);
}

/* Optional subtle mobile-screen glow */

.dm-mobileapp-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: 9%;
    left: 50%;
    width: 46%;
    height: 68%;
    border-radius: 40%;
    background: rgba(184, 154, 98, 0.09);
    filter: blur(45px);
    transform: translateX(-50%);
    pointer-events: none;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 991px) {
    .dm-mobileapp-section .dm-webdev-image-wrap {
        height: auto;
        /*min-height: 500px;
        aspect-ratio: 16 / 11;*/
    }

    .dm-mobileapp-section .dm-title-main {
        font-size: clamp(45px, 8vw, 66px);
    }
}

@media (max-width: 767px) {
    .dm-mobileapp-section .dm-title-small {
        font-size: 17px;
        letter-spacing: 3.5px;
    }

    .dm-mobileapp-section .dm-title-main {
        font-size: clamp(36px, 11vw, 52px);
        line-height: 1;
    }

    .dm-mobileapp-section .dm-webdev-image-wrap {
        /*min-height: 425px;*/
        /*aspect-ratio: 4 / 5;*/
    }

    .dm-mobileapp-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    .dm-mobileapp-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3px;
    }

    .dm-mobileapp-section .dm-title-main {
        font-size: 36px;
    }

    .dm-mobileapp-section .dm-webdev-image-wrap {
        min-height: 100%;
    }
}

/* =========================================================
   BRANDING & IDENTITY SECTION
========================================================= */

.dm-branding-section {
    background:
        radial-gradient(
            circle at 84% 35%,
            rgba(184, 154, 98, 0.14),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8f4 100%
        );
}

.dm-branding-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-branding-section .dm-title-main {
    font-size: clamp(49px, 5.2vw, 80px);
}

/* Bootstrap icon */

.dm-branding-floating-icon i {
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
}

/* Image positioning */

.dm-branding-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

/* Warm artistic image treatment */

.dm-branding-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(10, 27, 44, 0.03) 30%,
            rgba(7, 24, 40, 0.42) 100%
        ),
        linear-gradient(
            120deg,
            rgba(184, 154, 98, 0.08),
            transparent 48%
        );
}

/* Subtle creative glow */

.dm-branding-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -20%;
    right: -12%;
    width: 55%;
    height: 65%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.12);
    filter: blur(55px);
    pointer-events: none;
}

/* Responsive adjustments */

@media (max-width: 991px) {
    .dm-branding-section .dm-title-main {
        font-size: clamp(48px, 9vw, 72px);
    }
}

@media (max-width: 767px) {
    .dm-branding-section .dm-title-small {
        font-size: 17px;
        letter-spacing: 3.5px;
    }

    .dm-branding-section .dm-title-main {
        font-size: clamp(42px, 13vw, 58px);
    }
}

@media (max-width: 420px) {
    .dm-branding-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3px;
    }

    .dm-branding-section .dm-title-main {
        font-size: 41px;
    }
}

/* =========================================================
   VISUAL COMMUNICATION SECTION
========================================================= */

.dm-visualcomm-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.14),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #faf9f6 0%,
            #ffffff 100%
        );
}

/* Heading adjustments */

.dm-visualcomm-section .dm-title-small {
    letter-spacing: 6px;
}

.dm-visualcomm-section .dm-title-main {
    font-size: clamp(42px, 4.35vw, 68px);
    letter-spacing: -2.6px;
}

/* Floating Bootstrap icon */

.dm-visualcomm-floating-icon i {
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
}

/* Image control */

.dm-visualcomm-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

/* Visual communication image treatment */

.dm-visualcomm-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(9, 28, 47, 0.02) 28%,
            rgba(7, 24, 40, 0.44) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.1),
            transparent 48%
        );
}

/* Subtle creative light effect */

.dm-visualcomm-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -15%;
    width: 60%;
    height: 65%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.13);
    filter: blur(55px);
    pointer-events: none;
}

/* Optional secondary glow */

.dm-visualcomm-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -22%;
    left: -17%;
    width: 48%;
    height: 52%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.12);
    filter: blur(58px);
    pointer-events: none;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-visualcomm-section .dm-title-main {
        font-size: clamp(40px, 4.3vw, 61px);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-visualcomm-section .dm-title-main {
        font-size: clamp(47px, 8.5vw, 68px);
    }

    .dm-visualcomm-section .dm-webdev-image {
        object-position: center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-visualcomm-section .dm-title-small {
        font-size: 17px;
        letter-spacing: 4px;
    }

    .dm-visualcomm-section .dm-title-main {
        font-size: clamp(35px, 10.5vw, 50px);
        line-height: 1.03;
        letter-spacing: -1.4px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .dm-visualcomm-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.75;
    }

    .dm-visualcomm-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-visualcomm-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3px;
    }

    .dm-visualcomm-section .dm-title-main {
        font-size: 34px;
        letter-spacing: -1px;
    }
}

/* =========================================================
   SOCIAL MEDIA OPTIMIZATION SECTION
========================================================= */

.dm-socialmedia-section {
    background:
        radial-gradient(
            circle at 84% 35%,
            rgba(184, 154, 98, 0.14),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf8f4 100%
        );
}

/* Heading adjustments */

.dm-socialmedia-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-socialmedia-section .dm-title-main {
    font-size: clamp(41px, 4.25vw, 67px);
    letter-spacing: -2.5px;
}

/* Floating social media icon */

.dm-socialmedia-floating-icon i {
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
}

/* Image positioning */

.dm-socialmedia-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

/* Image overlay */

.dm-socialmedia-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(9, 27, 46, 0.02) 25%,
            rgba(7, 24, 40, 0.45) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.09),
            transparent 48%
        );
}

/* Subtle social network glow */

.dm-socialmedia-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 58%;
    height: 65%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.13);
    filter: blur(55px);
    pointer-events: none;
}

/* Decorative communication pulse */

.dm-socialmedia-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -22%;
    left: -16%;
    width: 47%;
    height: 50%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.11);
    filter: blur(58px);
    pointer-events: none;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-socialmedia-section .dm-title-main {
        font-size: clamp(39px, 4.1vw, 59px);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-socialmedia-section .dm-title-main {
        font-size: clamp(46px, 8vw, 67px);
    }

    .dm-socialmedia-section .dm-webdev-image {
        object-position: center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-socialmedia-section .dm-title-small {
        font-size: 16px;
        letter-spacing: 3.5px;
    }

    .dm-socialmedia-section .dm-title-main {
        font-size: clamp(34px, 10.2vw, 48px);
        line-height: 1.04;
        letter-spacing: -1.3px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .dm-socialmedia-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.75;
    }

    .dm-socialmedia-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-socialmedia-section .dm-title-small {
        font-size: 14px;
        letter-spacing: 2.8px;
    }

    .dm-socialmedia-section .dm-title-main {
        font-size: 33px;
        letter-spacing: -1px;
    }
}

/* =========================================================
   PAYMENT GATEWAY INTEGRATION
========================================================= */

.dm-payment-section {
    background:
        radial-gradient(
            circle at 84% 35%,
            rgba(184, 154, 98, 0.14),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #faf9f6 0%,
            #ffffff 100%
        );
}

/* Heading */

.dm-payment-section .dm-title-small {
    letter-spacing: 4.5px;
}

.dm-payment-section .dm-title-main {
    font-size: clamp(41px, 4.35vw, 68px);
    letter-spacing: -2.5px;
}

/* Floating security icon */

.dm-payment-floating-icon i {
    color: #ffffff;
    font-size: 25px;
    line-height: 1;
}

/* Image */

.dm-payment-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

/* Secure payment image overlay */

.dm-payment-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(8, 28, 46, 0.02) 25%,
            rgba(6, 24, 40, 0.48) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.09),
            transparent 48%
        );
}

/* Secure transaction glow */

.dm-payment-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 58%;
    height: 65%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.13);
    filter: blur(55px);
    pointer-events: none;
}

/* Secondary depth glow */

.dm-payment-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -22%;
    left: -16%;
    width: 48%;
    height: 52%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.13);
    filter: blur(58px);
    pointer-events: none;
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-payment-section .dm-title-main {
        font-size: clamp(39px, 4.1vw, 59px);
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-payment-section .dm-title-main {
        font-size: clamp(46px, 8vw, 67px);
    }

    .dm-payment-section .dm-webdev-image {
        object-position: center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-payment-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3px;
    }

    .dm-payment-section .dm-title-main {
        font-size: clamp(34px, 10.5vw, 49px);
        line-height: 1.04;
        letter-spacing: -1.3px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .dm-payment-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.75;
    }

    .dm-payment-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-payment-section .dm-title-small {
        font-size: 13px;
        letter-spacing: 2.3px;
    }

    .dm-payment-section .dm-title-main {
        font-size: 33px;
        letter-spacing: -1px;
    }
}

/* =========================================================
   AI FOR SALES AUTOMATION
========================================================= */

.dm-ai-sales-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 85%,
            rgba(16, 40, 66, 0.055),
            transparent 27%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf9f6 100%
        );
}

/* =========================================================
   HEADING
========================================================= */

.dm-ai-sales-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-ai-sales-section .dm-title-main {
    font-size: clamp(43px, 4.65vw, 72px);
    letter-spacing: -2.6px;
}

/* =========================================================
   MULTIPLE DESCRIPTION PARAGRAPHS
========================================================= */

.dm-ai-sales-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-ai-sales-description p {
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.dm-ai-sales-description p:first-child {
    color: var(--dm-navy);
    font-weight: 600;
}

/* =========================================================
   IMAGE
========================================================= */

.dm-ai-sales-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

.dm-ai-sales-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(7, 25, 43, 0.02) 22%,
            rgba(6, 22, 38, 0.5) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.1),
            transparent 48%
        );
}

/* AI intelligence glow */

.dm-ai-sales-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.14);
    filter: blur(58px);
    pointer-events: none;
}

/* Data depth glow */

.dm-ai-sales-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -22%;
    left: -16%;
    width: 50%;
    height: 52%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.15);
    filter: blur(60px);
    pointer-events: none;
}

/* =========================================================
   FLOATING ICON
========================================================= */

.dm-ai-sales-floating-icon i {
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
}

.dm-ai-sales-floating-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border: 1px solid rgba(216, 195, 155, 0.28);
    border-radius: 21px;
    animation: dmAiIconPulse 2.8s ease-in-out infinite;
}

@keyframes dmAiIconPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.04);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-ai-sales-section .dm-title-main {
        font-size: clamp(41px, 4.35vw, 63px);
    }

    .dm-ai-sales-section .dm-webdev-container {
        gap: 55px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-ai-sales-section .dm-title-main {
        font-size: clamp(48px, 8.5vw, 69px);
    }

    .dm-ai-sales-section .dm-webdev-content {
        max-width: 700px;
    }

    .dm-ai-sales-section .dm-webdev-image {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-ai-sales-section .dm-title-small {
        font-size: 16px;
        letter-spacing: 3.5px;
    }

    .dm-ai-sales-section .dm-title-main {
        font-size: clamp(36px, 11vw, 52px);
        line-height: 1.02;
        letter-spacing: -1.4px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .dm-ai-sales-description {
        gap: 13px;
    }

    .dm-ai-sales-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.72;
    }

    .dm-ai-sales-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }

    .dm-ai-sales-section .dm-webdev-image-index {
        align-items: center;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-ai-sales-section .dm-title-small {
        font-size: 14px;
        letter-spacing: 2.8px;
    }

    .dm-ai-sales-section .dm-title-main {
        font-size: 35px;
        letter-spacing: -1px;
    }

    .dm-ai-sales-section .dm-webdev-image-index small {
        font-size: 8px;
        letter-spacing: 1px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-ai-sales-floating-icon::after {
        animation: none;
    }
}

/* =========================================================
   AI-POWERED CRM SECTION
========================================================= */

.dm-ai-crm-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 86%,
            rgba(16, 40, 66, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #faf9f6 0%,
            #ffffff 100%
        );
}

/* =========================================================
   HEADING
========================================================= */

.dm-ai-crm-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-ai-crm-section .dm-title-main {
    font-size: clamp(62px, 7vw, 104px);
    line-height: 0.9;
    letter-spacing: -4px;
}

/* =========================================================
   CONTENT WIDTH
========================================================= */

.dm-ai-crm-section .dm-webdev-content {
    max-width: 590px;
}

.dm-ai-crm-section .dm-webdev-description {
    max-width: 575px;
}

/* =========================================================
   IMAGE POSITIONING
========================================================= */

.dm-ai-crm-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

.dm-ai-crm-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 44, 0.02) 22%,
            rgba(6, 22, 38, 0.5) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.1),
            transparent 48%
        );
}

/* AI customer intelligence glow */

.dm-ai-crm-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.14);
    filter: blur(58px);
    pointer-events: none;
}

/* Secondary depth glow */

.dm-ai-crm-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -23%;
    left: -17%;
    width: 50%;
    height: 54%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.15);
    filter: blur(60px);
    pointer-events: none;
}

/* =========================================================
   FLOATING CRM ICON
========================================================= */

.dm-ai-crm-floating-icon {
    overflow: visible;
}

.dm-ai-crm-floating-icon i {
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
}

.dm-ai-crm-floating-icon::after {
    content: "";
    position: absolute;
    inset: -7px;
    z-index: -1;
    border: 1px solid rgba(216, 195, 155, 0.3);
    border-radius: 21px;
    animation: dmCrmIconPulse 2.8s ease-in-out infinite;
}

@keyframes dmCrmIconPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.82;
        transform: scale(1.04);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-ai-crm-section .dm-title-main {
        font-size: clamp(58px, 6.8vw, 88px);
    }

    .dm-ai-crm-section .dm-webdev-container {
        gap: 55px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-ai-crm-section .dm-webdev-content {
        max-width: 700px;
    }

    .dm-ai-crm-section .dm-webdev-description {
        max-width: 680px;
    }

    .dm-ai-crm-section .dm-title-main {
        font-size: clamp(70px, 13vw, 98px);
    }

    .dm-ai-crm-section .dm-webdev-image {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-ai-crm-section .dm-title-small {
        font-size: 16px;
        letter-spacing: 3.5px;
    }

    .dm-ai-crm-section .dm-title-main {
        font-size: clamp(61px, 22vw, 88px);
        line-height: 0.92;
        letter-spacing: -3px;
    }

    .dm-ai-crm-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.74;
    }

    .dm-ai-crm-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }

    .dm-ai-crm-section .dm-webdev-image-index {
        align-items: center;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-ai-crm-section .dm-title-small {
        font-size: 14px;
        letter-spacing: 2.8px;
    }

    .dm-ai-crm-section .dm-title-main {
        font-size: 62px;
        letter-spacing: -2px;
    }

    .dm-ai-crm-section .dm-webdev-image-index small {
        font-size: 8px;
        letter-spacing: 1px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-ai-crm-floating-icon::after {
        animation: none;
    }
}

/* =========================================================
   AI CHATBOTS SECTION
========================================================= */

.dm-ai-chatbot-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 86%,
            rgba(16, 40, 66, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf9f6 100%
        );
}

/* =========================================================
   HEADING
========================================================= */

.dm-ai-chatbot-section .dm-title-small {
    letter-spacing: 7px;
}

.dm-ai-chatbot-section .dm-title-main {
    font-size: clamp(54px, 6vw, 92px);
    line-height: 0.92;
    letter-spacing: -3.5px;
}

/* =========================================================
   CONTENT WIDTH
========================================================= */

.dm-ai-chatbot-section .dm-webdev-content {
    max-width: 600px;
}

.dm-ai-chatbot-section .dm-webdev-description {
    max-width: 590px;
}

/* =========================================================
   MULTIPLE DESCRIPTION PARAGRAPHS
========================================================= */

.dm-chatbot-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-chatbot-description p {
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.dm-chatbot-description p:first-child {
    color: var(--dm-navy);
    font-weight: 600;
}

/* =========================================================
   IMAGE
========================================================= */

.dm-ai-chatbot-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

.dm-ai-chatbot-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 44, 0.02) 22%,
            rgba(6, 22, 38, 0.51) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.11),
            transparent 48%
        );
}

/* Chat intelligence glow */

.dm-ai-chatbot-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.15);
    filter: blur(58px);
    pointer-events: none;
}

/* Secondary depth glow */

.dm-ai-chatbot-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -23%;
    left: -17%;
    width: 50%;
    height: 54%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.15);
    filter: blur(60px);
    pointer-events: none;
}

/* =========================================================
   FLOATING CHAT ICON
========================================================= */

.dm-chatbot-floating-icon {
    overflow: visible;
}

.dm-chatbot-floating-icon i {
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
}

.dm-chatbot-floating-icon::before,
.dm-chatbot-floating-icon::after {
    content: "";
    position: absolute;
    z-index: -1;
    border-radius: 21px;
    pointer-events: none;
}

.dm-chatbot-floating-icon::before {
    inset: -7px;
    border: 1px solid rgba(216, 195, 155, 0.32);
    animation: dmChatbotPulse 2.8s ease-in-out infinite;
}

.dm-chatbot-floating-icon::after {
    top: -4px;
    right: -4px;
    width: 11px;
    height: 11px;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-radius: 50%;
    background: #d8c39b;
    box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    animation: dmChatbotStatus 2.2s ease-in-out infinite;
}

@keyframes dmChatbotPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.04);
    }
}

@keyframes dmChatbotStatus {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 8px rgba(216, 195, 155, 0.05);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-ai-chatbot-section .dm-title-main {
        font-size: clamp(51px, 5.7vw, 78px);
    }

    .dm-ai-chatbot-section .dm-webdev-container {
        gap: 55px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-ai-chatbot-section .dm-webdev-content {
        max-width: 700px;
    }

    .dm-ai-chatbot-section .dm-webdev-description {
        max-width: 680px;
    }

    .dm-ai-chatbot-section .dm-title-main {
        font-size: clamp(64px, 12vw, 91px);
    }

    .dm-ai-chatbot-section .dm-webdev-image {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-ai-chatbot-section .dm-title-small {
        font-size: 16px;
        letter-spacing: 5px;
    }

    .dm-ai-chatbot-section .dm-title-main {
        font-size: clamp(47px, 15vw, 70px);
        line-height: 0.96;
        letter-spacing: -2.3px;
    }

    .dm-chatbot-description {
        gap: 13px;
    }

    .dm-ai-chatbot-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.72;
    }

    .dm-ai-chatbot-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }

    .dm-ai-chatbot-section .dm-webdev-image-index {
        align-items: center;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-ai-chatbot-section .dm-title-small {
        font-size: 14px;
        letter-spacing: 4px;
    }

    .dm-ai-chatbot-section .dm-title-main {
        font-size: 46px;
        letter-spacing: -1.8px;
    }

    .dm-ai-chatbot-section .dm-webdev-image-index small {
        font-size: 8px;
        letter-spacing: 1px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-chatbot-floating-icon::before,
    .dm-chatbot-floating-icon::after {
        animation: none;
    }
}

/* =========================================================
   AI-POWERED ECOMMERCE SECTION
========================================================= */

.dm-ai-ecommerce-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 86%,
            rgba(16, 40, 66, 0.055),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #faf9f6 0%,
            #ffffff 100%
        );
}

/* =========================================================
   HEADING
========================================================= */

.dm-ai-ecommerce-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-ai-ecommerce-section .dm-title-main {
    font-size: clamp(43px, 4.8vw, 74px);
    line-height: 0.94;
    letter-spacing: -3px;
}

/* =========================================================
   CONTENT WIDTH
========================================================= */

.dm-ai-ecommerce-section .dm-webdev-content {
    max-width: 610px;
}

.dm-ai-ecommerce-section .dm-webdev-description {
    max-width: 595px;
}

/* =========================================================
   MULTIPLE DESCRIPTION PARAGRAPHS
========================================================= */

.dm-ecommerce-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-ecommerce-description p {
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.dm-ecommerce-description p:first-child {
    color: var(--dm-navy);
    font-weight: 600;
}

/* =========================================================
   IMAGE
========================================================= */

.dm-ai-ecommerce-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

.dm-ai-ecommerce-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 44, 0.015) 22%,
            rgba(6, 22, 38, 0.52) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.11),
            transparent 48%
        );
}

/* Ecommerce intelligence glow */

.dm-ai-ecommerce-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.15);
    filter: blur(58px);
    pointer-events: none;
}

/* Secondary image depth */

.dm-ai-ecommerce-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -23%;
    left: -17%;
    width: 50%;
    height: 54%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.15);
    filter: blur(60px);
    pointer-events: none;
}

/* =========================================================
   FLOATING ECOMMERCE ICON
========================================================= */

.dm-ecommerce-floating-icon {
    overflow: visible;
}

.dm-ecommerce-floating-icon i {
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
}

.dm-ecommerce-floating-icon::before,
.dm-ecommerce-floating-icon::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.dm-ecommerce-floating-icon::before {
    inset: -7px;
    z-index: -1;
    border: 1px solid rgba(216, 195, 155, 0.32);
    border-radius: 21px;
    animation: dmEcommerceIconPulse 2.8s ease-in-out infinite;
}

.dm-ecommerce-floating-icon::after {
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: #d8c39b;
    box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    animation: dmEcommerceStatusPulse 2.2s ease-in-out infinite;
}

@keyframes dmEcommerceIconPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.04);
    }
}

@keyframes dmEcommerceStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 8px rgba(216, 195, 155, 0.05);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-ai-ecommerce-section .dm-title-main {
        font-size: clamp(41px, 4.45vw, 65px);
    }

    .dm-ai-ecommerce-section .dm-webdev-container {
        gap: 55px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-ai-ecommerce-section .dm-webdev-content {
        max-width: 710px;
    }

    .dm-ai-ecommerce-section .dm-webdev-description {
        max-width: 690px;
    }

    .dm-ai-ecommerce-section .dm-title-main {
        font-size: clamp(52px, 9vw, 74px);
    }

    .dm-ai-ecommerce-section .dm-webdev-image {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-ai-ecommerce-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3.5px;
    }

    .dm-ai-ecommerce-section .dm-title-main {
        font-size: clamp(35px, 10.8vw, 50px);
        line-height: 1;
        letter-spacing: -1.5px;
        overflow-wrap: normal;
        word-break: normal;
    }

    .dm-ecommerce-description {
        gap: 13px;
    }

    .dm-ai-ecommerce-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.72;
    }

    .dm-ai-ecommerce-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }

    .dm-ai-ecommerce-section .dm-webdev-image-index {
        align-items: center;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-ai-ecommerce-section .dm-title-small {
        font-size: 13px;
        letter-spacing: 2.7px;
    }

    .dm-ai-ecommerce-section .dm-title-main {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .dm-ai-ecommerce-section .dm-webdev-image-index small {
        font-size: 8px;
        letter-spacing: 1px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-ecommerce-floating-icon::before,
    .dm-ecommerce-floating-icon::after {
        animation: none;
    }
}

/* =========================================================
   AI BUSINESS INTELLIGENCE SOLUTIONS
========================================================= */

.dm-ai-bi-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 86%,
            rgba(16, 40, 66, 0.06),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #faf9f6 100%
        );
}

/* =========================================================
   CONTENT WIDTH
========================================================= */

.dm-ai-bi-section .dm-webdev-content {
    max-width: 620px;
}

.dm-ai-bi-section .dm-webdev-description {
    max-width: 600px;
}

/* =========================================================
   HEADING
========================================================= */

.dm-ai-bi-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-ai-bi-section .dm-title-main {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    font-size: clamp(39px, 4.25vw, 66px);
    line-height: 0.96;
    letter-spacing: -2.7px;
}

.dm-bi-title-word {
    display: block;
    max-width: 100%;
}

/* Slight contrast between the two heading lines */

.dm-bi-title-word:last-child {
    color: var(--dm-navy-light);
    font-size: 0.82em;
    letter-spacing: 0.01em;
}

/* =========================================================
   MULTIPLE DESCRIPTION PARAGRAPHS
========================================================= */

.dm-bi-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-bi-description p {
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.dm-bi-description p:first-child {
    color: var(--dm-navy);
    font-weight: 600;
}

/* =========================================================
   IMAGE
========================================================= */

.dm-ai-bi-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

.dm-ai-bi-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(8, 26, 44, 0.015) 20%,
            rgba(6, 22, 38, 0.52) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.11),
            transparent 48%
        );
}

/* Data intelligence glow */

.dm-ai-bi-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.15);
    filter: blur(58px);
    pointer-events: none;
}

/* Secondary analytical depth */

.dm-ai-bi-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -23%;
    left: -17%;
    width: 50%;
    height: 54%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.16);
    filter: blur(60px);
    pointer-events: none;
}

/* =========================================================
   FLOATING BUSINESS INTELLIGENCE ICON
========================================================= */

.dm-bi-floating-icon {
    overflow: visible;
}

.dm-bi-floating-icon i {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 26px;
    line-height: 1;
}

.dm-bi-floating-icon::before,
.dm-bi-floating-icon::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.dm-bi-floating-icon::before {
    inset: -7px;
    z-index: -1;
    border: 1px solid rgba(216, 195, 155, 0.32);
    border-radius: 21px;
    animation: dmBiIconPulse 2.8s ease-in-out infinite;
}

.dm-bi-floating-icon::after {
    right: -5px;
    bottom: -5px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.82);
    border-radius: 50%;
    background: #d8c39b;
    box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    animation: dmBiStatusPulse 2.2s ease-in-out infinite;
}

@keyframes dmBiIconPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.04);
    }
}

@keyframes dmBiStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 8px rgba(216, 195, 155, 0.05);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-ai-bi-section .dm-title-main {
        font-size: clamp(37px, 4vw, 58px);
    }

    .dm-ai-bi-section .dm-webdev-container {
        gap: 52px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-ai-bi-section .dm-webdev-content {
        max-width: 720px;
    }

    .dm-ai-bi-section .dm-webdev-description {
        max-width: 690px;
    }

    .dm-ai-bi-section .dm-title-main {
        font-size: clamp(48px, 8vw, 66px);
    }

    .dm-ai-bi-section .dm-webdev-image {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-ai-bi-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3.4px;
    }

    .dm-ai-bi-section .dm-title-main {
        gap: 2px;
        font-size: clamp(34px, 10.3vw, 48px);
        line-height: 1;
        letter-spacing: -1.4px;
    }

    .dm-bi-title-word:last-child {
        font-size: 0.86em;
    }

    .dm-bi-description {
        gap: 13px;
    }

    .dm-ai-bi-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.72;
    }

    .dm-ai-bi-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }

    .dm-ai-bi-section .dm-webdev-image-index {
        align-items: center;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-ai-bi-section .dm-title-small {
        font-size: 13px;
        letter-spacing: 2.6px;
    }

    .dm-ai-bi-section .dm-title-main {
        font-size: 33px;
        letter-spacing: -1px;
    }

    .dm-ai-bi-section .dm-webdev-image-index small {
        font-size: 8px;
        letter-spacing: 0.8px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-bi-floating-icon::before,
    .dm-bi-floating-icon::after {
        animation: none;
    }
}

/* =========================================================
   AI-POWERED SECURITY SECTION
========================================================= */

.dm-ai-security-section {
    background:
        radial-gradient(
            circle at 84% 34%,
            rgba(184, 154, 98, 0.15),
            transparent 31%
        ),
        radial-gradient(
            circle at 10% 86%,
            rgba(16, 40, 66, 0.065),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #faf9f6 0%,
            #ffffff 100%
        );
}

/* =========================================================
   CONTENT
========================================================= */

.dm-ai-security-section .dm-webdev-content {
    max-width: 610px;
}

.dm-ai-security-section .dm-webdev-description {
    max-width: 595px;
}

/* =========================================================
   HEADING
========================================================= */

.dm-ai-security-section .dm-title-small {
    letter-spacing: 5px;
}

.dm-ai-security-section .dm-title-main {
    font-size: clamp(52px, 5.8vw, 88px);
    line-height: 0.93;
    letter-spacing: -3.4px;
}

/* =========================================================
   DESCRIPTION PARAGRAPHS
========================================================= */

.dm-security-description {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-security-description p {
    margin: 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.dm-security-description p:first-child {
    color: var(--dm-navy);
    font-weight: 600;
}

/* =========================================================
   IMAGE
========================================================= */

.dm-ai-security-section .dm-webdev-image {
    object-fit: cover;
    object-position: center center;
}

.dm-ai-security-section .dm-webdev-image-overlay {
    background:
        linear-gradient(
            180deg,
            rgba(6, 22, 38, 0.02) 20%,
            rgba(5, 20, 35, 0.55) 100%
        ),
        linear-gradient(
            125deg,
            rgba(184, 154, 98, 0.11),
            transparent 48%
        );
}

/* Security intelligence glow */

.dm-ai-security-section .dm-webdev-image-wrap::before {
    content: "";
    position: absolute;
    z-index: 3;
    top: -18%;
    right: -12%;
    width: 62%;
    height: 68%;
    border-radius: 50%;
    background: rgba(216, 195, 155, 0.15);
    filter: blur(58px);
    pointer-events: none;
}

/* Dark protective depth */

.dm-ai-security-section .dm-webdev-image-wrap::after {
    content: "";
    position: absolute;
    z-index: 3;
    bottom: -24%;
    left: -18%;
    width: 52%;
    height: 56%;
    border-radius: 50%;
    background: rgba(16, 40, 66, 0.18);
    filter: blur(62px);
    pointer-events: none;
}

/* =========================================================
   FLOATING SECURITY ICON
========================================================= */

.dm-security-floating-icon {
    overflow: visible;
}

.dm-security-floating-icon i {
    position: relative;
    z-index: 2;
    color: #ffffff;
    font-size: 27px;
    line-height: 1;
}

.dm-security-floating-icon::before,
.dm-security-floating-icon::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.dm-security-floating-icon::before {
    inset: -7px;
    z-index: -1;
    border: 1px solid rgba(216, 195, 155, 0.34);
    border-radius: 21px;
    animation: dmSecurityShieldPulse 2.8s ease-in-out infinite;
}

.dm-security-floating-icon::after {
    top: -5px;
    right: -5px;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255, 255, 255, 0.84);
    border-radius: 50%;
    background: #d8c39b;
    box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    animation: dmSecurityStatusPulse 2.2s ease-in-out infinite;
}

@keyframes dmSecurityShieldPulse {
    0%,
    100% {
        opacity: 0.3;
        transform: scale(0.94);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

@keyframes dmSecurityStatusPulse {
    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 5px rgba(216, 195, 155, 0.14);
    }

    50% {
        transform: scale(1.18);
        box-shadow: 0 0 0 9px rgba(216, 195, 155, 0.04);
    }
}

/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1199px) {
    .dm-ai-security-section .dm-title-main {
        font-size: clamp(49px, 5.4vw, 76px);
    }

    .dm-ai-security-section .dm-webdev-container {
        gap: 52px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .dm-ai-security-section .dm-webdev-content {
        max-width: 710px;
    }

    .dm-ai-security-section .dm-webdev-description {
        max-width: 690px;
    }

    .dm-ai-security-section .dm-title-main {
        font-size: clamp(62px, 11vw, 86px);
    }

    .dm-ai-security-section .dm-webdev-image {
        object-position: center center;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .dm-ai-security-section .dm-title-small {
        font-size: 15px;
        letter-spacing: 3.5px;
		
    }
    .dm-ai-security-section .dm-title-main {
        font-size: clamp(44px, 14vw, 64px);
        line-height: 0.97;
        letter-spacing: -2px;
    }

    .dm-security-description {
        gap: 13px;
    }

    .dm-ai-security-section .dm-webdev-description {
        font-size: 16px;
        line-height: 1.72;
    }

    .dm-ai-security-section .dm-webdev-principles {
        grid-template-columns: 1fr;
    }

    .dm-ai-security-section .dm-webdev-image-index {
        align-items: center;
    }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .dm-ai-security-section .dm-title-small {
        font-size: 13px;
        letter-spacing: 2.8px;
    }

    .dm-ai-security-section .dm-title-main {
        font-size: 43px;
        letter-spacing: -1.5px;
    }

    .dm-ai-security-section .dm-webdev-image-index small {
        font-size: 8px;
        letter-spacing: 0.9px;
    }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-security-floating-icon::before,
    .dm-security-floating-icon::after {
        animation: none;
    }
}

@media only screen and (max-width:768px){
.dm-clean-btn{width:100%;}}

/* =========================================================
   DESIGN MASTER — FINAL INNER PAGE BANNER V2
   Fully scoped to prevent conflicts with existing CSS
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2 {
    --dm-inner-navy: #0b2439;
    --dm-inner-navy-soft: #294b63;
    --dm-inner-gold: #c9ad7b;
    --dm-inner-gold-light: #eee0bf;
    --dm-inner-white: #ffffff;
    --dm-inner-muted: #667887;

    --dm-inner-edge: max(25px, calc((100vw - 1340px) / 2));
    --dm-orbit-size: clamp(190px, 16vw, 235px);
    --dm-orbit-right: clamp(40px, 7vw, 115px);

    position: relative;
    width: 100%;
    min-height: 430px;

    display: flex;
    align-items: center;

    padding:
        78px
        var(--dm-inner-edge);

    overflow: hidden;
    isolation: isolate;

    background: #edf2f4;
}

/* =========================================================
   MAIN BACKGROUND IMAGE
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-banner-img {
    position: absolute;
    inset: 0;
    z-index: -5;

    width: 100%;
    height: 100%;
    display: block;

    object-fit: cover;
    object-position: center;

    transform: scale(1.025);

    animation:
        dmInnerBannerMovement 15s
        ease-in-out infinite alternate;
}

/* =========================================================
   SOFT IMAGE OVERLAY
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-soft-overlay {
    position: absolute;
    inset: 0;
    z-index: -3;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(255, 255, 255, 0.95) 25%,
            rgba(249, 251, 252, 0.83) 47%,
            rgba(244, 248, 250, 0.42) 70%,
            rgba(9, 34, 52, 0.08) 100%
        ),
        linear-gradient(
            0deg,
            rgba(9, 34, 52, 0.09),
            transparent 45%
        );
}

/* Soft glow behind content */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-soft-overlay::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 8%;

    width: 380px;
    height: 380px;

    border-radius: 50%;

    background:
        rgba(201, 173, 123, 0.15);

    filter: blur(80px);

    transform: translateY(-50%);

    animation:
        dmInnerSoftGlow 7s
        ease-in-out infinite alternate;
}

/* Disable old pseudo orbit */
.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-soft-overlay::after {
    content: none;
    display: none;
}

/* =========================================================
   CENTERED WATERMARK
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2::before {
    content: attr(data-watermark);
    position: absolute;
    top: 70%;
    left: 50%;
    z-index: -1;
    width:100%;
    max-width: 100%;
    color: rgba(11, 36, 57, 0.022);
    font-size: 250px;
    font-weight: 900;
    line-height: 0.82;
    letter-spacing: -8px;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;

    -webkit-text-stroke:
        1px rgba(11, 36, 57, 0.08);

    opacity: 0;
    pointer-events: none;
    user-select: none;
    transform:
        translate(-50%, -43%)
        scale(0.94);

    animation:
        dmCenteredWatermarkReveal 1.2s
        cubic-bezier(.22, 1, .36, 1)
        0.2s forwards,

        dmCenteredWatermarkBreath 7s
        ease-in-out
        1.5s infinite;
}

/* =========================================================
   BOTTOM ANIMATED LINE
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 6;
    width: min(1340px, calc(100% - 50px));
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(201, 173, 123, 0.24) 20%,
            var(--dm-inner-gold) 50%,
            rgba(201, 173, 123, 0.24) 80%,
            transparent 100%
        );

    background-size: 220% 100%;
    transform: translateX(-50%);
    animation:
        dmBottomLineFlow 4.5s
        linear infinite;
	display:none;
}

/* =========================================================
   CONTENT
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content {
    position: relative;
    z-index: 5;
    width: min(630px, 56%);
    padding-left: 35px;
    opacity: 0;
    transform: translateY(25px);
    animation:
        dmInnerContentReveal 0.9s
        cubic-bezier(.22, 1, .36, 1)
        0.1s forwards;
}

/* =========================================================
   ANIMATED VERTICAL LINE
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 0;
    width: 2px;
    border-radius: 10px;
    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            var(--dm-inner-gold) 17%,
            var(--dm-inner-gold-light) 38%,
            #ffffff 50%,
            var(--dm-inner-gold-light) 62%,
            var(--dm-inner-gold) 83%,
            transparent 100%
        );

    background-size: 100% 230%;
    background-position: center 110%;
    box-shadow:
        0 0 16px rgba(201, 173, 123, 0.4);

    transform: scaleY(0);
    transform-origin: top;
    animation:
        dmVerticalLineReveal 1s
        ease 0.45s forwards,

        dmVerticalLineFlow 3.5s
        linear 1.45s infinite;
}

/* Moving sparkle on vertical line */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content::after {
    content: "";

    position: absolute;
    top: 4px;
    left: -2px;

    width: 6px;
    height: 18px;

    border-radius: 12px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            #ffffff,
            var(--dm-inner-gold),
            transparent
        );

    box-shadow:
        0 0 13px rgba(201, 173, 123, 0.8);

    opacity: 0;

    animation:
        dmVerticalSpark 3.5s
        ease-in-out 1.5s infinite;
}

/* =========================================================
   SMALL LABEL
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content
> span {
    position: relative;

    display: inline-flex;
    align-items: center;
    gap: 12px;

    margin-bottom: 15px;

    color: var(--dm-inner-gold);

    font-size: 11px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 3px;
    text-transform: uppercase;
}

/* Animated small line */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content
> span::before {
    content: "";

    width: 38px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--dm-inner-gold),
            #ffffff,
            var(--dm-inner-gold),
            rgba(201, 173, 123, 0.15)
        );

    background-size: 220% 100%;

    transform-origin: left;

    animation:
        dmEyebrowLineReveal 0.8s
        ease 0.55s both,

        dmEyebrowLineFlow 2.8s
        linear 1.35s infinite;
}

/* Pulsing dot */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content
> span::after {
    content: "";

    position: absolute;
    top: 50%;
    left: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background: var(--dm-inner-gold);

    box-shadow:
        0 0 0 5px rgba(201, 173, 123, 0.13),
        0 0 13px rgba(201, 173, 123, 0.6);

    transform: translateY(-50%);

    animation:
        dmEyebrowDotPulse 2.3s
        ease-in-out infinite;
}

/* =========================================================
   PAGE HEADING
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content
> h1 {
    position: relative;
    /*width: fit-content;*/
    margin: 0;
    color: #0b2439b0;
    font-size: clamp(50px, 4vw, 65px);
    font-weight: 500;
    line-height: 1;
}

/* Animated heading underline */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content
> h1::after {
    content: "";
    display: block;
    width: 0;
    height: 3px;
    margin-top: 16px;
    border-radius: 20px;
    background:
        linear-gradient(
            90deg,
            var(--dm-inner-gold) 0%,
            var(--dm-inner-gold-light) 29%,
            #ffffff 48%,
            var(--dm-inner-gold-light) 67%,
            rgba(201, 173, 123, 0.05) 100%
        );

    background-size: 230% 100%;
    box-shadow:
        0 4px 13px rgba(201, 173, 123, 0.17);

    animation:
        dmHeadingUnderlineReveal 1.05s
        cubic-bezier(.22, 1, .36, 1)
        0.7s forwards,

        dmHeadingUnderlineFlow 3.7s
        linear 1.75s infinite;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .about-dm-content
> p {
    max-width: 545px;

    margin: 21px 0 0;

    color: var(--dm-inner-muted);

    font-size: 16px;
    font-weight: 450;
    line-height: 1.75;
    letter-spacing: 0.1px;
}

/* =========================================================
   PREMIUM VIRTUAL ORBIT
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-v2-virtual-orbit {
    position: absolute;
    top: 50%;
    right: var(--dm-orbit-right);
    z-index: 2;

    width: var(--dm-orbit-size);
    height: var(--dm-orbit-size);

    border-radius: 50%;

    pointer-events: none;

    opacity: 0;

    filter:
        drop-shadow(
            0 18px 32px rgba(10, 38, 58, 0.1)
        );

    transform:
        translateY(-50%)
        scale(0.84)
        rotate(-10deg);

    animation:
        dmOrbitReveal 1s
        cubic-bezier(.22, 1, .36, 1)
        0.35s forwards;
}

/* Soft orbit background */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-v2-virtual-orbit::before {
    content: "";

    position: absolute;
    inset: 23%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            rgba(255, 255, 255, 0.48),
            rgba(255, 255, 255, 0.08) 52%,
            rgba(201, 173, 123, 0.08) 100%
        );

    border:
        1px solid rgba(255, 255, 255, 0.38);

    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Orbit glow */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-v2-virtual-orbit::after {
    content: "";

    position: absolute;
    inset: 7%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 173, 123, 0.11),
            transparent 68%
        );

    animation:
        dmOrbitGlow 3.5s
        ease-in-out infinite;
}

/* Shared orbit rings */

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-orbit-ring {
    position: absolute;

    display: block;

    border-radius: 50%;

    pointer-events: none;
}

/* Outer orbit */

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-ring-outer {
    inset: 0;

    border:
        1px solid rgba(255, 255, 255, 0.55);

    border-top-color:
        rgba(201, 173, 123, 0.98);

    border-right-color:
        rgba(201, 173, 123, 0.2);


    border-bottom-color:
        rgba(255, 255, 255, 0.18);

    animation:
        dmOrbitClockwise 13s
        linear infinite;
}

/* Middle orbit */

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-ring-middle {
    inset: 13%;

    border:
        1px dashed rgba(255, 255, 255, 0.58);

    border-left-color:
        rgba(201, 173, 123, 0.9);

    border-bottom-color:
        rgba(201, 173, 123, 0.18);

    animation:
        dmOrbitCounterClockwise 17s
        linear infinite;
}

/* Inner orbit */

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-ring-inner {
    inset: 27%;

    border:
        1px solid rgba(201, 173, 123, 0.48);

    border-top-color:
        rgba(255, 255, 255, 0.75);

    animation:
        dmOrbitClockwise 9s
        linear infinite;
}

/* Moving orbit paths */

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-orbit-path {
    position: absolute;

    display: block;

    border-radius: 50%;
}

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-path-one {
    inset: 3%;

    animation:
        dmOrbitClockwise 7.5s
        linear infinite;
}

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-path-one i {
    position: absolute;
    top: 3%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--dm-inner-gold);

    box-shadow:
        0 0 0 5px rgba(201, 173, 123, 0.13),
        0 0 18px rgba(201, 173, 123, 0.85);

    transform: translateX(-50%);
}

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-path-two {
    inset: 19%;

    animation:
        dmOrbitCounterClockwise 5.8s
        linear infinite;
}

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-path-two i {
    position: absolute;
    top: 50%;
    right: 2%;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.98);

    box-shadow:
        0 0 0 4px rgba(255, 255, 255, 0.14),
        0 0 14px rgba(255, 255, 255, 0.85);

    transform: translateY(-50%);
}

/* Orbit center */

.about-dm-innerpage-section.dm-inner-concept-v2
.dm-v2-orbit-core {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 4;

    width: 13px;
    height: 13px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,
            #ffffff,
            var(--dm-inner-gold)
        );

    box-shadow:
        0 0 0 8px rgba(201, 173, 123, 0.1),
        0 0 28px rgba(201, 173, 123, 0.65);

    transform: translate(-50%, -50%);

    animation:
        dmOrbitCorePulse 2.8s
        ease-in-out infinite;
}

/* =========================================================
   EXISTING CIRCLE IMAGES
   Aligned exactly with orbit center
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-bg-circle {
    position: absolute;

    display: block;

    height: auto;

    pointer-events: none;
    user-select: none;
}

/* White circle */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-circle-white {
    top: 50%;

    right:
        calc(
            var(--dm-orbit-right) +
            (
                var(--dm-orbit-size) -
                clamp(88px, 8vw, 118px)
            ) / 2
        );

    z-index: 3;

    width: clamp(88px, 8vw, 118px);

    opacity: 0.34;

    transform: translateY(-50%);

    animation:
        dmWhiteCircleFloat 7s
        ease-in-out infinite;
}

/* Gold circle */

.about-dm-innerpage-section.dm-inner-concept-v2
> .dm-circle-gold {
    top: 50%;

    right:
        calc(
            var(--dm-orbit-right) +
            (
                var(--dm-orbit-size) -
                clamp(44px, 4vw, 62px)
            ) / 2
        );

    z-index: 4;

    width: clamp(44px, 4vw, 62px);

    opacity: 0.87;

    transform: translateY(-50%);

    filter:
        drop-shadow(
            0 8px 15px rgba(90, 63, 27, 0.2)
        );

    animation:
        dmGoldCircleFloat 5s
        ease-in-out infinite;
}

/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes dmInnerBannerMovement {
    from {
        transform:
            scale(1.025)
            translate3d(0, 0, 0);
    }

    to {
        transform:
            scale(1.07)
            translate3d(-7px, -3px, 0);
    }
}

@keyframes dmInnerSoftGlow {
    from {
        transform:
            translateY(-50%)
            translateX(0)
            scale(1);

        opacity: 0.7;
    }

    to {
        transform:
            translateY(-50%)
            translateX(25px)
            scale(1.15);

        opacity: 1;
    }
}

@keyframes dmCenteredWatermarkReveal {
    from {
        opacity: 0;

        transform:
            translate(-50%, -43%)
            scale(0.94);
    }

    to {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}

@keyframes dmCenteredWatermarkBreath {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.012);
    }
}

@keyframes dmBottomLineFlow {
    from {
        background-position: 200% center;
    }

    to {
        background-position: -20% center;
    }
}

@keyframes dmInnerContentReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dmVerticalLineReveal {
    from {
        transform: scaleY(0);
    }

    to {
        transform: scaleY(1);
    }
}

@keyframes dmVerticalLineFlow {
    from {
        background-position: center 120%;
    }

    to {
        background-position: center -100%;
    }
}

@keyframes dmVerticalSpark {
    0% {
        top: 4px;
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    78% {
        opacity: 1;
    }

    100% {
        top: calc(100% - 18px);
        opacity: 0;
    }
}

@keyframes dmEyebrowLineReveal {
    from {
        opacity: 0;
        transform: scaleX(0);
    }

    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@keyframes dmEyebrowLineFlow {
    from {
        background-position: 200% center;
    }

    to {
        background-position: -20% center;
    }
}

@keyframes dmEyebrowDotPulse {
    0%,
    100% {
        transform:
            translateY(-50%)
            scale(1);
    }

    50% {
        transform:
            translateY(-50%)
            scale(1.35);
    }
}

@keyframes dmHeadingUnderlineReveal {
    from {
        width: 0;
    }

    to {
        width: 78%;
    }
}

@keyframes dmHeadingUnderlineFlow {
    from {
        background-position: 200% center;
    }

    to {
        background-position: -20% center;
    }
}

@keyframes dmOrbitReveal {
    from {
        opacity: 0;

        transform:
            translateY(-50%)
            scale(0.84)
            rotate(-10deg);
    }

    to {
        opacity: 1;

        transform:
            translateY(-50%)
            scale(1)
            rotate(0deg);
    }
}

@keyframes dmOrbitClockwise {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes dmOrbitCounterClockwise {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes dmOrbitGlow {
    0%,
    100% {
        opacity: 0.45;
        transform: scale(0.94);
    }

    50% {
        opacity: 1;
        transform: scale(1.08);
    }
}

@keyframes dmOrbitCorePulse {
    0%,
    100% {
        transform:
            translate(-50%, -50%)
            scale(1);
    }

    50% {
        transform:
            translate(-50%, -50%)
            scale(1.28);
    }

}

@keyframes dmWhiteCircleFloat {
    0%,
    100% {
        transform:
            translateY(-50%)
            rotate(0deg)
            scale(1);
    }

    50% {
        transform:
            translateY(calc(-50% - 5px))
            rotate(7deg)
            scale(1.04);
    }
}

@keyframes dmGoldCircleFloat {
    0%,
    100% {
        transform:
            translateY(-50%)
            scale(1);
    }

    50% {
        transform:
            translateY(calc(-50% + 5px))
            scale(1.09);
    }
}

/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1200px) {
    .about-dm-innerpage-section.dm-inner-concept-v2 {
        --dm-inner-edge: 45px;
        --dm-orbit-size: 195px;
        --dm-orbit-right: 42px;

        min-height: 410px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content {
        width: 61%;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2::before {
        font-size: clamp(85px, 11.5vw, 150px);
        letter-spacing: -7px;
    }
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {
    .about-dm-innerpage-section.dm-inner-concept-v2 {
        --dm-inner-edge: 32px;
        --dm-orbit-size: 155px;
        --dm-orbit-right: 28px;

        min-height: 390px;

        padding-top: 65px;
        padding-bottom: 65px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-soft-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0.95) 42%,
                rgba(247, 250, 251, 0.73) 69%,
                rgba(8, 33, 52, 0.13) 100%
            );
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content {
        width: 67%;
        padding-left: 28px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > h1 {
        font-size: clamp(47px, 7vw, 66px);
    }

    .about-dm-innerpage-section.dm-inner-concept-v2::before {
        width: 94%;

        font-size: clamp(74px, 13vw, 120px);
        letter-spacing: -6px;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
    .about-dm-innerpage-section.dm-inner-concept-v2 {
        --dm-inner-edge: 20px;
        --dm-orbit-size: 108px;
        --dm-orbit-right: 18px;

        min-height: 360px;

        align-items: flex-end;

        padding:
            105px
            var(--dm-inner-edge)
            58px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-banner-img {
        object-position: 62% center;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-soft-overlay {
        background:
            linear-gradient(
                0deg,
                rgba(255, 255, 255, 0.99) 0%,
                rgba(255, 255, 255, 0.96) 49%,
                rgba(245, 249, 251, 0.72) 75%,
                rgba(8, 33, 52, 0.1) 100%
            );
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content {
        width: 100%;
        max-width: 540px;

        padding-left: 22px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > span {
        margin-bottom: 13px;

        font-size: 10px;
        letter-spacing: 2.3px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > h1 {
        font-size: clamp(42px, 12vw, 58px);
        letter-spacing: -2.8px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > h1::after {
        height: 2px;
        margin-top: 13px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > p {
        max-width: 470px;

        margin-top: 17px;

        font-size: 14px;
        line-height: 1.65;
    }

    /* Orbit moves to upper-right */
    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-v2-virtual-orbit {
        top: 75px;

        transform:
            scale(0.84)
            rotate(-10deg);

        animation-name:
            dmOrbitRevealMobile;
    }

    /* Center white circle in mobile orbit */
    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-circle-white {
        top: 75px;

        right:
            calc(
                var(--dm-orbit-right) +
                (
                    var(--dm-orbit-size) -
                    57px
                ) / 2
            );

        width: 57px;

        transform: none;

        animation:
            dmWhiteCircleMobile 6s
            ease-in-out infinite;
    }

    /* Center gold circle in mobile orbit */
    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-circle-gold {
        top: 75px;

        right:
            calc(
                var(--dm-orbit-right) +
                (
                    var(--dm-orbit-size) -
                    30px
                ) / 2
            );

        width: 30px;

        transform: none;

        animation:
            dmGoldCircleMobile 5s
            ease-in-out infinite;
    }

    /* Watermark remains exactly centered */
    .about-dm-innerpage-section.dm-inner-concept-v2::before {
        top: 52%;
        left: 50%;

        width: 96%;

        color:
            rgba(11, 36, 57, 0.018);

        font-size:
            clamp(56px, 18vw, 92px);

        line-height: 0.84;
        letter-spacing: -4px;

        -webkit-text-stroke:
            1px rgba(11, 36, 57, 0.06);
    }

    .about-dm-innerpage-section.dm-inner-concept-v2::after {
        width:
            calc(100% - 40px);
    }
}

@keyframes dmOrbitRevealMobile {
    from {
        opacity: 0;

        transform:
            scale(0.8)
            rotate(-12deg);
    }

    to {
        opacity: 1;

        transform:
            scale(1)
            rotate(0deg);
    }
}

@keyframes dmWhiteCircleMobile {
    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(6deg);
    }
}

@keyframes dmGoldCircleMobile {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }
}

/* =========================================================
   EXTRA-SMALL MOBILE
========================================================= */

@media (max-width: 420px) {
    .about-dm-innerpage-section.dm-inner-concept-v2 {
        --dm-inner-edge: 15px;
        --dm-orbit-size: 92px;
        --dm-orbit-right: 11px;

        min-height: 345px;

        padding-top: 90px;
        padding-bottom: 52px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content {
        padding-left: 17px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > span {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > span::before {
        width: 27px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > h1 {
        font-size: 39px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > p {
        font-size: 13px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2::before {
        top: 52%;

        width: 98%;

        font-size:
            clamp(47px, 17vw, 68px);

        letter-spacing: -3px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-v2-virtual-orbit {
        top: 67px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-circle-white {
        top: 67px;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-circle-gold {
        top: 67px;
    }
}

/* =========================================================
   LONG WATERMARK NAMES
   Add class "dm-long-watermark" to the section when needed
========================================================= */

.about-dm-innerpage-section.dm-inner-concept-v2.dm-long-watermark::before {
    width: 92%;

    font-size: clamp(62px, 8vw, 130px);
    line-height: 0.88;
    letter-spacing: -5px;

    white-space: normal;
    text-wrap: balance;
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .about-dm-innerpage-section.dm-inner-concept-v2,
    .about-dm-innerpage-section.dm-inner-concept-v2 *,
    .about-dm-innerpage-section.dm-inner-concept-v2::before,
    .about-dm-innerpage-section.dm-inner-concept-v2::after,
    .about-dm-innerpage-section.dm-inner-concept-v2 *::before,
    .about-dm-innerpage-section.dm-inner-concept-v2 *::after {
        animation: none !important;
        transition: none !important;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content {
        opacity: 1;
        transform: none;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content::before {
        transform: scaleY(1);
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .about-dm-content
    > h1::after {
        width: 78%;
    }

    .about-dm-innerpage-section.dm-inner-concept-v2
    > .dm-v2-virtual-orbit {
        opacity: 1;

        transform:
            translateY(-50%)
            scale(1);
    }

    .about-dm-innerpage-section.dm-inner-concept-v2::before {
        opacity: 1;

        transform:
            translate(-50%, -50%)
            scale(1);
    }
}


/* =========================================================
   PREMIUM LIGHTWEIGHT CONTACT SECTION
========================================================= */

:root {
    --dmcp-black: #0f0c09;
    --dmcp-dark: #18120e;
    --dmcp-dark-soft: #221a14;
    --dmcp-gold: #c8a866;
    --dmcp-gold-light: #e5ca8a;
    --dmcp-gold-dark: #8f6533;
    --dmcp-cream: #f2e8d9;
    --dmcp-muted: #8e8175;
}


.dmcp-online-state b {
    color: inherit;
    font-size: inherit;
    font-weight: 800;
}

/* Offline appearance */

.dmcp-online-state.dmcp-is-offline {
    color: #a99d91;
}

.dmcp-online-state.dmcp-is-offline i {
    background: #a85f56;
    box-shadow: 0 0 12px rgba(168, 95, 86, 0.45);
    animation: none;
}

/* Online appearance */

.dmcp-online-state.dmcp-is-online i {
    background: var(--dmcp-gold);
    animation: dmcpPulse 1.6s ease-out infinite;
}

.dmcp-contact-section,
.dmcp-contact-section * {
    box-sizing: border-box;
}


.dmcp-contact-section {
    position: relative;
    width: 100%;
    padding: 90px 0;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 8% 12%,
            rgba(202, 168, 99, 0.2),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(112, 73, 33, 0.12),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7f0e6,
            #e8d8c0 50%,
            #f4ebdf
        );
    font-family: "Manrope", sans-serif;
    isolation: isolate;
}


.dmcp-contact-section a {text-decoration: none;}
.dmcp-contact-section button,
.dmcp-contact-section input,
.dmcp-contact-section select,
.dmcp-contact-section textarea {font-family: "Jost", sans-serif;}


.dmcp-contact-section svg {
    display: block;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.dmcp-container {
    position: relative;
    z-index: 3;
    width: min(1460px, calc(100% - 60px));
    margin: 0 auto;
}


/* Background */

.dmcp-bg-grid {
    position: absolute;
    inset: 0;
    z-index: -2;
    opacity: 0.36;
    background-image:
        linear-gradient(
            rgba(105, 73, 34, 0.05) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(105, 73, 34, 0.05) 1px,
            transparent 1px
        );
    background-size: 52px 52px;
    pointer-events: none;
}


.dmcp-bg-glow {
    position: absolute;
    z-index: -1;
    border-radius: 50%;
    filter: blur(50px);
    pointer-events: none;
}


.dmcp-bg-glow-one {
    top: -180px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: rgba(203, 170, 102, 0.17);
    animation: dmcpGlow 9s ease-in-out infinite alternate;
}


.dmcp-bg-glow-two {
    right: -200px;
    bottom: -230px;
    width: 580px;
    height: 580px;
    background: rgba(111, 73, 34, 0.1);
    animation: dmcpGlow 12s ease-in-out infinite alternate-reverse;
}


@keyframes dmcpGlow {
    to {
        transform: translate3d(30px, 25px, 0) scale(1.08);
    }
}


/* Main console */

.dmcp-contact-console {
    display: grid;
    grid-template-columns: minmax(400px, 0.82fr) minmax(0, 1.18fr);
    overflow: hidden;
    border: 1px solid rgba(181, 143, 83, 0.24);
    border-radius: 34px;
    background: var(--dmcp-dark);
    box-shadow:
        0 50px 110px rgba(57, 37, 18, 0.23),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}


/* =========================================================
   FORM PANEL
========================================================= */

.dmcp-form-panel {
    position: relative;
    z-index: 2;
    overflow: hidden;
    padding: 36px;
    border-right: 1px solid rgba(217, 180, 108, 0.13);
    background:
        radial-gradient(
            circle at 0 0,
            rgba(207, 174, 104, 0.13),
            transparent 31%
        ),
        linear-gradient(
            145deg,
            #211914,
            #100c09 75%
        );
}


.dmcp-form-panel::before {
    position: absolute;
    top: -140px;
    right: -145px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(217, 181, 109, 0.07);
    border-radius: 50%;
    content: "";
    box-shadow:
        0 0 0 42px rgba(217, 181, 109, 0.025),
        0 0 0 84px rgba(217, 181, 109, 0.018);
    animation: dmcpOrbit 20s linear infinite;
}


@keyframes dmcpOrbit {
    to {
        transform: rotate(360deg);
    }
}


.dmcp-panel-topbar {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 47px;
}


.dmcp-brand-state {
    display: flex;
    align-items: center;
    gap: 11px;
}


.dmcp-brand-mark {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(218, 183, 111, 0.25);
    border-radius: 12px;
    background: rgba(213, 179, 108, 0.08);
    color: var(--dmcp-gold-light);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.dmcp-brand-state small {
    display: block;
    margin-bottom: 3px;
    color: #f1e7d9;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
	font-family: "Jost", sans-serif;
}


.dmcp-brand-state strong {
    display: block;
    color: #d9c8ad;
    font-size: 13px;
    font-weight: 500;
	font-family: "Jost", sans-serif;
	
}


.dmcp-online-state,
.dmcp-map-live {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #a28e6e;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.dmcp-online-state i,
.dmcp-map-live i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dmcp-gold);
    animation: dmcpPulse 1.6s ease-out infinite;
}


@keyframes dmcpPulse {
    from {
        box-shadow: 0 0 0 0 rgba(200, 168, 102, 0.55);
    }

    to {
        box-shadow: 0 0 0 10px rgba(200, 168, 102, 0);
    }
}


.dmcp-form-intro {
    position: relative;
    z-index: 2;
    margin-bottom: 31px;
}


.dmcp-form-intro > span {
    display: block;
    margin-bottom: 10px;
    color: #a78f6b;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}


.dmcp-form-intro h3 {
    margin: 0 0 15px;
    color: #f1e7d9;
    font-size: clamp(31px, 3vw, 44px);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.045em;
}


.dmcp-form-intro h3 strong {
    display: block;
    color: #d4b672;
    font-weight: 600;
}


.dmcp-form-intro p {
    /*max-width: 480px;*/
    margin: 0;
    color: #8b8177;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.8;
	font-family: "Jost", sans-serif;
}


/* Form */

.dmcp-contact-form {
    position: relative;
    z-index: 2;
}


.dmcp-form-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}


.dmcp-field {
    position: relative;
    margin-bottom: 13px;
}


.dmcp-field input,
.dmcp-field select,
.dmcp-field textarea {
    width: 100%;
    border: 1px solid rgba(217, 182, 110, 0.15);
    border-radius: 13px;
    outline: none;
    background: rgba(255, 255, 255, 0.026);
    color: #eee2d2;
    font-size: 11px;
    font-weight: 600;
    transition: 0.3s ease;
}


.dmcp-field input,
.dmcp-field select {
    height: 59px;
    padding: 22px 43px 9px 16px;
}


.dmcp-field textarea {
    min-height: 175px;
    padding: 28px 43px 32px 16px;
    line-height: 1.65;
    resize: vertical;
}


.dmcp-field select {
    cursor: pointer;
    appearance: none;
}


.dmcp-field select option {
    background: #19130f;
    color: #eee2d2;
}


.dmcp-field label {
    position: absolute;
    top: 20px;
    left: 16px;
    z-index: 2;
    color: #8b8177;
    font-size: 11px;
    font-weight: 500;
    pointer-events: none;
    transition: 0.25s ease;
	font-family: "Jost", sans-serif;
	
}


.dmcp-field label span {
    color: #d1ad64;
}


.dmcp-field-icon {
    position: absolute;
    top: 21px;
    right: 16px;
    color: #776b5f;
    pointer-events: none;
    transition: 0.3s ease;
}


.dmcp-field-icon svg {
    width: 15px;
}


.dmcp-select-arrow {
    position: absolute;
    top: 24px;
    right: 15px;
    color: #776b5f;
    pointer-events: none;
}


.dmcp-select-arrow svg {
    width: 13px;
}


.dmcp-field input:focus,
.dmcp-field select:focus,
.dmcp-field textarea:focus {
    border-color: rgba(216, 181, 108, 0.62);
    background: rgba(255, 255, 255, 0.045);
    box-shadow: 0 0 0 3px rgba(204, 170, 99, 0.05);
}


.dmcp-field input:focus + label,
.dmcp-field input:not(:placeholder-shown) + label,
.dmcp-field textarea:focus + label,
.dmcp-field textarea:not(:placeholder-shown) + label,
.dmcp-field select:focus + label,
.dmcp-field select.dmcp-has-value + label {
    top: 8px;
    color: #bba477;
    font-size: 7px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.dmcp-field:focus-within .dmcp-field-icon {
    color: var(--dmcp-gold);
    transform: scale(1.08);
}


.dmcp-field-line {
    position: absolute;
    right: 50%;
    bottom: 0;
    left: 50%;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--dmcp-gold),
        transparent
    );
    transition: 0.35s ease;
}


.dmcp-field:focus-within .dmcp-field-line {
    right: 12px;
    left: 12px;
}


.dmcp-character-count {
    position: absolute;
    right: 14px;
    bottom: 9px;
    color: #6e645b;
    font-size: 7px;
}


.dmcp-character-count b {
    color: #aa936d;
}


.dmcp-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 17px;
    margin-top: 5px;
}


.dmcp-submit-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-width: 205px;
    min-height: 55px;
    padding: 6px 7px 6px 21px;
    overflow: hidden;
    border: 0;
    border-radius: 50px;
    background: linear-gradient(
        135deg,
        #dec17a,
        #9c7037
    );
    color: #17100b;
    font-size:12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 17px 35px rgba(139, 95, 41, 0.25);
    transition: 0.35s ease;
	font-family: "Jost", sans-serif;
}


.dmcp-submit-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 43px rgba(146, 101, 44, 0.34);
}


.dmcp-button-shine {
    position: absolute;
    top: -60%;
    left: -55%;
    width: 35%;
    height: 220%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.46),
        transparent
    );
    transform: rotate(18deg);
    animation: dmcpButtonShine 4s ease-in-out infinite;
}


@keyframes dmcpButtonShine {
    60%,
    100% {
        left: 135%;
    }
}


.dmcp-submit-text,
.dmcp-submit-icon {
    position: relative;
    z-index: 2;
}


.dmcp-submit-icon {
    display: grid;
    width: 41px;
    height: 41px;
    place-items: center;
    border-radius: 50%;
    background: #17100c;
    color: #ddc481;
    transition: transform 0.35s ease;
}


.dmcp-submit-icon svg {
    width: 17px;
}


.dmcp-submit-button:hover .dmcp-submit-icon {
    transform: translateX(3px);
}


.dmcp-response-info {
    display: flex;
    align-items: center;
    gap: 9px;
}


.dmcp-response-pulse {
    position: relative;
    display: grid;
    width: 29px;
    height: 29px;
    place-items: center;
    border: 1px solid rgba(204, 171, 102, 0.16);
    border-radius: 50%;
}


.dmcp-response-pulse::after {
    position: absolute;
    inset: 5px;
    border: 1px solid rgba(204, 171, 102, 0.25);
    border-radius: 50%;
    content: "";
    animation: dmcpResponse 1.7s ease-out infinite;
}


.dmcp-response-pulse i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--dmcp-gold);
}


@keyframes dmcpResponse {
    to {
        inset: -4px;
        opacity: 0;
    }
}


.dmcp-response-info small {
    display: block;
    margin-bottom: 3px;
    color: #e7e7e7;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}


.dmcp-response-info strong {
    display: block;
    color: #ad9873;
    font-size: 11px;
}


/* Direct contact */

.dmcp-direct-contact {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid rgba(216, 182, 111, 0.12);
}


.dmcp-direct-contact a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #c4b294;
}


.dmcp-direct-icon {
    display: grid;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(213, 180, 109, 0.16);
    border-radius: 10px;
    background: rgba(213, 180, 109, 0.06);
    color: #cfad65;
}


.dmcp-direct-icon svg {
    width: 15px;
}


.dmcp-direct-contact small {
    display: block;
    margin-bottom: 3px;
    color: #73695f;
    font-size: 6px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.dmcp-direct-contact strong {
    display: block;
    overflow: hidden;
    color: #c6b293;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* =========================================================
   MAP PANEL
========================================================= */

.dmcp-map-panel {
    min-width: 0;
    padding: 22px;
    background:
        radial-gradient(
            circle at 100% 0,
            rgba(206, 171, 101, 0.12),
            transparent 32%
        ),
        #17120e;
}


.dmcp-map-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 3px 5px 19px;
}


.dmcp-map-title {
    display: flex;
    align-items: center;
    gap: 11px;
}


.dmcp-map-radar {
    position: relative;
    display: grid;
    width: 36px;
    height: 36px;
    place-items: center;
    border: 1px solid rgba(216, 181, 108, 0.2);
    border-radius: 50%;
}


.dmcp-map-radar::before,
.dmcp-map-radar::after {
    position: absolute;
    border: 1px solid rgba(215, 181, 108, 0.4);
    border-radius: 50%;
    content: "";
    animation: dmcpMapRadar 2.2s ease-out infinite;
}


.dmcp-map-radar::before {
    width: 18px;
    height: 18px;
}


.dmcp-map-radar::after {
    width: 29px;
    height: 29px;
    animation-delay: 0.7s;
}


.dmcp-map-radar i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dmcp-gold);
}


@keyframes dmcpMapRadar {
    from {
        opacity: 1;
        transform: scale(0.3);
    }

    to {
        opacity: 0;
        transform: scale(1.25);
    }
}


.dmcp-map-title small {
    display: block;
    margin-bottom: 3px;
    color: #776c62;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.dmcp-map-title strong {
    display: block;
    color: #dfc78d;
    font-size: 14px;
    font-weight: 700;
}


/* 3D map */

.dmcp-map-perspective {
    position: relative;
    perspective: 1500px;
}


.dmcp-map-shell {
    position: relative;
    z-index: 3;
    overflow: hidden;
    border: 1px solid rgba(224, 190, 120, 0.24);
    border-radius: 24px;
    background: #130f0c;
    box-shadow:
        0 32px 68px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    transform: rotateX(1.7deg) rotateY(-2deg);
    transform-style: preserve-3d;
    transition: transform 0.55s ease, box-shadow 0.4s ease;
}


.dmcp-map-shell:hover {
    transform: rotateX(0.3deg) rotateY(-0.4deg) translateY(-4px);
    box-shadow:
        0 43px 85px rgba(0, 0, 0, 0.42),
        0 0 38px rgba(203, 169, 99, 0.09);
}


.dmcp-map-screen {
    position: relative;
    height: 590px;
    overflow: hidden;
    background: #15110e;
}


.dmcp-map-screen iframe {
    position: absolute;
    inset: -1%;
    width: 102%;
    height: 102%;
    border: 0;
    filter:
        grayscale(0.2)
        sepia(0.1)
        saturate(0.88)
        contrast(1.04)
        brightness(0.92);
    transform: scale(1.01);
    transition: filter 0.5s ease, transform 0.7s ease, opacity 0.3s ease;
}


.dmcp-map-shell:hover iframe {
    filter:
        grayscale(0.05)
        saturate(1)
        contrast(1.02)
        brightness(0.98);
    transform: scale(1.025);
}


/* Map HUD */

.dmcp-map-interface {
    position: absolute;
    inset: 0;
    z-index: 5;
    pointer-events: none;
}


.dmcp-map-interface::after {
    position: absolute;
    inset: 0;
    content: "";
    background:
        radial-gradient(
            circle at center,
            transparent 35%,
            rgba(14, 9, 6, 0.1) 80%,
            rgba(14, 9, 6, 0.2)
        );
}


.dmcp-map-grid {
    position: absolute;
    inset: 0;
    opacity: 0.12;
    background-image:
        linear-gradient(
            rgba(231, 199, 132, 0.28) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(231, 199, 132, 0.28) 1px,
            transparent 1px
        );
    background-size: 42px 42px;
}


.dmcp-map-scan {
    position: absolute;
    top: -24%;
    right: 0;
    left: 0;
    height: 22%;
    background: linear-gradient(
        to bottom,
        transparent,
        rgba(230, 198, 130, 0.15),
        transparent
    );
    animation: dmcpMapScan 5.2s linear infinite;
}


@keyframes dmcpMapScan {
    to {
        top: 110%;
    }
}


.dmcp-map-code {
    position: absolute;
    color: rgba(227, 195, 127, 0.5);
    font-family: monospace;
    font-size: 7px;
    letter-spacing: 0.11em;
    animation: dmcpCodeBlink 2s steps(2) infinite;
}


.dmcp-map-code-one {
    top: 20px;
    left: 21px;
}


.dmcp-map-code-two {
    bottom: 21px;
    left: 21px;
    animation-delay: 0.8s;
}


@keyframes dmcpCodeBlink {
    50% {
        opacity: 0.3;
    }
}


.dmcp-map-corner {
    position: absolute;
    z-index: 2;
    width: 29px;
    height: 29px;
}


.dmcp-corner-tl {
    top: 15px;
    left: 15px;
    border-top: 1px solid #dfc07a;
    border-left: 1px solid #dfc07a;
}


.dmcp-corner-tr {
    top: 15px;
    right: 15px;
    border-top: 1px solid #dfc07a;
    border-right: 1px solid #dfc07a;
}


.dmcp-corner-bl {
    bottom: 15px;
    left: 15px;
    border-bottom: 1px solid #dfc07a;
    border-left: 1px solid #dfc07a;
}


.dmcp-corner-br {
    right: 15px;
    bottom: 15px;
    border-right: 1px solid #dfc07a;
    border-bottom: 1px solid #dfc07a;
}


/* Office floating card */

.dmcp-office-display {
    position: absolute;
    top: 50%;
    left: 25px;
    z-index: 10;
    width: min(350px, calc(100% - 50px));
    padding: 22px;
    border: 1px solid rgba(228, 195, 127, 0.27);
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(30, 22, 16, 0.92),
            rgba(14, 10, 8, 0.88)
        );
    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(16px);
    transform: translateY(-50%) translateZ(50px);
}


.dmcp-office-display::before {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 1px;
    content: "";
    background: linear-gradient(
        90deg,
        transparent,
        var(--dmcp-gold-light),
        transparent
    );
}


.dmcp-office-display-top {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 21px;
}


.dmcp-office-display-flag {
    display: grid;
    width: 50px;
    height: 50px;
    place-items: center;
    border: 1px solid rgba(223, 190, 122, 0.2);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    font-size: 25px;
	color:#f1e7d9;
}


.dmcp-office-display-top div > span {
    display: block;
    margin-bottom: 4px;
    color: #a18c69;
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.dmcp-office-display h3 {
    margin: 0;
    color: #e1c887;
    font-size: 28px;
    font-weight: 700;
}


.dmcp-office-address {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 17px;
}


.dmcp-office-address > span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 10px;
    background: rgba(208, 174, 103, 0.08);
    color: #cfad66;
}


.dmcp-office-address svg {
    width: 18px;
}


.dmcp-office-address p {
    margin: 0;
    color: #d9cec0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.65;
	font-family: "Jost", sans-serif;
}


.dmcp-office-contact {
    margin-bottom: 20px;
    padding-top: 15px;
    border-top: 1px solid rgba(217, 181, 109, 0.12);
}


.dmcp-office-contact small {
    display: block;
    margin-bottom: 4px;
    color: #83776b;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
}


.dmcp-office-contact a,
.dmcp-office-contact p {
    margin: 0;
    color: #d9bc79;
    font-size: 11px;
    font-weight: 500;
}


.dmcp-open-map {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #d6bd81;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.dmcp-open-map svg {
    width: 15px;
    transition: transform 0.3s ease;
}


.dmcp-open-map:hover svg {
    transform: translate(3px, -3px);
}


.dmcp-map-shadow {
    position: absolute;
    right: 5%;
    bottom: -18px;
    left: 5%;
    z-index: 1;
    height: 48px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.42);
    filter: blur(20px);
}


/* Loader */

.dmcp-map-loader {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: rgba(15, 10, 7, 0.96);
    color: #e2cea0;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s ease;
}


.dmcp-map-loading .dmcp-map-loader {
    opacity: 1;
    visibility: visible;
}


.dmcp-loader-radar {
    position: relative;
    width: 86px;
    height: 86px;
    margin-bottom: 15px;
}


.dmcp-loader-radar span {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 1px solid rgba(218, 183, 110, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: dmcpLoader 2s ease-out infinite;
}


.dmcp-loader-radar span:first-child {
    width: 46px;
    height: 46px;
}


.dmcp-loader-radar span:nth-child(2) {
    width: 84px;
    height: 84px;
    animation-delay: 0.7s;
}


.dmcp-loader-radar i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dmcp-gold);
    transform: translate(-50%, -50%);
}


@keyframes dmcpLoader {
    from {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.25);
    }

    to {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15);
    }
}


.dmcp-map-loader strong {
    margin-bottom: 5px;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}


.dmcp-map-loader small {
    color: #7f7368;
    font-size: 8px;
}


/* Office tabs */

.dmcp-office-switcher {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
    margin-top: 22px;
}


.dmcp-office-tab {
    position: relative;
    display: grid;
    grid-template-columns: 27px 33px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-width: 0;
    padding: 12px;
    overflow: hidden;
    border: 1px solid rgba(213, 177, 106, 0.13);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
    color: #c8b89f;
    text-align: left;
    cursor: pointer;
    transition: 0.3s ease;
}


.dmcp-office-tab::after {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent,
        var(--dmcp-gold),
        transparent
    );
    content: "";
    transform: scaleX(0);
    transition: transform 0.3s ease;
}


.dmcp-office-tab:hover,
.dmcp-office-tab.active {
    border-color: rgba(216, 181, 108, 0.4);
    background: rgba(209, 175, 105, 0.08);
    transform: translateY(-3px);
}


.dmcp-office-tab.active::after {
    transform: scaleX(1);
}


.dmcp-office-tab-hq.active {
    background:
        linear-gradient(
            135deg,
            rgba(210, 176, 105, 0.17),
            rgba(210, 176, 105, 0.05)
        );
}


.dmcp-tab-number {
    color: #6f645a;
    font-size: 12px;
    font-weight: 500;
}


.dmcp-tab-flag {
    display: grid;
    width: 33px;
    height: 33px;
    place-items: center;
    border: 1px solid rgba(212, 177, 106, 0.14);
    border-radius: 9px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 17px;
}


.dmcp-tab-content {
    min-width: 0;
}


.dmcp-tab-content small {
    display: block;
    overflow: hidden;
    margin-bottom: 2px;
    color: #d1d1d1;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}


.dmcp-tab-content strong {
    display: block;
    overflow: hidden;
    color: #d3c2a9;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}


.dmcp-office-tab > i {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #a9864d;
    box-shadow: 0 0 8px rgba(169, 134, 77, 0.55);
}


/* Reveal */

.dmcp-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.85s ease,
        transform 0.85s ease;
}


.dmcp-reveal.dmcp-visible {
    opacity: 1;
    transform: translateY(0);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1200px) {

    .dmcp-container {
        width: min(1180px, calc(100% - 40px));
    }

    .dmcp-contact-console {
        grid-template-columns: minmax(380px, 0.9fr) minmax(0, 1.1fr);
    }

    .dmcp-office-switcher {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


@media (max-width: 980px) {

    .dmcp-contact-section {
        padding: 70px 0;
    }

    .dmcp-contact-console {
        grid-template-columns: 1fr;
    }

    .dmcp-form-panel {
        border-right: 0;
        border-bottom: 1px solid rgba(217, 180, 108, 0.13);
    }

    .dmcp-map-screen {
        height: 560px;
    }

}


@media (max-width: 680px) {

    .dmcp-container {
        width: min(100%, calc(100% - 22px));
    }

    .dmcp-contact-console {
        border-radius: 24px;
    }

    .dmcp-form-panel,
    .dmcp-map-panel {
        padding: 22px 16px;
    }

    .dmcp-panel-topbar {
        margin-bottom: 35px;
    }

    .dmcp-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .dmcp-form-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .dmcp-submit-button {
        width: 100%;
    }

    .dmcp-direct-contact {
        grid-template-columns: 1fr;
    }

    .dmcp-map-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .dmcp-map-shell {
        transform: none;
    }

    .dmcp-map-shell:hover {
        transform: translateY(-3px);
    }

    .dmcp-map-screen {
        height: 500px;
    }

    .dmcp-office-display {
        top: auto;
        right: 12px;
        bottom: 12px;
        left: 12px;
        width: auto;
        padding: 18px;
        transform: none;
    }

    .dmcp-map-code {
        display: none;
    }

}


@media (max-width: 480px) {

    .dmcp-contact-section {
        padding: 50px 0;
    }

    .dmcp-form-intro h3 {
        font-size: 31px;
    }

    .dmcp-panel-topbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .dmcp-map-screen {
        height: 530px;
    }

    .dmcp-office-switcher {
        grid-template-columns: 1fr;
    }

    .dmcp-office-display h3 {
        font-size: 24px;
    }

}


@media (prefers-reduced-motion: reduce) {

    .dmcp-contact-section *,
    .dmcp-contact-section *::before,
    .dmcp-contact-section *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .dmcp-reveal {
        opacity: 1;
        transform: none;
    }

}

.dmcp-map-3d-holder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #dcecf8;
}

.dmcp-map-3d-holder gmp-map-3d {
    display: block;
    width: 100%;
    height: 100%;
}

/* Keep your visual interface above the map */
.dmcp-map-interface,
.dmcp-office-display,
.dmcp-map-loader {
    position: absolute;
    z-index: 5;
}

/* Allow users to interact with the actual map */
.dmcp-map-3d-holder {
    z-index: 1;
}

.dmcp-map-interface {
    pointer-events: none;
}

/* =========================================================
   DESIGN MASTER PREMIUM JOURNAL SECTION
========================================================= */

.dm-journal-section {
    --dm-journal-navy: #17243d;
    --dm-journal-navy-soft: #344057;
    --dm-journal-gold: #b69563;
    --dm-journal-gold-dark: #947346;
    --dm-journal-cream: #f7f3ec;
    --dm-journal-cream-light: #fcfaf6;
    --dm-journal-white: #ffffff;
    --dm-journal-border: rgba(23, 36, 61, 0.11);
    --dm-journal-muted: #6f7784;

    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(75px, 8vw, 135px) 0 clamp(70px, 8vw, 120px);
    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(182, 149, 99, 0.11),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #f7f3ec 0%,
            #fcfaf6 46%,
            #f4eee5 100%
        );
    color: var(--dm-journal-navy);
    isolation: isolate;
}

.dm-journal-section,
.dm-journal-section * {
    box-sizing: border-box;
}

.dm-journal-section a {
    color: inherit;
    text-decoration: none;
}

.dm-journal-container {
    position: relative;
    z-index: 3;
    width: min(1520px, calc(100% - 80px));
    margin: 0 auto;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

.dm-journal-background {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: -1;
}

.dm-journal-grid {
    position: absolute;
    inset: 0;
    opacity: 0.25;
    background-image:
        linear-gradient(
            rgba(23, 36, 61, 0.035) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(23, 36, 61, 0.035) 1px,
            transparent 1px
        );
    background-size: 70px 70px;
    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            black 18%,
            black 82%,
            transparent
        );
}

.dm-journal-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    filter: blur(2px);
}

.dm-journal-orb-one {
    top: -170px;
    right: -120px;
    width: 430px;
    height: 430px;
    border: 1px solid rgba(182, 149, 99, 0.2);
    animation: dmJournalOrbFloat 12s ease-in-out infinite;
}

.dm-journal-orb-one::before,
.dm-journal-orb-one::after {
    content: "";
    position: absolute;
    border-radius: inherit;
    border: 1px solid rgba(182, 149, 99, 0.12);
}

.dm-journal-orb-one::before {
    inset: 38px;
}

.dm-journal-orb-one::after {
    inset: 88px;
}

.dm-journal-orb-two {
    left: -150px;
    bottom: -190px;
    width: 390px;
    height: 390px;
    background:
        radial-gradient(
            circle,
            rgba(182, 149, 99, 0.12),
            rgba(182, 149, 99, 0.02) 60%,
            transparent 72%
        );
    animation: dmJournalOrbFloatReverse 15s ease-in-out infinite;
}

.dm-journal-line {
    position: absolute;
    display: block;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(182, 149, 99, 0.45),
            transparent
        );
    transform-origin: center;
}

.dm-journal-line-one {
    top: 24%;
    right: -8%;
    width: 420px;
    transform: rotate(-38deg);
}

.dm-journal-line-two {
    left: -7%;
    bottom: 19%;
    width: 360px;
    transform: rotate(32deg);
}


/* =========================================================
   HEADER
========================================================= */

.dm-journal-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 50px;
    margin-bottom: 42px;
}

.dm-journal-heading-block {
    max-width: 850px;
}

.dm-journal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 18px;
    color: var(--dm-journal-gold-dark);
    font-size: 12px;
    font-weight: 750;
    line-height: 1;
    letter-spacing: 0.19em;
    text-transform: uppercase;
}

.dm-journal-eyebrow-icon {
    position: relative;
    width: 35px;
    height: 35px;
    display: inline-grid;
    place-items: center;
    border: 1px solid rgba(182, 149, 99, 0.32);
    border-radius: 50%;
}

.dm-journal-eyebrow-icon::before,
.dm-journal-eyebrow-icon::after {
    content: "";
    position: absolute;
    border-radius: 50%;
}

.dm-journal-eyebrow-icon::before {
    inset: 6px;
    border: 1px dashed rgba(182, 149, 99, 0.42);
    animation: dmJournalRotate 8s linear infinite;
}

.dm-journal-eyebrow-icon::after {
    width: 5px;
    height: 5px;
    background: var(--dm-journal-gold);
    box-shadow: 0 0 0 5px rgba(182, 149, 99, 0.13);
}

.dm-journal-eyebrow-icon span {
    position: absolute;
    top: 1px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dm-journal-navy);
}

.dm-journal-header h2 {
    max-width: 900px;
    margin: 0;
    color: var(--dm-journal-navy);
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 5.3vw, 88px);
    font-weight: 500;
    line-height: 0.96;
    letter-spacing: -0.055em;
}

.dm-journal-header h2 span {
    position: relative;
    display: inline-block;
    color: var(--dm-journal-gold-dark);
    font-style: italic;
    white-space: nowrap;
}

.dm-journal-header h2 span::after {
    content: "";
    position: absolute;
    left: 3%;
    right: 0;
    bottom: -9px;
    height: 8px;
    background:
        url("data:image/svg+xml,%3Csvg width='600' height='16' viewBox='0 0 600 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 12C130 1 308 1 598 8' fill='none' stroke='%23b69563' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
        center / 100% 100% no-repeat;
    transform-origin: left;
    animation: dmJournalUnderline 4s ease-in-out infinite;
}

.dm-journal-header p {
    max-width: 670px;
    margin: 30px 0 0;
    color: var(--dm-journal-muted);
    font-size: clamp(15px, 1.25vw, 18px);
    font-weight: 450;
    line-height: 1.85;
}

.dm-journal-view-all {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 9px 9px 9px 23px;
    border: 1px solid var(--dm-journal-border);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 18px 40px rgba(23, 36, 61, 0.06);
    color: var(--dm-journal-navy);
    font-size: 13px;
    font-weight: 720;
    letter-spacing: 0.04em;
    backdrop-filter: blur(12px);
    transition:
        transform 0.4s ease,
        background-color 0.4s ease,
        box-shadow 0.4s ease;
}

.dm-journal-view-all:hover {
    transform: translateY(-4px);
    background: var(--dm-journal-white);
    box-shadow: 0 22px 50px rgba(23, 36, 61, 0.11);
}

.dm-journal-view-icon {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--dm-journal-navy);
    color: var(--dm-journal-white);
}

.dm-journal-view-icon svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.4s ease;
}

.dm-journal-view-all:hover svg {
    transform: translateX(4px);
}


/* =========================================================
   MARQUEE
========================================================= */

.dm-journal-marquee {
    position: relative;
    overflow: hidden;
    margin-bottom: 45px;
    padding: 16px 0;
    border-top: 1px solid var(--dm-journal-border);
    border-bottom: 1px solid var(--dm-journal-border);
}

.dm-journal-marquee::before,
.dm-journal-marquee::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.dm-journal-marquee::before {
    left: 0;
    background:
        linear-gradient(
            90deg,
            var(--dm-journal-cream),
            transparent
        );
}

.dm-journal-marquee::after {
    right: 0;
    background:
        linear-gradient(
            -90deg,
            var(--dm-journal-cream-light),
            transparent
        );
}

.dm-journal-marquee-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: dmJournalMarquee 35s linear infinite;
}

.dm-journal-marquee-track span {
    padding: 0 28px;
    color: var(--dm-journal-navy-soft);
    font-size: 11px;
    font-weight: 720;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dm-journal-marquee-track i {
    width: 6px;
    height: 6px;
    flex: 0 0 auto;
    border-radius: 50%;
    border: 1px solid var(--dm-journal-gold);
}


/* =========================================================
   MAIN LAYOUT
========================================================= */

.dm-journal-layout {
    display: grid;
    grid-template-columns:
        minmax(380px, 0.88fr)
        minmax(0, 1.35fr);
    align-items: stretch;
    gap: clamp(28px, 3.5vw, 58px);
}


/* =========================================================
   FEATURED ARTICLE
========================================================= */

.dm-journal-featured {
    position: relative;
    min-width: 0;
    padding: 11px;
    border: 1px solid var(--dm-journal-border);
    border-radius: 34px;
    background: rgba(255, 255, 255, 0.7);
    box-shadow:
        0 30px 90px rgba(32, 42, 60, 0.09),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
}

.dm-journal-featured-media {
    position: relative;
    display: block;
    min-height: clamp(390px, 41vw, 590px);
    overflow: hidden;
    border-radius: 25px;
    background: #ddd5c8;
}

.dm-journal-featured-media img {
    position: absolute;
    inset: 2%;
    width: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition:
        transform 1.1s cubic-bezier(0.2, 0.65, 0.3, 1),
        filter 0.8s ease;
}

.dm-journal-featured:hover .dm-journal-featured-media img {
    transform: scale(1.09);
    filter: saturate(1.05);
}

.dm-journal-image-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(14, 25, 45, 0.08) 0%,
            rgba(14, 25, 45, 0.02) 37%,
            rgba(14, 25, 45, 0.64) 100%
        );
}

.dm-journal-featured-top {
    position: absolute;
    top: 22px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.dm-journal-featured-label {
    display: inline-flex;
    align-items: center;
    min-height: 35px;
    padding: 0 17px;
    border: 1px solid rgba(255, 255, 255, 0.32);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    backdrop-filter: blur(14px);
}

.dm-journal-featured-number {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, 0.33);
    border-radius: 50%;
    color: #ffffff;
    font-size: 11px;
    font-weight: 750;
    backdrop-filter: blur(12px);
}

.dm-journal-featured-visual-text {
    position: absolute;
    left: 22px;
    bottom: 28px;
    color: rgba(255, 255, 255, 0.13);
    font-size: clamp(35px, 4.2vw, 72px);
    font-weight: 850;
    line-height: 0.8;
    letter-spacing: -0.055em;
    pointer-events: none;
}

.dm-journal-featured-arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 57px;
    height: 57px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--dm-journal-navy);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.16);
    transition:
        transform 0.45s ease,
        background-color 0.45s ease,
        color 0.45s ease;
}

.dm-journal-featured-arrow svg {
    width: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-journal-featured:hover .dm-journal-featured-arrow {
    transform: rotate(45deg);
    background: var(--dm-journal-gold);
    color: #ffffff;
}

.dm-journal-featured-content {
    padding: clamp(25px, 3vw, 40px) clamp(14px, 2vw, 27px) 20px;
}

.dm-journal-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 17px;
    color: var(--dm-journal-gold-dark);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dm-journal-meta i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dm-journal-gold);
}

.dm-journal-featured-content h3 {
    margin: 0;
    font-size: clamp(25px, 2.0vw, 30px);
    font-weight: 600;
    line-height: 1.17;
}

.dm-journal-featured-content h3 a {
    transition: color 0.3s ease;
}

.dm-journal-featured-content h3 a:hover {
    color: var(--dm-journal-gold-dark);
}

.dm-journal-featured-content p {
    margin: 19px 0 0;
    color: var(--dm-journal-muted);
    font-size: 14px;
    line-height: 1.8;
}

.dm-journal-read-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-top: 25px;
    padding-bottom: 6px;
    color: var(--dm-journal-navy);
    font-size: 12px;
    font-weight: 750;
    letter-spacing: 0.04em;
}

.dm-journal-read-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--dm-journal-gold);
    transform-origin: right;
    transition: transform 0.4s ease;
}

.dm-journal-read-link:hover::after {
    transform: scaleX(0.45);
}

.dm-journal-read-link svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.35s ease;
}

.dm-journal-read-link:hover svg {
    transform: translateX(5px);
}


/* =========================================================
   SLIDER PANEL
========================================================= */

.dm-journal-slider-panel {
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding-top: 8px;
}

.dm-journal-slider-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 25px;
    margin-bottom: 27px;
}

.dm-journal-slider-caption {
    display: block;
    margin-bottom: 8px;
    color: var(--dm-journal-gold-dark);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dm-journal-slider-header h3 {
    max-width: 530px;
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(25px, 2.35vw, 39px);
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -0.035em;
}

.dm-journal-controls {
    display: flex;
    gap: 9px;
}

.dm-journal-control {
    position: relative;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    overflow: hidden;
    border: 1px solid var(--dm-journal-border);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.62);
    color: var(--dm-journal-navy);
    cursor: pointer;
    transition:
        background-color 0.35s ease,
        border-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}

.dm-journal-control:hover:not(:disabled) {
    transform: translateY(-3px);
    border-color: var(--dm-journal-navy);

    background: var(--dm-journal-navy);
    color: #ffffff;
}

.dm-journal-control:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.dm-journal-control svg {
    width: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-journal-slider {
    position: relative;
    min-width: 0;
    cursor: grab;
    user-select: none;
    touch-action: pan-y;
}

.dm-journal-slider.dm-journal-dragging {
    cursor: grabbing;
}


.dm-journal-slider-viewport {
    min-width: 0;
    overflow: hidden;
}

.dm-journal-track {
    display: flex;
    align-items: stretch;
    gap: 22px;
    will-change: transform;
    transition:
        transform 0.8s
        cubic-bezier(0.22, 0.75, 0.2, 1);
}

.dm-journal-slider.dm-journal-dragging .dm-journal-track {
    transition: none;
}


/* =========================================================
   ARTICLE CARDS
========================================================= */

.dm-journal-card {
    flex: 0 0 calc((100% - 22px) / 2);
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--dm-journal-border);
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 19px 50px rgba(23, 36, 61, 0.06);
    transform: translateZ(0);
    transition:
        transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1),
        box-shadow 0.5s ease,
        border-color 0.5s ease;
}

.dm-journal-card:hover {
    transform: translateY(-9px);
    border-color: rgba(182, 149, 99, 0.42);
    box-shadow: 0 32px 75px rgba(23, 36, 61, 0.12);
}

.dm-journal-card-image {
    position: relative;
    display: block;
    height: clamp(235px, 24vw, 355px);
    overflow: hidden;
    background: #e5ddd0;
}

.dm-journal-card-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            rgba(18, 30, 50, 0.02),
            rgba(18, 30, 50, 0.28)
        );
    transition: background 0.45s ease;
}

.dm-journal-card:hover .dm-journal-card-image::after {
    background:
        linear-gradient(
            180deg,
            rgba(18, 30, 50, 0),
            rgba(18, 30, 50, 0.18)
        );
}

.dm-journal-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition:
        transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1),
        filter 0.6s ease;
}

.dm-journal-card:hover .dm-journal-card-image img {
    transform: scale(1.1);
    filter: saturate(1.06);
}

.dm-journal-card-category {
    position: absolute;
    left: 17px;
    top: 17px;
    z-index: 2;
    min-height: 31px;
    display: inline-flex;
    align-items: center;
    padding: 0 13px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.19);
    color: #ffffff;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    backdrop-filter: blur(13px);
}

.dm-journal-card-hover {
    position: absolute;
    right: 17px;
    bottom: 17px;
    z-index: 2;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: var(--dm-journal-navy);
    opacity: 0;
    transform: translateY(12px) rotate(-15deg);
    transition:
        opacity 0.4s ease,
        transform 0.4s ease;
}

.dm-journal-card:hover .dm-journal-card-hover {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

.dm-journal-card-hover svg {
    width: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-journal-card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: clamp(22px, 2.2vw, 31px);
}

.dm-journal-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
    color: var(--dm-journal-gold-dark);
    font-size: 9px;
    font-weight: 780;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.dm-journal-card h4 {
    margin: 0;
    font-size: clamp(20px, 1.72vw, 22px);
    font-weight: 500;
    line-height: 1.24;
}

.dm-journal-card h4 a {
    transition: color 0.3s ease;
}

.dm-journal-card h4 a:hover {
    color: var(--dm-journal-gold-dark);
}

.dm-journal-card p {
    margin: 16px 0 23px;
    color: var(--dm-journal-muted);
    font-size: 13px;
    line-height: 1.75;
}

.dm-journal-card-link {
    position: relative;
    align-self: flex-start;
    margin-top: auto;
    padding-bottom: 5px;
    color: var(--dm-journal-navy);
    font-size: 11px;
    font-weight: 780;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.dm-journal-card-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 1px;
    background: var(--dm-journal-gold);
    transition: width 0.35s ease;
}

.dm-journal-card-link:hover::after {
    width: 100%;
}


/* =========================================================
   SLIDER FOOTER
========================================================= */

.dm-journal-slider-footer {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 31px;
}

.dm-journal-progress {
    position: relative;
    flex: 1;
    height: 2px;
    overflow: hidden;
    background: rgba(23, 36, 61, 0.12);
}

.dm-journal-progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 16.666%;
    background:
        linear-gradient(
            90deg,
            var(--dm-journal-gold),
            var(--dm-journal-navy)
        );
    transform-origin: left;
    transition: width 0.65s ease;
}

.dm-journal-counter {
    min-width: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    font-size: 10px;
    font-weight: 760;
    letter-spacing: 0.12em;
}

.dm-journal-counter i {
    width: 14px;
    height: 1px;
    background: rgba(23, 36, 61, 0.35);
}

.dm-journal-current {
    color: var(--dm-journal-gold-dark);
}

.dm-journal-total {
    color: var(--dm-journal-muted);
}


/* =========================================================
   BOTTOM TEXT
========================================================= */

.dm-journal-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    margin-top: 54px;
    padding-top: 25px;
    border-top: 1px solid var(--dm-journal-border);
}

.dm-journal-bottom-label {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--dm-journal-navy);
    font-size: 10px;
    font-weight: 780;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.dm-journal-bottom-label span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--dm-journal-gold);
    box-shadow:
        0 0 0 6px rgba(182, 149, 99, 0.12);
    animation: dmJournalPulse 2.6s ease-in-out infinite;
}

.dm-journal-bottom p {
    margin: 0;
    color: var(--dm-journal-muted);
    font-size: 12px;
    letter-spacing: 0.025em;
}


/* =========================================================
   REVEAL ANIMATION
========================================================= */

.dm-journal-reveal {
    opacity: 0;
    transform: translateY(35px);
    transition:
        opacity 0.9s ease,
        transform 0.9s cubic-bezier(0.2, 0.75, 0.2, 1);
}

.dm-journal-reveal.dm-journal-visible {
    opacity: 1;
    transform: translateY(0);
}

.dm-journal-marquee.dm-journal-reveal {
    transition-delay: 0.12s;
}

.dm-journal-featured.dm-journal-reveal {
    transition-delay: 0.18s;
}

.dm-journal-slider-panel.dm-journal-reveal {
    transition-delay: 0.27s;
}

.dm-journal-bottom.dm-journal-reveal {
    transition-delay: 0.32s;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes dmJournalRotate {
    to {
        transform: rotate(360deg);
    }
}

@keyframes dmJournalOrbFloat {
    0%,
    100% {
        transform: translate3d(0, 0, 0) rotate(0);
    }

    50% {
        transform: translate3d(-25px, 22px, 0) rotate(12deg);
    }
}

@keyframes dmJournalOrbFloatReverse {
    0%,
    100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(30px, -22px, 0) scale(1.07);
    }
}

@keyframes dmJournalUnderline {
    0%,
    100% {
        transform: scaleX(0.86);
        opacity: 0.65;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes dmJournalMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

@keyframes dmJournalPulse {
    0%,
    100% {
        box-shadow:
            0 0 0 5px rgba(182, 149, 99, 0.12);
    }

    50% {
        box-shadow:
            0 0 0 10px rgba(182, 149, 99, 0);
    }
}


/* =========================================================
   LARGE LAPTOP
========================================================= */

@media (max-width: 1350px) {

    .dm-journal-container {
        width: min(1280px, calc(100% - 60px));
    }

    .dm-journal-layout {
        grid-template-columns:
            minmax(350px, 0.9fr)
            minmax(0, 1.2fr);
        gap: 35px;
    }

    .dm-journal-card-image {
        height: 275px;
    }

}


/* =========================================================
   TABLET LANDSCAPE
========================================================= */

@media (max-width: 1100px) {

    .dm-journal-header {
        align-items: flex-start;
    }

    .dm-journal-layout {
        grid-template-columns: 1fr;
    }

    .dm-journal-featured {
        display: grid;
        grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.88fr);
        align-items: stretch;
    }

    .dm-journal-featured-media {
        min-height: 500px;
    }

    .dm-journal-featured-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 40px;
    }

    .dm-journal-slider-panel {
        margin-top: 15px;
    }

    .dm-journal-card-image {
        height: 320px;
    }

}


/* =========================================================
   TABLET PORTRAIT
========================================================= */

@media (max-width: 820px) {

    .dm-journal-section {
        padding-top: 80px;
    }

    .dm-journal-container {
        width: min(100% - 38px, 720px);
    }

    .dm-journal-header {
        display: block;
    }

    .dm-journal-view-all {
        margin-top: 30px;
    }

    .dm-journal-featured {
        display: block;
    }

    .dm-journal-featured-media {
        min-height: 470px;
    }

    .dm-journal-featured-content {
        display: block;
        padding: 30px 20px 22px;
    }

    .dm-journal-card {
        flex-basis: 74%;
    }

    .dm-journal-card-image {
        height: 330px;
    }

    .dm-journal-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 13px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .dm-journal-section {
        padding: 65px 0 70px;
    }

    .dm-journal-container {
        width: calc(100% - 28px);
    }

    .dm-journal-header {
        margin-bottom: 32px;
    }

    .dm-journal-header h2 {
        font-size: clamp(39px, 12vw, 56px);
        line-height: 1;
    }

    .dm-journal-header h2 span {
        white-space: normal;
    }

    .dm-journal-header p {
        margin-top: 24px;
        font-size: 14px;
        line-height: 1.75;
    }

    .dm-journal-view-all {
        width: 100%;
        justify-content: space-between;
    }

    .dm-journal-marquee {
        margin-bottom: 30px;
    }

    .dm-journal-featured {
        padding: 7px;
        border-radius: 25px;
    }

    .dm-journal-featured-media {
        min-height: 380px;
        border-radius: 19px;
    }

    .dm-journal-featured-top {
        top: 16px;
        left: 16px;
        right: 16px;
    }

    .dm-journal-featured-label {
        padding: 0 12px;
        font-size: 8px;
    }

    .dm-journal-featured-number {
        width: 36px;
        height: 36px;
    }

    .dm-journal-featured-arrow {
        right: 16px;
        bottom: 16px;
        width: 47px;
        height: 47px;
    }

    .dm-journal-featured-visual-text {
        left: 16px;
        bottom: 23px;
        max-width: calc(100% - 85px);
        overflow: hidden;
        font-size: 40px;
    }

    .dm-journal-featured-content {
        padding: 27px 16px 20px;
    }

    .dm-journal-featured-content h3 {
        font-size: 28px;
    }

    .dm-journal-slider-header {
        align-items: center;
    }

    .dm-journal-slider-header h3 {
        font-size: 27px;
    }

    .dm-journal-control {
        width: 43px;
        height: 43px;
    }

    .dm-journal-card {
        flex-basis: 88%;
        border-radius: 21px;
    }

    .dm-journal-card-image {
        height: 285px;
    }

    .dm-journal-card-content {
        padding: 24px 21px 25px;
    }

    .dm-journal-card h4 {
        font-size: 24px;
    }

    .dm-journal-card-hover {
        opacity: 1;
        transform: none;
    }

    .dm-journal-slider-footer {
        margin-top: 25px;
    }

    .dm-journal-bottom {
        margin-top: 42px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .dm-journal-featured-media {
        min-height: 335px;
    }

    .dm-journal-card {
        flex-basis: 94%;
    }

    .dm-journal-card-image {
        height: 250px;
    }

    .dm-journal-slider-header {
        align-items: flex-start;
    }

    .dm-journal-slider-header h3 {
        font-size: 23px;
    }

    .dm-journal-controls {
        padding-top: 3px;
    }

    .dm-journal-control {
        width: 39px;
        height: 39px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .dm-journal-section *,
    .dm-journal-section *::before,
    .dm-journal-section *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }

    .dm-journal-reveal {
        opacity: 1;
        transform: none;
    }

}

    .dm-journal-layout.dm-journal-full-image-layout {
        display: grid;
        grid-template-columns: minmax(380px, 0.92fr) minmax(0, 1.45fr);
        align-items: start;
        gap: clamp(28px, 3vw, 50px);
    }

    /* =====================================================
       FEATURED ARTICLE
    ===================================================== */

    .dm-journal-full-image-layout .dm-journal-featured {
        position: sticky;
        top: 30px;
        display: block;
        min-width: 0;
        padding: 10px;
        overflow: hidden;
        border: 1px solid rgba(23, 36, 61, 0.1);
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.92);
        box-shadow:
            0 30px 80px rgba(23, 36, 61, 0.09),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }

    .dm-journal-featured-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        padding: 12px 13px 19px;
    }

    .dm-journal-featured-head-left {
        display: flex;
        align-items: center;
        gap: 11px;
        min-width: 0;
    }

    .dm-journal-featured-head-icon {
        position: relative;
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border: 1px solid rgba(182, 149, 99, 0.28);
        border-radius: 50%;
        background: rgba(182, 149, 99, 0.08);
    }

    .dm-journal-featured-head-icon::before {
        content: "";
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #b69563;
        box-shadow:
            0 0 0 5px rgba(182, 149, 99, 0.12),
            0 0 22px rgba(182, 149, 99, 0.28);
    }

    .dm-journal-featured-head-text {
        min-width: 0;
    }

    .dm-journal-featured-head-text small {
        display: block;
        margin-bottom: 4px;
        color: #947346;
        font-size: 9px;
        font-weight: 800;
        line-height: 1;
        letter-spacing: 0.15em;
        text-transform: uppercase;
    }

    .dm-journal-featured-head-text strong {
        display: block;
        overflow: hidden;
        color: #17243d;
        font-size: 13px;
        font-weight: 750;
        line-height: 1.3;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .dm-journal-featured-number {
        position: static !important;
        width: 39px;
        height: 39px;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        border: 1px solid rgba(23, 36, 61, 0.12) !important;
        border-radius: 50%;
        background: #f7f3ec !important;
        color: #17243d !important;
        font-size: 10px;
        font-weight: 800;
        box-shadow: none !important;
        backdrop-filter: none !important;
    }

    /* Full featured image */
    .dm-journal-full-image-layout .dm-journal-featured-media {
        position: relative !important;
        display: block !important;
        width: 100%;
        min-height: 0 !important;
        height: auto !important;
        padding: 9px;
        overflow: hidden;
        border: 1px solid rgba(23, 36, 61, 0.08);
        border-radius: 24px;
        background:
            linear-gradient(135deg, #f5f1ea, #ffffff);
    }

    .dm-journal-full-image-layout .dm-journal-featured-media::before {
        content: "";
        position: absolute;
        inset: 16px;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, 0.16);
        border-radius: 15px;
        pointer-events: none;
    }

    .dm-journal-full-image-layout .dm-journal-featured-media img {
        position: relative !important;
        inset: auto !important;
        z-index: 1;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 auto;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 17px;
        transform: none !important;
        filter: none !important;
        transition:
            opacity 0.4s ease,
            box-shadow 0.4s ease !important;
    }

    .dm-journal-full-image-layout
    .dm-journal-featured:hover
    .dm-journal-featured-media img {
        transform: none !important;
        filter: none !important;
    }

    .dm-journal-image-overlay {
        display: none !important;
    }

    .dm-journal-featured-arrow {
        right: 24px !important;
        bottom: 24px !important;
        z-index: 4;
        width: 49px !important;
        height: 49px !important;
        border: 1px solid rgba(23, 36, 61, 0.1);
        background: rgba(255, 255, 255, 0.94) !important;
        color: #17243d !important;
        box-shadow: 0 15px 35px rgba(23, 36, 61, 0.16) !important;
        backdrop-filter: blur(10px);
    }

    .dm-journal-featured:hover .dm-journal-featured-arrow {
        transform: rotate(45deg) !important;
        background: #b69563 !important;
        color: #ffffff !important;
    }

    .dm-journal-full-image-layout .dm-journal-featured-content {
        padding: clamp(26px, 2.6vw, 39px) clamp(17px, 2vw, 28px) 24px;
    }

    .dm-journal-featured-content h3 {
        font-size: clamp(27px, 2.0vw, 30px);
        line-height: 1.15;
    }

    .dm-journal-featured-content p {
        max-width: 650px;
    }

    .dm-journal-featured-actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
        margin-top: 27px;
        padding-top: 23px;
        border-top: 1px solid rgba(23, 36, 61, 0.09);
    }

    .dm-journal-featured-status {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: #6f7784;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 0.09em;
        text-transform: uppercase;
    }

    .dm-journal-featured-status span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #b69563;
        box-shadow: 0 0 0 5px rgba(182, 149, 99, 0.12);
    }

    /* =====================================================
       SLIDER PANEL
    ===================================================== */

    .dm-journal-full-image-layout .dm-journal-slider-panel {
        min-width: 0;
        padding: clamp(22px, 2.4vw, 34px);
        border: 1px solid rgba(23, 36, 61, 0.09);
        border-radius: 32px;
        background: rgba(255, 255, 255, 0.56);
        box-shadow: 0 25px 70px rgba(23, 36, 61, 0.06);
        backdrop-filter: blur(14px);
    }

    .dm-journal-slider-header {
        margin-bottom: 28px;
        padding-bottom: 23px;
        border-bottom: 1px solid rgba(23, 36, 61, 0.09);
    }

    .dm-journal-slider-header h3 {
        max-width: 570px;
    }

    /* =====================================================
       SLIDER CARDS
    ===================================================== */

    .dm-journal-full-image-layout .dm-journal-track {
        align-items: stretch;
        gap: 22px;
    }

    .dm-journal-full-image-layout .dm-journal-card {
        flex: 0 0 calc((100% - 22px) / 2);
        min-width: 0;
        display: flex;
        flex-direction: column;
        padding: 8px;
        overflow: hidden;
        border: 1px solid rgba(23, 36, 61, 0.09);
        border-radius: 25px;
        background: #ffffff;
        box-shadow: 0 18px 45px rgba(23, 36, 61, 0.055);
    }

    .dm-journal-card-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 9px 9px 15px;
    }

    .dm-journal-card-category {
        position: static !important;
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        padding: 0 12px;
        border: 1px solid rgba(182, 149, 99, 0.22) !important;
        border-radius: 999px;
        background: rgba(182, 149, 99, 0.08) !important;
        color: #947346 !important;
        font-size: 8px;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        backdrop-filter: none !important;
    }

    .dm-journal-card-sequence {
        color: #9299a4;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 0.12em;
    }

    /* Full card image */
    .dm-journal-full-image-layout .dm-journal-card-image {
        position: relative !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: auto !important;
        min-height: 0 !important;
        aspect-ratio: 16 / 10;
        padding: 7px;
        overflow: hidden;
        border: 1px solid rgba(23, 36, 61, 0.07);
        border-radius: 18px;
        background:
            linear-gradient(135deg, #f6f2ec, #fbfaf8);
    }

    .dm-journal-full-image-layout .dm-journal-card-image::after {
        display: none !important;
    }

    .dm-journal-full-image-layout .dm-journal-card-image img {
        position: relative !important;
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        object-fit: contain !important;
        object-position: center !important;
        border-radius: 12px;
        transform: none !important;
        filter: none !important;
    }

    .dm-journal-full-image-layout
    .dm-journal-card:hover
    .dm-journal-card-image img {
        transform: none !important;
        filter: none !important;
    }

    .dm-journal-card-hover {
        right: 16px !important;
        bottom: 16px !important;
        opacity: 1 !important;
        transform: none !important;
        border: 1px solid rgba(23, 36, 61, 0.1);
        box-shadow: 0 12px 28px rgba(23, 36, 61, 0.13);
    }

    .dm-journal-full-image-layout .dm-journal-card-content {
        padding: 25px 15px 19px;
    }

    .dm-journal-full-image-layout .dm-journal-card h4 {
        font-size: clamp(20px, 1.55vw, 22px);
        line-height: 1.26;
    }

    .dm-journal-full-image-layout .dm-journal-card p {
        margin-bottom: 22px;
    }

    /* =====================================================
       RESPONSIVE
    ===================================================== */

    @media (max-width: 1199px) {
        .dm-journal-layout.dm-journal-full-image-layout {
            grid-template-columns: 1fr;
        }

        .dm-journal-full-image-layout .dm-journal-featured {
            position: relative;
            top: auto;
        }

        .dm-journal-featured-content h3 {
            max-width: 880px;
        }
    }

    @media (max-width: 850px) {
        .dm-journal-full-image-layout .dm-journal-card {
            flex-basis: 76%;
        }

        .dm-journal-full-image-layout .dm-journal-slider-panel {
            padding: 25px 20px;
        }
    }

    @media (max-width: 600px) {
        .dm-journal-layout.dm-journal-full-image-layout {
            gap: 25px;
        }

        .dm-journal-full-image-layout .dm-journal-featured {
            padding: 7px;
            border-radius: 24px;
        }

        .dm-journal-featured-head {
            padding: 10px 8px 15px;
        }

        .dm-journal-featured-head-text strong {
            font-size: 11px;
        }

        .dm-journal-full-image-layout .dm-journal-featured-media {
            padding: 5px;
            border-radius: 18px;
        }

        .dm-journal-full-image-layout .dm-journal-featured-media img {
            border-radius: 13px;
        }

        .dm-journal-featured-arrow {
            right: 14px !important;
            bottom: 14px !important;
            width: 42px !important;
            height: 42px !important;
        }

        .dm-journal-full-image-layout .dm-journal-featured-content {
            padding: 25px 14px 20px;
        }

        .dm-journal-featured-content h3 {
            font-size: 28px;
        }

        .dm-journal-featured-actions {
            align-items: flex-start;
            flex-direction: column;
        }

        .dm-journal-full-image-layout .dm-journal-slider-panel {
            padding: 22px 13px;
            border-radius: 24px;
        }

        .dm-journal-full-image-layout .dm-journal-card {
            flex-basis: 90%;
        }

        .dm-journal-full-image-layout .dm-journal-card-image {
            aspect-ratio: 16 / 10;
        }
    }

    @media (max-width: 420px) {
        .dm-journal-full-image-layout .dm-journal-card {
            flex-basis: 95%;
        }

        .dm-journal-featured-head-icon {
            width: 34px;
            height: 34px;
        }
    }


/* =========================================================
   DESIGN MASTER — PREMIUM BLOG CTA
========================================================= */

.dm-journal-bottom {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    margin-top: clamp(42px, 5vw, 70px);
    padding: clamp(24px, 3vw, 38px);
    overflow: hidden;
    border: 1px solid rgba(23, 36, 61, 0.1);
    border-radius: 28px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 244, 237, 0.94)
        );
    box-shadow:
        0 24px 65px rgba(23, 36, 61, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
    isolation: isolate;

    opacity: 0;
    transform: translateY(32px);
    transition:
        opacity 0.8s ease,
        transform 0.8s cubic-bezier(0.2, 0.75, 0.2, 1),
        box-shadow 0.4s ease;
}

.dm-journal-bottom.dm-journal-bottom-visible {
    opacity: 1;
    transform: translateY(0);
}

.dm-journal-bottom:hover {
    box-shadow:
        0 34px 80px rgba(23, 36, 61, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.96);
}


/* =========================================================
   DECORATIVE ELEMENTS
========================================================= */

.dm-journal-bottom::before {
    content: "";
    position: absolute;
    top: -105px;
    right: 14%;
    z-index: -1;
    width: 230px;
    height: 230px;
    border: 1px solid rgba(182, 149, 99, 0.16);
    border-radius: 50%;
    animation: dmJournalCtaOrbit 12s linear infinite;
}

.dm-journal-bottom::after {
    content: "";
    position: absolute;
    right: -75px;
    bottom: -110px;
    z-index: -1;
    width: 230px;
    height: 230px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(182, 149, 99, 0.13),
            transparent 68%
        );
    animation: dmJournalCtaGlow 6s ease-in-out infinite;
}

.dm-journal-bottom-line {
    position: absolute;
    top: 0;
    left: 7%;
    width: 86%;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.dm-journal-bottom-line::before {
    content: "";
    position: absolute;
    top: 0;
    left: -35%;
    width: 35%;
    height: 100%;
    background:
        linear-gradient(
            90deg,
            transparent,
            #b69563,
            rgba(255, 255, 255, 0.95),
            #b69563,
            transparent
        );
    animation: dmJournalCtaLine 4.8s ease-in-out infinite;
}


/* =========================================================
   CONTENT
========================================================= */

.dm-journal-bottom-content {
    display: flex;
    align-items: center;
    gap: 21px;
    min-width: 0;
}

.dm-journal-bottom-icon {
    position: relative;
    width: 60px;
    height: 60px;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    border: 1px solid rgba(182, 149, 99, 0.25);
    border-radius: 18px;
    background:
        linear-gradient(
            145deg,
            rgba(182, 149, 99, 0.13),
            rgba(255, 255, 255, 0.86)
        );
    color: #947346;
    box-shadow: 0 14px 30px rgba(23, 36, 61, 0.07);
    animation: dmJournalCtaIconFloat 4s ease-in-out infinite;
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.dm-journal-bottom-icon::before {
    content: "";
    position: absolute;
    inset: -7px;
    border: 1px solid rgba(182, 149, 99, 0.18);
    border-radius: 22px;
    opacity: 0;
    animation: dmJournalCtaIconPulse 3s ease-out infinite;
}

.dm-journal-bottom:hover .dm-journal-bottom-icon {
    animation-play-state: paused;
    transform: translateY(-3px) rotate(-3deg);
    box-shadow: 0 18px 36px rgba(23, 36, 61, 0.11);
}

.dm-journal-bottom-icon svg {
    width: 25px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dm-journal-bottom-text {
    min-width: 0;
}

.dm-journal-bottom-text > span {
    display: block;
    margin-bottom: 8px;
    color: #947346;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.dm-journal-bottom-text h3 {
    position: relative;
    /*max-width: 690px;*/
    margin: 0;
    color: #17243d;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(22px, 2.1vw, 34px);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.dm-journal-bottom-text h3::after {
    content: "";
    display: block;
    width: 58px;
    height: 2px;
    margin-top: 13px;
    background:
        linear-gradient(
            90deg,
            #b69563,
            rgba(182, 149, 99, 0.12)
        );
    transform-origin: left;
    animation: dmJournalCtaUnderline 3.4s ease-in-out infinite;
}


/* =========================================================
   BUTTON
========================================================= */

.dm-journal-more-btn {
    position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 8px 8px 8px 23px;
    overflow: hidden;
    border: 1px solid rgba(23, 36, 61, 0.12);
    border-radius: 999px;
    background: #17243d;
    color: #ffffff !important;
    font-size: 12px;
    font-weight: 760;
    letter-spacing: 0.045em;
    box-shadow: 0 18px 38px rgba(23, 36, 61, 0.18);
    isolation: isolate;
    transition:
        transform 0.4s ease,
        background-color 0.4s ease,
        box-shadow 0.4s ease;
}

.dm-journal-more-btn::before {
    content: "";
    position: absolute;
    top: -30%;
    left: -55%;
    width: 36%;
    height: 160%;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent
        );
    transform: rotate(18deg);
    animation: dmJournalCtaShine 4.2s ease-in-out infinite;
}

.dm-journal-more-btn:hover {
    transform: translateY(-4px);
    background: #b69563;
    box-shadow: 0 24px 50px rgba(23, 36, 61, 0.23);
}

.dm-journal-more-btn-icon {
    position: relative;
    z-index: 1;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #ffffff;
    color: #17243d;
}

.dm-journal-more-btn-icon svg {
    width: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    animation: dmJournalCtaArrow 1.9s ease-in-out infinite;
}


/* =========================================================
   ENTRANCE STAGGER
========================================================= */

.dm-journal-bottom-text > span,
.dm-journal-bottom-text h3,
.dm-journal-more-btn {
    transform: translateY(16px);
}

.dm-journal-bottom.dm-journal-bottom-visible
.dm-journal-bottom-text > span {
    animation: dmJournalCtaReveal 0.65s ease 0.12s forwards;
}

.dm-journal-bottom.dm-journal-bottom-visible
.dm-journal-bottom-text h3 {
    animation: dmJournalCtaReveal 0.72s ease 0.22s forwards;
}

.dm-journal-bottom.dm-journal-bottom-visible
.dm-journal-more-btn {
    animation: dmJournalCtaReveal 0.72s ease 0.34s forwards;
}


/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes dmJournalCtaReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes dmJournalCtaOrbit {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes dmJournalCtaGlow {
    0%,
    100% {
        transform: scale(0.94);
        opacity: 0.55;
    }

    50% {
        transform: scale(1.1);
        opacity: 1;
    }
}

@keyframes dmJournalCtaLine {
    0% {
        left: -35%;
        opacity: 0;
    }

    18% {
        opacity: 1;
    }

    72% {
        opacity: 1;
    }

    100% {
        left: 115%;
        opacity: 0;
    }
}

@keyframes dmJournalCtaIconFloat {
    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }
}

@keyframes dmJournalCtaIconPulse {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    35% {
        opacity: 0.65;
    }

    100% {
        transform: scale(1.22);
        opacity: 0;
    }
}

@keyframes dmJournalCtaUnderline {
    0%,
    100% {
        transform: scaleX(0.48);
        opacity: 0.55;
    }

    50% {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes dmJournalCtaShine {
    0%,
    58% {
        left: -55%;
    }

    100% {
        left: 125%;
    }
}

@keyframes dmJournalCtaArrow {
    0%,
    100% {
        transform: translateX(0);
    }

    50% {
        transform: translateX(4px);
    }
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 850px) {
    .dm-journal-bottom {
        align-items: flex-start;
        flex-direction: column;
    }

    .dm-journal-more-btn {
        align-self: flex-start;
    }
}

@media (max-width: 600px) {
    .dm-journal-bottom {
        gap: 24px;
        padding: 22px 18px;
        border-radius: 23px;
    }

    .dm-journal-bottom-content {
        align-items: flex-start;
        gap: 15px;
    }

    .dm-journal-bottom-icon {
        width: 50px;
        height: 50px;
        border-radius: 15px;
    }

    .dm-journal-bottom-text h3 {
        font-size: 23px;
    }

    .dm-journal-more-btn {
        width: 100%;
        justify-content: space-between;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
    .dm-journal-bottom,
    .dm-journal-bottom *,
    .dm-journal-bottom::before,
    .dm-journal-bottom::after,
    .dm-journal-bottom *::before,
    .dm-journal-bottom *::after {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }

    .dm-journal-bottom,
    .dm-journal-bottom-text > span,
    .dm-journal-bottom-text h3,
    .dm-journal-more-btn {
        opacity: 1 !important;
        transform: none !important;
    }
}








/* =========================================================
   DESIGN MASTER — PREMIUM BLOG DETAILS PAGE
========================================================= */

.dm-article-page,
.dm-article-page * {
    box-sizing: border-box;
}

.dm-article-page {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: clamp(70px, 7vw, 115px) 24px
             clamp(80px, 8vw, 130px);
    background:
        radial-gradient(
            circle at 8% 8%,
            rgba(199, 165, 105, 0.08),
            transparent 27%
        ),
        radial-gradient(
            circle at 94% 32%,
            rgba(199, 165, 105, 0.06),
            transparent 24%
        ),
        #fcfcfb;
    color: #202020;
}

.dm-article-page::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1320px, calc(100% - 48px));
    height: 1px;
    transform: translateX(-50%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(178, 141, 78, 0.42),
        transparent
    );
}

.dm-article-container {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
    margin: 0 auto;
}


/* =========================================================
   ARTICLE HEADER
========================================================= */

.dm-article-header {
    width: min(1050px, 100%);
    margin: 0 auto clamp(42px, 5vw, 65px);
    text-align: center;
}

.dm-article-category {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 24px;
    color: #9b7740;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.dm-category-line {
    display: block;
    width: 35px;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        #b9945a
    );
}

.dm-category-line:last-child {
    transform: rotate(180deg);
}

.dm-article-header h1 {
    max-width: 1020px;
    margin: 0 auto;
    color: #171717;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(42px, 5vw, 50px);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.04em;
    text-wrap: balance;
}

.dm-article-summary {
    max-width: 820px;
    margin: 26px auto 0;
    color: #676767;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(16px, 1.35vw, 19px);
    font-weight: 400;
    line-height: 1.75;
    text-wrap: balance;
}

.dm-article-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 13px;
    margin-top: 26px;
    color: #858585;
    font-family: "Manrope", Arial, sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.dm-meta-dot {
    width: 4px;
    height: 4px;
    flex: 0 0 4px;
    border-radius: 50%;
    background: #b79358;
}


/* =========================================================
   FEATURED IMAGE
========================================================= */

.dm-article-featured {
    position: relative;
    width: min(1160px, 100%);
    height: clamp(300px, 32vw, 470px);
    margin: 0 auto;
    overflow: hidden;
    border-radius: 24px;
    background: #e9e9e7;
    box-shadow:
        0 35px 70px rgba(25, 25, 25, 0.1),
        0 10px 25px rgba(25, 25, 25, 0.06);
}

.dm-article-featured::before {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: inherit;
}

.dm-article-featured::after {
    content: "";
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    left: 0;
    height: 28%;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        transparent,
        rgba(0, 0, 0, 0.09)
    );
}

.dm-article-featured img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/* =========================================================
   ARTICLE BODY PANEL
========================================================= */

.dm-article-body {
    position: relative;
    z-index: 3;
    width: min(1080px, calc(100% - 70px));
    margin: -46px auto 0;
    padding:
        clamp(48px, 6vw, 78px)
        clamp(45px, 7vw, 95px)
        clamp(55px, 7vw, 90px);
    border: 1px solid rgba(190, 157, 99, 0.17);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow:
        0 32px 80px rgba(26, 26, 26, 0.07),
        0 8px 25px rgba(26, 26, 26, 0.04);
    color: #505050;
    font-family: "Manrope", Arial, sans-serif;
    font-size: clamp(16px, 1.2vw, 18px);
    font-weight: 400;
    line-height: 1.95;
}

.dm-article-body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 110px;
    height: 3px;
    transform: translateX(-50%);
    border-radius: 0 0 10px 10px;
    background: linear-gradient(
        90deg,
        #9f7b41,
        #d8bb82,
        #9f7b41
    );
}

.dm-article-body > p {
    margin: 0 0 27px;
}

.dm-article-body > p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   INTRODUCTION
========================================================= */

.dm-article-introduction {
    display: grid;
    grid-template-columns: 2px minmax(0, 1fr);
    gap: 24px;
    margin-bottom: 38px;
}

.dm-intro-line {
    display: block;
    width: 2px;
    height: 100%;
    min-height: 100px;
    border-radius: 10px;
    background: linear-gradient(
        180deg,
        #a47d3e,
        #dbc492
    );
}

.dm-article-introduction p {
    margin: 0;
    color: #242424;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 400;
    line-height: 1.65;
    letter-spacing: -0.01em;
}


/* =========================================================
   ARTICLE HEADINGS
========================================================= */

.dm-article-body h2 {
    position: relative;
    margin:
        clamp(48px, 6vw, 70px)
        0
        21px;
    padding-bottom: 17px;
    color: #1d1d1d;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(30px, 3vw, 43px);
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -0.025em;
}

.dm-article-body h2::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 58px;
    height: 2px;
    border-radius: 10px;
    background: linear-gradient(
        90deg,
        #a68146,
        #d8bd89
    );
}


/* =========================================================
   QUOTE
========================================================= */

.dm-article-body blockquote {
    position: relative;
    margin: clamp(45px, 6vw, 68px) 0;
    padding:
        clamp(35px, 5vw, 52px)
        clamp(32px, 6vw, 70px);
    overflow: hidden;
    border: 1px solid rgba(174, 137, 76, 0.22);
    border-radius: 20px;
    background:
        radial-gradient(
            circle at 8% 15%,
            rgba(206, 177, 126, 0.16),
            transparent 36%
        ),
        linear-gradient(
            135deg,
            #fbf9f4,
            #ffffff
        );
    text-align: center;
}

.dm-article-body blockquote::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 70px;
    height: 2px;
    transform: translateX(-50%);
    background: #b79051;
}

.dm-quote-mark {
    display: block;
    height: 42px;
    margin-bottom: 8px;
    color: #b28d50;
    font-family: Georgia, serif;
    font-size: 70px;
    line-height: 1;
}

.dm-article-body blockquote p {
    max-width: 730px;
    margin: 0 auto;
    color: #292929;
    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(23px, 2.4vw, 33px);
    font-weight: 500;
    line-height: 1.5;
    letter-spacing: -0.015em;
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1500px) {

    .dm-article-container {
        width: min(1380px, 100%);
    }

    .dm-article-featured {
        width: min(1200px, 100%);
    }

    .dm-article-body {
        width: min(1120px, calc(100% - 70px));
    }
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .dm-article-page {
        padding-right: 20px;
        padding-left: 20px;
    }

    .dm-article-header h1 {
        font-size: clamp(39px, 6.5vw, 58px);
    }

    .dm-article-featured {
        height: clamp(300px, 48vw, 430px);
        border-radius: 20px;
    }

    .dm-article-body {
        width: calc(100% - 38px);
        margin-top: -36px;
        padding:
            55px
            clamp(32px, 6vw, 62px)
            65px;
        border-radius: 20px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .dm-article-page {
        padding: 65px 15px 80px;
    }

    .dm-article-header {
        margin-bottom: 35px;
    }

    .dm-article-category {
        gap: 9px;
        margin-bottom: 19px;
        font-size: 9px;
        letter-spacing: 0.15em;
    }

    .dm-category-line {
        width: 23px;
    }

    .dm-article-header h1 {
        font-size: clamp(34px, 10vw, 47px);
        line-height: 1.12;
        letter-spacing: -0.03em;
    }

    .dm-article-summary {
        margin-top: 20px;
        font-size: 15px;
        line-height: 1.7;
    }

    .dm-article-meta {
        margin-top: 21px;
        font-size: 9px;
        letter-spacing: 0.07em;
    }

    .dm-article-featured {
        width: 100%;
        height: clamp(230px, 65vw, 340px);
        border-radius: 15px;
    }

    .dm-article-body {
        width: calc(100% - 16px);
        margin-top: -22px;
        padding: 43px 22px 52px;
        border-radius: 16px;
        font-size: 15.5px;
        line-height: 1.85;
    }

    .dm-article-body::before {
        width: 75px;
    }

    .dm-article-introduction {
        grid-template-columns: 2px minmax(0, 1fr);
        gap: 16px;
        margin-bottom: 29px;
    }

    .dm-article-introduction p {
        font-size: 19px;
        line-height: 1.65;
    }

    .dm-article-body h2 {
        margin-top: 42px;
        padding-bottom: 14px;
        font-size: 29px;
        line-height: 1.22;
    }

    .dm-article-body blockquote {
        margin: 40px 0;
        padding: 30px 20px 34px;
        border-radius: 15px;
    }

    .dm-quote-mark {
        height: 34px;
        font-size: 58px;
    }

    .dm-article-body blockquote p {
        font-size: 22px;
        line-height: 1.5;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .dm-article-page {
        padding-right: 12px;
        padding-left: 12px;
    }

    .dm-article-featured {
        height: 225px;
    }

    .dm-article-body {
        width: calc(100% - 8px);
        padding: 40px 18px 48px;
    }

    .dm-article-introduction {
        gap: 13px;
    }

    .dm-article-introduction p {
        font-size: 18px;
    }

    .dm-article-body h2 {
        font-size: 27px;
    }
}


/* Keep the journal card clickable */
.dm-journal-card {
    position: relative;
    z-index: 2;
    isolation: isolate;
}

/* Image link must stay above decorative layers */
.dm-journal-card-image {
    position: relative;
    z-index: 3;
    display: block;
    overflow: hidden;
    cursor: pointer;
    pointer-events: auto;
}

/* Ensure the actual image does not intercept incorrectly */
.dm-journal-card-image img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
}

/* Hover icon should not block the parent link */
.dm-journal-card-hover,
.dm-journal-card-hover *,
.dm-journal-card-hover svg {
    pointer-events: none;
}

/* Content and links remain clickable */
.dm-journal-card-content {
    position: relative;
    z-index: 3;
}

.dm-journal-card-content a,
.dm-journal-card-link {
    position: relative;
    z-index: 4;
    pointer-events: auto;
    cursor: pointer;
}

/* Decorative layers must never capture clicks */
.dm-journal-card::before,
.dm-journal-card::after,
.dm-journal-card-image::before,
.dm-journal-card-image::after,
.dm-journal-card-hover {
    pointer-events: none;
}
.dm-journal-slider {
    touch-action: pan-y;
}

.dm-journal-card-image,
.dm-journal-card-image img {
    -webkit-user-drag: none;
    user-select: none;
}

.dm-journal-card a {
    pointer-events: auto;
}

/* =========================================
   WEBSITE / APP STORE / PLAY STORE LINKS
========================================= */

.dm-platform-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.dm-platform-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 148px;
    min-height: 54px;
    padding: 9px 15px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(207, 184, 141, 0.28);
    border-radius: 12px;
    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.025)
        );
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
    transition:
        transform 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease,
        box-shadow 0.35s ease;
}

.dm-platform-link::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 70%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.16),
        transparent
    );
    transform: skewX(-20deg);
    transition: left 0.65s ease;
}

.dm-platform-link:hover::before {
    left: 150%;
}

.dm-platform-link:hover {
    color: #ffffff;
    text-decoration: none;
    border-color: rgba(207, 184, 141, 0.8);
    background:
        linear-gradient(
            135deg,
            rgba(207, 184, 141, 0.2),
            rgba(255, 255, 255, 0.04)
        );
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
    transform: translateY(-4px);
}

.dm-platform-icon {
    position: relative;
    z-index: 1;
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #cfb88d;
    background: rgba(207, 184, 141, 0.11);
    border: 1px solid rgba(207, 184, 141, 0.24);
    transition:
        color 0.35s ease,
        background 0.35s ease,
        transform 0.35s ease;
}

.dm-platform-icon i {
    font-size: 17px;
    line-height: 1;
}

.dm-platform-link:hover .dm-platform-icon {
    color: #111111;
    background: #cfb88d;
    transform: scale(1.06);
}

.dm-platform-text {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    white-space: nowrap;
}

.dm-platform-text small {
    margin-bottom: 3px;
    color: #c7a252;
    font-size: 9px;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.dm-platform-text strong {
    color: #5e5e5e;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* =========================================
   TABLET
========================================= */

@media (max-width: 991px) {

    .dm-platform-links {
        gap: 10px;
        margin-top: 20px;
    }

    .dm-platform-link {
        min-width: 142px;
        min-height: 52px;
        padding: 8px 13px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 575px) {

    .dm-platform-links {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 8px;
    }

    .dm-platform-link {
        min-width: 0;
        width: 100%;
        min-height: 68px;
        padding: 9px 6px;
        flex-direction: column;
        justify-content: center;
        gap: 5px;
        border-radius: 10px;
    }

    .dm-platform-icon {
        flex-basis: 30px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .dm-platform-icon i {
        font-size: 15px;
    }

    .dm-platform-text {
        align-items: center;
        text-align: center;
    }

    .dm-platform-text small {
        display: none;
    }

    .dm-platform-text strong {
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
    }
}

/* =========================================
   VERY SMALL SCREENS
========================================= */

@media (max-width: 360px) {

    .dm-platform-links {
        grid-template-columns: 1fr;
    }

    .dm-platform-link {
        min-height: 50px;
        flex-direction: row;
        justify-content: flex-start;
        padding: 8px 12px;
    }

    .dm-platform-text {
        align-items: flex-start;
        text-align: left;
    }

    .dm-platform-text small {
        display: block;
    }

    .dm-platform-text strong {
        font-size: 12px;
        white-space: nowrap;
    }
}

@media only screen and (max-width:375px){
.dm-preview-content{bottom: 20px;}}

.ai-office-branch {
  position: relative;
}

.ai-office-branch-title {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 14px;
  color: #cfb88d;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

.ai-office-branch-title i {
  font-size: 16px;
}

.ai-office-address {
  margin: 0 0 16px;
  line-height: 1.7;
}

.ai-office-card hr {
  margin: 22px 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}



/* ============================================================
   DESIGN MASTER
   FOUNDER + CO-FOUNDER SECTION
   DESKTOP / LAPTOP / TABLET / MOBILE
============================================================ */








/* ============================================================
   DESIGN MASTER
   LEADERSHIP / FOUNDER + CO-FOUNDER
   FINAL RESPONSIVE CSS
============================================================ */


/* ============================================================
   01. SECTION
============================================================ */

.dmab-exec-section {
    --dmab-primary: #111411;
    --dmab-secondary: #656b63;
    --dmab-muted: #92988f;

    --dmab-green: #b7d75f;
    --dmab-green-dark: #829f35;
    --dmab-green-soft: rgba(183, 215, 95, 0.14);

    --dmab-white: #ffffff;
    --dmab-bg: #f7f8f5;

    --dmab-border: rgba(17, 20, 17, 0.10);
    --dmab-border-dark: rgba(17, 20, 17, 0.20);

    --dmab-radius: 28px;

    position: relative;

    width: 100%;

    padding:
        clamp(80px, 7vw, 130px)
        0;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9f6 45%,
            #ffffff 100%
        );

    overflow: hidden;
}


/* subtle background detail */

.dmab-exec-section::before {
    content: "";

    position: absolute;

    top: -180px;
    right: -180px;

    width: 500px;
    height: 500px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 215, 95, 0.13) 0%,
            rgba(183, 215, 95, 0.04) 45%,
            transparent 72%
        );

    pointer-events: none;
}


/* ============================================================
   02. EXISTING PROJECT WRAPPERS
============================================================ */

.dmab-exec-section > .padding-left-right {
    position: relative;

    z-index: 2;

    width: 100%;
}


.dmab-exec-section .container-fluid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    align-items: stretch;

    gap:
        clamp(30px, 3vw, 50px);

    width: 100%;

    max-width: 1800px;

    margin: 0 auto;
}


/* ============================================================
   03. PREMIUM SECTION HEADING
============================================================ */

.dmab-exec-section__heading {
    position: relative;

    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        minmax(0, 1.25fr)
        minmax(300px, 0.75fr);

    align-items: end;

    gap:
        clamp(40px, 6vw, 110px);

    width: 100%;

    margin-bottom:
        clamp(30px, 3.5vw, 55px);

    padding-bottom:
        clamp(30px, 3vw, 45px);

    border-bottom:
        1px solid
        var(--dmab-border);
}


/* animated bottom accent */

.dmab-exec-section__heading::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -1px;

    width: 100px;
    height: 2px;

    background:#c9ad7b;

    animation:
        dmabHeadingLine
        6s ease-in-out infinite;
}


@keyframes dmabHeadingLine {

    0%,
    100% {
        width: 70px;
    }

    50% {
        width: 170px;
    }

}


/* ============================================================
   04. HEADING LEFT
============================================================ */

.dmab-exec-section__heading-left {
    position: relative;

    min-width: 0;
}


/* ============================================================
   05. EYEBROW
============================================================ */

.dmab-exec-section__eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom:
        clamp(15px, 1.5vw, 22px);

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.20em;

    text-transform: uppercase;

    color:#c9ad7b;
}


.dmab-exec-section__eyebrow i {
    position: relative;

    display: block;

    width: 42px;
    height: 1px;

    background:#c9ad7b;
}


.dmab-exec-section__eyebrow i::after {
    content: "";

    position: absolute;

    top: 50%;
    right: 0;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:#c9ad7b;

    transform:
        translateY(-50%);

    box-shadow:
        0 0 0 5px
        rgba(183, 215, 95, 0.14);
}


/* ============================================================
   06. MAIN HEADING
============================================================ */

.dmab-exec-section__heading h2 {
    max-width: 900px;

    margin: 0;

    font-size:
        clamp(40px, 4.4vw, 50px);

    line-height: 0.98;

    font-weight: 500;

    letter-spacing: -0.055em;

    color:
        var(--dmab-primary);
}


.dmab-exec-section__heading h2 span {
    display: block;

    margin-top: 6px;

    color: #c9ad7b;
}


/* ============================================================
   07. HEADING RIGHT
============================================================ */

.dmab-exec-section__heading-right {
    position: relative;

    display: flex;

    flex-direction: column;

    justify-content: flex-end;

    align-items: flex-start;

    min-width: 0;

    padding-left:
        clamp(25px, 3vw, 50px);

    border-left:
        1px solid
        var(--dmab-border);
}


/* ============================================================
   08. HEADING NUMBER
============================================================ */

.dmab-exec-section__number {
    position: relative;

    display: inline-block;

    margin-bottom: 17px;

    padding-bottom: 11px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.18em;

    color:
        var(--dmab-muted);
}


.dmab-exec-section__number::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 30px;
    height: 2px;

    background:#c9ad7b;
}


/* ============================================================
   09. HEADING DESCRIPTION
============================================================ */

.dmab-exec-section__heading-right p {
    max-width: 450px;

    margin: 0;

    font-size:
        clamp(14px, 1vw, 16px);

    line-height: 1.8;

    font-weight: 400;

    color:
        var(--dmab-secondary);
}


/* ============================================================
   10. EXECUTIVE CARD
============================================================ */

.dmab-exec-section .dmab-exec__card {
    position: relative;

    isolation: isolate;

    display: grid;

    grid-template-columns:
        minmax(220px, 0.90fr)
        minmax(0, 1.10fr);

    align-items: center;

    gap:
        clamp(28px, 2.6vw, 46px);

    width: 100%;
    min-width: 0;
    height: 100%;

    margin: 0;

    padding:
        clamp(28px, 2.8vw, 46px);

    border:
        1px solid
        var(--dmab-border);

    border-radius:
        var(--dmab-radius);

    background:
        rgba(255, 255, 255, 0.96);

    box-shadow:
        0 20px 60px
        rgba(20, 24, 20, 0.055);

    overflow: hidden;

    transition:
        transform 700ms
        cubic-bezier(0.16, 1, 0.3, 1),

        box-shadow 700ms
        cubic-bezier(0.16, 1, 0.3, 1),

        border-color 700ms ease;
}


.dmab-exec-section .dmab-exec__card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(130, 159, 53, 0.30);

    box-shadow:
        0 30px 80px
        rgba(20, 24, 20, 0.10);
}


/* ============================================================
   11. CARD GHOST NUMBER
============================================================ */

.dmab-exec-section .dmab-exec__ghost-number {
    position: absolute;

    top: -15px;
    right: 20px;

    z-index: -1;

    font-size:
        clamp(110px, 9vw, 175px);

    line-height: 0.9;

    font-weight: 700;

    letter-spacing: -0.07em;

    color:
        rgba(17, 20, 17, 0.025);

    pointer-events: none;
}


/* ============================================================
   12. AMBIENT GLOW
============================================================ */

.dmab-exec-section .dmab-exec__ambient {
    position: absolute;

    right: -150px;
    bottom: -150px;

    z-index: -1;

    width: 330px;
    height: 330px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(183, 215, 95, 0.16),
            rgba(183, 215, 95, 0.05) 45%,
            transparent 70%
        );

    transition:
        transform 1s ease;
}


.dmab-exec-section
.dmab-exec__card:hover
.dmab-exec__ambient {
    transform:
        scale(1.15);
}


/* ============================================================
   13. VISUAL COLUMN
============================================================ */

.dmab-exec-section .dmab-exec__visual {
    position: relative;

    width: 100%;

    min-width: 0;
}


/* ============================================================
   14. TOPLINE
============================================================ */

.dmab-exec-section .dmab-exec__topline {
    display: flex;

    align-items: center;

    gap: 12px;

    width: 100%;

    margin-bottom: 18px;
}


.dmab-exec-section .dmab-exec__index {
    flex: 0 0 auto;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.16em;

    color: #c9ad7b;
}


.dmab-exec-section .dmab-exec__topline-line {
    flex: 1;

    min-width: 25px;

    height: 1px;

    background: linear-gradient(90deg, #c9ad7b, rgba(130, 159, 53, 0.08));
}


.dmab-exec-section .dmab-exec__position {
    flex: 0 0 auto;

    font-size: 9px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--dmab-secondary);
}


/* ============================================================
   15. PORTRAIT SHELL
============================================================ */

.dmab-exec-section .dmab-exec__portrait-shell {
    position: relative;

    width: 100%;

    max-width: 320px;

    margin: 0 auto;

    padding: 8px;
}


/* ============================================================
   16. FRAMES
============================================================ */

.dmab-exec-section .dmab-exec__frame {
    position: absolute;

    pointer-events: none;
}


.dmab-exec-section
.dmab-exec__frame--outer {
    inset: 0;

    border:
        1px solid
        rgba(17, 20, 17, 0.14);

    border-radius: 25px;
}


.dmab-exec-section
.dmab-exec__frame--inner {
    inset: 7px;

    border:
        1px solid
        rgba(255, 255, 255, 0.85);

    border-radius: 20px;
}


/* ============================================================
   17. PORTRAIT
============================================================ */

.dmab-exec-section .dmab-exec__portrait {
    position: relative;

    z-index: 2;

    width: 100%;

    aspect-ratio: 0.86 / 1;

    border-radius: 18px;

    background: #eef0ea;

    overflow: hidden;
}


.dmab-exec-section .dmab-exec__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;

    transform:
        scale(1.002);

    transition:
        transform 1.1s
        cubic-bezier(0.16, 1, 0.3, 1);
}


.dmab-exec-section
.dmab-exec__card:hover
.dmab-exec__image {
    transform:
        scale(1.04);
}


/* ============================================================
   18. PORTRAIT OVERLAY
============================================================ */

.dmab-exec-section
.dmab-exec__portrait-shade,

.dmab-exec-section
.dmab-exec__portrait-light,

.dmab-exec-section
.dmab-exec__portrait-scan,

.dmab-exec-section
.dmab-exec__portrait-grain {
    position: absolute;

    inset: 0;

    pointer-events: none;
}


.dmab-exec-section
.dmab-exec__portrait-shade {
    z-index: 3;

    background:
        linear-gradient(
            180deg,
            transparent 50%,
            rgba(10, 12, 10, 0.03) 67%,
            rgba(10, 12, 10, 0.26) 100%
        );
}


.dmab-exec-section
.dmab-exec__portrait-light {
    z-index: 4;

    background:
        linear-gradient(
            120deg,
            rgba(255, 255, 255, 0.20),
            transparent 35%
        );
}


/* ============================================================
   19. PORTRAIT SCAN
============================================================ */

.dmab-exec-section
.dmab-exec__portrait-scan {
    z-index: 5;

    top: -70%;

    height: 40%;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(255, 255, 255, 0.14),
            transparent
        );

    animation:
        dmabPortraitScan
        8s ease-in-out infinite;
}


@keyframes dmabPortraitScan {

    0%,
    68% {
        transform:
            translateY(-120%);
    }

    100% {
        transform:
            translateY(520%);
    }

}


/* ============================================================
   20. GRAIN
============================================================ */

.dmab-exec-section
.dmab-exec__portrait-grain {
    z-index: 6;

    opacity: 0.07;

    background-image:
        radial-gradient(
            rgba(255, 255, 255, 0.55) 0.5px,
            transparent 0.5px
        );

    background-size:
        5px 5px;
}


/* ============================================================
   21. ORBIT
============================================================ */

.dmab-exec-section
.dmab-exec__orbit {
    position: absolute;

    top: -11px;
    right: -11px;

    z-index: 8;

    width: 58px;
    height: 58px;

    border:
        1px solid
        rgba(130, 159, 53, 0.30);

    border-radius: 50%;

    animation:
        dmabOrbit
        14s linear infinite;
}


.dmab-exec-section
.dmab-exec__orbit::before {
    content: "";

    position: absolute;

    inset: 8px;

    border:
        1px dashed
        rgba(130, 159, 53, 0.22);

    border-radius: 50%;
}


.dmab-exec-section
.dmab-exec__orbit i {
    position: absolute;

    top: -4px;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    background:#c9ad7b;

    box-shadow:
        0 0 0 5px
        rgba(183, 215, 95, 0.15);
}


@keyframes dmabOrbit {

    to {
        transform:
            rotate(360deg);
    }

}


/* ============================================================
   22. FLOATING BADGE
============================================================ */

.dmab-exec-section .dmab-exec__badge {
    position: absolute;

    left: -10px;
    bottom: 25px;

    z-index: 9;

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 130px;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(255, 255, 255, 0.85);

    border-radius: 13px;

    background:
        rgba(255, 255, 255, 0.90);

    box-shadow:
        0 14px 35px
        rgba(20, 24, 20, 0.11);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.dmab-exec-section
.dmab-exec__badge-dot {
    position: relative;

    width: 8px;
    height: 8px;

    flex: 0 0 auto;

    border-radius: 50%;

    background: linear-gradient(90deg, #c9ad7b, rgba(130, 159, 53, 0.08));;
}


.dmab-exec-section
.dmab-exec__badge-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(130, 159, 53, 0.35);

    border-radius: 50%;

    animation:
        dmabPulse
        2.5s ease-out infinite;
}


@keyframes dmabPulse {

    from {
        transform: scale(0.7);
        opacity: 0.8;
    }

    to {
        transform: scale(1.7);
        opacity: 0;
    }

}


.dmab-exec-section
.dmab-exec__badge small,

.dmab-exec-section
.dmab-exec__badge strong {
    display: block;
}


.dmab-exec-section
.dmab-exec__badge small {
    margin-bottom: 3px;

    font-size: 7px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: 0.13em;

    text-transform: uppercase;

    color:
        var(--dmab-muted);
}


.dmab-exec-section
.dmab-exec__badge strong {
    font-size: 11px;

    line-height: 1.2;

    font-weight: 700;

    color:
        var(--dmab-primary);
}


/* ============================================================
   23. VERTICAL DESIGN MASTER TEXT
============================================================ */

.dmab-exec-section
.dmab-exec__vertical {
    position: absolute;

    top: 50%;
    right: -27px;

    z-index: 8;

    transform:
        translateY(-50%)
        rotate(90deg);

    white-space: nowrap;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 0.22em;

    text-transform: uppercase;

    color:
        var(--dmab-muted);
}


/* ============================================================
   24. CONTENT
============================================================ */

.dmab-exec-section
.dmab-exec__content {
    position: relative;

    z-index: 3;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: flex-start;

    width: 100%;

    min-width: 0;
}


/* ============================================================
   25. ROLE
============================================================ */

.dmab-exec-section
.dmab-exec__role {
    display: block;

    margin-bottom: 10px;

    font-size:
        clamp(9px, 0.7vw, 11px);

    line-height: 1.5;

    font-weight: 700;

    letter-spacing: 0.11em;

    text-transform: uppercase;

    color: #c9ad7b;
}


/* ============================================================
   26. PERSON NAME
============================================================ */

.dmab-exec-section
.dmab-exec__title-area {
    width: 100%;
}


.dmab-exec-section
.dmab-exec__title-area h3 {
    margin: 0;

    font-size:
        clamp(29px, 2.4vw, 44px);

    line-height: 1.03;

    font-weight: 500;

    letter-spacing: -0.045em;

    color:
        var(--dmab-primary);
}


/* ============================================================
   27. ANIMATED RULE
============================================================ */

.dmab-exec-section
.dmab-exec__animated-rule {
    position: relative;

    display: flex;

    align-items: center;

    width: 100%;
    height: 16px;

    margin:
        clamp(20px, 2vw, 29px)
        0
        clamp(16px, 1.5vw, 22px);
}


.dmab-exec-section
.dmab-exec__animated-rule span {
    width: 100%;
    height: 1px;

    background:
        var(--dmab-border);
}


.dmab-exec-section
.dmab-exec__animated-rule i {
    position: absolute;

    left: 0;

    width: 32px;
    height: 2px;

    background: linear-gradient(90deg, #c9ad7b, rgba(130, 159, 53, 0.08));

    animation:
        dmabExecRule
        5s ease-in-out infinite;
}


@keyframes dmabExecRule {

    0%,
    100% {
        left: 0;
    }

    50% {
        left:
            calc(100% - 32px);
    }

}


/* ============================================================
   28. DESCRIPTION
============================================================ */

.dmab-exec-section
.dmab-exec__content > p {
    max-width: 470px;

    margin: 0;

    font-size:
        clamp(13px, 0.95vw, 16px);

    line-height: 1.8;

    color:
        var(--dmab-secondary);
}


/* ============================================================
   29. KEYWORDS
============================================================ */

.dmab-exec-section
.dmab-exec__footer {
    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 8px;

    margin-top:
        clamp(19px, 2vw, 28px);
}


.dmab-exec-section
.dmab-exec__footer span {
    font-size: 8px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.14em;

    text-transform: uppercase;

    color:
        var(--dmab-muted);
}


.dmab-exec-section
.dmab-exec__footer i {
    width: 4px;
    height: 4px;

    border-radius: 50%;

    background:
        var(--dmab-green-dark);
}


/* ============================================================
   30. PROFILE LINK
============================================================ */

.dmab-exec-section
.dmab-exec__profile-link {
    position: relative;

    display: grid;

    grid-template-columns:
        auto
        minmax(0, auto)
        minmax(30px, 1fr)
        auto;

    align-items: center;

    gap: 11px;

    width: 100%;
    max-width: 480px;

    margin-top:
        clamp(22px, 2.3vw, 34px);

    padding: 11px;

    border:
        1px solid
        var(--dmab-border);

    border-radius: 14px;

    background:
        rgba(248, 249, 246, 0.65);

    text-decoration: none;

    color:
        var(--dmab-primary);

    transition:
        transform 600ms
        cubic-bezier(0.16, 1, 0.3, 1),

        background 600ms ease,

        border-color 600ms ease,

        box-shadow 600ms ease;
}


.dmab-exec-section
.dmab-exec__profile-link:hover {
    transform:
        translateY(-3px);

    border-color:
        rgba(130, 159, 53, 0.30);

    background:
        #ffffff;

    box-shadow:
        0 15px 35px
        rgba(20, 24, 20, 0.08);
}


/* ============================================================
   31. PROFILE NUMBER
============================================================ */

.dmab-exec-section
.dmab-exec__profile-link-index {
    display: grid;

    place-items: center;

    width: 34px;
    height: 34px;

    border-radius: 50%;

    background:
        var(--dmab-green-soft);

    font-size: 8px;

    font-weight: 700;

    color: #c9ad7b;
}


/* ============================================================
   32. PROFILE TEXT
============================================================ */

.dmab-exec-section
.dmab-exec__profile-link-main {
    min-width: 0;
}


.dmab-exec-section
.dmab-exec__profile-link-main small,

.dmab-exec-section
.dmab-exec__profile-link-main strong {
    display: block;
}


.dmab-exec-section
.dmab-exec__profile-link-main small {
    margin-bottom: 3px;

    font-size: 7px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color:
        var(--dmab-muted);
}


.dmab-exec-section
.dmab-exec__profile-link-main strong {
    font-size: 12px;

    line-height: 1.3;

    font-weight: 700;

    color:
        var(--dmab-primary);
}


/* ============================================================
   33. PROFILE LINE
============================================================ */

.dmab-exec-section
.dmab-exec__profile-link-line {
    position: relative;

    width: 100%;
    height: 1px;

    background:
        var(--dmab-border);

    overflow: hidden;
}


.dmab-exec-section
.dmab-exec__profile-link-line i {
    position: absolute;

    left: -40%;

    width: 35%;
    height: 1px;

    background-color: #c9ad7b;

    transition:
        left 800ms
        cubic-bezier(0.16, 1, 0.3, 1);
}


.dmab-exec-section
.dmab-exec__profile-link:hover
.dmab-exec__profile-link-line i {
    left: 110%;
}


/* ============================================================
   34. PROFILE ARROW
============================================================ */

.dmab-exec-section
.dmab-exec__profile-link-arrow {
    display: grid;

    place-items: center;

    flex: 0 0 auto;

    width: 40px;
    height: 40px;

    border-radius: 50%;

    background:
        var(--dmab-primary);

    color:
        #ffffff;

    transition:
        transform 600ms
        cubic-bezier(0.16, 1, 0.3, 1),

        background 600ms ease;
}


.dmab-exec-section
.dmab-exec__profile-link:hover
.dmab-exec__profile-link-arrow {
    transform:
        rotate(45deg);

    background:
        var(--dmab-green-dark);
}


/* ============================================================
   35. LARGE DESKTOP
   1600PX+
============================================================ */

@media (min-width: 1600px) {

    .dmab-exec-section .container-fluid {
        gap: 55px;
    }


    .dmab-exec-section
    .dmab-exec__card {
        grid-template-columns:
            minmax(270px, 0.90fr)
            minmax(0, 1.10fr);

        gap: 50px;

        padding: 48px;
    }


    .dmab-exec-section
    .dmab-exec__portrait-shell {
        max-width: 350px;
    }

}


/* ============================================================
   36. DESKTOP / LAPTOP
   1200PX - 1599PX
============================================================ */

@media
(max-width: 1599.98px)
and
(min-width: 1200px) {

    .dmab-exec-section .container-fluid {
        gap: 32px;
    }


    .dmab-exec-section
    .dmab-exec__card {
        grid-template-columns:
            minmax(210px, 0.86fr)
            minmax(0, 1.14fr);

        gap: 30px;

        padding: 30px;
    }


    .dmab-exec-section
    .dmab-exec__portrait-shell {
        max-width: 290px;
    }


    .dmab-exec-section
    .dmab-exec__vertical {
        display: none;
    }

}


/* ============================================================
   37. SMALL LAPTOP
   992PX - 1199PX
============================================================ */

@media
(max-width: 1199.98px)
and
(min-width: 992px) {

    .dmab-exec-section .container-fluid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 26px;
    }


    .dmab-exec-section
    .dmab-exec__card {
        grid-template-columns: 1fr;

        align-content: start;

        gap: 28px;

        padding: 28px;
    }


    .dmab-exec-section
    .dmab-exec__portrait-shell {
        max-width: 330px;
    }


    .dmab-exec-section
    .dmab-exec__content {
        justify-content: flex-start;
    }


    .dmab-exec-section
    .dmab-exec__profile-link {
        max-width: 100%;
    }


    .dmab-exec-section
    .dmab-exec__vertical {
        display: none;
    }


    .dmab-exec-section__heading {
        grid-template-columns:
            minmax(0, 1.2fr)
            minmax(280px, 0.8fr);

        gap: 45px;
    }


    .dmab-exec-section__heading h2 {
        font-size:
            clamp(21px, 3vw, 30px);
    }

}


/* ============================================================
   38. TABLET
   768PX - 991PX
============================================================ */

@media
(max-width: 991.98px)
and
(min-width: 768px) {

    .dmab-exec-section {
        padding:
            75px 0;
    }


    .dmab-exec-section .container-fluid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .dmab-exec-section__heading {
        grid-template-columns: 1fr;

        gap: 25px;

        margin-bottom: 10px;
    }


    .dmab-exec-section__heading-right {
        max-width: 680px;

        padding-left: 0;

        border-left: 0;
    }


    .dmab-exec-section__heading h2 {
        max-width: 720px;

        font-size:
            clamp(40px, 6vw, 56px);
    }


    .dmab-exec-section
    .dmab-exec__card {
        grid-template-columns:
            minmax(260px, 0.85fr)
            minmax(0, 1.15fr);

        gap: 38px;

        padding: 34px;
    }


    .dmab-exec-section
    .dmab-exec__portrait-shell {
        max-width: 340px;
    }


    .dmab-exec-section
    .dmab-exec__vertical {
        display: none;
    }

}


/* ============================================================
   39. MOBILE
   BELOW 768PX
============================================================ */

@media (max-width: 767.98px) {

    .dmab-exec-section {
        padding:
            65px 0;
    }


    .dmab-exec-section .container-fluid {
        grid-template-columns: 1fr;

        gap: 28px;
    }


    /* Heading */

    .dmab-exec-section__heading {
        grid-template-columns: 1fr;

        gap: 22px;

        margin-bottom: 8px;

        padding-bottom: 28px;
    }


    .dmab-exec-section__heading-right {
        padding-left: 0;

        border-left: 0;
    }


    .dmab-exec-section__eyebrow {
        margin-bottom: 14px;

        font-size: 9px;
    }


    .dmab-exec-section__eyebrow i {
        width: 30px;
    }


    .dmab-exec-section__heading h2 {
        font-size:
            clamp(34px, 9vw, 48px);

        line-height: 1.02;
    }


    .dmab-exec-section__heading h2 span {
        display: block;

        margin-top: 5px;
    }


    .dmab-exec-section__heading-right p {
        font-size: 14px;

        line-height: 1.7;
    }


    /* Card */

    .dmab-exec-section
    .dmab-exec__card {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 23px;

        border-radius: 24px;
    }


    .dmab-exec-section
    .dmab-exec__portrait-shell {
        max-width: 410px;
    }


    .dmab-exec-section
    .dmab-exec__vertical {
        display: none;
    }


    .dmab-exec-section
    .dmab-exec__title-area h3 {
        font-size:
            clamp(31px, 8vw, 42px);
    }


    .dmab-exec-section
    .dmab-exec__content > p {
        max-width: 100%;
    }


    .dmab-exec-section
    .dmab-exec__profile-link {
        max-width: 100%;
    }

}


/* ============================================================
   40. SMALL MOBILE
   BELOW 576PX
============================================================ */

@media (max-width: 575.98px) {

    .dmab-exec-section {
        padding:
            55px 0;
    }


    .dmab-exec-section .container-fluid {
        gap: 23px;
    }


    .dmab-exec-section__heading {
        padding-bottom: 23px;
    }


    .dmab-exec-section__heading h2 {
        font-size:
            clamp(31px, 9vw, 40px);
    }


    .dmab-exec-section__number {
        margin-bottom: 12px;
    }


    .dmab-exec-section
    .dmab-exec__card {
        padding: 18px;

        gap: 26px;

        border-radius: 20px;
    }


    .dmab-exec-section
    .dmab-exec__portrait-shell {
        padding: 6px;

        max-width: 360px;
    }


    .dmab-exec-section
    .dmab-exec__portrait {
        border-radius: 16px;
    }


    .dmab-exec-section
    .dmab-exec__orbit {
        width: 48px;
        height: 48px;

        top: -7px;
        right: -7px;
    }


    .dmab-exec-section
    .dmab-exec__badge {
        left: 0;
        bottom: 17px;
    }


    .dmab-exec-section
    .dmab-exec__title-area h3 {
        font-size:
            clamp(29px, 9vw, 38px);
    }


    .dmab-exec-section
    .dmab-exec__content > p {
        font-size: 14px;

        line-height: 1.75;
    }


    .dmab-exec-section
    .dmab-exec__profile-link {
        grid-template-columns:
            auto
            minmax(0, 1fr)
            auto;

        gap: 9px;

        padding: 10px;
    }


    .dmab-exec-section
    .dmab-exec__profile-link-line {
        display: none;
    }


    .dmab-exec-section
    .dmab-exec__profile-link-arrow {
        width: 38px;
        height: 38px;
    }

}


/* ============================================================
   41. VERY SMALL MOBILE
============================================================ */

@media (max-width: 399.98px) {

    .dmab-exec-section
    .dmab-exec__card {
        padding: 15px;
    }


    .dmab-exec-section__heading h2 {
        font-size: 30px;
    }


    .dmab-exec-section
    .dmab-exec__title-area h3 {
        font-size: 29px;
    }


    .dmab-exec-section
    .dmab-exec__badge {
        transform:
            scale(0.92);

        transform-origin:
            left bottom;
    }

}


/* ============================================================
   42. REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .dmab-exec-section__heading::after,

    .dmab-exec-section
    .dmab-exec__portrait-scan,

    .dmab-exec-section
    .dmab-exec__orbit,

    .dmab-exec-section
    .dmab-exec__badge-dot::after,

    .dmab-exec-section
    .dmab-exec__animated-rule i {
        animation: none !important;
    }


    .dmab-exec-section
    .dmab-exec__card,

    .dmab-exec-section
    .dmab-exec__image,

    .dmab-exec-section
    .dmab-exec__profile-link,

    .dmab-exec-section
    .dmab-exec__profile-link-arrow {
        transition: none !important;
    }

}

.dm-project-copy{display: none;}
/* ============================================================
   DESIGN MASTER - FLAGSHIP PROJECTS
============================================================ */

.dm-project-showcase {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 75px 0 85px;
    background: #f7f8fa;
}


/* ============================================================
   SECTION HEADING
============================================================ */

.dm-project-heading {
    position: relative;
    max-width: 940px;
    margin-bottom: 42px;
}

.dm-project-heading .dm-head-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.dm-project-heading .dm-head-badge span {
    width: 42px;
    height: 1px;
    display: block;
    background: #161616;
}

.dm-project-heading .dm-head-badge p {
    margin: 0;
    padding: 0;
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 2px;
    color: #5e6269;
}

.dm-project-heading h1 {
    margin: 0 0 17px;
    font-size: clamp(38px, 4.2vw, 68px);
    line-height: 1.03;
    letter-spacing: -2.5px;
    font-weight: 600;
    color: #161616;
}

.dm-project-heading h1 span {
    display: inline;
    font-weight: 300;
    color: #6d7179;
}

.dm-project-heading > p {
    width: 100%;
    max-width: 790px;
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #696d74;
}


/* ============================================================
   MAIN GRID
============================================================ */

.dm-project-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.75fr);
    gap: 22px;
    align-items: stretch;
}


/* ============================================================
   LEFT PREVIEW
============================================================ */

.dm-project-visual {
    min-width: 0;
}

.dm-project-image-wrap {
    position: relative;
    height: clamp(490px, 56vw, 640px);
    max-height: 640px;
    border-radius: 28px;
    overflow: hidden;
    background: #111;
    isolation: isolate;
}

.dm-project-image-wrap > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition:
        opacity 0.35s ease,
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.dm-project-image-wrap:hover > img {
    transform: scale(1.025);
}


/* dark image overlay */

.dm-project-image-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            rgba(5, 8, 14, 0.07) 5%,
            rgba(5, 8, 14, 0.13) 40%,
            rgba(5, 8, 14, 0.92) 100%
        );
    pointer-events: none;
}


/* subtle grid */

.dm-project-grid-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.08;

    background-image:
        linear-gradient(
            rgba(255, 255, 255, 0.7) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255, 255, 255, 0.7) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 30%,
            #000
        );
}


/* ============================================================
   PROJECT NUMBER
============================================================ */

.dm-project-number {
    position: absolute;
    z-index: 5;
    top: 28px;
    left: 28px;

    min-width: 88px;

    display: flex;
    flex-direction: column;

    padding: 14px 17px;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 15px;

    background: rgba(0, 0, 0, 0.17);

    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.dm-project-number span {
    margin-bottom: 3px;

    font-size: 9px;
    line-height: 1;
    font-weight: 600;

    letter-spacing: 1.8px;

    color: rgba(255, 255, 255, 0.68);
}

.dm-project-number strong {
    font-size: 25px;
    line-height: 1;

    font-weight: 500;

    letter-spacing: -1px;

    color: #fff;
}


/* ============================================================
   PROJECT DETAILS
============================================================ */

.dm-project-details {
    position: absolute;

    z-index: 5;

    bottom: 0;
    left: 0;

    width: 100%;

    display: grid;
    grid-template-columns: minmax(190px, 0.48fr) minmax(0, 1.4fr);

    gap: 35px;

    align-items: end;

    padding: 38px;
}


/* ============================================================
   BRAND
============================================================ */

.dm-project-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.dm-project-logo {
    width: 92px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 11px;

    border-radius: 13px;

    background: rgba(255, 255, 255, 0.95);
}

.dm-project-logo img {
    display: block;

    max-width: 100%;
    max-height: 100%;

    object-fit: contain;
}

.dm-project-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dm-project-meta span {
    font-size: 11px;
    line-height: 1.2;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 1.5px;

    color: #fff;
}

.dm-project-meta small {
    font-size: 11px;
    line-height: 1.4;

    color: rgba(255, 255, 255, 0.58);
}


/* ============================================================
   TEXT
============================================================ */

.dm-project-copy {
    min-width: 0;
}

.dm-project-copy h3 {
    max-width: 720px;

    margin: 0 0 13px;

    font-size: clamp(24px, 2.4vw, 37px);

    line-height: 1.12;

    font-weight: 500;

    letter-spacing: -1.1px;

    color: #fff;
}

.dm-project-copy p {
    max-width: 720px;

    margin: 0;

    font-size: 13px;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.72);
}


/* ============================================================
   RIGHT PROJECT NAVIGATION
============================================================ */

.dm-project-navigation {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding: 27px;

    border-radius: 28px;

    background: #ffffff;

    border: 1px solid #e7e9ed;

    box-shadow:
        0 20px 60px rgba(19, 25, 35, 0.07);
}


/* ============================================================
   NAVIGATION HEADING
============================================================ */

.dm-project-nav-head {
    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 20px;

    margin-bottom: 21px;

    padding-bottom: 21px;

    border-bottom: 1px solid #e9ebef;
}

.dm-project-nav-head > div:first-child {
    min-width: 0;
}

.dm-project-nav-head > div:first-child > span {
    display: block;

    margin-bottom: 9px;

    font-size: 10px;

    line-height: 1;

    font-weight: 700;

    letter-spacing: 1.7px;

    color: #888c93;
}

.dm-project-nav-head h4 {
    max-width: 250px;

    margin: 0;

    font-size: 21px;

    line-height: 1.27;

    font-weight: 400;

    letter-spacing: -0.45px;

    color: #25282c;
}

.dm-project-nav-head h4 strong {
    font-weight: 600;
}


/* counter */

.dm-project-nav-counter {
    display: flex;

    align-items: baseline;

    flex-shrink: 0;

    padding-top: 17px;
}

.dm-project-nav-counter strong {
    font-size: 23px;

    line-height: 1;

    font-weight: 600;

    letter-spacing: -1px;

    color: #161616;
}

.dm-project-nav-counter span {
    margin-left: 5px;

    font-size: 11px;

    color: #a1a5aa;
}


/* ============================================================
   PROJECT TABS
============================================================ */

.dm-project-tabs {
    display: flex;

    flex: 1;

    flex-direction: column;

    gap: 8px;
}


/* individual */

.dm-project-tab {
    position: relative;

    width: 100%;

    display: grid;

    grid-template-columns: 34px minmax(0, 1fr);

    gap: 13px;

    align-items: stretch;

    min-height: 91px;

    padding: 11px 12px;

    border: 1px solid transparent;

    border-radius: 16px;

    background: transparent;

    color: inherit;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.dm-project-tab:hover {
    background: #f7f8fa;

    border-color: #eaebee;

    transform: translateX(3px);
}

.dm-project-tab.active {
    background: #161616;

    border-color: #161616;

    box-shadow:
        0 14px 30px rgba(0, 0, 0, 0.12);
}


/* active left indicator */

.dm-project-tab::before {
    content: "";

    position: absolute;

    top: 17px;
    bottom: 17px;
    left: 0;

    width: 3px;

    border-radius: 0 10px 10px 0;

    background: #161616;

    transform: scaleY(0);

    transform-origin: center;

    transition: transform 0.3s ease;
}

.dm-project-tab.active::before {
    background: #ffffff;

    transform: scaleY(1);
}


/* number */

.dm-project-tab-number {
    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 10px;

    font-weight: 600;

    color: #aaaeb5;

    border-right: 1px solid #e4e6e9;

    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}

.dm-project-tab.active .dm-project-tab-number {
    color: rgba(255, 255, 255, 0.52);

    border-color: rgba(255, 255, 255, 0.14);
}


/* content */

.dm-project-tab-content {
    min-width: 0;

    display: flex;

    flex-direction: column;

    justify-content: center;
}

.dm-project-tab-top {
    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 4px;
}


/* logo */

.dm-project-tab-logo {
    /*width: 52px;*/

    height: 35px;

    display: flex;

    align-items: center;

    justify-content: flex-start;
}

.dm-project-tab-logo img {
    max-width: 100%;

    max-height: 100%;

    object-fit: contain;

    filter: grayscale(0);

    transition:
        filter 0.3s ease,
        opacity 0.3s ease;
}

.dm-project-tab.active .dm-project-tab-logo img {
    filter: brightness(0) invert(1);

    opacity: 0.95;
}


/* arrow */

.dm-project-tab-arrow {
    width: 27px;

    height: 27px;

    flex: 0 0 27px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    border: 1px solid #e1e3e7;

    font-size: 11px;

    color: #26292d;

    transition:
        color 0.3s ease,
        background 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.dm-project-tab:hover .dm-project-tab-arrow {
    transform: rotate(45deg);
}

.dm-project-tab.active .dm-project-tab-arrow {
    color: #161616;

    background: #ffffff;

    border-color: #ffffff;

    transform: rotate(45deg);
}


/* titles */

.dm-project-tab-content > strong {
    display: block;

    margin-bottom: 2px;

    font-size: 13px;

    line-height: 1.25;

    font-weight: 600;

    color: #23262a;

    transition: color 0.3s ease;
}

.dm-project-tab-content > small {
    overflow: hidden;

    display: block;

    text-overflow: ellipsis;

    white-space: nowrap;

    font-size: 10px;

    line-height: 1.4;

    color: #91959c;

    transition: color 0.3s ease;
}

.dm-project-tab.active .dm-project-tab-content > strong {
    color: #fff;
}

.dm-project-tab.active .dm-project-tab-content > small {
    color: rgba(255, 255, 255, 0.53);
}


/* ============================================================
   ANIMATION
============================================================ */

.dm-project-image-wrap.dm-changing > img {
    opacity: 0;

    transform: scale(1.025);
}

.dm-project-image-wrap.dm-changing .dm-project-details,
.dm-project-image-wrap.dm-changing .dm-project-number {
    opacity: 0;

    transform: translateY(8px);
}

.dm-project-details,
.dm-project-number {
    transition:
        opacity 0.28s ease,
        transform 0.28s ease;
}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1399.98px) {

    .dm-project-showcase {
        padding: 65px 0 72px;
    }

    .dm-project-heading {
        margin-bottom: 34px;
    }

    .dm-project-grid {
        grid-template-columns:
            minmax(0, 1.42fr)
            minmax(310px, 0.68fr);

        gap: 18px;
    }

    .dm-project-image-wrap {
        height: 555px;
    }

    .dm-project-navigation {
        padding: 21px;
    }

    .dm-project-nav-head {
        margin-bottom: 15px;

        padding-bottom: 16px;
    }

    .dm-project-tab {
        min-height: 84px;

        padding: 9px 10px;
    }

    .dm-project-details {
        grid-template-columns:
            minmax(165px, 0.42fr)
            minmax(0, 1.5fr);

        gap: 26px;

        padding: 31px;
    }

}


/* ============================================================
   SMALL LAPTOP / TABLET LANDSCAPE
============================================================ */

@media (max-width: 1199.98px) {

    .dm-project-showcase {
        padding: 58px 0 65px;
    }

    .dm-project-grid {
        grid-template-columns:
            minmax(0, 1.25fr)
            minmax(285px, 0.75fr);
    }

    .dm-project-image-wrap {
        height: 530px;
    }

    .dm-project-navigation {
        padding: 18px;
    }

    .dm-project-nav-head h4 {
        font-size: 18px;
    }

    .dm-project-tab {
        grid-template-columns: 28px minmax(0, 1fr);

        gap: 10px;

        min-height: 80px;
    }

    /*.dm-project-tab-logo {
        width: 45px;
    }*/

    .dm-project-details {
        display: block;

        padding: 27px;
    }

    .dm-project-brand {
        flex-direction: row;

        align-items: center;

        margin-bottom: 20px;
    }

    .dm-project-logo {
        width: 75px;

        height: 52px;
    }

    .dm-project-copy h3 {
        font-size: 27px;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 991.98px) {

    .dm-project-showcase {
        padding: 50px 0 55px;
    }

    .dm-project-heading {
        max-width: 760px;

        margin-bottom: 30px;
    }

    .dm-project-heading h1 {
        letter-spacing: -1.8px;
    }

    .dm-project-grid {
        grid-template-columns: 1fr;

        gap: 17px;
    }

    .dm-project-image-wrap {
        height: 510px;

        border-radius: 22px;
    }

    .dm-project-navigation {
        border-radius: 22px;

        padding: 18px;
    }

    .dm-project-nav-head {
        margin-bottom: 16px;
    }


    /*
       Tablet navigation stays compact.
       Tabs become horizontal instead of creating
       a very tall section.
    */

    .dm-project-tabs {
        display: grid;

        grid-auto-flow: column;

        grid-auto-columns: minmax(180px, 1fr);

        gap: 10px;

        overflow-x: auto;

        padding-bottom: 5px;

        scroll-snap-type: x mandatory;

        scrollbar-width: thin;
    }

    .dm-project-tab {
        min-width: 190px;

        min-height: 96px;

        scroll-snap-align: start;

        grid-template-columns: 30px minmax(0, 1fr);
    }

    .dm-project-tab:hover {
        transform: translateY(-2px);
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767.98px) {

    .dm-project-showcase {
        padding: 44px 0 48px;
    }

    .dm-project-heading {
        margin-bottom: 25px;
    }

    .dm-project-heading .dm-head-badge {
        margin-bottom: 12px;
    }

    .dm-project-heading .dm-head-badge span {
        width: 28px;
    }

    .dm-project-heading .dm-head-badge p {
        font-size: 10px;

        letter-spacing: 1.4px;
    }

    .dm-project-heading h1 {
        margin-bottom: 13px;

        font-size: clamp(32px, 9vw, 43px);

        line-height: 1.06;

        letter-spacing: -1.5px;
    }

    .dm-project-heading > p {
        font-size: 14px;

        line-height: 1.65;
    }

    .dm-project-image-wrap {
        height: 475px;

        border-radius: 19px;
    }

    .dm-project-number {
        top: 17px;
        left: 17px;

        min-width: 72px;

        padding: 11px 13px;

        border-radius: 12px;
    }

    .dm-project-number strong {
        font-size: 21px;
    }

    .dm-project-details {
        padding: 20px;
    }

    .dm-project-brand {
        margin-bottom: 17px;

        gap: 12px;
    }

    .dm-project-logo {
        width: 68px;

        height: 48px;

        padding: 8px;
    }

    .dm-project-meta small {
        display: none;
    }

    .dm-project-copy h3 {
        margin-bottom: 9px;

        font-size: 24px;

        line-height: 1.13;
    }

    .dm-project-copy p {
        display: -webkit-box;

        overflow: hidden;

        font-size: 12px;

        line-height: 1.6;

        -webkit-line-clamp: 3;

        -webkit-box-orient: vertical;
    }

    .dm-project-navigation {
        padding: 15px;

        border-radius: 19px;
    }

    .dm-project-nav-head {
        align-items: center;

        padding-bottom: 14px;

        margin-bottom: 13px;
    }

    .dm-project-nav-head h4 {
        max-width: 220px;

        font-size: 17px;
    }

    .dm-project-nav-counter {
        padding-top: 0;
    }

    .dm-project-nav-counter strong {
        font-size: 20px;
    }

    .dm-project-tabs {
        grid-auto-columns: minmax(165px, 74vw);
    }

    .dm-project-tab {
        min-width: 165px;

        min-height: 90px;

        padding: 9px;

        border-radius: 14px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 479.98px) {

    .dm-project-showcase {
        padding: 38px 0 42px;
    }

    .dm-project-image-wrap {
        height: 445px;
    }

    .dm-project-details {
        padding: 18px;
    }

    .dm-project-copy h3 {
        font-size: 21px;
    }

    .dm-project-copy p {
        -webkit-line-clamp: 3;
    }

    .dm-project-nav-head h4 {
        max-width: 180px;

        font-size: 15px;
    }

    .dm-project-nav-head > div:first-child > span {
        font-size: 9px;
    }

    .dm-project-tabs {
        grid-auto-columns: minmax(155px, 80vw);
    }

}


/* ============================================================
   ACCESSIBILITY
============================================================ */

.dm-project-tab:focus-visible {
    outline: 2px solid #222;

    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

    .dm-project-tab,
    .dm-project-tab-arrow,
    .dm-project-image-wrap > img,
    .dm-project-details,
    .dm-project-number {
        transition: none !important;
    }

}







/* ============================================================
   DESIGN MASTER
   CAFE MANAGEMENT FLAGSHIP PROJECT
============================================================= */

.dm-cafe-project {
    --dm-cafe-dark: #111820;
    --dm-cafe-dark-soft: #29323b;
    --dm-cafe-text: #18212a;
    --dm-cafe-muted: #6a7580;

    --dm-cafe-accent: #e3a13b;
    --dm-cafe-accent-soft: #f2c46f;

    --dm-cafe-white: #ffffff;

    --dm-cafe-border: rgba(17, 24, 32, 0.10);
    --dm-cafe-border-soft: rgba(17, 24, 32, 0.06);

    position: relative;

    width: 100%;

    padding: 120px 0;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 86% 25%,
            rgba(227, 161, 59, 0.09),
            transparent 30%
        ),
        radial-gradient(
            circle at 8% 88%,
            rgba(45, 75, 94, 0.05),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f8f9f8 53%,
            #f2f4f2 100%
        );
}


/* ============================================================
   AMBIENT BACKGROUND
============================================================= */

.dm-cafe-ambient {
    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


.dm-cafe-grid {
    position: absolute;

    inset: 0;

    opacity: 0.24;

    background-image:
        linear-gradient(
            rgba(17, 24, 32, 0.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(17, 24, 32, 0.025) 1px,
            transparent 1px
        );

    background-size: 82px 82px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 20%,
            #000 80%,
            transparent
        );
}


.dm-cafe-ambient-line {
    position: absolute;

    display: block;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(227, 161, 59, 0.26),
            transparent
        );
}


.dm-cafe-ambient-line--one {
    width: 720px;

    top: 14%;
    left: -230px;

    transform: rotate(-11deg);

    animation:
        dmCafeAmbientOne
        16s ease-in-out infinite alternate;
}


.dm-cafe-ambient-line--two {
    width: 850px;

    right: -280px;
    bottom: 12%;

    transform: rotate(-11deg);

    animation:
        dmCafeAmbientTwo
        18s ease-in-out infinite alternate;
}


@keyframes dmCafeAmbientOne {

    0% {
        transform:
            translateX(-20px)
            rotate(-11deg);
    }

    100% {
        transform:
            translateX(80px)
            rotate(-11deg);
    }

}


@keyframes dmCafeAmbientTwo {

    0% {
        transform:
            translateX(50px)
            rotate(-11deg);
    }

    100% {
        transform:
            translateX(-70px)
            rotate(-11deg);
    }

}


.dm-cafe-ambient-orbit {
    position: absolute;

    border-radius: 50%;

    border:
        1px solid
        rgba(227, 161, 59, 0.085);
}


.dm-cafe-ambient-orbit--one {
    width: 540px;
    height: 540px;

    top: -310px;
    right: -260px;
}


.dm-cafe-ambient-orbit--two {
    width: 300px;
    height: 300px;

    bottom: -170px;
    left: -175px;
}


/* ============================================================
   MAIN LAYOUT
============================================================= */

.dm-cafe-layout {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.88fr)
        minmax(0, 1.12fr);

    align-items: center;

    gap: clamp(60px, 7vw, 120px);
}


/* ============================================================
   LEFT CONTENT
============================================================= */

.dm-cafe-info {
    position: relative;

    width: 100%;

    max-width: 670px;
}


/* ============================================================
   MAIN HEADING
============================================================= */

.dm-cafe-project .dm-main-head {
    width: 100%;

    max-width: 670px;

    margin: 0;

    text-align: left;
}


.dm-cafe-project .dm-main-head .dm-head-badge {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 22px;
}


.dm-cafe-project .dm-main-head .dm-head-badge > span {
    position: relative;

    display: block;

    width: 36px;
    height: 1px;

    flex: 0 0 36px;

    background:
        var(--dm-cafe-accent);
}


.dm-cafe-project .dm-main-head .dm-head-badge > span::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--dm-cafe-accent);

    transform:
        translateY(-50%);
}


.dm-cafe-project .dm-main-head .dm-head-badge p {
    margin: 0;

    color:
        var(--dm-cafe-dark-soft);

    font-size: 10px;

    font-weight: 700;

    line-height: 1.45;

    letter-spacing: 1.7px;

    text-transform: uppercase;
}


.dm-cafe-project .dm-main-head h1 {
    max-width: 625px;

    margin: 0;

    color:
        var(--dm-cafe-dark);

    font-size:
        clamp(40px, 4vw, 62px);

    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -2px;
}


.dm-cafe-project .dm-main-head h1 span {
    color:
        var(--dm-cafe-accent);

    font-weight: 600;
}


.dm-cafe-project .dm-main-head > p {
    max-width: 600px;

    margin: 24px 0 0;

    color:
        var(--dm-cafe-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   BRAND
============================================================= */

.dm-cafe-brand {
    display: grid;

    grid-template-columns:
        34px
        auto
        1fr;

    align-items: center;

    gap: 17px;

    margin-top: 32px;
}


.dm-cafe-brand-line {
    width: 34px;
    height: 1px;

    background:
        rgba(17, 24, 32, 0.17);
}


.dm-cafe-logo-wrap {
    display: flex;

    align-items: center;

    justify-content: center;

    width: 145px;

    min-height: 55px;

    padding: 8px 14px;

    border:
        1px solid
        rgba(17, 24, 32, 0.08);

    background:
        rgba(255, 255, 255, 0.65);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


.dm-cafe-logo-wrap img {
    display: block;

    width: auto;

    max-width: 115px;

    max-height: 39px;
}


.dm-cafe-brand-meta {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.dm-cafe-brand-meta span {
    color:
        var(--dm-cafe-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.dm-cafe-brand-meta strong {
    color:
        var(--dm-cafe-dark);

    font-size: 13px;

    font-weight: 600;
}


/* ============================================================
   FEATURES
============================================================= */

.dm-cafe-feature-strip {
    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr
        auto
        1fr;

    align-items: center;

    margin-top: 34px;

    padding: 18px 0;

    border-top:
        1px solid
        var(--dm-cafe-border);

    border-bottom:
        1px solid
        var(--dm-cafe-border);
}


.dm-cafe-feature {
    display: flex;

    align-items: center;

    gap: 11px;
}


.dm-cafe-feature-no {
    color:
        var(--dm-cafe-accent);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;
}


.dm-cafe-feature > div {
    display: flex;

    flex-direction: column;

    gap: 1px;
}


.dm-cafe-feature strong {
    color:
        var(--dm-cafe-dark);

    font-size: 12px;

    font-weight: 700;
}


.dm-cafe-feature small {
    color:
        var(--dm-cafe-muted);

    font-size: 8px;

    font-weight: 600;

    letter-spacing: 0.8px;

    text-transform: uppercase;
}


.dm-cafe-feature-divider {
    width: 1px;

    height: 30px;

    margin: 0 17px;

    background:
        var(--dm-cafe-border);
}


/* ============================================================
   ACTIONS
============================================================= */

.dm-cafe-actions {
    display: flex;

    align-items: center;

    gap: 28px;

    margin-top: 32px;
}


.dm-cafe-premium-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    overflow: hidden;

    text-decoration: none;
}


.dm-cafe-btn-label {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    min-height: 52px;

    padding: 0 25px;

    overflow: hidden;

    border:
        1px solid
        rgba(17, 24, 32, 0.15);

    border-radius: 50px;

    background:
        rgba(255, 255, 255, 0.72);

    color:
        var(--dm-cafe-dark);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);

    transition:
        color 0.45s ease,
        border-color 0.45s ease;
}


.dm-cafe-btn-label::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    border-radius: inherit;

    background:
        var(--dm-cafe-dark);

    transform:
        translateX(-102%);

    transition:
        transform 0.65s
        cubic-bezier(0.19, 1, 0.22, 1);
}


.dm-cafe-btn-arrow {
    position: relative;

    z-index: 2;

    display: grid;

    place-items: center;

    width: 52px;
    height: 52px;

    border-radius: 50%;

    background:
        var(--dm-cafe-dark);

    transition:
        background 0.45s ease,
        transform 0.45s ease;
}


.dm-cafe-btn-arrow svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.45s ease;
}


.dm-cafe-btn-flow {
    position: absolute;

    z-index: 4;

    top: 0;
    left: -70px;

    width: 45px;
    height: 100%;

    pointer-events: none;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.30),
            transparent
        );

    transform:
        skewX(-18deg);
}


.dm-cafe-premium-btn:hover
.dm-cafe-btn-label {
    color: #ffffff;

    border-color:
        var(--dm-cafe-dark);
}


.dm-cafe-premium-btn:hover
.dm-cafe-btn-label::before {
    transform:
        translateX(0);
}


.dm-cafe-premium-btn:hover
.dm-cafe-btn-arrow {
    background:
        var(--dm-cafe-accent);

    transform:
        rotate(-6deg);
}


.dm-cafe-premium-btn:hover
.dm-cafe-btn-arrow svg {
    transform:
        translateX(3px);
}


.dm-cafe-premium-btn:hover
.dm-cafe-btn-flow {
    animation:
        dmCafeButtonFlow
        0.85s ease forwards;
}


@keyframes dmCafeButtonFlow {

    0% {
        left: -70px;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 115%;
        opacity: 0;
    }

}


.dm-cafe-project-code {
    display: flex;

    align-items: center;

    gap: 10px;
}


.dm-cafe-project-code span {
    color:
        var(--dm-cafe-muted);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.dm-cafe-project-code strong {
    color:
        var(--dm-cafe-accent);

    font-size: 13px;

    font-weight: 700;
}


/* ============================================================
   RIGHT STAGE
============================================================= */

.dm-cafe-stage {
    position: relative;

    min-width: 0;
}


.dm-cafe-stage-number {
    position: absolute;

    z-index: -1;

    right: -3%;
    bottom: -12%;

    color: transparent;

    font-size:
        clamp(125px, 13vw, 210px);

    font-weight: 700;

    line-height: 1;

    letter-spacing: -8px;

    -webkit-text-stroke:
        1px
        rgba(17, 24, 32, 0.055);

    pointer-events: none;

    user-select: none;
}


.dm-cafe-side-text {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: -27px;

    color:
        rgba(17, 24, 32, 0.34);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 2px;

    white-space: nowrap;

    writing-mode:
        vertical-rl;

    transform:
        translateY(-50%)
        rotate(180deg);
}


/* ============================================================
   VISUAL
============================================================= */

.dm-cafe-visual {
    --dm-cafe-rotate-x: 0deg;
    --dm-cafe-rotate-y: 0deg;

    position: relative;

    width: 100%;

    padding: 1px;

    perspective: 1500px;

    transform-style:
        preserve-3d;

    transform:
        rotateX(var(--dm-cafe-rotate-x))
        rotateY(var(--dm-cafe-rotate-y));

    transition:
        transform 0.6s ease-out;
}


/* ============================================================
   ANIMATED OUTER BORDER
============================================================= */

.dm-cafe-border-runner {
    position: absolute;

    z-index: -1;

    inset: -1px;

    overflow: hidden;
}


.dm-cafe-border-runner::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 50%;

    width: 170px;
    height: 170px;

    background:
        conic-gradient(
            transparent 0deg,
            transparent 250deg,
            rgba(227, 161, 59, 0.95) 292deg,
            transparent 332deg
        );

    transform:
        translate(-50%, -50%)
        scale(7);

    animation:
        dmCafeBorderRotate
        12s linear infinite;
}


@keyframes dmCafeBorderRotate {

    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            scale(7);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            scale(7);
    }

}


/* ============================================================
   VISUAL SHELL
============================================================= */

.dm-cafe-visual-shell {
    position: relative;

    overflow: hidden;

    padding: 11px;

    border:
        1px solid
        rgba(17, 24, 32, 0.10);

    background:
        rgba(255, 255, 255, 0.84);

    box-shadow:
        0 42px 95px
        rgba(25, 32, 39, 0.13),
        0 7px 24px
        rgba(25, 32, 39, 0.05);

    backdrop-filter:
        blur(18px);

    -webkit-backdrop-filter:
        blur(18px);
}


/* ============================================================
   TOP BAR
============================================================= */

.dm-cafe-visual-top {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding: 4px 4px 12px;
}


.dm-cafe-visual-top-left,
.dm-cafe-visual-top-right {
    display: flex;

    align-items: center;

    gap: 8px;
}


.dm-cafe-visual-top span {
    color:
        var(--dm-cafe-muted);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;

    text-transform: uppercase;
}


.dm-cafe-visual-top-right strong {
    color:
        var(--dm-cafe-dark);

    font-size: 9px;

    font-weight: 700;
}


.dm-cafe-status-dot {
    position: relative;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--dm-cafe-accent);
}


.dm-cafe-status-dot::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(227, 161, 59, 0.35);

    border-radius: 50%;

    animation:
        dmCafeStatusPulse
        2.8s ease-out infinite;
}


@keyframes dmCafeStatusPulse {

    0% {
        opacity: 1;
        transform: scale(.45);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.7);
    }

}


/* ============================================================
   IMAGE FRAME
============================================================= */

.dm-cafe-image-frame {
    position: relative;

    width: 100%;

    overflow: hidden;

    background: #d8d7d3;
}


.dm-cafe-image-inner {
    --dm-cafe-mouse-x: 50%;
    --dm-cafe-mouse-y: 50%;

    position: relative;

    width: 100%;

    aspect-ratio: 1.43 / 1;

    overflow: hidden;

    isolation: isolate;

    background: #15191d;
}


/* ============================================================
   STACKED IMAGES
============================================================= */

.dm-cafe-slide {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    opacity: 0;

    transform:
        scale(1.055);

    filter:
        brightness(0.86)
        contrast(0.96)
        saturate(0.92);

    will-change:
        opacity,
        filter,
        transform;
}


/* CURRENT IMAGE */

.dm-cafe-slide.is-active {
    z-index: 4;

    opacity: 1;

    transform:
        scale(1.025);

    filter:
        brightness(1)
        contrast(1.02)
        saturate(1);
}


/* NEXT IMAGE IS PREPARED UNDER THE CURRENT IMAGE */

.dm-cafe-slide.is-next {
    z-index: 3;

    opacity: 0;

    transform:
        scale(1.055);

    filter:
        brightness(0.62)
        contrast(0.88)
        saturate(0.76);
}


/* ============================================================
   SLOW CROSSFADE
============================================================= */

.dm-cafe-image-inner.is-crossfading
.dm-cafe-slide.is-active {
    opacity: 0;

    transform:
        scale(1.065);

    filter:
        brightness(0.46)
        contrast(0.74)
        saturate(0.50);

    transition:
        opacity 4.2s
        cubic-bezier(.4,0,.2,1),

        filter 4.5s
        cubic-bezier(.4,0,.2,1),

        transform 8s
        cubic-bezier(.22,.61,.36,1);
}


.dm-cafe-image-inner.is-crossfading
.dm-cafe-slide.is-next {
    opacity: 1;

    transform:
        scale(1.025);

    filter:
        brightness(0.62)
        contrast(0.88)
        saturate(0.78);

    transition:
        opacity 4.6s
        cubic-bezier(.4,0,.2,1),

        filter 4.6s
        cubic-bezier(.4,0,.2,1),

        transform 8s
        cubic-bezier(.22,.61,.36,1);
}


/* ============================================================
   NEW IMAGE RETURNS TO FULL COLOUR
============================================================= */

.dm-cafe-image-inner.is-revealing
.dm-cafe-slide.is-next {
    opacity: 1;

    transform:
        scale(1.025);

    filter:
        brightness(1)
        contrast(1.02)
        saturate(1);

    transition:
        filter 4.2s
        cubic-bezier(.4,0,.2,1),

        transform 7s ease;
}


/* ============================================================
   BLACK CINEMATIC OVERLAY
============================================================= */

.dm-cafe-image-shade {
    position: absolute;

    z-index: 10;

    inset: 0;

    pointer-events: none;

    background:
        rgba(5, 8, 11, 0.03);

    transition:
        background 4s
        cubic-bezier(.4,0,.2,1);
}


/* BEGIN SLOW DIM */

.dm-cafe-image-inner.is-dimming
.dm-cafe-image-shade {
    background:
        rgba(5, 8, 11, 0.22);
}


/* DARKEST MOMENT */

.dm-cafe-image-inner.is-crossfading
.dm-cafe-image-shade {
    background:
        rgba(5, 8, 11, 0.40);

    transition:
        background 4.4s
        cubic-bezier(.4,0,.2,1);
}


/* NEW IMAGE BEGINS REVEALING */

.dm-cafe-image-inner.is-revealing
.dm-cafe-image-shade {
    background:
        rgba(5, 8, 11, 0.08);

    transition:
        background 4.6s
        cubic-bezier(.4,0,.2,1);
}


/* ============================================================
   POINTER LIGHT
============================================================= */

.dm-cafe-image-light {
    position: absolute;

    z-index: 14;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle 300px
            at
            var(--dm-cafe-mouse-x)
            var(--dm-cafe-mouse-y),

            rgba(255,255,255,.15),

            rgba(255,255,255,.04) 40%,

            transparent 72%
        );

    transition:
        opacity .6s ease;
}


@media (hover: hover) and (pointer: fine) {

    .dm-cafe-image-inner:hover
    .dm-cafe-image-light {
        opacity: 1;
    }

}


/* ============================================================
   MICRO GRID
============================================================= */

.dm-cafe-image-grid {
    position: absolute;

    z-index: 12;

    inset: 0;

    pointer-events: none;

    opacity: 0.075;

    background-image:
        linear-gradient(
            rgba(255,255,255,.20) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.20) 1px,
            transparent 1px
        );

    background-size:
        56px 56px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.55),
            transparent 78%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.55),
            transparent 78%
        );
}


/* ============================================================
   SCANNER WRAPPER
============================================================= */

.dm-cafe-scan-wrap {
    position: absolute;

    z-index: 20;

    inset: 0;

    overflow: hidden;

    pointer-events: none;
}


/* ============================================================
   SCANNER LINE
============================================================= */

.dm-cafe-scan-line {
    position: absolute;

    left: 0;
    top: -10%;

    width: 100%;
    height: 1px;

    opacity: 0;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.10) 12%,
            rgba(255,255,255,.50) 37%,
            rgba(229,163,62,.90) 50%,
            rgba(255,255,255,.50) 63%,
            rgba(255,255,255,.10) 88%,
            transparent 100%
        );

    box-shadow:
        0 0 8px
        rgba(227,161,59,.22),

        0 0 22px
        rgba(227,161,59,.08);
}


/* ============================================================
   SCANNER SOFT TRAIL
============================================================= */

.dm-cafe-scan-glow {
    position: absolute;

    left: 0;
    top: -32%;

    width: 100%;
    height: 28%;

    opacity: 0;

    background:
        linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0,0,0,.01) 15%,
            rgba(0,0,0,.04) 48%,
            rgba(0,0,0,.08) 72%,
            rgba(227,161,59,.055) 100%
        );

    filter:
        blur(5px);
}


/* ============================================================
   VERY SLOW SCANNER
============================================================= */

.dm-cafe-image-inner.is-scanning
.dm-cafe-scan-line {
    animation:
        dmCafeLuxuryScan
        9s
        cubic-bezier(.42,0,.25,1)
        forwards;
}


.dm-cafe-image-inner.is-scanning
.dm-cafe-scan-glow {
    animation:
        dmCafeLuxuryGlow
        9s
        cubic-bezier(.42,0,.25,1)
        forwards;
}


/* ============================================================
   SCAN MOVEMENT
============================================================= */

@keyframes dmCafeLuxuryScan {

    0% {
        top: -10%;
        opacity: 0;
    }

    8% {
        opacity: .18;
    }

    16% {
        opacity: .58;
    }

    30% {
        opacity: .78;
    }

    58% {
        opacity: .76;
    }

    72% {
        opacity: .60;
    }

    82% {
        opacity: .38;
    }

    91% {
        opacity: .14;
    }

    100% {
        top: 110%;
        opacity: 0;
    }

}


@keyframes dmCafeLuxuryGlow {

    0% {
        top: -32%;
        opacity: 0;
    }

    14% {
        opacity: .12;
    }

    28% {
        opacity: .36;
    }

    58% {
        opacity: .40;
    }

    74% {
        opacity: .27;
    }

    88% {
        opacity: .10;
    }

    100% {
        top: 105%;
        opacity: 0;
    }

}


/* ============================================================
   CORNER MARKS
============================================================= */

.dm-cafe-mark {
    position: absolute;

    z-index: 25;

    width: 25px;
    height: 25px;

    pointer-events: none;
}


.dm-cafe-mark--tl {
    top: 16px;
    left: 16px;

    border-top:
        1px solid rgba(255,255,255,.82);

    border-left:
        1px solid rgba(255,255,255,.82);
}


.dm-cafe-mark--tr {
    top: 16px;
    right: 16px;

    border-top:
        1px solid rgba(255,255,255,.82);

    border-right:
        1px solid rgba(255,255,255,.82);
}


.dm-cafe-mark--bl {
    bottom: 16px;
    left: 16px;

    border-bottom:
        1px solid rgba(255,255,255,.82);

    border-left:
        1px solid rgba(255,255,255,.82);
}


.dm-cafe-mark--br {
    right: 16px;
    bottom: 16px;

    border-right:
        1px solid rgba(255,255,255,.82);

    border-bottom:
        1px solid rgba(255,255,255,.82);
}


/* ============================================================
   FLOATING CARDS
============================================================= */

.dm-cafe-floating-card {
    position: absolute;

    z-index: 28;

    display: flex;

    flex-direction: column;

    padding: 10px 13px;

    border:
        1px solid
        rgba(255,255,255,.20);

    background:
        rgba(14,21,27,.72);

    color:
        #ffffff;

    box-shadow:
        0 14px 32px
        rgba(0,0,0,.13);

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);
}


.dm-cafe-floating-card
span:not(.dm-cafe-mini-live),

.dm-cafe-floating-card small {
    color:
        rgba(255,255,255,.55);

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.1px;

    text-transform: uppercase;
}


.dm-cafe-floating-card strong {
    margin-top: 2px;

    color:
        #ffffff;

    font-size: 9px;

    font-weight: 600;
}


.dm-cafe-floating-card--top {
    top: 30px;
    right: 27px;

    animation:
        dmCafeFloatTop
        7s ease-in-out infinite;
}


.dm-cafe-floating-card--bottom {
    left: 27px;
    bottom: 26px;

    flex-direction: row;

    align-items: center;

    gap: 10px;

    animation:
        dmCafeFloatBottom
        8s ease-in-out infinite;
}


@keyframes dmCafeFloatTop {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-5px);
    }

}


@keyframes dmCafeFloatBottom {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(5px);
    }

}



.dm-cafe-mini-live {
    width: 6px;
    height: 6px;

    flex: 0 0 6px;

    border-radius: 50%;

    background:
        var(--dm-cafe-accent);

    box-shadow:
        0 0 0 4px
        rgba(227,161,59,.15);
}


/* ============================================================
   IMAGE COUNTER
============================================================= */

.dm-cafe-image-counter {
    position: absolute;

    z-index: 28;

    right: 22px;
    bottom: 18px;

    display: flex;

    align-items: center;

    gap: 7px;

    color: #ffffff;

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;
}


.dm-cafe-image-counter i {
    display: block;

    width: 20px;
    height: 1px;

    background:
        rgba(255,255,255,.42);
}


.dm-cafe-image-counter
span:first-child {
    color:
        var(--dm-cafe-accent);
}


/* ============================================================
   BOTTOM BAR
============================================================= */

.dm-cafe-visual-bottom {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 25px;

    padding: 13px 4px 3px;
}


.dm-cafe-visual-bottom
> div:first-child {
    display: flex;

    flex-direction: column;

    gap: 2px;
}


.dm-cafe-visual-bottom span {
    color:
        var(--dm-cafe-muted);

    font-size: 6px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.dm-cafe-visual-bottom strong {
    color:
        var(--dm-cafe-dark);

    font-size: 9px;

    font-weight: 600;
}


.dm-cafe-visual-progress {
    position: relative;

    width: 105px;
    height: 1px;

    overflow: hidden;

    background:
        rgba(17,24,32,.10);
}


.dm-cafe-visual-progress span {
    position: absolute;

    top: 0;
    left: -70%;

    width: 65%;
    height: 100%;

    background:
        var(--dm-cafe-accent);

    animation:
        dmCafeProgress
        7s ease-in-out infinite;
}


@keyframes dmCafeProgress {

    0% {
        left: -70%;
    }

    55% {
        left: 110%;
    }

    100% {
        left: 110%;
    }

}


/* ============================================================
   SECTION REVEAL
============================================================= */

.dm-cafe-project
.dm-main-head .dm-head-badge,

.dm-cafe-project
.dm-main-head h1,

.dm-cafe-project
.dm-main-head > p,

.dm-cafe-brand,

.dm-cafe-feature-strip,

.dm-cafe-actions {
    opacity: 0;

    transform:
        translateY(25px);
}


.dm-cafe-stage {
    opacity: 0;

    transform:
        translateX(45px)
        scale(.982);
}


.dm-cafe-project.dm-cafe-active
.dm-main-head .dm-head-badge {
    animation:
        dmCafeReveal
        .85s .05s forwards;
}


.dm-cafe-project.dm-cafe-active
.dm-main-head h1 {
    animation:
        dmCafeReveal
        .9s .14s forwards;
}


.dm-cafe-project.dm-cafe-active
.dm-main-head > p {
    animation:
        dmCafeReveal
        .9s .25s forwards;
}


.dm-cafe-project.dm-cafe-active
.dm-cafe-brand {
    animation:
        dmCafeReveal
        .9s .36s forwards;
}


.dm-cafe-project.dm-cafe-active
.dm-cafe-feature-strip {
    animation:
        dmCafeReveal
        .9s .47s forwards;
}


.dm-cafe-project.dm-cafe-active
.dm-cafe-actions {
    animation:
        dmCafeReveal
        .9s .58s forwards;
}


.dm-cafe-project.dm-cafe-active
.dm-cafe-stage {
    animation:
        dmCafeStageReveal
        1.2s .15s
        cubic-bezier(.18,.75,.2,1)
        forwards;
}


@keyframes dmCafeReveal {

    from {
        opacity: 0;

        transform:
            translateY(25px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


@keyframes dmCafeStageReveal {

    from {
        opacity: 0;

        transform:
            translateX(45px)
            scale(.982);
    }

    to {
        opacity: 1;

        transform:
            translateX(0)
            scale(1);
    }

}


/* ============================================================
   LARGE LAPTOP
============================================================= */

@media (max-width: 1399px) {

    .dm-cafe-project {
        padding:
            100px 0;
    }


    .dm-cafe-layout {
        grid-template-columns:
            minmax(0,.90fr)
            minmax(0,1.10fr);

        gap:
            65px;
    }


    .dm-cafe-project
    .dm-main-head h1 {
        font-size:
            clamp(39px,4vw,56px);
    }

}


/* ============================================================
   LAPTOP
============================================================= */

@media (max-width: 1199px) {

    .dm-cafe-project {
        padding:
            90px 0;
    }


    .dm-cafe-layout {
        gap:
            48px;
    }


    .dm-cafe-project
    .dm-main-head h1 {
        font-size:
            47px;
    }


    .dm-cafe-project
    .dm-main-head > p {
        font-size:
            14px;
    }


    .dm-cafe-feature-divider {
        margin:
            0 12px;
    }


    .dm-cafe-image-inner {
        aspect-ratio:
            1.38 / 1;
    }

}


/* ============================================================
   TABLET
============================================================= */

@media (max-width: 991px) {

    .dm-cafe-project {
        padding:
            80px 0;
    }


    .dm-cafe-layout {
        grid-template-columns:
            1fr;

        gap:
            52px;
    }


    .dm-cafe-info {
        max-width:
            760px;
    }


    .dm-cafe-project
    .dm-main-head {
        max-width:
            720px;
    }


    .dm-cafe-project
    .dm-main-head h1 {
        font-size:
            clamp(42px,7vw,56px);
    }


    .dm-cafe-project
    .dm-main-head > p {
        max-width:
            650px;
    }


    .dm-cafe-feature-strip {
        max-width:
            650px;
    }


    .dm-cafe-image-inner {
        aspect-ratio:
            16 / 10;
    }


    .dm-cafe-stage-number {
        right: 0;

        bottom:
            -65px;
    }


    .dm-cafe-side-text {
        left:
            -18px;
    }

}


/* ============================================================
   MOBILE
============================================================= */

@media (max-width: 767px) {

    .dm-cafe-project {
        padding:
            65px 0;
    }


    .dm-cafe-layout {
        gap:
            40px;
    }


    .dm-cafe-project
    .dm-main-head
    .dm-head-badge {
        align-items:
            flex-start;

        margin-bottom:
            17px;
    }


    .dm-cafe-project
    .dm-main-head
    .dm-head-badge > span {
        width:
            25px;

        flex:
            0 0 25px;

        margin-top:
            6px;
    }


    .dm-cafe-project
    .dm-main-head
    .dm-head-badge p {
        font-size:
            8px;

        letter-spacing:
            1.2px;
    }


    .dm-cafe-project
    .dm-main-head h1 {
        font-size:
            clamp(36px,10vw,47px);

        letter-spacing:
            -1.4px;
    }


    .dm-cafe-project
    .dm-main-head > p {
        margin-top:
            20px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    .dm-cafe-brand {
        grid-template-columns:
            auto 1fr;

        gap:
            12px;

        margin-top:
            26px;
    }


    .dm-cafe-brand-line {
        display:
            none;
    }


    .dm-cafe-logo-wrap {
        width:
            125px;

        min-height:
            50px;
    }


    .dm-cafe-logo-wrap img {
        max-width:
            100px;
    }


    .dm-cafe-feature-strip {
        grid-template-columns:
            1fr 1fr;

        gap:
            16px;

        padding:
            17px 0;
    }


    .dm-cafe-feature-divider {
        display:
            none;
    }


    .dm-cafe-feature:last-child {
        grid-column:
            1 / -1;
    }


    .dm-cafe-actions {
        justify-content:
            space-between;

        gap:
            15px;

        margin-top:
            27px;
    }


    .dm-cafe-btn-label {
        min-height:
            48px;

        padding:
            0 19px;

        font-size:
            9px;
    }


    .dm-cafe-btn-arrow {
        width:
            48px;

        height:
            48px;
    }


    .dm-cafe-project-code span {
        display:
            none;
    }


    .dm-cafe-visual-shell {
        padding:
            8px;
    }


    .dm-cafe-visual-top {
        padding:
            3px 3px 9px;
    }


    .dm-cafe-image-inner {
        aspect-ratio:
            4 / 3;
    }


    .dm-cafe-floating-card {
        padding:
            7px 9px;
    }


    .dm-cafe-floating-card--top {
        top:
            15px;

        right:
            13px;
    }


    .dm-cafe-floating-card--bottom {
        left:
            13px;

        bottom:
            14px;
    }


    .dm-cafe-floating-card strong {
        font-size:
            8px;
    }


    .dm-cafe-image-counter {
        right:
            13px;

        bottom:
            12px;
    }


    .dm-cafe-mark {
        width:
            19px;

        height:
            19px;
    }


    .dm-cafe-stage-number,
    .dm-cafe-side-text {
        display:
            none;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================= */

@media (max-width: 480px) {

    .dm-cafe-project {
        padding:
            56px 0;
    }


    .dm-cafe-project
    .dm-main-head h1 {
        font-size:
            37px;
    }


    .dm-cafe-feature-strip {
        grid-template-columns:
            1fr;

        gap:
            13px;
    }


    .dm-cafe-feature:last-child {
        grid-column:
            auto;
    }


    .dm-cafe-feature {
        padding-bottom:
            11px;

        border-bottom:
            1px solid
            var(--dm-cafe-border-soft);
    }


    .dm-cafe-feature:last-child {
        padding-bottom:
            0;

        border-bottom:
            0;
    }


    .dm-cafe-image-inner {
        aspect-ratio:
            1.17 / 1;
    }


    .dm-cafe-image-counter {
        display:
            none;
    }


    .dm-cafe-visual-top-left
    span:last-child {
        display:
            none;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================= */

@media (prefers-reduced-motion: reduce) {

    .dm-cafe-project
    .dm-main-head .dm-head-badge,

    .dm-cafe-project
    .dm-main-head h1,

    .dm-cafe-project
    .dm-main-head > p,

    .dm-cafe-brand,

    .dm-cafe-feature-strip,

    .dm-cafe-actions,

    .dm-cafe-stage {
        opacity: 1;

        transform: none;

        animation: none !important;
    }


    .dm-cafe-slide,
    .dm-cafe-scan-line,
    .dm-cafe-scan-glow,
    .dm-cafe-border-runner::before,
    .dm-cafe-ambient-line,
    .dm-cafe-floating-card {
        animation: none !important;
    }

}

/* ============================================================
   DESIGN MASTER
   CAFE MANAGEMENT ECOSYSTEM
============================================================= */

.dm-cafe-suite {
    --cafe-ink: #121820;
    --cafe-text: #27323b;
    --cafe-muted: #778089;

    --cafe-gold: #de9e38;
    --cafe-gold-soft: #f1c675;

    --cafe-purple: #a98ad1;
    --cafe-teal: #75cbd5;
    --cafe-coral: #fa8060;

    --cafe-line: rgba(18, 24, 32, 0.10);
    --cafe-line-soft: rgba(18, 24, 32, 0.055);

    position: relative;

    width: 100%;

    padding: 120px 0 130px;

    overflow: hidden;

    isolation: isolate;

    background:
        radial-gradient(
            circle at 93% 6%,
            rgba(169, 138, 209, 0.08),
            transparent 23%
        ),
        radial-gradient(
            circle at 2% 70%,
            rgba(117, 203, 213, 0.08),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8f9f7 50%,
            #ffffff 100%
        );
}


/* ============================================================
   AMBIENT BACKGROUND
============================================================= */

.dm-cafe-suite-bg {
    position: absolute;

    inset: 0;

    z-index: -1;

    overflow: hidden;

    pointer-events: none;
}


.dm-cafe-suite-grid {
    position: absolute;

    inset: 0;

    opacity: 0.35;

    background-image:
        linear-gradient(
            rgba(18, 24, 32, 0.022) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(18, 24, 32, 0.022) 1px,
            transparent 1px
        );

    background-size:
        86px 86px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );

    mask-image:
        linear-gradient(
            to bottom,
            transparent,
            #000 12%,
            #000 88%,
            transparent
        );
}


.dm-cafe-suite-orbit {
    position: absolute;

    display: block;

    border-radius: 50%;

    border:
        1px solid
        rgba(222, 158, 56, 0.08);
}


.dm-cafe-suite-orbit--01 {
    width: 560px;
    height: 560px;

    top: -330px;
    right: -270px;
}


.dm-cafe-suite-orbit--02 {
    width: 340px;
    height: 340px;

    left: -200px;
    bottom: 16%;
}


.dm-cafe-suite-beam {
    position: absolute;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(222, 158, 56, 0.22),
            transparent
        );
}


.dm-cafe-suite-beam--01 {
    width: 720px;

    top: 10%;
    left: -280px;

    transform:
        rotate(-9deg);

    animation:
        dmCafeBeamOne
        16s ease-in-out infinite alternate;
}


.dm-cafe-suite-beam--02 {
    width: 820px;

    right: -320px;
    bottom: 8%;

    transform:
        rotate(-9deg);

    animation:
        dmCafeBeamTwo
        19s ease-in-out infinite alternate;
}


@keyframes dmCafeBeamOne {

    from {
        transform:
            translateX(-30px)
            rotate(-9deg);
    }

    to {
        transform:
            translateX(90px)
            rotate(-9deg);
    }

}


@keyframes dmCafeBeamTwo {

    from {
        transform:
            translateX(50px)
            rotate(-9deg);
    }

    to {
        transform:
            translateX(-80px)
            rotate(-9deg);
    }

}


/* ============================================================
   INTRODUCTION
============================================================= */

.dm-cafe-suite-intro {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 1.2fr)
        minmax(300px, 0.52fr);

    align-items: end;

    gap: clamp(55px, 7vw, 120px);

    margin-bottom:
        clamp(80px, 9vw, 140px);
}


/* ============================================================
   MAIN HEAD
============================================================= */

.dm-cafe-suite .dm-main-head {
    max-width: 780px;

    margin: 0;

    text-align: left;
}


.dm-cafe-suite
.dm-main-head
.dm-head-badge {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 23px;
}


.dm-cafe-suite
.dm-main-head
.dm-head-badge > span {
    position: relative;

    width: 38px;
    height: 1px;

    flex: 0 0 38px;

    background:
        var(--cafe-gold);
}


.dm-cafe-suite
.dm-main-head
.dm-head-badge > span::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--cafe-gold);

    transform:
        translateY(-50%);
}


.dm-cafe-suite
.dm-main-head
.dm-head-badge p {
    margin: 0;

    color:
        var(--cafe-text);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 1.8px;

    line-height: 1.5;

    text-transform: uppercase;
}


.dm-cafe-suite
.dm-main-head h1 {
    max-width: 760px;

    margin: 0;

    color:
        var(--cafe-ink);

    font-size:
        clamp(42px, 4.4vw, 68px);

    font-weight: 600;

    line-height: 1.04;

    letter-spacing: -2.5px;
}


.dm-cafe-suite
.dm-main-head h1 span {
    color:
        var(--cafe-gold);
}


.dm-cafe-suite
.dm-main-head > p {
    max-width: 685px;

    margin: 26px 0 0;

    color:
        var(--cafe-muted);

    font-size: 15px;

    line-height: 1.8;
}


/* ============================================================
   BROCHURE PANEL
============================================================= */

.dm-cafe-brochure {
    position: relative;

    padding:
        27px 28px 28px;

    overflow: hidden;

    border:
        1px solid
        var(--cafe-line);

    background:
        rgba(255, 255, 255, 0.72);

    box-shadow:
        0 25px 65px
        rgba(19, 27, 34, 0.07);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


.dm-cafe-brochure::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--cafe-gold),
            var(--cafe-purple),
            transparent 78%
        );
}


.dm-cafe-brochure::after {
    content: "PDF";

    position: absolute;

    top: 16px;
    right: -4px;

    color:
        rgba(18, 24, 32, 0.03);

    font-size: 70px;

    font-weight: 800;

    line-height: 1;

    pointer-events: none;
}


.dm-cafe-brochure-top {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 11px;

    margin-bottom: 18px;
}


.dm-cafe-brochure-icon {
    display: grid;

    place-items: center;

    width: 36px;
    height: 36px;

    border-radius: 50%;

    background:
        var(--cafe-ink);
}


.dm-cafe-brochure-icon svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke:
        #ffffff;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;
}


.dm-cafe-brochure-tag {
    color:
        var(--cafe-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.6px;
}


.dm-cafe-brochure h3 {
    position: relative;

    z-index: 2;

    max-width: 340px;

    margin: 0;

    color:
        var(--cafe-ink);

    font-size: 20px;

    font-weight: 600;

    line-height: 1.3;
}


.dm-cafe-brochure p {
    position: relative;

    z-index: 2;

    margin: 13px 0 0;

    color:
        var(--cafe-muted);

    font-size: 12px;

    line-height: 1.7;
}


/* ============================================================
   DOWNLOAD BUTTON
============================================================= */

.dm-cafe-download-btn {
    position: relative;

    z-index: 2;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    margin-top: 21px;

    text-decoration: none;
}


.dm-cafe-download-text {
    position: relative;

    z-index: 1;

    display: flex;

    align-items: center;

    min-height: 48px;

    padding:
        0 20px;

    overflow: hidden;

    border:
        1px solid
        rgba(18, 24, 32, 0.13);

    border-radius: 40px;

    color:
        var(--cafe-ink);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition:
        color .45s ease,
        border-color .45s ease;
}


.dm-cafe-download-text::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    border-radius: inherit;

    background:
        var(--cafe-ink);

    transform:
        translateX(-102%);

    transition:
        transform .6s
        cubic-bezier(.19,1,.22,1);
}


.dm-cafe-download-arrow {
    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    background:
        var(--cafe-ink);

    transition:
        background .4s ease,
        transform .4s ease;
}


.dm-cafe-download-arrow svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.5;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform .4s ease;
}


.dm-cafe-download-btn:hover
.dm-cafe-download-text {
    color: #ffffff;

    border-color:
        var(--cafe-ink);
}


.dm-cafe-download-btn:hover
.dm-cafe-download-text::before {
    transform:
        translateX(0);
}


.dm-cafe-download-btn:hover
.dm-cafe-download-arrow {
    background:
        var(--cafe-gold);

    transform:
        rotate(-6deg);
}


.dm-cafe-download-btn:hover
.dm-cafe-download-arrow svg {
    transform:
        translateX(2px);
}


/* ============================================================
   SYSTEM
============================================================= */

.dm-cafe-system {
    position: relative;

    width: 100%;
}


/* ============================================================
   CENTRAL RAIL
============================================================= */

.dm-cafe-system-rail {
    position: absolute;

    z-index: 1;

    top: 0;
    bottom: 0;

    left: 50%;

    width: 1px;

    transform:
        translateX(-50%);
}


.dm-cafe-system-rail-base,
.dm-cafe-system-rail-progress {
    position: absolute;

    left: 0;

    width: 1px;
}


.dm-cafe-system-rail-base {
    inset: 0;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(18,24,32,.11) 4%,
            rgba(18,24,32,.11) 96%,
            transparent
        );
}


.dm-cafe-system-rail-progress {
    top: 0;

    height: 0;

    background:
        linear-gradient(
            to bottom,
            var(--cafe-gold),
            var(--cafe-purple),
            var(--cafe-teal)
        );

    box-shadow:
        0 0 12px
        rgba(222, 158, 56, .15);

    transition:
        height .18s linear;
}


/* ============================================================
   MODULE
============================================================= */

.dm-cafe-module {
    position: relative;

    z-index: 2;

    padding:
        0 0
        clamp(90px, 10vw, 150px);

    opacity: .28;

    transition:
        opacity .7s ease;
}


.dm-cafe-module:last-child {
    padding-bottom: 0;
}


.dm-cafe-module.is-active {
    opacity: 1;
}


/* ============================================================
   MODULE MARKER
============================================================= */

.dm-cafe-module-marker {
    position: absolute;

    z-index: 15;

    top: 50%;
    left: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 9px;

    transform:
        translate(-50%, -50%);
}


.dm-cafe-module-dot {
    position: relative;

    display: block;

    width: 10px;
    height: 10px;

    border:
        2px solid #ffffff;

    border-radius: 50%;

    background:
        #c8cdd0;

    box-shadow:
        0 0 0 1px
        rgba(18,24,32,.12);

    transition:
        background .4s ease,
        box-shadow .4s ease,
        transform .4s ease;
}


.dm-cafe-module.is-active
.dm-cafe-module-dot {
    background:
        var(--cafe-gold);

    box-shadow:
        0 0 0 6px
        rgba(222,158,56,.10);

    transform:
        scale(1.12);
}


.dm-cafe-module-dot::after {
    content: "";

    position: absolute;

    inset: -7px;

    border:
        1px solid
        rgba(222,158,56,.22);

    border-radius: 50%;

    opacity: 0;
}


.dm-cafe-module.is-active
.dm-cafe-module-dot::after {
    animation:
        dmCafeDotPulse
        2.8s ease-out infinite;
}


@keyframes dmCafeDotPulse {

    0% {
        opacity: .85;

        transform:
            scale(.5);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.75);
    }

}


.dm-cafe-module-number {
    color:
        rgba(18,24,32,.35);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1px;

    transition:
        color .4s ease;
}


.dm-cafe-module.is-active
.dm-cafe-module-number {
    color:
        var(--cafe-gold);
}


/* ============================================================
   MODULE GRID
============================================================= */

.dm-cafe-module-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, .82fr);

    align-items: center;

    gap:
        clamp(80px, 10vw, 175px);
}


.dm-cafe-module--reverse
.dm-cafe-module-visual {
    order: 2;
}


.dm-cafe-module--reverse
.dm-cafe-module-content {
    order: 1;
}


/* ============================================================
   IMAGE CARD
============================================================= */

.dm-cafe-module-visual {
    position: relative;

    min-width: 0;

    opacity: 0;

    transform:
        translateY(35px)
        scale(.975);

    transition:
        opacity 1s
        cubic-bezier(.2,.7,.2,1),
        transform 1.1s
        cubic-bezier(.2,.7,.2,1);
}


.dm-cafe-module.is-inview
.dm-cafe-module-visual {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


.dm-cafe-image-card {
    position: relative;

    padding: 10px;

    border:
        1px solid
        rgba(18,24,32,.09);

    background:
        rgba(255,255,255,.80);

    box-shadow:
        0 30px 80px
        rgba(18,25,32,.08);

    backdrop-filter:
        blur(15px);

    -webkit-backdrop-filter:
        blur(15px);

    transition:
        box-shadow .6s ease,
        transform .6s
        cubic-bezier(.19,1,.22,1);
}


.dm-cafe-image-meta {
    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    padding:
        4px 3px 11px;
}


.dm-cafe-image-meta span,
.dm-cafe-image-meta small {
    color:
        var(--cafe-muted);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.dm-cafe-image-meta small {
    color:
        var(--cafe-gold);
}


.dm-cafe-image-box {
    --dm-cafe-mouse-x: 50%;
    --dm-cafe-mouse-y: 50%;

    position: relative;

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 370px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f8f8f6
        );
}


.dm-cafe-image-box::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    opacity: .35;

    background:
        radial-gradient(
            circle at 72% 22%,
            rgba(169,138,209,.13),
            transparent 30%
        ),
        radial-gradient(
            circle at 18% 78%,
            rgba(117,203,213,.10),
            transparent 28%
        );
}


.dm-cafe-image-box img {
    position: relative;

    z-index: 2;

    display: block;

    width: 100%;
    height: 100%;

    max-height: 390px;

    object-fit: contain;

    object-position: center;

    padding: 26px;

    transform:
        scale(.94);

    transition:
        transform 1.15s
        cubic-bezier(.19,1,.22,1),
        filter .7s ease;

    will-change:
        transform;
}


.dm-cafe-image-light {
    position: absolute;

    z-index: 3;

    inset: 0;

    pointer-events: none;

    opacity: 0;

    background:
        radial-gradient(
            circle 220px
            at
            var(--dm-cafe-mouse-x)
            var(--dm-cafe-mouse-y),

            rgba(255,255,255,.44),

            transparent 70%
        );

    transition:
        opacity .4s ease;
}


@media (hover: hover) and (pointer: fine) {

    .dm-cafe-image-card:hover {
        transform:
            translateY(-7px);

        box-shadow:
            0 40px 95px
            rgba(18,25,32,.12);
    }


    .dm-cafe-image-card:hover
    .dm-cafe-image-box img {
        transform:
            scale(.985);
    }


    .dm-cafe-image-card:hover
    .dm-cafe-image-light {
        opacity: 1;
    }

}


/* ============================================================
   IMAGE CORNERS
============================================================= */

.dm-cafe-corner {
    position: absolute;

    z-index: 6;

    width: 24px;
    height: 24px;

    pointer-events: none;
}


.dm-cafe-corner--tl {
    top: 14px;
    left: 14px;

    border-top:
        1px solid rgba(18,24,32,.18);

    border-left:
        1px solid rgba(18,24,32,.18);
}


.dm-cafe-corner--tr {
    top: 14px;
    right: 14px;

    border-top:
        1px solid rgba(18,24,32,.18);

    border-right:
        1px solid rgba(18,24,32,.18);
}


.dm-cafe-corner--bl {
    bottom: 14px;
    left: 14px;

    border-bottom:
        1px solid rgba(18,24,32,.18);

    border-left:
        1px solid rgba(18,24,32,.18);
}


.dm-cafe-corner--br {
    right: 14px;
    bottom: 14px;

    border-right:
        1px solid rgba(18,24,32,.18);

    border-bottom:
        1px solid rgba(18,24,32,.18);
}


/* ============================================================
   MODULE CONTENT
============================================================= */

.dm-cafe-module-content {
    position: relative;

    max-width: 470px;

    opacity: 0;

    transform:
        translateY(30px);

    transition:
        opacity .9s .12s
        cubic-bezier(.2,.7,.2,1),
        transform .9s .12s
        cubic-bezier(.2,.7,.2,1);
}


.dm-cafe-module.is-inview
.dm-cafe-module-content {
    opacity: 1;

    transform:
        translateY(0);
}


.dm-cafe-module-kicker {
    display: inline-block;

    margin-bottom: 16px;

    color:
        var(--cafe-gold);

    font-size: 8px;

    font-weight: 700;

    letter-spacing: 1.8px;
}


.dm-cafe-module-content h2 {
    margin: 0;

    color:
        var(--cafe-ink);

    font-size:
        clamp(29px, 3vw, 43px);

    font-weight: 600;

    line-height: 1.1;

    letter-spacing: -1.5px;
}


.dm-cafe-module-content p {
    max-width: 450px;

    margin:
        19px 0 0;

    color:
        var(--cafe-muted);

    font-size: 14px;

    line-height: 1.75;
}


.dm-cafe-module-status {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 23px;
}


.dm-cafe-module-status > span {
    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--cafe-gold);

    box-shadow:
        0 0 0 5px
        rgba(222,158,56,.09);
}


.dm-cafe-module-status small {
    color:
        var(--cafe-text);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.dm-cafe-module-line {
    display: block;

    width: 0;
    height: 1px;

    margin-top: 26px;

    background:
        linear-gradient(
            90deg,
            var(--cafe-gold),
            rgba(222,158,56,.09)
        );

    transition:
        width 1.2s .32s
        cubic-bezier(.19,1,.22,1);
}


.dm-cafe-module.is-inview
.dm-cafe-module-line {
    width: 100%;
}


/* ============================================================
   INTRO ANIMATION
============================================================= */

.dm-cafe-suite
.dm-main-head,

.dm-cafe-brochure {
    opacity: 0;

    transform:
        translateY(32px);
}


.dm-cafe-suite.is-ready
.dm-main-head {
    animation:
        dmCafeIntroReveal
        1s .08s forwards;
}


.dm-cafe-suite.is-ready
.dm-cafe-brochure {
    animation:
        dmCafeIntroReveal
        1s .25s forwards;
}


@keyframes dmCafeIntroReveal {

    from {
        opacity: 0;

        transform:
            translateY(32px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   LARGE LAPTOP
============================================================= */

@media (max-width: 1399px) {

    .dm-cafe-suite {
        padding:
            105px 0 115px;
    }


    .dm-cafe-suite-intro {
        gap:
            65px;
    }


    .dm-cafe-module-layout {
        gap:
            120px;
    }


    .dm-cafe-image-box {
        min-height:
            330px;
    }

}


/* ============================================================
   LAPTOP
============================================================= */

@media (max-width: 1199px) {

    .dm-cafe-suite {
        padding:
            90px 0 105px;
    }


    .dm-cafe-suite-intro {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(280px, .46fr);

        gap:
            45px;
    }


    .dm-cafe-suite
    .dm-main-head h1 {
        font-size:
            51px;
    }


    .dm-cafe-module-layout {
        gap:
            90px;
    }


    .dm-cafe-image-box {
        min-height:
            300px;
    }


    .dm-cafe-image-box img {
        max-height:
            330px;

        padding:
            20px;
    }


    .dm-cafe-module-content h2 {
        font-size:
            34px;
    }

}


/* ============================================================
   TABLET
============================================================= */

@media (max-width: 991px) {

    .dm-cafe-suite {
        padding:
            80px 0 90px;
    }


    .dm-cafe-suite-intro {
        grid-template-columns:
            1fr;

        gap:
            36px;

        margin-bottom:
            85px;
    }


    .dm-cafe-suite
    .dm-main-head {
        max-width:
            720px;
    }


    .dm-cafe-suite
    .dm-main-head h1 {
        font-size:
            clamp(43px, 7vw, 58px);
    }


    .dm-cafe-brochure {
        max-width:
            600px;
    }


    .dm-cafe-system-rail {
        left: 20px;

        transform:
            none;
    }


    .dm-cafe-module {
        padding-left:
            65px;

        padding-bottom:
            95px;
    }


    .dm-cafe-module-marker {
        top: 40px;
        left: 20px;

        transform:
            translateX(-50%);
    }


    .dm-cafe-module-layout {
        grid-template-columns:
            1fr;

        gap:
            28px;
    }


    .dm-cafe-module--reverse
    .dm-cafe-module-visual,

    .dm-cafe-module--reverse
    .dm-cafe-module-content {
        order: initial;
    }


    .dm-cafe-module-content {
        max-width:
            650px;
    }


    .dm-cafe-image-box {
        min-height:
            380px;
    }


    .dm-cafe-image-box img {
        max-height:
            400px;

        padding:
            28px;
    }

}


/* ============================================================
   MOBILE
============================================================= */

@media (max-width: 767px) {

    .dm-cafe-suite {
        padding:
            66px 0 75px;
    }


    .dm-cafe-suite-intro {
        gap:
            30px;

        margin-bottom:
            67px;
    }


    .dm-cafe-suite
    .dm-main-head
    .dm-head-badge {
        align-items:
            flex-start;

        margin-bottom:
            17px;
    }


    .dm-cafe-suite
    .dm-main-head
    .dm-head-badge > span {
        width:
            26px;

        flex:
            0 0 26px;

        margin-top:
            6px;
    }


    .dm-cafe-suite
    .dm-main-head
    .dm-head-badge p {
        font-size:
            8px;

        letter-spacing:
            1.25px;
    }


    .dm-cafe-suite
    .dm-main-head h1 {
        font-size:
            clamp(36px, 10vw, 47px);

        letter-spacing:
            -1.5px;
    }


    .dm-cafe-suite
    .dm-main-head > p {
        margin-top:
            20px;

        font-size:
            13px;

        line-height:
            1.72;
    }


    .dm-cafe-brochure {
        padding:
            23px 21px;
    }


    .dm-cafe-brochure h3 {
        font-size:
            18px;
    }


    .dm-cafe-brochure p {
        font-size:
            11px;
    }


    .dm-cafe-download-text {
        min-height:
            46px;

        padding:
            0 17px;

        font-size:
            8px;
    }


    .dm-cafe-download-arrow {
        width:
            46px;

        height:
            46px;
    }


    .dm-cafe-system-rail {
        left:
            11px;
    }


    .dm-cafe-module {
        padding-left:
            40px;

        padding-bottom:
            75px;
    }


    .dm-cafe-module-marker {
        top:
            32px;

        left:
            11px;
    }


    .dm-cafe-module-number {
        display:
            none;
    }


    .dm-cafe-module-layout {
        gap:
            24px;
    }


    .dm-cafe-image-card {
        padding:
            7px;
    }


    .dm-cafe-image-meta {
        padding:
            3px 3px 8px;
    }


    .dm-cafe-image-meta span,
    .dm-cafe-image-meta small {
        font-size:
            6px;

        letter-spacing:
            1px;
    }


    .dm-cafe-image-box {
        min-height:
            280px;
    }


    .dm-cafe-image-box img {
        max-height:
            300px;

        padding:
            18px;
    }


    .dm-cafe-module-kicker {
        margin-bottom:
            12px;

        font-size:
            7px;
    }


    .dm-cafe-module-content h2 {
        font-size:
            clamp(27px, 7.5vw, 35px);
    }


    .dm-cafe-module-content p {
        margin-top:
            15px;

        font-size:
            13px;

        line-height:
            1.7;
    }


    .dm-cafe-module-status {
        margin-top:
            18px;
    }


    .dm-cafe-module-line {
        margin-top:
            20px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================= */

@media (max-width: 480px) {

    .dm-cafe-suite {
        padding:
            58px 0 65px;
    }


    .dm-cafe-suite
    .dm-main-head h1 {
        font-size:
            37px;
    }


    .dm-cafe-brochure {
        padding:
            20px 18px;
    }


    .dm-cafe-image-box {
        min-height:
            220px;
    }


    .dm-cafe-image-box img {
        max-height:
            240px;

        padding:
            13px;
    }


    .dm-cafe-corner {
        width:
            18px;

        height:
            18px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================= */

@media (prefers-reduced-motion: reduce) {

    .dm-cafe-suite
    .dm-main-head,

    .dm-cafe-brochure,

    .dm-cafe-module-visual,

    .dm-cafe-module-content {
        opacity: 1;

        transform: none;

        animation: none !important;

        transition: none !important;
    }


    .dm-cafe-module {
        opacity: 1;
    }


    .dm-cafe-suite-beam,

    .dm-cafe-module-dot::after {
        animation:
            none !important;
    }


    .dm-cafe-module-line {
        width: 100%;
    }

}


/* ============================================================
   DESIGN MASTER
   HOME PAGE CAFE MANAGEMENT - BROCHURE PANEL
============================================================= */

.dm-cafe-project .dm-cafe-brochure {
    position: relative;

    width: 100%;
    max-width: 600px;

    margin-top: 34px;

    padding: 22px 23px 21px;

    overflow: hidden;

    border:
        1px solid
        rgba(17, 24, 32, 0.10);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.86) 0%,
            rgba(255, 255, 255, 0.68) 100%
        );

    box-shadow:
        0 20px 55px
        rgba(17, 24, 32, 0.055);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);

    transition:
        transform 0.65s
        cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.65s ease,
        border-color 0.65s ease;
}


/* ============================================================
   TOP ACCENT LINE
============================================================= */

.dm-cafe-project .dm-cafe-brochure-line {
    position: absolute;

    top: 0;
    left: 0;

    width: 0;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            var(--dm-cafe-accent),
            rgba(227, 161, 59, 0.40),
            transparent
        );

    animation:
        dmCafeBrochureLine
        1.8s
        cubic-bezier(0.19, 1, 0.22, 1)
        forwards;
}


@keyframes dmCafeBrochureLine {

    from {
        width: 0;
    }

    to {
        width: 100%;
    }

}


/* ============================================================
   SUBTLE BACKGROUND GLOW
============================================================= */

.dm-cafe-project .dm-cafe-brochure::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -115px;
    right: -75px;

    border-radius: 50%;

    pointer-events: none;

    background:
        radial-gradient(
            circle,
            rgba(227, 161, 59, 0.10) 0%,
            rgba(227, 161, 59, 0.025) 45%,
            transparent 72%
        );
}


/* ============================================================
   LARGE FAINT PRODUCT NUMBER
============================================================= */

.dm-cafe-project .dm-cafe-brochure::after {
    content: "01";

    position: absolute;

    right: 12px;
    bottom: -30px;

    color: transparent;

    font-size: 92px;

    font-weight: 700;

    line-height: 1;

    letter-spacing: -6px;

    -webkit-text-stroke:
        1px
        rgba(17, 24, 32, 0.035);

    pointer-events: none;

    user-select: none;
}


/* ============================================================
   BROCHURE HEADER
============================================================= */

.dm-cafe-project .dm-cafe-brochure-head {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 18px;

    padding-bottom: 17px;

    border-bottom:
        1px solid
        rgba(17, 24, 32, 0.07);
}


.dm-cafe-project .dm-cafe-brochure-top {
    display: flex;

    align-items: center;

    gap: 13px;
}


/* ============================================================
   DOWNLOAD ICON
============================================================= */

.dm-cafe-project .dm-cafe-brochure-icon {
    position: relative;

    display: grid;

    place-items: center;

    width: 40px;
    height: 40px;

    flex:
        0 0 40px;

    border-radius: 50%;

    background:
        var(--dm-cafe-dark);

    box-shadow:
        0 7px 20px
        rgba(17, 24, 32, 0.13);
}


.dm-cafe-project .dm-cafe-brochure-icon::after {
    content: "";

    position: absolute;

    inset: -5px;

    border:
        1px solid
        rgba(227, 161, 59, 0.22);

    border-radius: 50%;

    animation:
        dmCafeBrochurePulse
        3s ease-out infinite;
}


@keyframes dmCafeBrochurePulse {

    0% {
        opacity: 0.8;

        transform:
            scale(0.70);
    }

    75%,
    100% {
        opacity: 0;

        transform:
            scale(1.50);
    }

}


.dm-cafe-project .dm-cafe-brochure-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: #ffffff;

    stroke-width: 1.55;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   BROCHURE SMALL TITLE
============================================================= */

.dm-cafe-project .dm-cafe-brochure-title-wrap {
    display: flex;

    flex-direction: column;

    gap: 3px;
}


.dm-cafe-project .dm-cafe-brochure-tag {
    color:
        var(--dm-cafe-accent);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1.6px;

    line-height: 1.2;
}


.dm-cafe-project .dm-cafe-brochure-title-wrap small {
    color:
        var(--dm-cafe-muted);

    font-size: 9px;

    font-weight: 500;

    letter-spacing: 0.35px;
}


/* ============================================================
   VIEW STATUS
============================================================= */

.dm-cafe-project .dm-cafe-brochure-status {
    display: inline-flex;

    align-items: center;

    gap: 7px;

    color:
        var(--dm-cafe-dark);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.4px;
}


.dm-cafe-project .dm-cafe-brochure-status i {
    position: relative;

    display: block;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        var(--dm-cafe-accent);
}


.dm-cafe-project .dm-cafe-brochure-status i::after {
    content: "";

    position: absolute;

    inset: -4px;

    border:
        1px solid
        rgba(227, 161, 59, 0.25);

    border-radius: 50%;

    animation:
        dmCafeBrochureStatus
        2.2s ease-out infinite;
}


@keyframes dmCafeBrochureStatus {

    0% {
        opacity: 1;

        transform:
            scale(.55);
    }

    100% {
        opacity: 0;

        transform:
            scale(1.6);
    }

}


/* ============================================================
   CONTENT
============================================================= */

.dm-cafe-project .dm-cafe-brochure-content {
    position: relative;

    z-index: 2;

    padding:
        18px 0 19px;
}


.dm-cafe-project .dm-cafe-brochure-content h3 {
    max-width: 500px;

    margin: 0;

    color:
        var(--dm-cafe-dark);

    font-size: 17px;

    font-weight: 600;

    line-height: 1.4;

    letter-spacing: -0.35px;
}


.dm-cafe-project .dm-cafe-brochure-content p {
    max-width: 520px;

    margin:
        10px 0 0;

    color:
        var(--dm-cafe-muted);

    font-size: 12px;

    font-weight: 400;

    line-height: 1.7;
}


/* ============================================================
   FOOTER
============================================================= */

.dm-cafe-project .dm-cafe-brochure-footer {
    position: relative;

    z-index: 3;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;
}


/* ============================================================
   DOWNLOAD BUTTON
============================================================= */

.dm-cafe-project .dm-cafe-download-btn {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 4px;

    overflow: hidden;

    text-decoration: none;

    isolation: isolate;
}


/* ============================================================
   BUTTON TEXT
============================================================= */

.dm-cafe-project .dm-cafe-download-text {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    min-height: 48px;

    padding:
        0 21px;

    overflow: hidden;

    border:
        1px solid
        rgba(17, 24, 32, 0.14);

    border-radius:
        50px;

    background:
        rgba(255, 255, 255, 0.70);

    color:
        var(--dm-cafe-dark);

    font-size: 9px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    transition:
        color 0.45s ease,
        border-color 0.45s ease,
        transform 0.45s ease;
}


/* ============================================================
   BUTTON DARK FILL
============================================================= */

.dm-cafe-project
.dm-cafe-download-text::before {
    content: "";

    position: absolute;

    z-index: -1;

    inset: 0;

    border-radius: inherit;

    background:
        var(--dm-cafe-dark);

    transform:
        translateX(-102%);

    transition:
        transform
        0.62s
        cubic-bezier(0.19, 1, 0.22, 1);
}


/* ============================================================
   ARROW
============================================================= */

.dm-cafe-project .dm-cafe-download-arrow {
    position: relative;

    z-index: 3;

    display: grid;

    place-items: center;

    width: 48px;
    height: 48px;

    flex:
        0 0 48px;

    border-radius: 50%;

    background:
        var(--dm-cafe-dark);

    transition:
        background 0.45s ease,
        transform 0.5s
        cubic-bezier(0.19, 1, 0.22, 1);
}


.dm-cafe-project
.dm-cafe-download-arrow svg {
    width: 16px;
    height: 16px;

    fill: none;

    stroke:
        #ffffff;

    stroke-width: 1.6;

    stroke-linecap: round;

    stroke-linejoin: round;

    transition:
        transform 0.45s ease;
}


/* ============================================================
   BUTTON SHINE
============================================================= */

.dm-cafe-project .dm-cafe-download-shine {
    position: absolute;

    z-index: 4;

    top: 0;
    left: -70px;

    width: 45px;
    height: 100%;

    opacity: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:
        skewX(-18deg);
}


/* ============================================================
   BUTTON HOVER
============================================================= */

.dm-cafe-project
.dm-cafe-download-btn:hover
.dm-cafe-download-text {
    color:
        #ffffff;

    border-color:
        var(--dm-cafe-dark);

    transform:
        translateX(2px);
}


.dm-cafe-project
.dm-cafe-download-btn:hover
.dm-cafe-download-text::before {
    transform:
        translateX(0);
}


.dm-cafe-project
.dm-cafe-download-btn:hover
.dm-cafe-download-arrow {
    background:
        var(--dm-cafe-accent);

    transform:
        rotate(-7deg)
        scale(1.03);
}


.dm-cafe-project
.dm-cafe-download-btn:hover
.dm-cafe-download-arrow svg {
    transform:
        translateX(2px);
}


.dm-cafe-project
.dm-cafe-download-btn:hover
.dm-cafe-download-shine {
    animation:
        dmCafeBrochureShine
        .8s ease forwards;
}


@keyframes dmCafeBrochureShine {

    0% {
        left: -70px;

        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        left: 115%;

        opacity: 0;
    }

}


/* ============================================================
   PROJECT NUMBER
============================================================= */

.dm-cafe-project .dm-cafe-brochure-code {
    display: flex;

    align-items: center;

    gap: 9px;
}


.dm-cafe-project
.dm-cafe-brochure-code span {
    color:
        var(--dm-cafe-muted);

    font-size: 7px;

    font-weight: 700;

    letter-spacing: 1.3px;
}


.dm-cafe-project
.dm-cafe-brochure-code strong {
    color:
        var(--dm-cafe-accent);

    font-size: 12px;

    font-weight: 700;
}


/* ============================================================
   DECORATIVE CORNERS
============================================================= */

.dm-cafe-project .dm-cafe-brochure-corner {
    position: absolute;

    width: 18px;
    height: 18px;

    pointer-events: none;
}


.dm-cafe-project
.dm-cafe-brochure-corner--tl {
    top: 8px;
    left: 8px;

    border-top:
        1px solid
        rgba(227, 161, 59, 0.35);

    border-left:
        1px solid
        rgba(227, 161, 59, 0.35);
}


.dm-cafe-project
.dm-cafe-brochure-corner--br {
    right: 8px;
    bottom: 8px;

    border-right:
        1px solid
        rgba(17, 24, 32, 0.10);

    border-bottom:
        1px solid
        rgba(17, 24, 32, 0.10);
}


/* ============================================================
   DESKTOP HOVER
============================================================= */

@media (hover: hover) and (pointer: fine) {

    .dm-cafe-project
    .dm-cafe-brochure:hover {
        transform:
            translateY(-5px);

        border-color:
            rgba(227, 161, 59, 0.22);

        box-shadow:
            0 29px 72px
            rgba(17, 24, 32, 0.085);
    }

}


/* ============================================================
   BROCHURE REVEAL ANIMATION
============================================================= */

.dm-cafe-project
.dm-cafe-brochure {
    opacity: 0;

    transform:
        translateY(24px);
}


.dm-cafe-project.dm-cafe-active
.dm-cafe-brochure {
    animation:
        dmCafeBrochureReveal
        0.95s
        0.60s
        cubic-bezier(0.19, 1, 0.22, 1)
        forwards;
}


@keyframes dmCafeBrochureReveal {

    from {
        opacity: 0;

        transform:
            translateY(24px);
    }

    to {
        opacity: 1;

        transform:
            translateY(0);
    }

}


/* ============================================================
   LAPTOP
============================================================= */

@media (max-width: 1199px) {

    .dm-cafe-project .dm-cafe-brochure {
        max-width:
            540px;

        margin-top:
            30px;

        padding:
            20px 21px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content h3 {
        font-size:
            16px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content p {
        font-size:
            11px;
    }

}


/* ============================================================
   TABLET
============================================================= */

@media (max-width: 991px) {

    .dm-cafe-project .dm-cafe-brochure {
        max-width:
            650px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content h3 {
        max-width:
            560px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content p {
        max-width:
            570px;
    }

}


/* ============================================================
   MOBILE
============================================================= */

@media (max-width: 767px) {

    .dm-cafe-project .dm-cafe-brochure {
        margin-top:
            27px;

        padding:
            18px 17px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-head {
        gap:
            12px;

        padding-bottom:
            14px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-top {
        gap:
            10px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-icon {
        width:
            36px;

        height:
            36px;

        flex-basis:
            36px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-icon svg {
        width:
            15px;

        height:
            15px;
    }


    .dm-cafe-project

    .dm-cafe-brochure-tag {
        font-size:
            8px;

        letter-spacing:
            1.2px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-title-wrap small {
        font-size:
            8px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content {
        padding:
            15px 0 17px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content h3 {
        font-size:
            15px;

        line-height:
            1.4;
    }


    .dm-cafe-project
    .dm-cafe-brochure-content p {
        margin-top:
            8px;

        font-size:
            11px;

        line-height:
            1.65;
    }


    .dm-cafe-project
    .dm-cafe-download-text {
        min-height:
            46px;

        padding:
            0 17px;

        font-size:
            8px;
    }


    .dm-cafe-project
    .dm-cafe-download-arrow {
        width:
            46px;

        height:
            46px;

        flex-basis:
            46px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-code span {
        display:
            none;
    }


    .dm-cafe-project
    .dm-cafe-brochure::after {
        font-size:
            72px;

        bottom:
            -22px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================= */

@media (max-width: 480px) {

    .dm-cafe-project
    .dm-cafe-brochure-head {
        align-items:
            flex-start;
    }


    .dm-cafe-project
    .dm-cafe-brochure-status {
        display:
            none;
    }


    .dm-cafe-project
    .dm-cafe-brochure-footer {
        align-items:
            center;

        gap:
            10px;
    }


    .dm-cafe-project
    .dm-cafe-download-text {
        padding:
            0 14px;

        font-size:
            7.5px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-code {
        gap:
            4px;
    }


    .dm-cafe-project
    .dm-cafe-brochure-code strong {
        font-size:
            10px;
    }

}


/* ============================================================
   VERY SMALL MOBILE
============================================================= */

@media (max-width: 380px) {

    .dm-cafe-project
    .dm-cafe-brochure-footer {
        flex-wrap:
            wrap;
    }


    .dm-cafe-project
    .dm-cafe-brochure-code {
        width: 100%;

        margin-top:
            4px;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================= */

@media (prefers-reduced-motion: reduce) {

    .dm-cafe-project
    .dm-cafe-brochure {
        opacity: 1;

        transform: none;

        animation: none !important;
    }


    .dm-cafe-project
    .dm-cafe-brochure-line {
        width: 100%;

        animation: none !important;
    }


    .dm-cafe-project
    .dm-cafe-brochure-icon::after,

    .dm-cafe-project
    .dm-cafe-brochure-status i::after {
        animation: none !important;
    }

}