/* TripKuwait Discovery Gateways — responsive glass cards */

/* Elementor/editor parity: themes and Elementor frontend wrappers can reset
   horizontal margins on published pages. Keep the widget container full-width
   inside its own Elementor wrapper, while the widget's own Width/Max Width
   controls remain authoritative. */
.elementor-widget-tripkuwait_discovery_gateways > .elementor-widget-container{
  width:100%;
  max-width:100%;
  min-width:0;
}
.elementor-widget-tripkuwait_discovery_gateways .tkdg{
  margin-left:auto;
  margin-right:auto;
}
.elementor-widget-tripkuwait_discovery_gateways .tkdg__inner{
  margin-left:auto;
  margin-right:auto;
}

.tkdg,.tkdg *{box-sizing:border-box}
.tkdg{
  --tkdg-green:#008f4c;
  --tkdg-red:#e31b23;
  --tkdg-ink:#10251f;
  --tkdg-muted:#63726d;
  --tkdg-glow:rgba(0,143,76,.10);
  --tkdg-image-fit:cover;
  --tkdg-image-x:50%;
  --tkdg-image-y:50%;
  position:relative;
  width:100%;
  min-width:0;
  max-width:100%;
  margin:0 auto;
  padding:90px 30px;
  overflow:hidden;
  isolation:isolate;
  background:#f6faf8;
  color:var(--tkdg-ink);
  font-family:inherit;
  container-type:inline-size;
  container-name:tkdg;
}
.tkdg__glow{position:absolute;z-index:-1;width:620px;height:620px;right:-190px;top:-260px;border-radius:50%;background:radial-gradient(circle,var(--tkdg-glow) 0%,transparent 68%);pointer-events:none}
.tkdg__inner{width:100%;min-width:0;max-width:1380px;margin:0 auto}
.tkdg__intro{display:flex;flex-direction:column;align-items:flex-start;gap:14px;width:100%;max-width:760px;min-width:0;margin:0 0 42px}
.tkdg__intro--center{align-items:center;margin-left:auto;margin-right:auto}.tkdg__intro--right{align-items:flex-end;margin-left:auto}
.tkdg__eyebrow{display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:9px 14px 9px 12px;border:1px solid rgba(0,143,76,.12);border-radius:999px;background:rgba(0,143,76,.08);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--tkdg-green);font-size:12px;font-weight:700;line-height:1;letter-spacing:.08em}
.tkdg__eyebrow-icon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;font-size:14px}
.tkdg__eyebrow-icon svg,.tkdg-card__icon svg{width:1em;height:1em;fill:currentColor}
.tkdg__title{margin:0;padding:0;max-width:100%;color:var(--tkdg-ink);font-size:48px;line-height:1.08;font-weight:700;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.tkdg__description{margin:0;max-width:720px;color:var(--tkdg-muted);font-size:17px;line-height:1.7;overflow-wrap:anywhere}
.tkdg__grid{display:grid;width:100%;min-width:0;max-width:100%;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
.tkdg-card{--tkdg-accent:var(--tkdg-green);position:relative;width:100%;min-width:0;max-width:100%;min-height:480px;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(255,255,255,.86);border-radius:28px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 20px 55px rgba(14,51,40,.08),inset 0 1px 0 rgba(255,255,255,.72);text-decoration:none!important;color:inherit;transform:translateY(0);transition:transform .32s cubic-bezier(.2,.8,.2,1),background .32s ease,border-color .32s ease,box-shadow .32s ease}
.tkdg-card:hover{transform:translateY(-8px);background:rgba(255,255,255,.90);border-color:rgba(0,143,76,.28);box-shadow:0 28px 70px rgba(14,51,40,.14),inset 0 1px 0 rgba(255,255,255,.86);color:inherit}
.tkdg-card:focus-visible{outline:3px solid rgba(0,143,76,.28);outline-offset:4px}
.tkdg-card--business{--tkdg-accent:#0a6a4b}.tkdg-card--shop{--tkdg-accent:#e31b23}
.tkdg-card__media{position:relative;display:block;flex:0 0 auto;width:100%;min-width:0;height:220px;overflow:hidden;background:linear-gradient(145deg,color-mix(in srgb,var(--tkdg-accent) 16%,#eef7f3),#dfece7)}
.tkdg-card__image{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;min-width:100%!important;min-height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;object-fit:var(--tkdg-image-fit,cover)!important;object-position:var(--tkdg-image-x,50%) var(--tkdg-image-y,50%)!important;transform:scale(1);transform-origin:center center;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.tkdg-card:hover .tkdg-card__image{transform:scale(1.06)}
.tkdg-card__media:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,rgba(3,31,29,.22) 100%);pointer-events:none}
.tkdg-card__media-fallback{position:absolute;inset:0;background:radial-gradient(circle at 25% 22%,color-mix(in srgb,var(--tkdg-accent) 26%,transparent),transparent 34%),linear-gradient(135deg,color-mix(in srgb,var(--tkdg-accent) 9%,#f8fbfa),color-mix(in srgb,var(--tkdg-accent) 17%,#e8f1ed))}
.tkdg-card__media-fallback:after{content:"";position:absolute;inset:0;opacity:.18;background-image:linear-gradient(30deg,transparent 48%,var(--tkdg-accent) 49%,var(--tkdg-accent) 50%,transparent 51%),linear-gradient(-30deg,transparent 48%,var(--tkdg-accent) 49%,var(--tkdg-accent) 50%,transparent 51%);background-size:58px 58px}
.tkdg-card__icon{position:absolute;z-index:2;left:24px;bottom:22px;width:58px;height:58px;border:1px solid rgba(0,143,76,.15);border-radius:18px;display:inline-flex;align-items:center;justify-content:center;background:rgba(0,143,76,.12);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);color:var(--tkdg-accent);font-size:22px;box-shadow:0 10px 28px rgba(6,43,31,.12),inset 0 1px 0 rgba(255,255,255,.55)}
.tkdg-card__badge{position:absolute;z-index:3;top:18px;right:18px;max-width:calc(100% - 36px);padding:8px 12px;border-radius:999px;background:rgba(227,27,35,.92);color:#fff;font-size:10px;font-weight:800;line-height:1;letter-spacing:.08em;box-shadow:0 10px 24px rgba(227,27,35,.18);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tkdg-card__body{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:13px;padding:26px}
.tkdg-card__kicker,.tkdg-card__title,.tkdg-card__description,.tkdg-card__cta{max-width:100%;overflow-wrap:anywhere}
.tkdg-card__kicker{color:var(--tkdg-accent);font-size:11px;line-height:1.2;font-weight:800;letter-spacing:.09em}
.tkdg-card__title{display:block;margin:0;color:var(--tkdg-ink);font-size:28px;line-height:1.15;font-weight:700;letter-spacing:-.025em}
.tkdg-card__description{display:block;color:#66746f;font-size:15px;line-height:1.65}
.tkdg-card__cta{width:100%;margin-top:auto;padding-top:9px;display:flex;align-items:center;justify-content:space-between;gap:14px;color:var(--tkdg-ink);font-size:14px;font-weight:700;line-height:1.2;transition:color .25s ease}
.tkdg-card:hover .tkdg-card__cta{color:var(--tkdg-green)}
.tkdg-card__arrow{width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--tkdg-green);color:#fff;font-size:13px;line-height:1;box-shadow:0 10px 24px rgba(0,143,76,.18);transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.tkdg-card:hover .tkdg-card__arrow{transform:translateX(3px)}

/* Automatic layout follows the actual widget width. This keeps the Elementor
   editor canvas and the published frontend consistent. */
@container tkdg (max-width:1180px){
  .tkdg--auto .tkdg__grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .tkdg--auto .tkdg-card--shop{grid-column:1/-1}
}
@container tkdg (max-width:720px){
  .tkdg--auto .tkdg__grid{grid-template-columns:minmax(0,1fr)!important}
  .tkdg--auto .tkdg-card--shop{grid-column:auto}
}

/* Viewport fallback + responsive sizing. Elementor controls can still override
   these values because they are normal defaults, not locked !important rules. */
@media(max-width:1180px){
  .tkdg{padding:70px 24px}
  .tkdg__title{font-size:40px}
  .tkdg--auto .tkdg__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tkdg--auto .tkdg-card--shop{grid-column:1/-1}
}
@media(max-width:767px){
  .tkdg{padding:54px 20px}
  .tkdg__intro{max-width:100%;margin-bottom:28px}
  .tkdg__title{font-size:32px}
  .tkdg__description{font-size:15px;line-height:1.6}
  .tkdg--auto .tkdg__grid{grid-template-columns:minmax(0,1fr)}
  .tkdg--auto .tkdg-card--shop{grid-column:auto}
  .tkdg-card{border-radius:22px}
  .tkdg-card__icon{left:20px;bottom:18px;width:52px;height:52px;border-radius:16px;font-size:20px}
  .tkdg-card__body{padding:22px 20px}
  .tkdg-card__title{font-size:25px}
}
@media(max-width:420px){
  .tkdg{padding-left:18px;padding-right:18px}
  .tkdg-card__cta{gap:10px}
}
@media(prefers-reduced-motion:reduce){.tkdg-card,.tkdg-card__image,.tkdg-card__arrow{transition:none!important;transform:none!important}}

/* Premium glass hover layer */
.tkdg-card{
  --tkdg-hover-blur:30px;
  --tkdg-hover-glow:rgba(0,143,76,.22);
  --tkdg-hover-shine:rgba(255,255,255,.42);
  --tkdg-hover-shine-opacity:.45;
  --tkdg-hover-scale:1.008;
  --tkdg-hover-lift:8px;
  --tkdg-icon-hover-bg:rgba(255,255,255,.78);
  --tkdg-icon-hover-color:#008f4c;
  isolation:isolate;
}
.tkdg-card:before{
  content:"";position:absolute;z-index:7;top:-35%;bottom:-35%;left:-62%;width:34%;pointer-events:none;
  background:linear-gradient(90deg,transparent,var(--tkdg-hover-shine),transparent);opacity:0;
  transform:skewX(-18deg);transition:left .72s cubic-bezier(.2,.8,.2,1),opacity .22s ease
}
.tkdg-card:after{
  content:"";position:absolute;z-index:-1;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--tkdg-accent) 24%,transparent),0 24px 70px var(--tkdg-hover-glow);
  transition:opacity .3s ease
}
@media(hover:hover) and (pointer:fine){
  .tkdg-card:hover{
    -webkit-backdrop-filter:blur(var(--tkdg-hover-blur)) saturate(1.12);
    backdrop-filter:blur(var(--tkdg-hover-blur)) saturate(1.12);
    transform:translateY(calc(-1 * var(--tkdg-hover-lift))) scale(var(--tkdg-hover-scale));
  }
  .tkdg-card:hover:before{left:132%;opacity:var(--tkdg-hover-shine-opacity)}
  .tkdg-card:hover:after{opacity:1}
  .tkdg-card:hover .tkdg-card__icon{
    background:var(--tkdg-icon-hover-bg);color:var(--tkdg-icon-hover-color);border-color:rgba(255,255,255,.72);
    transform:translateY(-3px) rotate(-2deg);box-shadow:0 16px 38px color-mix(in srgb,var(--tkdg-accent) 20%,transparent),inset 0 1px 0 rgba(255,255,255,.82)
  }
  .tkdg-card:hover .tkdg-card__arrow{box-shadow:0 14px 30px color-mix(in srgb,var(--tkdg-accent) 28%,transparent)}
}
.tkdg-card__icon{transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}


/* v3.10.3 — Safe mobile height fix.
   Keep Elementor widgets full-width/stretched while allowing their content
   to determine height. Do NOT use align-self:flex-start because Elementor's
   column flex containers can then shrink the widget to min-content width. */
@media (max-width:767px){
  .elementor-widget-tripkuwait_discovery_gateways{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    align-self:stretch!important;
    flex-grow:0!important;
    flex-shrink:1!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways > .elementor-widget-container{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    align-self:stretch!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways .tkdg{
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
    margin-inline:0!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways .tkdg__inner,
  .elementor-widget-tripkuwait_discovery_gateways .tkdg__grid{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
    min-height:0!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways .tkdg__grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    align-items:stretch!important;
    align-content:start!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways .tkdg-card{
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    height:auto!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways .tkdg-card--shop{
    grid-column:auto!important;
  }
  .elementor-widget-tripkuwait_discovery_gateways .tkdg__title,
  .elementor-widget-tripkuwait_discovery_gateways .tkdg__description,
  .elementor-widget-tripkuwait_discovery_gateways .tkdg-card__title,
  .elementor-widget-tripkuwait_discovery_gateways .tkdg-card__description{
    width:auto!important;
    max-width:100%!important;
    word-break:normal!important;
    overflow-wrap:break-word!important;
  }
}