@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap');
:root{
    --cream:#F6F3EC; 
    --ink:#1B1912; 
    --brass:#9C7A4C; 
    --line:#DAD3C4;
    --taupe:#726A5B; 
    --dark:#14130F; 
    --dark-line:#33301F;
    box-sizing:border-box; 
    padding-top:env(safe-area-inset-top,0px); 
    padding-bottom:env(safe-area-inset-bottom,0px);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){ 
        --cream:#F6F3EC; 
        --ink:#1B1912; 
    }
  }
  *{
    box-sizing:border-box; 
    margin:0; 
    padding:0;
}
  html{
    /* scroll-padding-top:env(safe-area-inset-top,0px);  */
    scroll-behavior:smooth;
}
  html,body{
    height:100%;
}
  body{
    background:var(--cream); 
    color:var(--ink); 
    /* font-family:'Inter',sans-serif;  */
    font-size:16px; 
    line-height:1.6; 
    -webkit-font-smoothing:antialiased;
}
  img,svg{
    max-width:100%; 
    display:block;
}
  a{
    color:inherit; 
    text-decoration:none;
}

p{
  font-family: 'Montserrat', sans-serif;
    /* font-size: clamp(12px, 2vw, 16px); */
    font-size: clamp(16px, 2vw, 21px);
    font-weight: 300;
    line-height: 1.85;
    letter-spacing: 0.5px;
    color: #65605b;
    /* margin:0 0 40px; */
}
  .wrap{
    max-width:1180px; 
    margin:0 auto; 
    padding:0 28px;
}
  h1,h2,h3,h4{
    /* font-family:'Fraunces',serif;  */
    font-family:'Cormorant Garamond',serif;
    font-weight:500; 
    letter-spacing:-0.01em;
}
  .eyebrow{
    font-size:0.72rem; 
    letter-spacing:0.14em; 
    color:var(--brass); 
    text-transform:none; 
    font-weight:600;
}

  /* header */
  header{
    position:sticky; 
    /* top:env(safe-area-inset-top,0px);  */
    top: 0;
    z-index:50; 
    background:var(--cream); 
    border-bottom:1px solid var(--line);
}

  .header-inner{
    max-width:1180px; 
    margin:0 auto; 
    padding:18px 24px;
}

  .logo-row{
    display:grid; 
    grid-template-columns:40px 1fr 40px; 
    align-items:center;
}

  .hamburger{
    grid-column:1; 
    justify-self:start; 
    display:none; 
    background:none; 
    border:none; 
    padding:6px; 
    cursor:pointer; 
    color:var(--ink);
}

  .hamburger svg line{
    stroke:currentColor; 
    stroke-width:1.4;
}

  .logo{
    grid-column:2; 
    justify-self:center; 
    display:flex; 
    gap:9px; 
    /* font-family:'Fraunces',serif;  */
    font-size:1.05rem; 
    letter-spacing:0.16em; 
    text-align:center;
}

  .desktop-nav{
    display:flex; 
    justify-content:center; 
    margin-top:16px;
}

  .desktop-nav ul{
    list-style:none;
    display:flex; 
    gap:68px; 
    font-size:13px; 
    font-weight: 500;
    letter-spacing:.1em;
    margin-bottom:-0.3rem;
}

  .desktop-nav a{
    position:relative; 
    display:inline-block; 
    text-decoration:none; 
    padding-bottom:6px;
}

  .desktop-nav a::after{
    content:""; 
    position:absolute; 
    left:0; 
    bottom:0; 
    height:1px; 
    width:0; 
    background:currentColor; 
    transition:width .3s ease;
}

  .desktop-nav a:hover::after, 
  .desktop-nav a:focus-visible::after, 
  .has-dropdown.open>a::after{
    width:100%;
}

  /* services mega-menu */
  .mega-panel{position:absolute; left:0; right:0; top:100%;  background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line); box-shadow:0 26px 40px -22px rgba(20,18,10,.18); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .16s ease, transform .16s ease;}
  .has-dropdown.open .mega-panel{opacity:1; visibility:visible; transform:translateY(0);}
  .mega-cols{max-width:1180px; margin:0 auto; padding:40px 26px 0; display:grid; grid-template-columns:repeat(3,1fr);}
  .mega-col{padding:0 34px; border-left:1px solid var(--line); text-align:left;}
  .mega-col:first-child{border-left:none; padding-left:0;}
  .mega-col .tier-label{font-family:'Fraunces',serif; font-size:0.82rem; letter-spacing:.1em; color:var(--ink); margin-bottom:16px;}
  .mega-col a{position:relative; display:inline-block; font-size:0.74rem; letter-spacing:.08em; color:var(--taupe); padding:7px 0; text-decoration:none;}
  .mega-col a::after{content:""; position:absolute; left:0; bottom:5px; height:1px; width:0; background:currentColor; transition:width .3s ease;}
  .mega-col a:hover{color:var(--ink);}
  .mega-col a:hover::after{width:100%;}
  .mega-view{max-width:1180px; margin:0 auto; padding:26px; text-align:center; border-top:1px solid var(--line); margin-top:28px;}
  .mega-view a{position:relative; display:inline-block; font-size:0.76rem; letter-spacing:.08em; text-decoration:none; padding-bottom:5px;}
  .mega-view a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:currentColor; transition:width .3s ease;}


  /* mobile off-canvas menu */
  .mobile-menu{position:fixed; inset:0; background:var(--cream); z-index:70; display:flex; flex-direction:column; visibility:hidden; opacity:0; transform:translateX(-6%); transition:opacity .3s ease, transform .35s ease, visibility 0s linear .35s;}
  .mobile-menu.open{visibility:visible; opacity:1; transform:translateX(0); transition:opacity .3s ease, transform .35s ease, visibility 0s linear 0s;}
  .mobile-menu .header-inner{width:100%;}
  .mm-nav{flex:1; overflow-y:auto; padding:6px 26px 20px;}
  .mm-nav a{display:flex; justify-content:space-between; align-items:center; padding:17px 0; border-bottom:1px solid var(--line); font-family:'Fraunces',serif; letter-spacing:.1em; font-size:0.92rem; opacity:0; transform:translateX(-26px); transition:opacity .4s ease, transform .4s ease;}
  .mobile-menu.open .mm-nav a{opacity:1; transform:translateX(0);}
  .mobile-menu.open .mm-nav a:nth-child(1){transition-delay:.08s;}
  .mobile-menu.open .mm-nav a:nth-child(2){transition-delay:.14s;}
  .mobile-menu.open .mm-nav a:nth-child(3){transition-delay:.2s;}
  .mobile-menu.open .mm-nav a:nth-child(4){transition-delay:.26s;}
  .mobile-menu.open .mm-nav a:nth-child(5){transition-delay:.32s;}
  .mobile-menu.open .mm-nav a:nth-child(6){transition-delay:.38s;}
  .mobile-menu.open .mm-nav a:nth-child(7){transition-delay:.44s;}
  .mm-nav a .chev{font-family:'Inter',sans-serif; color:var(--taupe); font-size:0.8rem;}
  .mm-cta{display:block; text-align:center; background:var(--dark); color:var(--cream); padding:19px; font-size:0.78rem; letter-spacing:.1em;}

  /* floating chrome */
  .floating-cta{position:fixed; left:0; right:0; bottom:0; z-index:45; background:var(--dark); color:var(--cream); text-align:center; padding:16px; font-size:0.75rem; letter-spacing:.1em; padding-bottom:calc(16px + env(safe-area-inset-bottom,0px));}
  .chat-tab{position:fixed; right:0; top:58%; transform:translateY(-50%); z-index:46; background:#1E2A20; color:#EDE7D8; writing-mode:vertical-rl; padding:14px 9px; font-size:0.68rem; letter-spacing:.05em; display:flex; align-items:center; gap:7px;}
  .chat-tab .pulse{width:6px; height:6px; border-radius:50%; background:#7FBF8E; writing-mode:horizontal-tb;}


  /* -------------- */

  .hero-banner {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
}

.progressive-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /*filter: blur(8px);*/
    transform: scale(1.02);
    transition: filter 0.5s ease, transform 0.5s ease;
}

.progressive-image.loaded {
    filter: blur(0);
    transform: scale(1);
}

.hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

.hero-slide.active {
    opacity: 1;
}

.hero-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* Buttons */

.hero-controls {
    position: absolute;
    right: 30px;
    bottom: 30px;

    display: flex;
    gap: 10px;

    z-index: 10;
}

@media (max-width:450px) {
  .hero-controls {
    bottom: 0px;
    right: 0px;
  }

}

.hero-controls button {
    width: 45px;
    height: 45px;

    border: 1px solid white;
    background: rgba(0, 0, 0, 0.35);
    color: white;

    font-size: 20px;

    cursor: pointer;

    transition: background 0.3s ease;
}

.hero-controls button:hover {
    background: rgba(0, 0, 0, 0.7);
}
  /* -------------- */

  /* hero */
  .hero{
    position:relative; 
    overflow:hidden; 
    min-height:86vh; 
    display:flex; 
    align-items:flex-end;
  }

  /* .hero-art{
    position:absolute; 
    inset:0; 
    width:100%; 
    height:100%;
  } */

  .hero::before{
    content:""; 
    position:absolute; 
    inset:0; 
    /* background:linear-gradient(0deg, rgba(10,9,6,.6) 0%, rgba(10,9,6,.18) 44%, rgba(10,9,6,0) 66%);  */
    background-image: url(./img/kam-idris-U39FPHKfDu0-unsplash.jpg);
    background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
    z-index:1;
  }

  .hero img{
    z-index: -1;
    height: 100%;
  }

  .hero-inner{
    position:relative; 
    z-index:2; 
    width:100%; 
    max-width:1180px; 
    width: min(1180px, 90%);
    /* margin-inline: auto; */
    /* width: clamp(200px, 50%, 600px); */
    /* background-color: greenyellow; */
    margin:0 auto; 
    /* padding:0 26px 64px; */
    top: 300px;
    
  }

  .hero-inner h1{
    text-shadow: .5px .5px .2px #fff;
  }
    .hero-inner p{
      text-shadow: 1px 1px 1px #000;
    }

  /* .hero .eyebrow{
    color:#EFE9DB;
  } */

  .hero h1{
    color:#fff; 
    font-size:clamp(2.5rem,6.2vw,4rem); 
    line-height:1.05; 
    margin:14px 0 26px; 
    max-width:13ch;
    text-shadow: 1px 1px 2px #fff;
  }

    .hero-inner h3{
      letter-spacing: 4px;
      text-shadow: 1px 1px 1px #000;
      margin-bottom: 2rem;
    }

  .hero-caption{
    position:absolute; 
    right:26px; 
    bottom:104px; 
    z-index:2; 
    color:#fff; 
    /* font-family:'Fraunces',serif;  */
    font-style:italic; 
    font-size:0.92rem;
  }

  .hero-dots{
    position:absolute; 
    left:50%; 
    bottom:20px; 
    transform:translateX(-50%); 
    z-index:2; 
    display:flex; 
    gap:8px;
  }

  .hero-dots span{
    width:6px; 
    height:6px; 
    border-radius:50%; 
    background:rgba(255,255,255,.4);
  }

  .hero-dots span.active{
    background:#fff;
  }

  .btnrow{
    display:flex; 
    gap:16px; 
    flex-wrap:wrap;
  }

/* -------get started------- */
/* From Uiverse.io by cssbuttons-io */ 
.fancy {
  background-color: transparent;
  border: 2px solid #8d8985;
  border-radius: 0;
  box-sizing: border-box;
  /* color: #fff; */
  cursor: pointer;
  display: inline-block;
  /* float: right; */
  font-weight: 700;
  letter-spacing: 0.05em;
  margin: 0;
  margin-top: 2rem;
  outline: none;
  overflow: visible;
  padding: 1.25em 2em;
  position: relative;
  text-align: center;
  text-decoration: none;
  text-transform: none;
  transition: all 0.3s ease-in-out;
  user-select: none;
  font-size: 13px;
}

.fancy::before {
 content: " ";
 width: 1.5625rem;
 height: 2px;
 background: #8d8985;
 top: 50%;
 left: 1.5em;
 position: absolute;
 transform: translateY(-50%);
 transform-origin: center;
 transition: background 0.3s linear, width 0.3s linear;
}

.fancy .text {
 /* font-size: 1.125em; */
 /* line-height: 1.33333em; */
 padding-left: 2em;
 display: block;
 text-align: left;
 transition: all 0.3s ease-in-out;
 text-transform: uppercase;
 text-decoration: none;
 color: #8d8985;
}

.fancy .top-key {
 height: 2px;
 width: 1.5625rem;
 top: -2px;
 left: 0.625rem;
 position: absolute;
 background: #FFF;
 transition: width 0.5s ease-out, left 0.3s ease-out;
}

.fancy .bottom-key-1 {
 height: 2px;
 width: 1.5625rem;
 right: 1.875rem;
 bottom: -2px;
 position: absolute;
 background: #FFFFFF;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy .bottom-key-2 {
 height: 2px;
 width: 0.625rem;
 right: 0.625rem;
 bottom: -2px;
 position: absolute;
 background: #FFF;
 transition: width 0.5s ease-out, right 0.3s ease-out;
}

.fancy:hover {
 color: #FFF;
 background: #8d8985;
}

.fancy:hover::before {
 width: 0.9375rem;
 background: #FFF;
}

.fancy:hover .text {
 color: #FFF;
 padding-left: 1.5em;
}

.fancy:hover .top-key {
 left: -2px;
 width: 0px;
}

.fancy:hover .bottom-key-1,
 .fancy:hover .bottom-key-2 {
 right: 0;
 width: 0;
}
/* -------get started end------- */


  .btn{
    padding:13px 26px; 
    font-size:0.85rem; 
    letter-spacing:.03em; 
    border:1px solid var(--ink);
  }

  .btn.solid{
    background:var(--ink); 
    color:var(--cream);
  }

  .btn.solid:hover{
    background:var(--brass); 
    border-color:var(--brass);
  }

  .btn.ghost:hover{
    background:var(--ink); 
    color:var(--cream);
  }

  .hero .btn.solid{
    background:#fff; 
    color:var(--ink); 
    border-color:#fff;
  }

  .hero .btn.solid:hover{
    background:var(--brass); 
    border-color:var(--brass); 
    color:#fff;
  }

  .hero .btn.ghost{
    color:#fff; 
    border-color:transparent; 
    padding-left:0; 
    padding-right:0; 
    border-bottom:1px solid rgba(255,255,255,.7);
  }

  .hero .btn.ghost:hover{
    background:none; 
    color:#fff; 
    border-bottom-color:#fff;
  }

/* ===================
     Breadcrumb 
=================== */

.breadcrumb {
    display: flex;
    align-items: center;
    padding-top: 18px;
    /* padding-left: clamp(30px, 4.5vw, 65px); */
    margin-left: clamp(20px, 11.5vw, 10.5rem);
    /* padding-left: 10.5rem; */

    gap: 14px;

    font-family: 'Montserrat', sans-serif;
    /* font-size: 11px; */
    font-size: clamp(7px, 1.11vw, 10px);
    letter-spacing: 2px;
}

.breadcrumb a {
    color: #b8b3ad;
    text-decoration: none;
    /* font-size: clamp(6px, 1vw, 12px); */
    font-weight: 400;

    transition: color 0.3s ease;
}


.breadcrumb a:hover {
    color: #222;
}


.breadcrumb .separator {
    color: #cfcac4;
}


/* THE STUDIO */

.breadcrumb .current-page {
    color: #1b1b1b;
    /* font-size: clamp(6px, 1vw, 12px); */
    font-weight: 600;
}

  footer{
    /* background:var(--cream);  */
    color:#332e26; 
    padding:60px 0 30px; 
    /* border-top:1.5px solid #9C7A4C; */
    border-top:1px solid rgba(156, 123, 76, 0.2); 
    margin-top: 1.5rem;
  }
  .fgrid{
    display:grid; 
    grid-template-columns:1.4fr repeat(3,1fr); 
    gap:36px; 
    margin-bottom:50px;
  }


/* From Uiverse.io by vinodjangid07 */ 
.Btn-logo {
    width: 140px;
    height: 140px;

    border: none;
    border-radius: 10px;

    background: linear-gradient(
        to right,
        #77530a,
        #ffd277,
        #77530a,
        #77530a,
        #ffd277,
        #77530a
    );

    background-size: 250%;
    background-position: left;

    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    transition-duration: 1s;

    overflow: hidden;
}


/* White inner area */

.Btn-logo::before {
    content: "";

    position: absolute;

    width: 95%;
    height: 95%;

    border-radius: 8px;

    background-color: #ffffff;
}


/* Actual image */

.Btn-logo img {
    position: relative;
    z-index: 1;

    width: 70%;
    height: 70%;

    object-fit: contain;

    border-radius: 8px;

    display: block;

    transition: transform 1s ease;
}


/* Outer gradient animation */

.footer-wrap:hover .Btn-logo {
    background-position: right;

    transition-duration: 1s;
}


/* Optional image movement */

.footer-wrap:hover .Btn-logo img {
    transform: scale(1.23);
}

.fgrid p{
  font-size:0.85rem; 
  max-width:32ch; 
  margin: auto; 
  padding-top: 1rem;
  letter-spacing: 2px;
  text-shadow: 1px 1px 1px rgb(228, 204, 204);
}


/* Click effect */

.Btn-logo:active {
    transform: scale(0.95);
}

  .fgrid div{
    text-align: center;
  }

  .fgrid h5{
    font-family:'Inter',sans-serif; 
    font-size:0.78rem; 
    letter-spacing:.08em; 
    color:#332e26; 
    margin-bottom:16px; 
    font-weight:600;
    padding-left: 2rem !important;
  }

  .fgrid ul{
    text-align: center;
    list-style:none; 
    display:flex; 
    flex-direction:column; 
    gap:9px; 
    font-size:0.84rem;
    /* font-family: 'Jost', sans-serif; */
    font-family: 'Montserrat', sans-serif;
    /* font-size: clamp(12px, 2vw, 15px); */
    font-weight: 400;
    letter-spacing: 1px;
  }


  .fgrid a:hover{
    color:var(--brass);
  }

  .fbottom{
    display:flex; 
    justify-content: center;
    padding-top:26px; 
    padding-bottom: 4rem;
    border-top:1px solid rgba(156, 123, 76, 0.2); 
    font-size:0.78rem; 
    color:#847D6A; 
    flex-wrap:wrap; 
    gap:12px;
  }


  @media (min-width:861px){
    .hamburger, .mobile-menu{display:none !important;}
    .floating-cta{left:auto; width:auto; padding:15px 30px; font-size:0.72rem;}
    .hero-inner{padding-bottom:96px;}
  }
  @media (max-width:860px){
    .desktop-nav{display:none;}
    .hamburger{display:block;}
    /* .logo{font-size:0.92rem; flex-direction:column; gap:2px; line-height:1.3;} */
    .header-inner{padding:14px 18px;}
    .hero{min-height:92vh;}
    .hero-inner{padding:0 20px 92px;}
    .hero .btnrow{flex-direction:column; align-items:stretch; gap:10px;}
    .hero .btn.solid{text-align:center; padding:15px;}
    .hero-caption{display:none;}
    .tiers{grid-template-columns:1fr;}
    .grid3{grid-template-columns:1fr;}
    .about{grid-template-columns:1fr;}
    .fgrid{grid-template-columns:1fr 1fr;}
    table{font-size:0.8rem;}
    main{padding-bottom:54px;}
  }


.logo img{
    width: 80px;
    height: 80px;
}






/* ------------------ */
  :root{
    --ink:#242320;
    --bronze:#a3805a;
    --rule:#dcd8d0;
    --paper:#ffffff;
    --body-text:#4a473f;
    --nightstand:#171613;
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--paper);}
  body{
    /* font-family:'Jost',sans-serif; */
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
  }
  .section-wrap{
    max-width:1360px;
    margin:0 auto;
    padding:64px 40px 96px;
  }
  .services-eyebrow{
    display:flex;
    align-items:center;
    gap:22px;
    margin-bottom:60px;
  }
  .services-eyebrow .label{
    font-size:13px;
    letter-spacing:.22em;
    color:var(--bronze);
    text-transform:uppercase;
    white-space:nowrap;
  }
  .services-eyebrow .rule{
    flex:1;
    height:1px;
    background:var(--rule);
  }
  .services-eyebrow .idx{
    font-family:'Cormorant Garamond',serif;
    font-style:italic;
    font-size:24px;
    color:#b9b5ab;
  }
  .services-list{
    display:flex;
    flex-direction:column;
    /* gap:112px; */
    gap:clamp(26px,5vw,32px);
  }
  .service-row{
    display:grid;
    /* grid-template-columns:minmax(280px,440px) 1fr; */
    grid-template-columns: clamp(80px, 40vw, 840px) 1fr;
    gap:5rem;
    align-items: center;
  }
  .service-row.is-reverse{
    grid-template-columns:1fr clamp(80px, 40vw, 840px);
  }
  .service-row.is-reverse .service-text{order:2;}
  .service-row.is-reverse .service-image{order:1;}
  .service-text{
    display:flex;
    flex-direction:column;
    padding-top:6px;
  }

  .service-tier{
    font-size:13px;
    letter-spacing:.2em;
    color:var(--bronze);
    text-transform:uppercase;
    margin:0 0 14px;
  }
  .service-heading{
    font-family:'Cormorant Garamond',serif;
    font-weight:500;
    font-size:clamp(18px,6vw,38px);
    line-height:1;
    margin:0 0 28px;
    color:var(--ink);
  }
  .service-divider{
    border:none;
    border-top:1px solid var(--rule);
    margin:0 0 28px;
    width:100%;
  }
  .service-copy{
    /* font-family:'Cormorant Garamond',serif;
    font-size:19px;
    line-height:1.75;
    color:var(--body-text);
    font-weight: 500; */
    margin:0 0 40px;
  }
  .service-links{
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--bronze);
  }
  .service-links a{
    color:var(--bronze);
    text-decoration:none;
    /* border-bottom:1px solid rgba(163,128,90,.5); */
    padding-bottom:3px;
  }
  .service-links a:hover{border-color:var(--bronze);}
  .service-links .sep{
    margin:0 14px;
    color:var(--rule);
  }
  .service-image{
    position:relative;
    width:100%;
    aspect-ratio:3/2;
    border-radius:2px;
    overflow:hidden;
    background:#e9e6e0;
  }


  .service-image img,
  .service-image svg{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    filter: grayscale(100%);
    /* transition: filter 1s ease-in-out; */
    /* transition: transform 2s ease-in-out; */
    transition:
        filter 1s ease,
        transform 2s ease;
  }

  .service-row:hover .service-image img{
    transform:scale(1.1);
    filter: grayscale(0%);
  }

  /* From Uiverse.io by satyamchaudharydev */ 
.all-service-button {
  position: relative;
  transition: all 0.3s ease-in-out;
  /* box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); */
  padding-block: 0.5rem;
  /* padding: 1.5rem 3rem; */
  padding-inline: 2.25rem;
  /* background-color: rgb(218, 216, 216); */
  /* background-color: #929c9679; */
  /* background-color: #E8EBEA; */
  /* background-color: #B8BDBB; */
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* color: var(--ink); */
  color: var(--bronze);
  gap: 10px;
  /* font-weight: bold; */
  border: 1px solid var(--line);
  outline: none;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 3px;
  font-size: 14px;
  cursor: pointer;
  margin: auto;
}

.icon {
  width: 24px;
  height: 24px;
  transition: all 0.3s ease-in-out;
}

.all-service-button:hover {
  transform: scale(1.05);
  /* border-color: #fff9; */
}

.all-service-button:hover .icon {
  transform: translate(4px);
}

.all-service-button:hover::before {
  animation: shine 1.5s ease-out infinite;
}

.all-service-button::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100%;
  background-image: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.8),
    rgba(255, 255, 255, 0) 70%
  );
  top: 0;
  left: -100px;
  opacity: 0.6;
}

@keyframes shine {
  0% {
    left: -100px;
  }

  60% {
    left: 100%;
  }

  to {
    left: 100%;
  }
}


  /* --------------------- */


  /* .service-cta{
    position:absolute;
    right:24px;
    bottom:24px;
    background:var(--nightstand);
    color:#fff;
    border:none;
    padding:16px 26px;
    font-family:'Jost',sans-serif;
    font-size:12px;
    letter-spacing:.16em;
    text-transform:uppercase;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:10px;
  }
  .service-cta:hover{background:#000;}
  .chat-tab{
    position:fixed;
    right:0;
    top:50%;
    transform:translateY(-50%);
    background:var(--nightstand);
    color:#fff;
    writing-mode:vertical-rl;
    padding:20px 12px;
    border-radius:8px 0 0 8px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:12px;
    letter-spacing:.05em;
    z-index:10;
  } */
  .chat-tab .dot{
    width:8px;
    height:8px;
    border-radius:50%;
    background:#3ecf8e;
    writing-mode:horizontal-tb;
  }
  @media (max-width:860px){
    .service-row,
    .service-row.is-reverse{
      grid-template-columns:1fr;
      gap: 3rem;
      /* border: 1px solid var(--bronze); */
      /* padding: 1rem; */
    }
    .service-row .service-text,
    .service-row.is-reverse .service-text{order:2;width:100%;}
    .service-row .service-image,
    .service-row.is-reverse .service-image{order:1;}
    .service-copy{max-width:none;}
    .services-list{gap:3rem;}
    .services-wrap{padding:48px 24px 64px;}
    .chat-tab{display:none;}

    /* -----mine----- */
    .section-divider::after {
        content: "";
        display: block;
        width: 1.5px;
        height: 30px;
        background: var(--bronze);
        margin: 0 auto;      
    }
    /* -----mine----- */
  }
/* ------------------ */


/* ----------mine------------ */
.text-under {
    position: relative;
    display: inline-block;
    text-decoration: none;
}

.text-under::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 0;
    height: 1px;
    /* background: currentColor; */
    background: #a3805a;
    transition: width 0.3s ease;
}

.text-under:hover::after {
    width: 100%;
}

/* -------- */

/* ----------mine------------ */

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

.founder-back{
  max-width: 100%;
  background-color: #F9F8F5;
  border-top: 1px solid #dedad3;
  border-bottom: 1px solid #dedad3;
  /* background-color: #DFDBE5; */
/* background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%239C92AC' fill-opacity='0.11'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); */
background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%239c7a4c' fill-opacity='0.09'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.founder-index{
    /* max-width: 100%; */
    /* background: #f9f8f5; */
    /* border: 1px solid #dedad3; */
    max-width:1360px;
    margin:0 auto;
    padding:64px 40px 96px;
}

/* .about-content-index p{
  z-index: 5;
  font-weight: 700;
  color: #3ecf8e;
  letter-spacing: 8px;
} */

.about-main-index {
    /* background: #f0bd24; */

    /* width: min(1170px, 86%); */
    max-width: 100%;


    margin: 0 auto;
    
    display: flex;
    flex-direction: row;
    /* display: grid;

    grid-template-columns:
        minmax(280px, 1fr)
        minmax(280px, 1fr);*/

    gap: clamp(50px, 7vw, 95px); 

    align-items: center;
}

@media (max-width:860px){
    .about-main-index {
        flex-direction: column;
        /* max-width: 80%; */
        /* justify-content: center; */
        /* background-color: red; */
    }
    .about-main-index img{
      justify-self: center;
      max-width: 50%;
    }
}

/* =========================================
   IMAGE BOX
========================================= */

.about-image-index {

    width: 100%;

    /*
       CHANGE THIS RATIO WHEN REQUIRED

       4 / 5  = portrait
       3 / 2  = landscape
       1 / 1  = square
    */

    aspect-ratio: 1 / 1;

    overflow: hidden;
}


.about-image-index img {

    max-width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center top;
}

@media (max-width:860px){
  .about-image-index img {
    display: block;
  }
}


/* ------portfolio----- */
/* #portfolio{
    background-color: var(--cream);
} */

.portfolio-item .icon-box {
    /* background-color: rgba(212, 222, 219, 0.978, 0.1); */
    color: white;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
}

.icon-box {
    width: 70px;
    height: 70px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* background: rgba(var(--bronze), 0.1); */
    /* color: var(--ink); */
    font-size: 24px;
    flex: none;
}

.portfolio-item:hover .icon-box {
      /* background-color: rgba(212, 222, 219, 0.978); */
        /* background-color: rgba(255, 255, 255, 0.4);  */
    /* background-color: hsla(38, 20%, 85%, 1);  */

    /* The blur effect that samples the content underneath */
    backdrop-filter: blur(15px) saturate(130%);
    -webkit-backdrop-filter: blur(15px) saturate(130%); /* Safari support */
    opacity: 1;
    top: 50%;
} 

.image-zoom {
    position: relative;
    overflow: hidden;
}

/* @media (max-width:860px){
  .image-zoom {
    margin-bottom: 1rem;
  }
} */

.image-zoom-wrapper {
    overflow: hidden;
    position: relative;
    /* object-fit: cover; */
}

.image-zoom-wrapper img{
    transition: all 0.3s ease-in-out;;
}

.image-zoom:hover .image-zoom-wrapper img{
    transform: scale(1.1);
}

/* .portfolio-item .icon-box {
    background-color: rgba(var(--bronze), 0.1);
    color: white;
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
} */


/* .portfolio-item:hover .icon-box {
    background-color: rgba(var(--bronze), 0.6);
    opacity: 1;
    top: 50%;
}  */
/* ------portfolio end----- */

/* ----------------Slider------------- */
.slider-wrapper{
    max-width:100%;
    /* max-width:1200px; */
    margin:auto;

    overflow:hidden;
    position:relative;
    padding: 2rem;
    background-color: #D8D2C8;
    /* background-color: #DFDBE5; */
background-image: url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 20.5V18H0v-2h20v-2H0v-2h20v-2H0V8h20V6H0V4h20V2H0V0h22v20h2V0h2v20h2V0h2v20h2V0h2v20h2V0h2v20h2v2H20v-1.5zM0 20h2v20H0V20zm4 0h2v20H4V20zm4 0h2v20H8V20zm4 0h2v20h-2V20zm4 0h2v20h-2V20zm4 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2zm0 4h20v2H20v-2z' fill='%239C92AC' fill-opacity='0.2' fill-rule='evenodd'/%3E%3C/svg%3E");
  /* %%............https://heropatterns.com/..........%% */

    border-bottom: 1px solid var(--line);
    
}

.moving-track{
    display:flex;
    width:max-content;

    animation: marqueeFlow 50s linear infinite;
}

@keyframes marqueeFlow{

    0%{
        transform:translateX(0);
    }

    100%{
        transform:translateX(-50%);
    }
}

.portfolio-card{

    width:224px;
    height:320px;
    border-radius: 10px;
    margin:0 16px;

    position:relative;

    overflow:hidden;

    transition:.3s;

    flex-shrink:0;
}

.portfolio-card:hover{
    /* transform:scale(.9); */
    transform:scale(1.15);
}

.portfolio-card img{
    width:100%;
    height:100%;

    object-fit:cover;
}

.card-overlay{

    position:absolute;
    height: 1rem;
    bottom: 0;
    /* inset:0; */

    display:flex;
    justify-content:center;
    align-items:center;

    padding: 1rem 3rem ;

    background:rgba(0,0,0,.2);

    backdrop-filter:blur(10px);

    opacity:0;

    transition:.3s;
}

.portfolio-card:hover .card-overlay{
    opacity:1;
}

.card-overlay p{

    color:#fff;
    font-size:10px;
    font-weight:600;
    padding-top: 20px;
    text-align:center;
    /* margin: auto; */
}

.fade-left{

    position:absolute;

    left:0;
    top:0;

    width:80px;
    height:100%;

    z-index:5;

    pointer-events:none;

    background:linear-gradient(
        to right,
        white,
        transparent
    );
}

.fade-right{

    position:absolute;

    right:0;
    top:0;

    width:80px;
    height:100%;

    z-index:5;

    pointer-events:none;

    background:linear-gradient(
        to left,
        white,
        transparent
    );
}
/* ----------------Slider end------------- */



/* Chrome / Edge / Safari */

/* ::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-track {
    background: #f5f3ef;
}

::-webkit-scrollbar-thumb {
    background: #9c8a75;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:hover {
    background: #77530a;
}




html {
    scrollbar-width: thin;
    scrollbar-color: #9c8a75 #f5f3ef;
} */

::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: #f5f3ef;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        to bottom,
        #77530a,
        #ffd277,
        #77530a
    );

    border-radius: 20px;
}

/* ------------------------- */

/* REVIEWS */
#reviews{
    background: linear-gradient(rgba(9, 32, 50, 0.5), rgba(9, 32, 50, 0.8)), url(../img/kam-idris-U39FPHKfDu0-unsplash.jpg);
    padding-top: 80px;
    padding-bottom: 80px;
}

.bg-cover {
    background-position: center !important;
    background-size: cover !important;
}

.review {
    max-width: 900px;
    margin: auto;
    text-align: center;
}

.review label{
  color: #fff !important;
}

.review img{
    width: 120px !important;
    border-radius: 100px;
    margin: auto;
}
.review h4{
    margin-top: 16px;
}

.review h4,
.review p{
    color: #ffffff;
}

.review small{
    color: #A47864;
}

.review p{
    margin-top: 28px;
}

.owl-dot.active span{
    background-color: var(--brass) !important;
}

.owl-theme .owl-dots .owl-dot span {
  width: 30px !important;
  height: 2px !important;
  margin: 5px 7px;
  background: #D6D6D6;
  display: block;
  /* -webkit-backface-visibility: visible; */
  transition: opacity .2s ease;
  border-radius: 0px !important;
}


/* ============================== */

body{
  position: relative;
}

.social-media{
  position: fixed;
  /* bottom: 2rem; */
  top: 50%;
  transform: translateY(-50%);
}

/* From Uiverse.io by Faizuddinq */ 
ul {
  list-style: none;
}

.example-2 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content .tooltip {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(50%);
  color: #fff;
  padding: 6px 10px;
  border-radius: 15px;
  opacity: 0;
  visibility: hidden;
  font-size: 14px;
  transition: all 0.3s ease;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: 6px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 20%;
  color: #4d4d4d;
  background-color: #ffff;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 50%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}
.example-2 .icon-content a[data-social="spotify"] .filled,
.example-2 .icon-content a[data-social="spotify"] ~ .tooltip {
  background-color: #1db954;
}

.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
  background-color: #0274b3;
}

.example-2 .icon-content a[data-social="youtube"] .filled,
.example-2 .icon-content a[data-social="youtube"] ~ .tooltip {
  background-color: #FF0033;
  /* background-color: #ff0000; */
}


.example-2 .icon-content a[data-social="pinterest"] .filled,
.example-2 .icon-content a[data-social="pinterest"] ~ .tooltip {
  background-color: #bd081c;
}
.example-2 .icon-content a[data-social="dribbble"] .filled,
.example-2 .icon-content a[data-social="dribbble"] ~ .tooltip {
  background-color: #ea4c89;
}
.example-2 .icon-content a[data-social="telegram"] .filled,
.example-2 .icon-content a[data-social="telegram"] ~ .tooltip {
  background-color: #0088cc;
}

.example-2 .icon-content a[data-social="whatsapp"] .filled,
.example-2 .icon-content a[data-social="whatsapp"] ~ .tooltip {
  background-color: #25D366;
  /* background-color: #128c7e; */
}

.example-2 .icon-content a[data-social="facebook"] .filled,
.example-2 .icon-content a[data-social="facebook"] ~ .tooltip {
  background-color: #0064E0;
  /* background-color: #3b5998; */
}

.example-2 .icon-content a[data-social="instagram"] .filled,
.example-2 .icon-content a[data-social="instagram"] ~ .tooltip {
  background: linear-gradient(
    45deg,
    #405de6,
    #5b51db,
    #b33ab4,
    #c135b4,
    #e1306c,
    #fd1f1f
  );
}


@media (max-width:860px){
  .social-media{
    display: none;
  }
}