/* =====================================================================
   House of Kamal — aesthetic layer
   ---------------------------------------------------------------------
   Loaded after the stock template CSS so everything here is an override.
   Delete this one file (and its <link> in app/layout.jsx) to fall back to
   the original 2016 template look.

   Direction: a luxury silk house — warm ivory paper, charcoal ink, a
   single champagne accent, generous whitespace and a serif display face.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&display=swap");

:root{
    --ink:        #1c1a18;
    --ink-soft:   #6b6259;
    --cream:      #faf7f2;
    --cream-deep: #f2ebe1;
    --gold:       #b08d57;
    --gold-dim:   rgba(176,141,87,.35);
    --line:       rgba(28,26,24,.11);
    --display:    "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------------------------ base */

body{
    background: #fff;
    color: var(--ink-soft);
    font-size: 15px;
    line-height: 1.85;
    letter-spacing: .01em;
    -webkit-font-smoothing: antialiased;
}
p{ line-height: 1.9; }
::selection{ background: var(--gold); color: #fff; }

a{ transition: color .25s ease, opacity .25s ease, border-color .25s ease; }

/* --------------------------------------------------------- section frame */

.page-section{
    padding-top: 120px;
    padding-bottom: 120px;
}
.small-section{ padding-top: 80px; padding-bottom: 80px; }

/* Alternate the long light sections between paper-white and warm ivory so
   the page reads as bands rather than one continuous sheet. */
#certificates,
#Gallery,
#group{
    background-color: var(--cream);
}
.studio-section{ background-color: var(--cream-deep); }

/* Section titles: the template renders these as tiny wide-tracked Dosis
   caps. A serif at a real display size carries the "silk house" tone far
   better, so drop the uppercasing and add a short gold rule underneath. */
.section-title{
    position: relative;
    margin-bottom: 26px;
    padding-bottom: 26px;
    font-family: var(--display) !important;
    font-size: 44px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: .02em;
    line-height: 1.15;
    color: var(--ink);
    text-align: center !important;
}
.section-title strong{ font-weight: 400; }
.section-title:after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 54px;
    height: 1px;
    margin-left: -27px;
    background: var(--gold);
}
.section-title.align-left{ text-align: center !important; }

/* ------------------------------------------------------------------- nav */

.main-nav{
    background: rgba(255,255,255,.96);
    box-shadow: 0 1px 0 var(--line);
}
.main-nav.dark{
    background-color: rgba(24,22,20,.92);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    backdrop-filter: saturate(140%) blur(10px);
}
.main-nav.transparent{
    background-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
.main-nav.dark .inner-nav ul > li > a{
    color: rgba(255,255,255,.72);
    font-size: 11px;
    letter-spacing: .22em;
    transition: color .25s ease;
}
.main-nav.dark .inner-nav ul > li > a:hover,
.main-nav.dark .inner-nav ul > li > a.active{
    color: #fff;
}
/* A hairline that grows under the current section's link. */
.inner-nav ul > li > a{ position: relative; }
.inner-nav ul > li > a:after{
    content: "";
    position: absolute;
    left: 50%;
    right: 50%;
    bottom: 22px;
    height: 1px;
    background: var(--gold);
    opacity: 0;
    transition: left .3s ease, right .3s ease, opacity .3s ease;
}
.inner-nav ul > li > a:hover:after,
.inner-nav ul > li > a.active:after{
    left: 0; right: 0; opacity: 1;
}

/* ------------------------------------------------------------------ hero */

.home-section .section-heading{
    font-family: var(--display);
    font-size: 76px;
    font-weight: 300;
    letter-spacing: .26em;
    line-height: 1.1;
    color: #fff;
    text-shadow: 0 2px 24px rgba(0,0,0,.45);
}
.home-section .hs-line-14{
    font-family: var(--display);
    font-size: 27px !important;
    font-style: italic;
    font-weight: 300;
    letter-spacing: .06em;
    text-transform: none;
    color: rgba(255,255,255,.94);
    text-shadow: 0 1px 14px rgba(0,0,0,.5);
}
.home-section .hs-line-14 strong{ font-weight: 300; }
/* Darken the video just enough for the type to hold up over any frame. */
.home-section:before{
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(180deg, rgba(20,18,16,.42) 0%, rgba(20,18,16,.28) 45%, rgba(20,18,16,.55) 100%);
    z-index: 1;
    pointer-events: none;
}
.home-section .home-content,
.home-section .local-scroll{ position: relative; z-index: 2; }

.scroll-down-icon{ color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------- buttons */

.btn-mod,
a.btn-mod{
    padding: 13px 34px;
    border-width: 1px;
    border-radius: 0 !important;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .26em;
    text-transform: uppercase;
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
a.btn-mod.btn-border-w{
    border-color: rgba(255,255,255,.75);
    background: transparent;
    color: #fff;
}
a.btn-mod.btn-border-w:hover{
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
a.btn-mod.btn-w{
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
a.btn-mod.btn-w:hover{
    background: var(--gold);
    border-color: var(--gold);
    color: #fff;
}

/* -------------------------------------------------------------- about us */

#about-us .section-text{ font-size: 15px; }
blockquote{
    padding: 0 0 0 26px;
    border-left: 1px solid var(--gold);
    font-family: var(--display);
    font-size: 25px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.55;
    color: var(--ink);
}
blockquote p{ line-height: 1.55; }

/* ---------------------------------------------------------- certificates */

.cert-grid{ display: flex; flex-wrap: wrap; justify-content: center; }
.cert-grid > div{ display: flex; margin-bottom: 30px; }
.cert-card{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 44px 40px 40px;
    background: #fff;
    border: 1px solid var(--line);
    text-align: center;
    transition: box-shadow .35s ease, transform .35s ease;
}
.cert-card:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(28,26,24,.09);
}
.cert-img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 210px;
    margin-bottom: 30px;
}
.cert-img img{
    max-height: 210px;
    max-width: 100%;
    width: auto;
}
.cert-card p{
    max-width: 460px;
    margin: 0;
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink-soft);
}

/* -------------------------------------------------------------- products */

/* The template hangs the fabric swatches off Bootstrap's .nav-tabs, which
   floats them edge to edge and drops the caption in dark type straight on
   top of the cloth — unreadable over a bright swatch. Rebuild as a plain
   grid with a scrim behind the caption. */
.tpl-alt-tabs{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    padding: 0 !important;
    border: none;
    letter-spacing: normal;
}
/* Bootstrap's .nav clearfix helpers would otherwise take up two grid cells
   and knock the first row out of alignment. */
.tpl-alt-tabs:before,
.tpl-alt-tabs:after{ display: none !important; }
.tpl-alt-tabs > li{
    width: auto !important;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
}
.tpl-alt-tabs > li .Products-img{
    position: relative;
    overflow: hidden;
    background: var(--cream-deep);
}
.tpl-alt-tabs > li .Products-img:after{
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 62%;
    background: linear-gradient(180deg, rgba(18,16,14,0) 0%, rgba(18,16,14,.72) 100%);
    transition: opacity .35s ease;
}
.tpl-alt-tabs > li .Products-img img{
    display: block;
    width: 100%;
    height: 215px;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.6,.2,1);
}
.tpl-alt-tabs > li:hover .Products-img img{ transform: scale(1.07); }

.tpl-alt-tabs > li .work-intro{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 0 12px 18px;
    text-align: center;
}
.tpl-alt-tabs > li .work-title{
    margin: 0;
    font-family: var(--display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: .16em;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 1px 10px rgba(0,0,0,.55);
}

@media (max-width: 991px){
    .tpl-alt-tabs{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
    .tpl-alt-tabs{ grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tpl-alt-tabs > li .Products-img img{ height: 165px; }
}

/* --------------------------------------------------------------- gallery */

/* Isotope positions these items absolutely, so the columns must keep their
   width — the breathing room goes inside each item instead. */
.works-grid.work-grid-gut .work-item{ padding: 7px; }
.work-item .work-img{
    overflow: hidden;
    background: var(--cream-deep);
}
.work-item .work-img img{
    display: block;
    width: 100%;
    transition: transform .8s cubic-bezier(.2,.6,.2,1), opacity .4s ease;
}
.work-item a:hover .work-img img{
    transform: scale(1.06);
    opacity: .88;
}

/* ------------------------------------------------------- garment studio  */

.studio-grid img{
    width: 100%;
    border: 1px solid var(--line);
}

/* ----------------------------------------------------------------- group */

.group-brand{
    transition: transform .35s ease, box-shadow .35s ease;
}
.group-brand:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(28,26,24,.1);
}

/* ------------------------------------------------------------- call-outs */

.small-section.bg-dark{ background-color: var(--ink) !important; }
.banner-heading{
    font-family: var(--display) !important;
    font-size: 40px;
    font-weight: 300;
    letter-spacing: .04em;
    text-transform: none;
    color: #fff;
}

/* -------------------------------------------------------- why choose us  */

.alt-features-item{ padding: 26px 18px; }
.alt-features-icon{ color: var(--gold); }
.alt-features-icon span{ font-size: 44px; }
.alt-features-title{
    margin-top: 18px;
    font-family: var(--display) !important;
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .05em;
    text-transform: none;
    color: var(--ink);
}

/* ---------------------------------------------------------- testimonial  */

.section-icon{ color: var(--gold); }
blockquote.testimonial{
    padding: 0;
    border: none;
    text-align: center;
}
blockquote.testimonial p{
    font-family: var(--display);
    font-size: 34px;
    font-style: italic;
    font-weight: 300;
    line-height: 1.5;
    color: #fff;
}
.testimonial-author{
    margin-top: 22px;
    font-size: 11px;
    font-style: normal;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold) !important;
}

/* --------------------------------------------------------------- contact */

/* The stock icon is an absolutely positioned dark diamond pinned to the
   left, which reads as a heavy blob against centred text. Drop the diamond
   and let the glyph sit centred in the flow. */
.contact-item{
    position: relative;
    padding-left: 0 !important;
    text-align: center;
}
.ci-icon{
    position: static;
    width: auto;
    height: auto;
    margin: 0 auto 16px;
    font-size: 26px;
    line-height: 1;
    color: var(--gold);
}
.ci-icon:before{ display: none !important; }
.ci-title{
    margin: 12px 0 8px;
    font-size: 11px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--ink);
}
.ci-text{ font-size: 14px; line-height: 1.8; }
.ci-text a{ color: var(--gold); }
.ci-text a:hover{ color: var(--ink); }

.contact-form .form-control{
    height: 52px;
    padding: 12px 18px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 0 !important;
    box-shadow: none;
    font-size: 14px;
    color: var(--ink);
    transition: border-color .25s ease;
}
.contact-form textarea.form-control{ height: 138px !important; }
.contact-form .form-control:focus{
    border-color: var(--gold);
    box-shadow: none;
}
.contact-form .form-control::placeholder{ color: #a9a29a; }
.contact-form input[type="submit"]{
    padding: 15px 46px;
    background: var(--ink);
    border: 1px solid var(--ink);
    border-radius: 0 !important;
    color: #fff;
    font-size: 11px;
    letter-spacing: .26em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color .3s ease, border-color .3s ease;
}
.contact-form input[type="submit"]:hover{
    background: var(--gold);
    border-color: var(--gold);
}
.form-tip{ font-size: 12px; color: #a9a29a; }

/* ---------------------------------------------------------------- footer */

.footer.bg-gray-lighter{ background-color: var(--cream) !important; }
.footer-logo-img{
    width: auto;
    max-width: 190px;
    max-height: 62px;
}
.footer-copy,
.footer-copy a{
    font-size: 11px;
    letter-spacing: .22em;
    color: var(--ink-soft) !important;
}
.link-to-top{
    background: var(--ink);
    color: #fff;
}
.link-to-top:hover{ background: var(--gold); color: #fff; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 991px){
    .page-section{ padding-top: 90px; padding-bottom: 90px; }
    .section-title{ font-size: 36px; }
    .home-section .section-heading{ font-size: 52px; letter-spacing: .18em; }
    .home-section .hs-line-14{ font-size: 21px !important; }
    blockquote.testimonial p{ font-size: 26px; }
}
@media (max-width: 767px){
    .page-section{ padding-top: 70px; padding-bottom: 70px; }
    .section-title{ font-size: 30px; padding-bottom: 20px; margin-bottom: 20px; }
    .home-section .section-heading{ font-size: 34px; letter-spacing: .12em; }
    .home-section .hs-line-14{ font-size: 17px !important; }
    .banner-heading{ font-size: 28px; }
    blockquote.testimonial p{ font-size: 21px; }
    .cert-card{ padding: 30px 24px; }
    .cert-img{ height: 170px; }
    .cert-img img{ max-height: 170px; }
}

/* ------------------------------------------------- enquiry form result */

.form-result{
    margin-top: 26px;
    padding: 16px 20px;
    border-left: 3px solid var(--gold);
    background: var(--cream);
    font-size: 14px;
    line-height: 1.7;
    color: var(--ink);
}
.form-result-error{
    border-left-color: #b3402f;
    background: #fdf3f1;
    color: #8f3324;
}
.contact-form input[type="submit"][disabled]{
    opacity: .6;
    cursor: default;
}