/********** Westward Theme CSS (Grey + Soft Yellow | Smaller + Responsive) **********/
:root{
    --primary:#C9A227;     /* soft warm yellow */
    --secondary:#6B7280;   /* grey */
    --light:#F6F7F9;       /* light grey */
    --dark:#111827;        /* charcoal */
    --text:#4B5563;        /* body text */
    --shadow:0 10px 30px rgba(0,0,0,.08);
}

/* Base */
html{scroll-behavior:smooth;}
body{
    color:var(--text);
    font-size:0.95rem;     /* smaller overall */
    line-height:1.6;
}
h1,h2,h3,h4,h5,h6{color:var(--dark);}

/* Spacing utilities (smaller than template) */
.pt-6{padding-top:70px;}
.pb-6{padding-bottom:70px;}
.py-6{padding-top:70px;padding-bottom:70px;}
@media (max-width: 768px){
    .pt-6{padding-top:52px;}
    .pb-6{padding-bottom:52px;}
    .py-6{padding-top:52px;padding-bottom:52px;}
}

/* Buttons */
.btn{
    position:relative;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:.04em;
    font-size:.85rem;
    padding:.7rem 1.1rem;
    transition:.25s;
}
.btn::after{
    position:absolute;
    content:"";
    width:0;
    height:4px;
    bottom:-1px;
    left:50%;
    background:var(--primary);
    transition:.25s;
}
.btn.btn-primary::after{background:var(--dark);}
.btn:hover::after,
.btn.active::after{
    width:50%;
    left:25%;
}
.btn-primary{color:#fff;}
.btn-outline-primary{border-color:var(--primary); color:var(--dark);}
.btn-outline-primary:hover{background:var(--primary); border-color:var(--primary); color:#fff;}

/* Square buttons */
.btn-square{width:34px;height:34px;}
.btn-sm-square{width:28px;height:28px;}
.btn-lg-square{width:44px;height:44px;}
.btn-square,.btn-sm-square,.btn-lg-square{
    padding-left:0;
    padding-right:0;
    text-align:center;
    border-radius:.55rem;
}
/* ===== Westward Logo (icon.png) ===== */
.brand-icon-img{
    width: 34px;          /* desktop size */
    height: 34px;
    object-fit: contain;  /* never crop the logo */
    display: block;
    flex: 0 0 auto;
  }
  
  /* Optional: keep nice spacing if needed */
  .brand-wrap{
    display: flex;
    align-items: center;
    gap: 10px;
  }
  
  /* Mobile size */
  @media (max-width: 991.98px){
    .brand-icon-img{
      width: 28px;
      height: 28px;
    }
  }
  
  /* Extra small phones */
  @media (max-width: 575.98px){
    .brand-icon-img{
      width: 26px;
      height: 26px;
    }
  }
  

/* Back to top (smaller + rounded) */
.back-to-top{
    position:fixed;
    display:none;
    left:50%;
    bottom:18px;
    transform:translateX(-50%);
    border-radius:.75rem;
    z-index:99;
    box-shadow:var(--shadow);
}

/* Background patterns (softer) */
.bg-dark-radial{
    background-image:repeating-radial-gradient(center center, rgba(0,0,0,.18), rgba(0,0,0,.18) 1px, transparent 1px, transparent 100%);
    background-size:3px 3px;
}
.bg-light-radial{
    background-image:repeating-radial-gradient(center center, rgba(255,255,255,.16), rgba(255,255,255,.16) 1px, transparent 1px, transparent 100%);
    background-size:3px 3px;
}

/* Navbar */
.navbar-dark .navbar-nav .nav-link{
    position:relative;
    padding:24px 14px;
    font-size:0.95rem;     /* smaller */
    text-transform:uppercase;
    letter-spacing:.04em;
    color:rgba(246,247,249,.92);
    outline:none;
    transition:.25s;
}
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link.active{
    color:var(--primary);
}
@media (max-width: 991.98px){
    .navbar-dark .navbar-nav .nav-link{
        margin-left:0;
        padding:10px 0;
        font-size:.92rem;
    }
}

/* Carousel overlay (use charcoal instead of blue) */
.carousel-caption{
    top:0;left:0;right:0;bottom:0;
    background:rgba(17,24,39,.72);
    z-index:1;
}
.carousel-caption i{opacity:.95;}
.carousel-caption h1{letter-spacing:.02em;}
@media (max-width: 576px){
    .carousel-caption h4{font-size:1rem;font-weight:600 !important;}
    .carousel-caption h1{font-size:1.65rem;font-weight:700 !important;}
    .carousel-caption .btn{padding:.65rem 1rem;font-size:.82rem;}
}

/* Page header */
.page-header{
    height:260px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    background:linear-gradient(rgba(17,24,39,.72), rgba(17,24,39,.72)), url(../img/carousel-1.jpg) center center no-repeat;
    background-size:cover;
}
@media (max-width: 576px){
    .page-header{height:220px;}
    .page-header .display-3{font-size:1.8rem;}
}

/* Service cards */
.service-item{
    border-radius:1rem;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.service-item img{object-fit:cover;}
.service-item .service-icon{
    margin-top:-44px;
    width:88px;height:88px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}
.service-item .service-icon i{transition:.2s;}
.service-item:hover .service-icon i{font-size:54px;}
.service-item h4{font-size:1.05rem;}
.service-item p{font-size:.92rem;}

/* Portfolio */
.portfolio-item{margin-bottom:52px;}
.portfolio-box{
    border-radius:1rem;
    overflow:hidden;
    box-shadow:var(--shadow);
}
.portfolio-title{
    position:absolute;
    display:flex;
    flex-direction:column;
    justify-content:center;
    height:108px;
    padding:0 22px;
    right:22px;left:22px;
    bottom:-54px;
    background:#fff;
    border-radius:.9rem;
    z-index:3;
    box-shadow:var(--shadow);
}
.portfolio-title .h4{font-size:1.05rem;margin-bottom:.25rem;}
.portfolio-title span{font-size:.9rem;}
.portfolio-btn{
    position:absolute;
    display:inline-block;
    top:50%;left:50%;
    transform:translate(-50%,-50%);
    font-size:96px;
    line-height:0;
    transition:.15s;
    transition-delay:.2s;
    z-index:2;
    opacity:0;
}
.portfolio-item:hover .portfolio-btn{opacity:1;}

.portfolio-box::before,
.portfolio-box::after{
    position:absolute;
    content:"";
    width:0;
    height:100%;
    top:0;
    transition:.35s;
    z-index:1;
    background:rgba(17,24,39,.68);
}
.portfolio-box::before{left:0;}
.portfolio-box::after{right:0;}
.portfolio-item:hover .portfolio-box::before{left:0;width:50%;}
.portfolio-item:hover .portfolio-box::after{right:0;width:50%;}

@media (max-width: 576px){
    .portfolio-title{right:16px;left:16px;height:100px;bottom:-50px;padding:0 18px;}
    .portfolio-btn{font-size:78px;}
}

/* Testimonial / Contact overlap (reduced) */
@media (min-width: 992px){
    .testimonial,
    .contact-form{
        margin-left:-60px;
    }
}

/* Footer */
.footer{
    background:var(--dark);
    color:rgba(246,247,249,.78);
}
.footer a{color:rgba(246,247,249,.78);}
.footer a:hover{color:var(--primary);}
@media (min-width: 992px){
    .footer::after{
        position:absolute;
        content:"";
        width:1px;
        height:100%;
        top:0;
        left:50%;
        background:rgba(201,162,39,.55);
    }
}

/* Footer shape accent */
.footer-shape::before{
    position:absolute;
    content:"";
    width:70px;
    height:100%;
    top:0;
    left:-35px;
    background:var(--primary);
    transform:skew(40deg);
}

/* Small improvements */
.shadow-sm{box-shadow:var(--shadow) !important;}
.text-primary{color:var(--primary) !important;}
.bg-primary{background-color:var(--primary) !important;}
.bg-dark{background-color:var(--dark) !important;}
.bg-light{background-color:var(--light) !important;}