/* Full styles from canvas */
:root{
  --accent:#004b8d;
  --bg:#f4f8fc;
  --text:#222;
  --muted:#666;
  --container:1200px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,Arial; background:white;color:var(--text)}
.container{max-width:var(--container);margin:auto;padding:0 22px}
header{background:#3f3f95;box-shadow:0 2px 6px rgba(0,0,0,0.08);position:sticky;top:0;z-index:10}
.header-inner{display:flex;justify-content:space-between;align-items:center;padding:16px 0}
nav a{text-decoration:none;color:var(--muted);margin-left:20px;font-weight:600}
nav a:hover,nav .active{color:var(--accent)}
/*2nd sheet*/
 nav {
      background: #3f3f95;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 60px 0px;
      position: sticky;
      top: 0;
      z-index: 1000;
    }
    nav .logo {

		color: white;
      font-weight: bold;
      font-size: 1.2em;
      letter-spacing: 0.5px;
    }
.logo img {
    height: 100px;
	
}
nav ul {
      list-style: none;
      display: flex;
      gap: 5px;
      margin: 0;
      padding: 0;
    }
    nav ul li a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.3s;
    }
    nav ul li a:hover {
      color: #aee4ff;
    }

    .hero {
  max-width: 100%;
  height: 800px;
  background-image: url('img/bnr1.jpg'); 
}
	/*---
	background-image: url('img/bnr1.jpg')
	margin: 0 auto;display: block;width: 100%;
      background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
                   center/cover;
      color: white;
      text-align: center;
      padding: 120px 20px;
    }*/
	
    .hero h1 {
      font-size: 2.8em;
      margin-bottom: 15px;
    }
    .hero p {
      font-size: 1.2em;
      margin-bottom: 25px;
    }
    .hero a {
      background-color: #00b8d9;
      color: white;
      text-decoration: none;
      padding: 12px 25px;
      border-radius: 6px;
      font-weight: bold;
      transition: background 0.3s;
    }
    .hero a:hover {
      background-color: #009ac1;
    }

    section {
      max-width: 1000px;
      margin: 0px auto;
      padding: 0 20px;
    }
    h2 {
      color: #3f3f95;
      border-left: 4px solid #000000;
      padding-left: 10px;
      margin-bottom: 15px;
    }
    p {
      margin-bottom: 20px;
      font-size: 1.05em;
    }

    .services {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
      text-align: center;
      margin-top: 30px;
    }
    .service-card {
      background: white;
      padding: 25px;
      border-radius: 8px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.05);
      transition: 0.3s;
    }
    .service-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .service-card h3 {
      color: #007bff;
    }

    .values {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 25px;
      margin-top: 25px;
    }
    .value-card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 3px 8px rgba(0,0,0,0.05);
      transition: 0.3s;
    }
    .value-card:hover {
      transform: translateY(-5px);
      box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    }
    .value-card h3 {
      color: #007bff;
      margin-top: 0;
    }

    .contact {
      background: #e9f5ff;
      text-align: center;
      padding: 60px 20px;
      border-top: 3px solid #007bff;
    }
    .contact a {
      display: inline-block;
      background: #007bff;
      color: white;
      text-decoration: none;
      padding: 12px 25px;
      border-radius: 6px;
      margin-top: 15px;
      transition: 0.3s;
      font-weight: 600;
    }
    .contact a:hover {
      background: #005fcc;
    }

    footer {
      background-color: #007bff;
      color: white;
      text-align: center;
      padding: 25px 15px;
      margin-top: 0;
    }

    @media (max-width: 768px) {
      .hero h1 {
        font-size: 2em;
      }
      nav ul {
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
    }
.container1 {width:100%;margin:auto;padding:0 22px}
.container2 {width:1920px;height: 500px;}
.banner{padding:60px 0;background:linear-gradient(90deg,#e7f1ff,#e7f1ff);margin:24px 0;border-radius:8px; width:auto; hight:auto;}


.banner h1{font-size:30px;margin:0 0 12px; text-align: center;}


.section{
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 0px;
	padding-left: 0;
}
.card{background:white;padding:20px;border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,0.06);margin-bottom:20px}
.grid{display:grid;gap:20px}
.footer{background:#0e1b2c;color:white;padding:40px 0;margin-top:40px}
.footer a{color:#cfe5ff;text-decoration:none}
ul{line-height:1.6}
.gallery-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
.thumb{cursor:pointer;border-radius:8px;overflow:hidden;box-shadow:0 6px 18px rgba(12,20,40,0.06)}
.thumb img{width:100%;height:200px;object-fit:cover}
.lightbox{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.8);display:none;justify-content:center;align-items:center;z-index:99;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:90%;max-height:90vh;border-radius:10px}


/* Slider Wrapper */
.slider {
    width: 1920px;
    height: 500px;
    position: relative;
    overflow: hidden;
}

/* Slides Container */
.slides {
    max-width: 100%;
    height: 500px;
    display: flex;
    animation: slide 12s infinite;
}

/* Individual Slide */
.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Slider Wrapper */
.slider {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
}

/* Slides Container */
.slides {
    width: 300%;
    height: 100%;
    display: flex;
    animation: slide 12s infinite;
}

/* Individual Slide */
.slide {
    width: 100%;
    height: 100%;
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Animation */
@keyframes slide {
    0%   { transform: translateX(0); }
    33%  { transform: translateX(0); }

    38%  { transform: translateX(-100%); }
    70%  { transform: translateX(-100%); }

    75%  { transform: translateX(-200%); }
    100% { transform: translateX(-200%); }
}

/* Text Overlay */
.banner-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    text-shadow: 0 3px 8px rgba(0,0,0,0.7);
}

.banner-text h1 {
    font-size: 45px;
    margin: 0;
}

.banner-text p {
    font-size: 20px;
}