/* Base */
body{font-feature-settings: "liga" 1, "kern" 1}
.navbar-brand{letter-spacing:.5px}
.nav-logo{height:78px;width:auto;display:block;border-radius:10px}
.logo-frame{position:relative;display:inline-block;border-radius:14px;padding:6px}
/* Remove decorative white bracket corners around logo */
.logo-frame::before{content:none !important; background:none !important}
.catalog-item .card{transition:transform .15s ease}
.catalog-item .card:hover{transform:translateY(-2px)}

/* Brand colors inspired by attachment */
:root{
  --brand-green:#25a36f;      /* primary green */
  --brand-teal:#2fb79c;       /* mid */
  --brand-blue:#4dbbe6;       /* accent */
  --brand-hero-start:#e9f7f1; /* light bg start */
  --brand-hero-end:#e8f5fb;   /* light bg end */
}

/* Navbar styling */
.bg-brand-nav{background:linear-gradient(90deg,var(--brand-green) 0%, var(--brand-teal) 55%, var(--brand-blue) 100%); position:relative}
.bg-brand-nav::after{content:""; position:absolute; top:0; right:0; width:120px; height:120px; background:#fff; border-bottom-left-radius:120px; z-index:0}
.bg-brand-nav .navbar{position:relative; z-index:1}
/* Nudge hamburger slightly into the white corner patch */
.bg-brand-nav .navbar .navbar-toggler{margin-right:-36px}
.bg-brand-nav .nav-link{color:#fff; opacity:.9}
.bg-brand-nav .nav-link:hover{color:#fff; opacity:1}
.bg-brand-nav .dropdown-menu{border:0; box-shadow:0 8px 24px rgba(0,0,0,.12)}
.bg-brand-nav .btn-outline-light{border-color:#fff; color:#fff}
.bg-brand-nav .btn-outline-light:hover{background:#fff; color:#0b5137}

/* Keep country + hamburger on right when menu expands */
.bg-brand-nav .navbar{flex-wrap:wrap}
.bg-brand-nav .navbar .navbar-collapse.show{width:100%} /* menu takes full row */
.bg-brand-nav .navbar .navbar-collapse.show + .d-flex{width:100%; justify-content:flex-end; margin-left:0}

/* Hamburger icon (3-line menu) */
.navbar-dark .navbar-toggler{border:none; padding:.35rem .4rem; background:transparent; box-shadow:none}
.navbar-dark .navbar-toggler-icon{background-image:none; position:relative; width:24px; height:3px}
.navbar-dark .navbar-toggler-icon, .navbar-dark .navbar-toggler-icon::before, .navbar-dark .navbar-toggler-icon::after{
  display:block; background:#333; height:3px; width:24px; border-radius:2px; content:"";
}
.navbar-dark .navbar-toggler-icon::before{position:relative; top:-7px}
.navbar-dark .navbar-toggler-icon::after{position:relative; top:7px}

/* Add a bit more breathing room between country dropdown and hamburger */
.bg-brand-nav .dropdown{margin-right:36px}
@media (max-width: 575.98px){
  .bg-brand-nav::after{width:84px; height:84px; border-bottom-left-radius:84px}
  .bg-brand-nav .dropdown{margin-right:84px}
}

/* Hero styling */
.bg-brand-hero{background:linear-gradient(90deg,var(--brand-green) 0%, var(--brand-teal) 55%, var(--brand-blue) 100%)}
.hero-section{min-height:54vh; padding-top:3.2rem; padding-bottom:3.2rem}

/* Make the whole hero area match navbar colors */
.hero-row{background:transparent; padding:2rem 0; color:#fff}
.hero-section h1{color:#fff}
.hero-section .lead{color:#fff; opacity:.95}
.hero-section .text-muted{color:#f7f7f7 !important; opacity:.85}
/* Remove shadow/3D effect on hero media for a flatter look */
.hero-section .shadow{box-shadow:none !important}

/* Card carousel rows */
.card-carousel{position:relative}
.card-carousel .carousel-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:6px}
.card-carousel .carousel-track > *{scroll-snap-align:start; flex:0 0 auto; width:320px}
.card-carousel .carousel-btn{position:absolute; top:50%; transform:translateY(-50%); z-index:2; border:none; background:rgba(255,255,255,.9); color:#333; width:36px; height:36px; border-radius:50%; box-shadow:0 4px 16px rgba(0,0,0,.2)}
.card-carousel .carousel-btn:hover{background:#fff}
.card-carousel .btn-prev{left:-6px}
.card-carousel .btn-next{right:-6px}

/* Hide native scrollbar on WebKit for cleaner look */
.card-carousel .carousel-track::-webkit-scrollbar{height:8px}
.card-carousel .carousel-track::-webkit-scrollbar-thumb{background:rgba(0,0,0,.15); border-radius:4px}

/* Panel around "What Makes Tutin Different" for professional framing */
.adcards-panel{border:2px solid var(--brand-blue); border-radius:16px; background:rgba(var(--brand-blue-rgb),.06)}
.adcards-panel h2{margin-left:.25rem}

/* Floating Catalog button (home page) */
.fab-catalog{position:fixed; right:18px; bottom:18px; z-index:1040; border-radius:9999px; box-shadow:0 8px 24px rgba(0,0,0,.2);}
.fab-catalog{background:var(--brand-blue); border-color:transparent}
.fab-catalog:hover{background:#3cc0ee; color:#fff}
@media (max-width:575.98px){
  .fab-catalog{right:12px; bottom:12px; padding:.5rem .75rem; font-size:.9rem}
}