/* ==========================================================================
   Tiara Technolabs — visual refresh layer
   Loaded after main.css/responsive.css. Additive only: no existing class is
   removed, only restyled, so markup/behavior everywhere stays unchanged.
   ========================================================================== */

:root{
  --navy:#122a52;
  --navy-2:#1c3a6d;
  --accent:#f2542d;
  --accent-dark:#cf3f1f;
  --ink:#0f172a;
  --body-c:#4b5768;
  --muted:#8592a6;
  --border:#e6e9f0;
  --bg-tint:#f7f8fb;
}

body{font-family:'Manrope',"Open Sans",sans-serif;color:var(--ink)}
h1,h2,h3,h4,h5,h6{font-family:'Sora',"Open Sans",sans-serif;font-weight:700;letter-spacing:-0.01em;color:var(--navy)}
a{color:var(--navy-2)}
a:hover{color:var(--accent)}

/* ---- Buttons ---- */
.btn-common{border-radius:8px;border:1.5px solid var(--navy-2);color:var(--navy-2);font-weight:600;font-family:'Manrope',sans-serif;letter-spacing:0;padding:12px 26px;transition:all .15s ease}
.btn-common:hover,.btn-common:focus{background:var(--navy-2);color:#fff;border-color:var(--navy-2)}
#action.responsive{background-color:var(--navy)!important;background-image:none!important}
#action.responsive h2,#action.responsive p{color:#fff}
#action .btn-common,.vertical-center .btn-common,#home-slider .btn-common{color:#fff;border-color:rgba(255,255,255,.6)}
#action .btn-common:hover,.vertical-center .btn-common:hover,#home-slider .btn-common:hover{background:rgba(255,255,255,.15);border-color:#fff;color:#fff}
.btn-submit{background-color:var(--accent);border-bottom-color:var(--accent-dark);border-radius:8px;letter-spacing:1px;font-weight:700;font-family:'Manrope',sans-serif}
.btn-submit:hover,.btn-submit:focus{background-color:var(--accent-dark);opacity:1}

/* Header "Get in touch" CTA (replaces the old bare icon button) */
@media only screen and (min-width: 768px){
  #header .navbar-collapse{margin-right:160px}
}
.inquery{position:absolute;top:50%;transform:translateY(-50%);right:0}
.inquery .btn-inquiry{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;border-radius:8px;padding:11px 22px;font-weight:700;font-size:14px;font-family:'Manrope',sans-serif;white-space:nowrap}
.inquery .btn-inquiry:hover{background:var(--accent-dark);color:#fff}
/* Below the collapse breakpoint the toggle button sits in this same corner —
   hide the header CTA there so it never covers the hamburger; the floating
   #ibutton already gives mobile visitors a persistent way to reach Inquiry. */
@media only screen and (max-width: 767px){
  .inquery{display:none}
}

/* ---- Forms ---- */
.form-control{border:1.5px solid var(--border);border-radius:8px;font-family:'Manrope',sans-serif;box-shadow:none}
.form-control:focus,.form-control:hover{border-color:var(--accent)}
#footer .form-control{border-color:rgba(255,255,255,.2);background-color:rgba(255,255,255,.06);color:#fff}
#footer .form-control:focus{border-color:var(--accent);background-color:rgba(255,255,255,.1)}
#footer .form-control::placeholder{color:rgba(255,255,255,.5)}

/* ---- Header / nav ---- */
#header{background:#fff;border-bottom:1px solid var(--border);padding-top:18px;padding-bottom:18px}
#header .navbar.navbar-inverse{margin-top:8px}
#header .navbar-nav.navbar-right>li>a{color:var(--body-c);font-weight:600;font-family:'Manrope',sans-serif}
#header .navbar-nav.navbar-right>li>a:hover{color:var(--navy-2)}
#header .social-icons a{color:var(--muted);display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px}
#header .social-icons a:hover{color:var(--accent)}
#header .social-icons .svg-social{display:block}

/* ---- Footer ---- */
#footer{background-color:var(--navy);background-image:none;padding:80px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr 1.3fr;gap:40px;align-items:start}
.footer-col-brand{padding-top:2px}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:'Sora',sans-serif;font-weight:700;font-size:16px;color:#fff;letter-spacing:.02em}
.footer-brand:hover{color:#fff}
.footer-brand-address{color:rgba(255,255,255,.55);font-size:14px;line-height:1.7;margin-top:18px;max-width:240px}
.footer-brand-social{display:flex;gap:10px;margin-top:22px}
.footer-brand-social a{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.75)}
.footer-brand-social a:hover{border-color:var(--accent);color:var(--accent)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.1);margin-top:56px;padding-top:24px}
@media only screen and (max-width:991px){
  .footer-grid{grid-template-columns:1fr 1fr;row-gap:40px}
}
@media only screen and (max-width:767px){
  .footer-grid{grid-template-columns:1fr;text-align:center}
  .footer-col-brand{display:flex;flex-direction:column;align-items:center}
  .footer-brand-address{max-width:none}
}
#footer h2{color:#fff;font-size:16px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
#footer .contact-info.bottom hr,#footer .contact-form.bottom hr{border-color:rgba(255,255,255,.15)}
#footer .m li a,#footer address,#footer address a,#footer p,#footer .footer-blog-height a,#footer .post-author a{color:rgba(255,255,255,.65)}
#footer .m li a:hover,#footer address a:hover{color:var(--accent)}
#footer .copyright-text,#footer .copyright-text a{color:rgba(255,255,255,.5)}
#footer .footer_icon{color:rgba(255,255,255,.65)}
#footer .footer_icon:hover{color:var(--accent)}

/* ---- Cards / portfolio / blog ---- */
.portfolio-wrapper .portfolio-single,.single-blog{border-radius:12px;overflow:hidden}
.portfolio-filter li a.active,.portfolio-filter li a:hover{border-color:var(--accent);color:var(--accent)}

/* ---- Hero ---- */
#home-slider{background:linear-gradient(135deg,#0d1f3f 0%,#16305c 55%,#1c3a6d 100%)!important;padding:110px 0;overflow:hidden}
#home-slider .main-slider{height:auto;display:flex;align-items:center;gap:60px}
#home-slider .slide-text{position:static;width:auto;max-width:560px;-webkit-animation:none;animation:none}
.eyebrow{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#ff8a68;margin-bottom:14px;font-family:'Manrope',sans-serif}
.stext{font-family:'Sora',sans-serif;font-size:44px;font-weight:700;line-height:1.15;margin-top:0!important;color:#fff}
#slider-p{font-size:17px;line-height:1.6;color:rgba(255,255,255,.75)!important;max-width:480px}
.hero-cta-group{display:flex;gap:16px;margin-top:26px;flex-wrap:wrap}
.hero-cta-group .btn{margin:0}
.hero-btn-accent{width:auto;background-color:var(--accent);border-bottom-color:var(--accent-dark)}
.hero-visual{flex:0 0 300px;width:300px;height:300px;border-radius:24px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center}
@media only screen and (max-width:767px){
  #home-slider .main-slider{flex-direction:column;gap:32px;text-align:center}
  #home-slider .slide-text{max-width:none}
  .hero-cta-group{justify-content:center}
  #slider-p{margin-left:auto;margin-right:auto}
  .hero-visual{width:200px;height:200px;flex-basis:auto}
}

/* ---- Section icon tiles (used on the homepage feature/service blocks) ---- */
.icon-tile{width:56px;height:56px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:#eaf0fb;flex-shrink:0}
.icon-tile svg{stroke:var(--navy-2)}
.icon-tile.accent{background:#fdece7}
.icon-tile.accent svg{stroke:var(--accent)}

/* ---- Homepage: 3-up feature cards (replaces the old alternating rows) ---- */
.feature-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.feature-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:36px 30px;text-align:left}
.feature-card h2{font-size:19px;margin-top:22px;color:var(--navy)}
.feature-card p{font-size:15px;line-height:1.7;color:var(--body-c);margin-top:12px}
@media only screen and (max-width:991px){
  .feature-card-grid{grid-template-columns:1fr 1fr}
}
@media only screen and (max-width:767px){
  .feature-card-grid{grid-template-columns:1fr}
  .feature-card{text-align:center}
  .feature-card .icon-tile{margin:0 auto}
}

/* ---- Homepage: services grid as light cards (replaces the old navy image tiles) ---- */
.service-card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.service-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:28px;display:flex;gap:16px;align-items:flex-start;text-align:left}
.service-card .icon-tile{width:48px;height:48px;border-radius:12px}
.service-card h3{font-size:16.5px;color:var(--navy);margin:0}
.service-card p{font-size:14px;color:var(--body-c);margin-top:8px;line-height:1.6}
@media only screen and (max-width:991px){
  .service-card-grid{grid-template-columns:1fr 1fr}
}
@media only screen and (max-width:767px){
  .service-card-grid{grid-template-columns:1fr}
}