/* ========================================================
   JTEX SERVICES LIMITED — styles.css
   Dark Corporate Theme • Teal/Cyan Accents • Modern Animations
   ======================================================== */

/* ---------------------- Root Variables ---------------------- */
:root {
  --bg: #0b121f;
  --bg-light: #111a2e;
  --text: #f2f4f8;
  --muted: #a5b3c2;
  --accent: #00b3b3;
  --accent-2: #2dd4bf;
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0,0,0,0.45);
  --trans: 0.3s ease;
  font-size: 16px;
}

/* logo Design */
.logoDesign{
  height: 100px;
  width: 100px;
  border-radius: 0px 0px 30px 30px;
}

.jTexName{
  padding-left: 1rem;
}
.add{
  color: #2dd4bf;
  letter-spacing: 0.7rem;
  padding-left: 0.2rem;
  font-family: Baskerville Old Face;
}


/* ---------------------- Base Styles ---------------------- */
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family:'Lato',sans-serif; }
body { overflow-x:hidden; line-height:1.6; }

h1,h2,h3,h4,h5,h6 { font-family:'Poppins',sans-serif; margin:0; color:#fff; }
p { margin:0 0 12px; }

.container { width:90%; max-width:1200px; margin:auto; }

/* ---------------------- Header & Nav ---------------------- */
header { background:rgba(11,18,32,0.85); backdrop-filter:blur(8px); position:sticky; top:0; z-index:999; border-bottom:1px solid rgba(255,255,255,0.05); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.brand { display:flex; align-items:center; gap:10px; }
.logo { width:42px; height:42px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#001418; font-weight:800; display:flex; align-items:center; justify-content:center; font-size:22px; box-shadow:0 0 12px rgba(45,212,191,0.3); }

nav ul { display:flex; gap:22px; list-style:none; margin:0; padding:0; }
nav a { color:var(--muted); text-decoration:none; font-weight:500; transition:var(--trans); }
nav a:hover { color:var(--accent-2); }

.cta { background:linear-gradient(90deg,var(--accent),var(--accent-2)); color:#001418; padding:10px 18px; border-radius:var(--radius); font-weight:600; text-decoration:none; transition:var(--trans); }
.cta:hover { filter:brightness(1.15); }

.menu-toggle { background:none; border:none; cursor:pointer; display:none; flex-direction:column; gap:5px; }
.menu-toggle span { display:block; width:24px; height:2px; background:var(--text); transition:var(--trans); }
.menu-toggle.active span:nth-child(1){ transform:rotate(45deg) translateY(7px); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:rotate(-45deg) translateY(-7px); }

/* ---------------------- Hero ---------------------- */
.hero { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; padding:80px 0 60px; gap:40px; }
.hero-left { flex:1 1 480px; }
.hero-right { flex:1 1 420px; display:flex; flex-direction:column; align-items:center; }

.kicker { text-transform:uppercase; letter-spacing:1px; color:var(--accent-2); font-size:13px; display:block; margin-bottom:10px; }
.lead { font-size:18px; color:var(--muted); }

.btn { display:inline-block; margin-right:12px; padding:10px 22px; border-radius:var(--radius); font-weight:600; text-decoration:none; transition:var(--trans); }
.btn-outline { border:1px solid var(--accent); color:var(--accent); background:none; }
.btn-outline:hover { background:var(--accent); color:#001418; }

HERO RIG + MIRROR
.rig { position:relative; overflow:visible; background:transparent; }
#heroWave { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.rig-svg { position:relative; z-index:2; width:88%; height:auto; max-width:420px; }
.rig-mirror { position:relative; margin-top:8px; display:block; width:100%; height:72px; pointer-events:none; z-index:1; transform-origin:top center; transition:transform .18s ease; mask-image:linear-gradient(to bottom,rgba(0,0,0,0.9),rgba(0,0,0,0.12)); -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.9),rgba(0,0,0,0.12)); }
.rig-mirror .mirror { transform:scaleY(-1); opacity:0.28; filter:blur(2px) saturate(0.9); }
.rig-mirror:before { content:''; position:absolute; inset:0; z-index:3; pointer-events:none; background:linear-gradient(90deg,rgba(255,255,255,0.015),rgba(255,255,255,0.06),rgba(255,255,255,0.015)); transform:translateX(-40%); opacity:0.25; animation:shimmer 6.5s linear infinite; mix-blend-mode:overlay; }
@keyframes shimmer { 0%{transform:translateX(-40%)}50%{transform:translateX(40%)}100%{transform:translateX(-40%)} }

/* ---------------------- Sections ---------------------- */
section { padding:80px 0; position:relative; z-index:1; }
.section-title { margin-bottom:40px; text-align:center; }
.section-title h2 { font-size:30px; color:#fff; }

/* About */
.about { display:grid; grid-template-columns:1fr 300px; gap:40px; }
.about .meta { background:var(--bg-light); padding:20px; border-radius:var(--radius); box-shadow:var(--shadow); }

/* Services */
.services-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.service { background:var(--bg-light); border-radius:var(--radius); padding:28px 20px; box-shadow:var(--shadow); position:relative; overflow:hidden; transition:var(--trans); }
.service:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,0.5); }
.service h3 { margin-left:76px; }
.card-blob { width:56px; height:56px; margin-bottom:8px; display:block; transform:translateZ(0); position:absolute; left:18px; top:14px; opacity:0.95; }

/* Section Deco */
.section-deco { position:absolute; left:0; top:-30px; width:120%; height:120px; pointer-events:none; z-index:0; opacity:0.95; }

/* Contact */
.contact-grid { display:grid; grid-template-columns:1fr 320px; gap:40px; align-items:start; }
#contactForm input, #contactForm select, #contactForm textarea { width:100%;resize: none; padding:10px 14px; border:none; border-radius:var(--radius); margin-bottom:12px; background:rgba(255,255,255,0.05); color:#fff; font-family:inherit; }
#contactForm input:focus, #contactForm select:focus, #contactForm textarea:focus { outline:1px solid var(--accent-2); }
.submit { background:linear-gradient(90deg,var(--accent),var(--accent-2)); border:none; border-radius:var(--radius); color:#001418; font-weight:600; padding:10px 20px; cursor:pointer; transition:var(--trans); }
.submit:hover { filter:brightness(1.1); }

/* Footer */
footer { padding:40px 0 20px; background:#0a101b; position:relative; overflow:hidden; }
#footerWave { display:block; width:100%; height:80px; position:relative; left:0; bottom:0; z-index:0; }
.footer-grid { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:10px; }

/* ---------------------- Preloader ----------------------
#preloader { position:fixed; inset:0; background:#0b121f; display:flex; flex-direction:column; justify-content:center; align-items:center; z-index:9999; transition:opacity .6s ease; }
.prelogo { font-family:'Poppins'; font-size:38px; font-weight:800; color:var(--accent-2); margin-bottom:18px; } */
.pre-spinner { width:40px; height:40px; border:4px solid rgba(255,255,255,0.1); border-top:4px solid var(--accent); border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { 0%{transform:rotate(0)}100%{transform:rotate(360deg)} }


#preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #0b121f; /* preloader background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.prelogo {
  font-size: 3rem;
  font-weight: bold;
  color: #00ffff;
  display: flex;
}

.prelogo span {
  opacity: 0;
  transform: translateY(-50px);
  display: inline-block;
  animation: drop 0.5s forwards;
}

@keyframes drop {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------- Animations ---------------------- */
.reveal { opacity:0; transform:translateY(20px); transition:all .8s ease; }
.reveal.show { opacity:1; transform:translateY(0); }

/* ---------------------- Scrollbar ---------------------- */
::-webkit-scrollbar { width:10px; }
::-webkit-scrollbar-track { background:#0b121f; }
::-webkit-scrollbar-thumb { background:linear-gradient(var(--accent),var(--accent-2)); border-radius:10px; }

/* ---------------------- Mobile Nav ---------------------- */
@media (max-width:980px){
  .menu-toggle{display:flex;}
  nav ul{display:none;}
  nav ul.open{display:flex;flex-direction:column;position:absolute;top:70px;right:24px;background:rgba(11,18,32,0.95);padding:20px;border-radius:12px;box-shadow:0 8px 30px rgba(0,0,0,0.6);width:220px;animation:slideDown .35s ease forwards;z-index:100;}
  nav ul.open li{margin:12px 0;}
  nav ul.open a{color:#fff;font-size:16px;}
  @keyframes slideDown{0%{opacity:0;transform:translateY(-10px);}100%{opacity:1;transform:translateY(0);}}
  .hero{flex-direction:column;}
  .about{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
}

.intro-section {

  width: 100%;
  padding: 80px 5%;
  background: #f9fafc;

}

.intro-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
}

.intro-text {
  flex: 1;
  min-width: 400px;
}

.intro-text h1 {
  font-size: 2.2rem;
  color: #0b3d91;
  line-height: 1.3;
  margin-bottom: 1rem;
}

.intro-text p {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.6;
}

.intro-image {
  flex: 1;
  text-align: right;
}

.intro-image img {
  position: absolute;
  top:5rem;
   width: 100%;
   height: 80%;
   left: 52%;
  max-width: 500px;
  border-radius: 15px;
  object-fit: cover;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.4s ease;
   transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out;
}

.intro-image img:hover {
  transform: scale(1.05);
}

/* Responsive fix for small screens */
@media (max-width: 768px) {
  .intro-content {
    flex-direction: column;
    text-align: center;
  
  }

  /* Media query for phones */
@media (max-width: 600px) {
  .intro-image img {
    top: 45rem;        /* reduce top offset */
    left: 0%;        /* center horizontally */
   
    width: 100%;       /* reduce width for small screens */
    height: 45%;
  
  }
}


  .intro-image {
    text-align: center;
    margin-top: 1.5rem;
    
  }
}
.intro-image img.active {
 opacity: 1;
  transform: scale(1);
  z-index: 2;


}

#gallery-slider {
    padding: 80px 10%;
    background-color: #f5f5f5;
    text-align: center;
}

#gallery-slider h2 {
    color: #004d4d;
    font-size: 2.2rem;
    margin-bottom: 0.5rem;
}

#gallery-slider p {
    color: #222222;
    margin-bottom: 40px;
    font-size: 1.1rem;
}

.slider-container {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.slide {
    min-width: 100%;
    box-sizing: border-box;
    border-radius: 8px;
    overflow: hidden;
    height: 400px; /* fixed height for all slides */
    position: relative;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills container, cropping as needed */
    display: block;
}



/* Navigation buttons */
.slider-container .prev,
.slider-container .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 77, 77, 0.7);
    color: #f0c808;
    border: none;
    font-size: 2rem;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s;
}

.slider-container .prev:hover,
.slider-container .next:hover {
    background-color: #004d4d;
}

.slider-container .prev { left: 10px; }
.slider-container .next { right: 10px; }



/* ---------------------- Typography Enhancements ---------------------- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Lato:wght@400;500&display=swap');