@font-face {
    font-family: 'ITC Avant Garde';
    src: url('/public/assets/fonts/ITCAvantGarde/ITCAvantGardeStd-Bk.woff2') format('woff2'),
    url('/public/assets/fonts/ITCAvantGarde/ITCAvantGardeStd-Bk.woff')  format('woff'),
    url('/public/assets/fonts/ITCAvantGarde/ITCAvantGardeStd-Bk.ttf')   format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'ITC Avant Garde';
    src: url('/public/assets/fonts/ITCAvantGarde/ITCAvantGardeStd-Bold.woff2') format('woff2'),
    url('/public/assets/fonts/ITCAvantGarde/ITCAvantGardeStd-Bold.woff')  format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Your variables (fixed var name) */
:root{
    --bg:#3a170f;
    --bg-2:#4a1d14;
    --text3:#fff8f0;   /* <- renamed from --text3 so body works */
    --muted3:#e6d5cc;  /* <- renamed from --muted3 */
    --accent:#ff6a00;
}

body{
    margin:0;
    font-family:'ITC Avant Garde', sans-serif !important; /* use the font */
    background:#111;
    color:var(--text3);
}

.about-heading{
    font-family:'ITC Avant Garde', sans-serif !important; /* use the font */

}
/* Ensure the slide is a positioned container */
.hero .carousel-item > .hero-slide {
    position: relative;
    min-height: calc(100vh - 140px);
    overflow: hidden;               /* crop any overflow cleanly */
}

/* Let jarallax handle the cover correctly */
.hero .jarallax {
    position: relative;
    z-index: 0;
}

/* The parallax image must be absolute and cover the box */
.hero .jarallax > .jarallax-img {
    position: absolute !important;  /* jarallax sets this, we enforce */
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;              /* no squish */
    object-position: center;        /* center focal point */
    transform: translateZ(0);       /* reduce subpixel blur on some GPUs */
    backface-visibility: hidden;
    will-change: transform;
}

/* Foreground should sit on top */
.hero .hero-foreground {
    position: absolute;
    inset: 0;
    z-index: 2;
}


@media (max-width: 576px) {
    .hero .carousel-item > .hero-slide {
        min-height: 85vh;  /* more height gives cover() space to work */
    }
}
/* Section backdrop + spacing */
.solutions{
    background: #e1dfd6;
    padding: clamp(20px,3vw,48px) 0;
}

/* Custom, larger gaps for Bootstrap 4 grid */
.ag-solutions-row{
    --gap-x: clamp(16px,2.4vw,28px);
    --gap-y: clamp(20px,3vw,36px);
    margin-left: calc(-1 * var(--gap-x));
    margin-right: calc(-1 * var(--gap-x));
}
.ag-solutions-row > [class*="col-"]{
    padding-left: var(--gap-x);
    padding-right: var(--gap-x);
    margin-bottom: var(--gap-y);
}

/* Card styles (unchanged) */
.solution-card{
    position:relative; border-radius:28px; overflow:hidden;
    min-height:520px; aspect-ratio:3.3/6; isolation:isolate;
    box-shadow:0 8px 24px rgba(0,0,0,.12); background:#000;
}
.solution-card__bg{
    position:absolute; inset:0; width:100%; height:100%;
    object-fit:cover; object-position:center; transform:translateZ(0);
    filter:saturate(1.05);
}
.solution-card__overlay{
    position:absolute; inset:0; z-index:1;
    background:
        radial-gradient(120% 140% at 10% 85%, rgba(0,0,0,.65) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.15) 70%, rgba(0,0,0,0) 100%),
        linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.35) 80%);
}
.solution-card__content{
    position:absolute; inset:auto 0 0 0;
    padding: clamp(18px,2.5vw,32px); color:#fff; z-index:2;
}
.solution-card__title{
    margin:0 0 clamp(12px,2vw,24px);
    font-weight:800; line-height:1.05; font-size:clamp(18px,1.4vw,30px);
}
.solution-card__list{ list-style:none; margin:0; padding:0; }
.solution-card__item{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:8px 0; border-bottom:2px solid rgba(255,255,255,.35);
}
.solution-card__item:last-child{ border-bottom:0; }
.solution-card__link{ color:#fff; text-decoration:none; font-weight:700; font-size:clamp(10px,1vw,18px); }
.solution-card__link:hover{ text-decoration:underline; }
.solution-card__arrow{
    flex:0 0 auto; display:grid; place-items:center;
    width:24px; height:24px; border-radius:9px;
    border:2px solid rgba(255,255,255,.7);
    transition:transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.solution-card__item:hover .solution-card__arrow{
    transform:translate(2px,-2px); background-color:rgba(255,255,255,.1); border-color:#fff;
}
.solution-card:hover{ box-shadow:0 12px 30px rgba(0,0,0,.18); }

@media (max-width:420px){
    .solution-card{ aspect-ratio:auto; min-height:460px; }
}

/* --- Fallback for browsers without aspect-ratio --- */
@supports not (aspect-ratio: 1 / 1){
    .solution-card{
        min-height: 0;                  /* let the ratio box drive the height */
    }
    .solution-card::before{
        content: "";
        display: block;
        padding-top: 120%;              /* 6 / 5 = 1.2 -> 120% of width */
    }
    /* Layer children over the ratio box */
    .solution-card > .solution-card__bg,
    .solution-card > .solution-card__overlay{
        position: absolute; inset: 0;
    }
    .solution-card > .solution-card__content{
        position: absolute; left: 0; right: 0; bottom: 0;
    }
}


.about-cont{
    background-color: #9e6043;
    border-radius: 1em;
    padding: 3em;

}
.about-line{
    border: none;
    height: 4px;
    width: 80%;
    margin: 40px auto;
    background: linear-gradient(to right, #ffffff, #ffffff);
    border-radius: 2px;

}
.vision-line {
    display: flex;
    align-items: center;
    gap: 16px; /* space between text and line */
    /*margin: 40px 0;*/
}

.vision-line .custom-hr {
    flex: none;
    width: 200px;
    height: 1px;
    background: white; /* or gradient if you like */
    border: none;
    border-radius: 1px;
    margin: 0;
}

.vision-line-1{
    display: flex;
    align-items: center;
    gap: 16px;
    /*margin: 40px 0;*/
    justify-content: flex-end; /* ensures left alignment */
}

.vision-line-1 .custom-hr {
    width: 80px; /* or whatever length you prefer */
    height: 2px;
    background: white;
    border: none;
    border-radius: 1px;
    margin: 0;
}

.commit p{
    background-color: #9e6043;
    border-radius: 4em;
    padding: 1em;
    text-align: center;
    color: white;
    font-size: larger;
    font-weight: bold;
}


:root{
    --bg:#3a170f;          /* deep cocoa */
    --bg-2:#4a1d14;        /* subtle contrast section */
    --text3:#fff8f0;        /* warm white */
    --muted3:#e6d5cc;
    --accent:#ff6a00;      /* orange accent */
}

body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif; background:#111; color:var(--text);}

/* FOOTER */
.footer{
    position:relative;
    background: var(--bg);
    overflow:hidden;
}

/* Cocoa pod watermark */
.footer::before{
    content:"";
    position:absolute; inset:-20% -10% auto auto;
    width:70vw; height:70vw; max-width:900px; max-height:900px;
    background:
        radial-gradient(ellipse at 65% 55%, rgba(0,0,0,0.12), transparent 60%),
        radial-gradient(ellipse at 45% 60%, rgba(0,0,0,0.10), transparent 55%);
    border-radius:60% 40% 65% 35%/55% 45% 60% 40%;
    opacity:.35;
    filter: blur(2px);
    transform: rotate(-12deg);
}

.footer-inner{
    position:relative;
    z-index:1;
    max-width:1200px;
    margin-inline:auto;
    padding:64px 24px 28px;
}

.grid{
    display:grid;
    grid-template-columns: 1.3fr .6fr .7fr;
    gap:48px;
}

/* Left brand column */
.brand{
    display:flex; gap:18px; align-items:flex-start;
}
.brand-logo{
    width:86px; height:auto; flex:0 0 auto; margin-top:6px;
    background:linear-gradient(135deg,#fff,#f7f2ee);
    border-radius:6px; padding:8px;
    display:grid; place-items:center;
}
.brand h1{
    margin:0; font-size:22px; letter-spacing:.12em; font-weight:800;
}
.brand h1 span{ display:block; font-size:12px; font-weight:600; letter-spacing:.18em; opacity:.9; margin-top:2px;}
.lead{
    color:var(--muted3);  margin:18px 0 12px; line-height:1.5; font-weight:700; max-width:720px; text-align: justify;font-size: medium;
}
.copy{
    color:var(--muted3); line-height:1.55; max-width:820px; text-align: justify; font-size: small;
}

/* Middle & Right columns */
.col-title{
    color:var(--accent); font-weight:800; font-size:19px; margin:4px 0 16px;
}
.menu, .social{ list-style:none; margin:0; padding:0; }
.menu li{ margin:14px 0; }
.menu a{
    color:var(--text3); text-decoration:none; font-size:16px; font-weight:600;
}
.menu a:hover{ opacity:.85; }

.social li{ display:flex; align-items:center; gap:12px; margin:16px 0; }
.social a{ color:var(--text3); text-decoration:none; font-size:16px; font-weight:700; display:flex; align-items:center; gap:12px; }
.icon{
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,.12); display:grid; place-items:center;
}
.icon svg{ width:18px; height:18px; fill:var(--text3); }

/* Divider + bottom row */
.divider{ border:0; height:3px; background:var(--accent); opacity:.9; margin:36px 0 14px; }

.bottom{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    flex-wrap:wrap; color:var(--text3);
}
.legal a{ color:var(--muted3); text-decoration:underline; margin-left:28px; }

/* Back to top */
.to-top{
    position:fixed; right:18px; bottom:18px; width:52px; height:52px; border-radius:14px;
    background:var(--accent); color:#1b0b06; display:grid; place-items:center;
    font-size:24px; border:none; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.35);
}
.to-top:hover{ filter:brightness(1.05); }

/* Responsive */
@media (max-width: 980px){
    .grid{ grid-template-columns: 1fr; }
    .brand{ align-items:center; }
    .brand-logo{ width:72px; }
    .menu a, .social a{ font-size:20px; }
    .col-title{ font-size:22px; }
    .lead{ font-size:15px; }
}