/* Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --clr-primary:#1f1f1f;
  --clr-accent:#53abd4;
  --clr-light:#ffffff;
  --clr-gray:#f5f5f5;
  --ff-base:'Montserrat',sans-serif;
  --transition:0.3s ease;
}

/* ===== Global ===== */
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}
@media(max-width:480px){
  html{font-size:15px;}
}

body{
  font-family:var(--ff-base);
  line-height:1.6;
  color:var(--clr-primary);
  background:var(--clr-light);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(90%,1200px);margin-inline:auto}

/* ===== Header ===== */
.header{position:fixed;top:0;left:0;width:100%;background:var(--clr-light);box-shadow:0 2px 6px rgba(0,0,0,.06);z-index:1000}
.nav-wrapper{display:flex;align-items:center;justify-content:space-between;min-height:70px}
.logo{font-size:1.4rem;font-weight:600}
.logo span{color:var(--clr-accent)}
.nav{display:flex}
.nav__list{display:flex;gap:2rem;list-style:none}
.nav__list a{position:relative;font-size:0.95rem;padding-bottom:3px}
.nav__list a::after{content:'';position:absolute;left:0;bottom:0;width:0;height:2px;background:var(--clr-accent);transition:var(--transition)}
.nav__list a:hover::after{width:100%}

/* Dropdown */
.dropdown{position:relative}
.dropdown__toggle{background:none;border:none;font:inherit;cursor:pointer}
.dropdown__menu{position:absolute;top:100%;left:0;background:var(--clr-light);list-style:none;padding:.75rem 0;min-width:180px;box-shadow:0 4px 8px rgba(0,0,0,.08);display:none}
.dropdown__menu li a{display:block;padding:.5rem 1rem;font-size:.9rem}
.dropdown:hover .dropdown__menu{display:block}

/* Burger (mobile) */
.burger{display:none;flex-direction:column;gap:6px;background:none;border:none;cursor:pointer}
.burger span{width:24px;height:2px;background:var(--clr-primary);transition:var(--transition)}

/* ===== Hero ===== */
.hero{position:relative;min-height:100vh;margin-top:70px;overflow:hidden}
.slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1s ease}
.slide.active{opacity:1}
.hero__content{position:absolute;bottom:15%;left:8%;max-width:450px;color:var(--clr-light);text-shadow:0 2px 6px rgba(0,0,0,.4)}
.hero__content h1{font-size:2.2rem;font-weight:600;margin-bottom:1rem}
.hero__content p{font-size:1rem;margin-bottom:1.5rem}
.btn{display:inline-block;background:var(--clr-accent);color:#fff;padding:.75rem 1.75rem;border-radius:3px;font-size:.9rem;transition:var(--transition)}
.btn:hover{filter:brightness(1.1)}
.btn--outline{border:2px solid var(--clr-accent);color:var(--clr-accent);background:transparent}
.btn--outline:hover{background:var(--clr-accent);color:#fff}

/* Slider nav */
.slider-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.4);color:#fff;border:none;font-size:1.5rem;width:40px;height:40px;border-radius:50%;cursor:pointer;transition:var(--transition)}
.slider-btn:hover{background:rgba(0,0,0,.6)}
.prev{left:1rem}.next{right:1rem}

/* ===== Sections ===== */
.section{padding:6rem 0}
.section__title{text-align:center;font-size:1.75rem;font-weight:600;margin-bottom:3rem}

/* About */
.about__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;align-items:center}
.about__img{width:100%;padding-top:60%;background-size:cover;background-position:center;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,.15)}
.about__text h2{font-size:2rem;margin-bottom:1rem}
.about__text p{margin-bottom:1.5rem;color:#555}

/* Services */
.services__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.service-card{text-align:center;padding:2rem;background:var(--clr-gray);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:var(--transition)}
.service-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.service-card img{width:50px;margin-inline:auto;margin-bottom:1rem}

/* Projects */
.projects__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.5rem}
.project-card{text-align:center;padding:2rem;background:var(--clr-gray);border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.05);transition:var(--transition)}
.project-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.project-card img{width:50px;margin-inline:auto;margin-bottom:1rem}


/* Stats */
.stats{background:var(--clr-primary);color:#fff}
.stats__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2rem;text-align:center}
.counter{font-size:2.5rem;font-weight:600;display:block;margin-bottom:.25rem}
.stat h4{font-weight:300}

/* CTA */
.cta{background:url('assets/img/cta.jpg') center/cover no-repeat;position:relative;color:#fff;text-align:center}
.cta::after{content:'';position:absolute;inset:0;background:rgba(0,0,0,.5);pointer-events: none;}
.cta__wrapper{position:relative;
  padding:5rem 1rem;
  pointer-events: auto;}
.cta__wrapper h2{font-size:2rem;font-weight:600;margin-bottom:1.5rem}

/* Blog */
.blog__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem}
.blog-card{background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.05);transition:var(--transition)}
.blog-card:hover{transform:translateY(-4px)}
.blog-card img{width:100%;height:200px;object-fit:cover}
.blog-card__body{padding:1.25rem}
.blog-card__tag{display:inline-block;font-size:.75rem;background:var(--clr-accent);color:#fff;padding:.2rem .6rem;border-radius:3px;margin-bottom:.75rem}
.blog-card__link{display:inline-block;margin-top:1rem;color:var(--clr-accent);font-size:.9rem;font-weight:600}

/* Footer */
.footer{background:var(--clr-primary);color:#ccc;padding-top:3rem}
.footer__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:2rem}
.footer h3{color:#fff;margin-bottom:1rem;font-size:1.1rem}
.footer a{color:#ccc}
.footer__bottom{text-align:center;padding:1rem 0;font-size:.8rem;border-top:1px solid rgba(255,255,255,.08)}
.footer__social a img{width:26px;margin-right:.75rem}

/* Back‑to‑top */
.to-top{position:fixed;right:1.25rem;bottom:1.25rem;width:44px;height:44px;border:none;border-radius:50%;background:var(--clr-accent);color:#fff;font-size:1.2rem;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:var(--transition)}
.to-top:hover{filter:brightness(1.1)}

/* ======= MOBILE ENHANCEMENTS ======= */

/* 992px ↓ (tablet & small‑laptop) */
@media (max-width:992px){
  /* nav panel */
  .nav{position:fixed;
    overflow-y: auto;       /* Enables vertical scrolling */
    top:0;right:0;bottom:0;width:70%;max-width:300px;background:#fff;transform:translateX(100%);transition:var(--transition);
    padding-top:80px;box-shadow:-2px 0 8px rgba(0,0,0,.1);z-index:999}
  .nav.open{transform:translateX(0)}
  .nav__list{flex-direction:column;align-items:flex-start;padding-left:1.5rem;gap:1.5rem;max-height: 100vh;}
  .dropdown__menu{position:static;display:none;background:none;box-shadow:none;padding-left:1rem}
  .dropdown:hover .dropdown__menu,
  .dropdown__toggle:focus + .dropdown__menu{display:block}
  .burger{display:flex;flex-direction:column;gap:5px;z-index:1001}
  .burger span{width:25px;height:2px}
  /* one‑column grids */
  .about__grid,.services__grid,.stats__grid,.blog__grid,.footer__grid{grid-template-columns:1fr}
  /* fonts & buttons */
  .hero__content h1{font-size:1.5rem}
  .hero__content p{font-size:0.9rem}
  .btn{padding:0.6rem 1.5rem;font-size:0.85rem}
  .section__title{font-size:1.4rem}
  .footer__social a img{margin:0 0.5rem}
  .slide{background-position:center center}
  .hero{height:100vh;padding-top:60px}
  .about__img{padding-top:80%}
  .cta__wrapper{padding:3rem 1rem}
  .stats__grid{text-align:center}
  .blog-card img{height:180px}
  .to-top{width:40px;height:40px;font-size:1rem;bottom:1rem;right:1rem}
}

/* 768px ↓ (phones & small tablets) */
@media (max-width:768px){
  /* Hero */
  .hero__content{bottom:10%;left:6%;right:6%;text-align:center}
  .hero__content h1{font-size:1.4rem}
  .hero__content p{font-size:0.9rem;margin-bottom:1rem}
  .slider-btn{width:36px;height:36px;font-size:1.2rem}

  /* About */
  .about__text{text-align:center}
  .about__text h2{font-size:1.5rem}
  .about__text p{font-size:0.95rem;line-height:1.6}
  .btn--outline{margin-inline:auto}

  /* Services */
  .services__grid{gap:1rem}
  .service-card{padding:1.5rem 1rem}
  .service-card img{width:40px;margin-bottom:0.75rem}
  .service-card h3{font-size:1.1rem;margin-bottom:0.5rem}
  .service-card p{font-size:0.9rem}

  /* Blog */
  .blog-card__body{padding:1rem}
  .blog-card__tag{font-size:0.7rem;padding:0.2rem 0.5rem}
  .blog-card h3{font-size:1rem}
  .blog-card p{font-size:0.85rem;line-height:1.5}
  .blog-card__link{font-size:0.85rem}

  /* CTA */
  .cta__wrapper h2{font-size:1.4rem}
  .cta__wrapper{padding:3rem 1rem}
  .cta .btn{margin-top:1rem}

  /* Footer */
  .footer__grid{gap:2rem;text-align:center}
  .footer__contact p,.footer__links ul,.footer__social{font-size:0.9rem}
  .footer__bottom{font-size:0.75rem;padding:0.75rem}
  .footer__social a img{width:24px;margin:0 0.4rem}
}

/* Loader screen with brand logo */
#loader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader-logo {
  width: 120px;
  height: auto;
  animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hide loader after delay + load */
#loader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* Careers Page Styling */

.career-hero {
  padding: 80px 20px;
  background: #f2f2f2;
  text-align: center;
}

.career-hero h1 {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.career-hero p {
  font-size: 1.2rem;
  color: #53abd4;
}

.job-listings {
  padding: 40px 20px;
  max-width: 900px;
  margin: auto;
}

.job-card {
  background: #fff;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  margin-bottom: 20px;
}

.job-card h3 {
  margin-top: 0;
}

.job-card.btn {
  margin-top: 10px;
  display: inline-block;
  background: #000;
  color: #fff;
  padding: 10px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
}

.career-form-section {
  padding: 40px 20px;
  background: #fafafa;
}

.career-form {
  max-width: 600px;
  margin: auto;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.career-form input,
.career-form textarea {
  padding: 12px;
  border-radius: 8px;
  border: 1px solid #ccc;
  font-size: 1rem;
}

.career-form textarea {
  resize: vertical;
  height: 120px;
}

.career-form.btn {
  background: #000;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .career-hero h1 {
    font-size: 2rem;
  }
  .career-form {
    padding: 0 10px;
  }
}

.requirements {
  margin: 16px 0;
  padding-left: 20px;
  list-style-type: disc;
  color: #333;
}

.requirements li {
  margin-bottom: 6px;
  font-size: 1rem;
  line-height: 1.4;
}

/* Mobile styling */
@media (max-width: 768px) {
  .requirements {
    padding-left: 16px;
  }
  .requirements li {
    font-size: 0.95rem;
  }
}
.application-form {
  max-width: 600px;
  margin: 0 auto; /* Centers the form horizontally */
  padding: 40px 20px;
  background: #f8f8f8;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  justify-content: center;
}
/* Optional: Center form section itself */
.careers-section {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 60px 20px;
  flex-wrap: wrap;
  gap: 40px;
}

.application-form select {
  width: 100%;
  padding: 10px;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
  background-color: #fff;
  appearance: none;
}

.application-form label {
  font-weight: 500;
  margin-top: 12px;
  display: block;
  color: #333;
}
/* CV collecting part */
input[type="file"] {
  padding: 8px;
  font-size: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: white;
}
.drop-area {
  border: 2px dashed #ccc;
  border-radius: 8px;
  padding: 30px;
  text-align: center;
  cursor: pointer;
  transition: background 0.3s ease;
  background-color: #fafafa;
}

.drop-area:hover {
  background-color: #f0f0f0;
}

.drop-area.dragover {
  background-color: #e0f7fa;
  border-color: #00acc1;
}

.drop-area p {
  margin: 0;
  font-size: 16px;
  color: #666;
}

.drop-area span {
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}

.file-preview {
  margin-top: 10px;
  font-size: 14px;
  color: #333;
}


.blog-content {
  max-width: 900px;      /* keep text at a nice readable width */
  margin: 2rem auto;
  padding: 5rem 1rem 2rem; /* extra top padding for navbar space */
  text-align: justify;   /* optional: makes paragraphs look neat */

  
  /* Reset & Variables */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --clr-primary:#1f1f1f;
  --clr-accent:#53abd4;
  --clr-light:#ffffff;
  --clr-gray:#f5f5f5;
  --ff-base:'Montserrat',sans-serif;
  --transition:0.3s ease;
}

/* ===== Global ===== */
html{
  font-size:16px;
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
  scroll-behavior:smooth;
}
@media(max-width:480px){
  html{font-size:15px;}
}

body{
  font-family:var(--ff-base);
  line-height:1.6;
  color:var(--clr-primary);
  background:var(--clr-light);
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.container{width:min(90%,1200px);margin-inline:auto}

header h1 {
  color: #53abd4;
  margin: 0;
  font-size: 1.8rem;
}

main {
  max-width: 900px;
  margin: 2rem auto;
  padding: 0 1rem;
}

section {
  margin-bottom: 2rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

h2 {
  color: #53abd4;
  margin-bottom: 1rem;
}

h3 {
  margin-top: 1rem;
  color: #1f1f1f;
}

footer {
  text-align: center;
  background: #1f1f1f;
  color: #fff;
  padding: 1rem;
  margin-top: 2rem;
}

ul, ol {
  padding-left: 1.5rem;
}

li {
  margin: 0.5rem 0;
}
}