/* RESET */
* {  margin: 0;  padding: 0;  box-sizing: border-box;  font-family: "Segoe UI", Arial, sans-serif; }

body {  color: #1d1d1f;  line-height: 1.6; }

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

html {
  scroll-behavior: smooth;
}
#cloud-services,#application-services,#architecture-services,#business-services,
#infrastructure-services {scroll-margin-top: 100px; /* navbar height + little gap */}

/* ========== SECTION BASE STYLE (Matches Home) ========== */
.section {  padding: 80px 0;  background: #f6f8fb; }
.container {  max-width: 1100px;  margin: 0 auto;  padding: 0 20px; }





/* ====================HEADER==================== */
         .header {    padding-top: 0;padding-bottom: 0; position: sticky;    top: 0;  height:70px;  z-index: 100; background: linear-gradient(135deg, #f8fafc 0%, #e9eff7 100%); 
             backdrop-filter: blur(8px);    -webkit-backdrop-filter: blur(8px);    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            }

        .nav-flex {  display:flex;    justify-content: space-between;    align-items: center;  padding: 5px 30px 10px 30px;}

    
        nav a {  color: #0a2540; font-size: 14px; font-weight: 400;  margin-left: 40px;   text-decoration: none;}

        nav a.active {        border-bottom: 2px solid #f9b233;    }            
      
        .logo-img {  height: 70px;  width: auto; image-rendering:-webkit-optimize-contrast;  image-rendering: crisp-edges;}
  





    
.menu-toggle {  display: none;  font-size: 28px;  color: white;  cursor: pointer;}



/* ================= HERO ================= */
.page-hero {  position: relative;  height: 60vh;  display: flex;  align-items: center;  justify-content: center; text-align: center;  overflow: hidden; }

.hero-bg {  position: absolute;  width: 100%;  height: 100%;  object-fit: cover; }

.hero-overlay {  position: absolute;  width: 100%;  height: 100%;  background: linear-gradient(180deg, rgba(10,37,64,0.85), rgba(10,37,64,0.65)); }

.hero-content {  position: relative;  z-index: 2;  max-width: 800px;  padding: 20px;  color: white; }

.hero-badge {  background: rgba(255,255,255,0.2);  padding: 6px 14px;  border-radius: 50px;  font-size: 13px; }

.hero-content h1 {  font-size: 38px;  margin: 15px 0; }

.hero-content p {  font-size: 18px;  opacity: 0.9; }









/* ========== SERVICE ROW LAYOUT ========== */
.service-row {  display: grid;  grid-template-columns: 1fr 1fr;  gap: 60px;  align-items: center;  margin-bottom: 80px; }

/* Reverse layout for alternate rows */
.service-row.reverse {  direction: rtl; }

.service-row.reverse .service-text,.service-row.reverse .service-image { direction: ltr; }




/* ========== SERVICE TEXT STYLE ========== */
.service-text h2 {  font-size: 32px;  color: #0a2540;  margin-bottom: 12px; }

.service-text p {  font-size: 17.9px;  color: #555;  line-height: 1.6; text-align: justify;  }

.service-text ul {  margin-top: 14px;  padding-left: 18px; text-align: justify; }

.service-text ul li {  margin: 6px 0; color: #444; }


.f1 {  color: #0a2540; font-size: 20px;}

.service-text strong {    color: #0a2540;   }

/* ========== SERVICE IMAGE STYLE ========== */
.service-image img {  width: 100%; height:350px; border-radius: 16px;  box-shadow: 0 10px 30px rgba(0,0,0,0.08);  transition: transform 0.3s ease, box-shadow 0.3s ease; }

.service-image img:hover {  transform: translateY(-5px);  box-shadow: 0 15px 35px rgba(0,0,0,0.12); }

/* ========== ANIMATION (Matches your Home) ========== */
.slide-up {  opacity: 0;  transform: translateY(30px);  transition: all 0.6s ease-out; }

.slide-up.active {  opacity: 1;  transform: translateY(0); }

.fade-in {  opacity: 0;  animation: fadeIn 1.2s ease forwards; }






/* ========== FOOTER (Home Consistency) ========== */
.footer {  text-align: center;  padding: 20px;  background: #0a2540; color: white; }




/* ================= MOBILE NAV ================= */
@media (max-width: 768px) {

    .menu-toggle {    display: block;  }
    nav { display: none;    position: absolute;    top: 65px;    right: 10px;    width: 200px;    background: #0b2440;    border-radius: 10px;    box-shadow: 0 20px 40px rgba(0,0,0,0.5);    overflow: hidden;  }
    nav.show {    display: block;    animation: dropdown 0.25s ease;  }
    nav a {    display: block;    padding: 14px 20px;    font-size: 16px;    border-bottom: 1px solid rgba(255,255,255,0.1);    margin: 0;  }

  /* HERO */
    .page-hero {    height: 50vh;  }
    .hero-content h1 {    font-size: 26px;  }
    .hero-content p {    font-size: 15px;  }

  /* SERVICES */
    .service-row {    grid-template-columns: 1fr;    gap: 30px;  }
    .service-row.reverse {    direction: ltr;  }
    .service-text h2 {    font-size: 24px;  }
    .service-text p {    font-size: 16px;  }
}




/* ================= ANIMATION ================= */


@keyframes fadeIn {  from { opacity: 0; }  to { opacity: 1; } }