/* 1)  IMPORTS & BASE  ---------------------------------------------------*/
@import url("/assets/css/home.css");

/*  ----------  THEME TOKENS  ---------- */
:root{
  /* Palette */
  --vsme-accent:   #59afa2;   /* teal */
  --vsme-dark:     #0d3c55;   /* navy */
  --vsme-bg-soft:  #e0f7f1;   /* light-mint */
  --vsme-bg-glass: rgba(255,255,255,.35);

  /* Typography */
  --fs-base: 1rem;                 /* 16 px */
  --fs-sm:   0.9375rem;            /* 15 px */
  --fs-lg:   1.125rem;             /* 18 px */
  --fs-xl:   clamp(1.8rem,3.5vw,2.4rem);

  /* Motion */
  --tr-fast:   .25s ease;
  --tr-med:    .45s ease;
  --tr-slow:   .6s cubic-bezier(.22,.61,.36,1);

  /* Shadows */
  --sh-sm:  0 3px 8px rgba(0,0,0,.08);
  --sh-md:  0 8px 18px rgba(0,0,0,.12);
  --sh-lg:  0 18px 38px rgba(0,0,0,.18);
}
html{scroll-behavior:smooth;}  /* subtle UX boost */
body{font-size:var(--fs-base);line-height:1.6;color:#333;background-color:#f7f9fc;}

/* 2)  GLOBAL ANIMATIONS & A11Y  ----------------------------------------*/
@keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes liftUp{to{transform:translateY(-6px) scale(1.03)}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 3)  UTILITY CLASSES  -------------------------------------------------*/
/* .reveal{opacity:0;transform:translateY(40px);transition:opacity var(--tr-fast),transform var(--tr-fast);}  /* will be activated in JS */
.reveal.show{opacity:1;transform:none;} */

.reveal{transform:translateY(40px);transition:opacity var(--tr-fast),transform var(--tr-fast);}  /* will be activated in JS */
.reveal.show{opacity:1;transform:none;}

.hover-lift{@media (hover:hover){transition:transform var(--tr-fast),box-shadow var(--tr-fast);will-change:transform;}}
.hover-lift:hover{animation:liftUp .35s forwards;box-shadow:var(--sh-lg);}

.hover-tilt{transform:perspective(800px);@media(hover:hover){transition:transform var(--tr-med);}}
.hover-tilt:hover{transform:perspective(800px) rotateX(4deg) rotateY(-4deg) scale(1.02);}  

/* 4)  TYPOGRAPHY  ------------------------------------------------------*/
h1,h2,h3,h4,h5,h6{font-family:Montserrat,Arial,Helvetica,sans-serif;color:var(--vsme-dark);margin:0 0 .6em;}
.section-title{font-weight:600;font-size:var(--fs-xl);margin:3rem 0 1.6rem;text-align:center;}
.section-title.left{text-align:left;}

p,li,td,th{font-family:'Open Sans',Arial,Helvetica,sans-serif;font-size:var(--fs-base);}   /* unify */

/* 5)  LAYOUT / SPACING  ------------------------------------------------*/
.container{max-width:1140px;padding-left:1rem;padding-right:1rem;}  /* tighten */
img{max-width:100%;height:auto;}

/* Flex helpers to equalise box heights */
.row.equalize>[class*="col-"]{display:flex;flex-direction:column;}
.row.equalize>[class*="col-"]>div{flex:1 1 auto;}

/* Automatic equal‑height across any .row.g-4 */
.row.g-4>[class*="col-"]{display:flex;}                                       /* distribute */
.row.g-4>[class*="col-"]>.text-box,.row.g-4>[class*="col-"]>.feature-box{flex:1 1 auto;}

/* 6)  COMPONENTS  ------------------------------------------------------*/
/* ------- Hero  -------*/
.hero-img{border-radius:14px;box-shadow:var(--sh-md);animation:floatY 16s ease-in-out infinite;max-height:480px;object-fit:cover;}

/* ------- Cards / Boxes  -------*/
.text-box{
  background:var(--vsme-bg-soft);
  border:1px solid #b3d9cc;
  border-radius:12px;
  padding:1.25rem;
  font-size:var(--fs-lg);
  transition:box-shadow var(--tr-fast),transform var(--tr-fast);
  display:flex;flex-direction:column;justify-content:center;   /* NEW: ensure uniform height + centred text */
  height:100%;
}
.text-box:hover{box-shadow:var(--sh-sm);transform:translateY(-4px);}

.feature-box{
  background:linear-gradient(135deg,var(--vsme-dark) 0%,#103548 100%);
  color:#fff;
  text-align:center;
  font-weight:600;
  padding:2rem 1.6rem;
  border-radius:16px;
  border:3px solid transparent;
  transition:transform var(--tr-fast),box-shadow var(--tr-fast),border var(--tr-fast);
  height:100%;                 /* equal height within row */
  display:flex;flex-direction:column;justify-content:center;
}
.feature-box hr{width:40px;height:3px;background:var(--vsme-accent);border:none;margin:1rem auto;opacity:.85;}
.feature-box:hover{transform:translateY(-8px) scale(1.04);box-shadow:var(--sh-lg);border-color:var(--vsme-accent);}

/* ------- Tables  -------*/
.custom-table{
  border-radius:12px;
  overflow:hidden;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(8px);
  font-size:var(--fs-sm);
}
.custom-table thead{font-size:var(--fs-base);} /* slightly larger headings */
.custom-table tbody tr{transition:background var(--tr-fast);} 
.custom-table tbody tr:hover{background:rgba(89,175,162,.08);}  
@media(max-width:576px){
  .custom-table{font-size:.85rem;display:block;overflow-x:auto;}
}

/* ------- Glass blocks  -------*/
.glass{
  background:var(--vsme-bg-glass);
  backdrop-filter:blur(10px)saturate(120%);
  border-radius:20px;
  padding:2.2rem 1.8rem;
}

.service-box {
  background: var(--vsme-bg-soft);
  border: 1px solid #c1e2db;
  border-radius: 12px;
  padding: 1.8rem 1.4rem;
  font-size: var(--fs-lg);
  margin-bottom: 20px; /* Add gap between each service-box */
}

.service-box ul {
  list-style-type: disc; /* Ensure bullets appear */
  padding-left: 20px; /* Adds padding to move bullets away from the edge */
  margin: 0; /* Remove default margin */
}

.service-box li {
  margin-bottom: 10px; /* Space between list items */
}

.service-box:hover {
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Optional hover effect */
}


/* ------- Buttons & Ripples  -------*/
.btn-gradient{position:relative;overflow:hidden;}
.btn-gradient span.ripple-effect{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.55);animation:ripple .6s linear;}  /* for injected span */
@keyframes ripple{to{transform:scale(4);opacity:0;}}

/* 7)  CONTACT SECTION  -------------------------------------------------*/
.contact-section{
  background:linear-gradient(135deg,#5e9d9f 0%,#74c5b5 100%);
  border-radius:20px;
  padding:3rem 2.2rem;
  color:#fff;
}
.contact-section label{font-weight:600;}
.contact-section .form-control{font-size:var(--fs-base);box-shadow:none!important;border:2px solid transparent;transition:border var(--tr-fast),box-shadow var(--tr-fast);}  /* subtle focus */
.contact-section .form-control:focus{border-color:var(--vsme-accent);box-shadow:0 0 0 0.2rem rgba(89,175,162,.25);} 
.contact-section .btn-gradient{--btn-shadow:0 8px 18px rgba(0,0,0,.25);}  /* reuse */
.contact-section .btn-gradient:hover{transform:translateY(-4px);box-shadow:var(--btn-shadow);filter:brightness(1.05);} 

/* 8)  FOOTER  ----------------------------------------------------------*/
.footer{background:#f8f9fa;border-top:4px solid var(--vsme-accent);padding:3rem 1rem;color:#333;}
.footer h3{margin-top:0;color:var(--vsme-dark);}  /* unify heading colour */
.footer-social a{@media(hover:hover){transition:transform var(--tr-fast),color var(--tr-fast);}}
.footer-social a:hover{transform:scale(1.2);color:var(--vsme-accent);}  

.footer-nav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;justify-content:center;margin:1.5rem 0;}
.footer-nav a{font-size:var(--fs-sm);color:#555;text-decoration:none;padding:.25rem .5rem;border-radius:3px;transition:background var(--tr-fast),color var(--tr-fast);}  
.footer-nav a:hover{background:rgba(13,60,85,.15);color:var(--vsme-accent);}  

.footer-addresses{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin:2rem 0;}
.address-block h3{font-size:1rem;color:var(--vsme-dark);}  
.address-block p{margin:.4rem 0;font-size:var(--fs-sm);}

.footer-bottom{font-size:var(--fs-sm);text-align:center;line-height:1.4;border-top:1px solid #ddd;padding-top:1rem;}

/* 9)  MEDIA QUERIES (ADDITIONAL)  -------------------------------------*/
@media(max-width:768px){
  .section-title{font-size:clamp(1.6rem,5vw,2rem);}
  .feature-box{padding:1.6rem 1.25rem;}
  .text-box{font-size:var(--fs-base);} /* slightly smaller */
}

@media(max-width:576px){
  .contact-section{padding:2rem 1.3rem;}
  .service-box{font-size:var(--fs-base);}
}

.ava-text-box {
  padding: 20px;
  border: 1px solid #b3d9cc;  /* The border color as you requested */
  background-color: #b3d9cc;   /* Background color matching the border */
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.ava-text-box strong {
  display: block;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.ava-text-box p {
  font-size: 1rem;
}

.text-center {
  text-align: center;
}

.section-title {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 15px;
}