* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #2e4863, #1f2735, #101820);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px;
    position: relative;
    z-index: 0;
    min-height: 100vh;
    /* allows scroll */
}

/* Make sure these show above background dots */
.container,
.services,
footer {
    position: relative;
    z-index: 1;
}

.container {
    margin-top: 100px;
    max-width: 600px;
    padding: 40px;
    background: #1c1f2a;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

.container h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.container h1 span {
    color: #00c8ff;
}

.container p {
    font-size: 1.1rem;
    margin: 10px 0;
}

.heading {
    margin: 40px auto 0;
    padding: 12px 30px;
    background-color: #00c8ff;
    color: #101820;
    border-radius: 25px;
    font-weight: bold;
    text-align: center;
    width: fit-content;
    max-width: 90%;
    min-width: 250px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease;
}

.heading:hover {
    background-color: #00a3cc;
}

.heading h2 {
    margin: 0;
    font-size: 1.2rem;
    white-space: nowrap;
}

.services {
    margin-top: 60px;
    padding: 20px;
    text-align: center;
}

.service-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
    max-width: 600px;
    margin: 0 auto;
}
.service-card {
  position: relative;
  background: #1f2735;
  border-radius: 12px;
  padding: 60px 20px 20px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
}

.service-card h3 {
  margin-top: 10px;
  font-size: 1.5rem;
  color: #00c8ff;
}

.service-icon-wrapper {
  position: absolute;
  top: -32px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1c1f2a;
  border-radius: 50%;
  padding: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.service-icon-wrapper img {
  width: 48px;
  height: 48px;
  /* filter: drop-shadow(0 0 2px #00c8ff); */
}

footer {
    margin-top: 40px;
    font-size: 0.9rem;
    opacity: 0.6;
}

footer a {
    color: #ffffff;
    text-decoration: underline;
    transition: color 0.3s ease;
}

footer a:hover {
    color: #00c8ff;
}

body::before,
body::after,
html::before,
html::after {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: white;
    pointer-events: none;
    z-index: -1;
    animation: subtleGlow 3s ease-in-out infinite;
    filter: drop-shadow(0 0 1px white) drop-shadow(0 0 2px white);
}

body::before {
    box-shadow:
        10px 20px white, 50px 80px white, 90px 40px white, 120px 130px white, 160px 70px white,
        200px 150px white, 240px 110px white, 280px 190px white, 320px 60px white, 350px 100px white,
        400px 140px white, 450px 90px white, 500px 170px white, 550px 120px white, 600px 180px white,
        650px 140px white, 700px 90px white, 750px 200px white, 800px 100px white, 820px 50px white,
        850px 130px white, 880px 180px white, 900px 20px white, 920px 160px white, 940px 110px white,
        960px 190px white, 980px 60px white, 1000px 140px white, 1020px 80px white, 1040px 170px white,
        1060px 120px white, 1080px 190px white, 1100px 90px white, 1150px 130px white, 1180px 80px white,
        1210px 160px white, 1240px 110px white, 1270px 190px white, 1300px 60px white, 1330px 140px white,
        1360px 90px white, 1390px 200px white, 1420px 100px white, 1450px 50px white, 1480px 130px white,
        1510px 180px white, 1540px 20px white, 1570px 160px white, 1600px 110px white;
}

body::after {
    animation-delay: 1s;
    box-shadow:
        320px 60px white, 350px 100px white, 400px 140px white, 450px 90px white,
        500px 170px white, 550px 120px white, 600px 180px white, 650px 140px white,
        700px 130px white, 740px 80px white, 780px 160px white, 820px 110px white,
        860px 190px white, 900px 60px white, 940px 140px white, 980px 90px white,
        1020px 200px white, 1060px 100px white, 1100px 50px white, 1140px 130px white,
        1180px 180px white, 1220px 20px white, 1260px 160px white, 1300px 110px white;
}

html::before {
    animation-delay: 1.5s;
    box-shadow:
        700px 90px white, 750px 200px white, 800px 100px white, 820px 50px white,
        850px 130px white, 880px 180px white, 900px 20px white, 920px 160px white,
        950px 110px white, 980px 190px white, 1010px 60px white, 1040px 140px white,
        1070px 90px white, 1100px 200px white, 1130px 100px white, 1160px 50px white,
        1190px 130px white, 1220px 180px white, 1250px 20px white, 1280px 160px white;
}

html::after {
    animation-delay: 2s;
    box-shadow:
        940px 110px white, 960px 190px white, 980px 60px white, 1000px 140px white,
        1020px 80px white, 1040px 170px white, 1060px 120px white, 1080px 190px white,
        1100px 90px white, 1120px 130px white, 1140px 80px white, 1160px 160px white,
        1180px 110px white, 1200px 190px white, 1220px 60px white, 1240px 140px white,
        1260px 90px white, 1280px 200px white, 1300px 100px white, 1320px 50px white;
}

.floating-image {
    position: fixed;
    left: -30px;
    top: 50%;
    transform: translateY(-50%) rotate(70deg);
    width: 350px;
    height: auto;
    animation: floatUpDown 4s ease-in-out infinite;
    z-index: 10;
}

.services {
    width: 100%;
    max-width: 1100px;
    margin: 60px auto 40px;
    padding: 0 20px;
}

.service-detail {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%; /* ensure full height for flex to work */
    padding: 60px 40px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.service-detail:first-child {
    margin-top: 0;
}

/* Alternate backgrounds
.service-detail:nth-child(odd) {
    background-color: #1f2735;
}

.service-detail:nth-child(even) {
    background-color: #283040;
} */

.service-icon {
    width: 64px;
    height: 64px;
    margin-bottom: 20px;
    filter: drop-shadow(0 0 1.5px #00c8ff);
}

.service-detail h3 {
    font-size: 2rem;
    margin-bottom: 10px;
    color: #00c8ff;
}

.service-detail p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 0 auto;
    color: #d6d6d6;
    opacity: 0.9;
    min-height: 60px;
}

/* Animation visible state */
.service-detail.visible {
    opacity: 1;
    transform: translateY(0);
}

.contact-section {
    width: 100%;
    padding: 60px 20px;
    display: flex;
    justify-content: center;
}

.contact-container {
    max-width: 600px;
    width: 100%;
    text-align: center;
    color: #fff;
    background-color: #1f2735;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    text-align: center;
    flex: 1 1 300px;
}

.contact-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  justify-content: center;
  padding: 60px 20px;
  width: 100%;
}

.contact-map {
  flex: 1 1 400px;
  min-height: 300px;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

#live-map {
  width: 100%;
  height: 100%;
  min-height: 300px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}


.contact-container h2 {
    font-size: 2rem;
    color: #00c8ff;
    margin-bottom: 10px;
}

.contact-container p {
    margin-bottom: 30px;
    opacity: 0.8;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-row {
  display: flex;
  align-items: center;
  text-align: justify;
  gap: 10px;
}

.contact-row img {
  width: 30px;
}

.social-section h3 {
  color: #00c8ff;
  margin-top: 10px;
  margin-bottom: 10px;
  text-align: left;
}

.social-icons {
  display: flex;
  gap: 15px;
}

.social-icons a {
    text-decoration: none;
}
.social-icons img {
  width: 24px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: none;
    border-radius: 8px;
    background-color: #2e3a4a;
    color: #fff;
    font-size: 1rem;
    outline: none;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #bbb;
}

.contact-form button {
    background-color: #00c8ff;
    color: #101820;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.contact-form button:hover {
    background-color: #00a3cc;
}

.service-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto 40px;
}

.service-detail.full-width {
    max-width: 1000px; /* was 600px */
    margin: 0 auto;
}
.no-underline { 
    text-decoration: none;
}
@keyframes floatUpDown {

    0%,
    100% {
        transform: translateY(-50%) rotate(10deg);
    }

    50% {
        transform: translateY(calc(-50% - 20px)) rotate(10deg);
    }
}

@keyframes subtleGlow {

    0%,
    100% {
        filter: drop-shadow(0 0 1px white) drop-shadow(0 0 2px white);
        opacity: 0.8;
    }

    50% {
        filter: drop-shadow(0 0 3px white) drop-shadow(0 0 5px white);
        opacity: 1;
    }
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@media (max-width: 1100px) {
    .floating-image {
        left: -120px;
        width: 280px;
        opacity: 0.4;
        z-index: 0;
    }

    .container {
        position: relative;
        z-index: 2;
    }
}

@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 30px 20px;
        margin-top: 40px;
    }

    .container h1 {
        font-size: 2rem;
    }

    .container p {
        font-size: 1rem;
    }

    .heading h2 {
        font-size: 1rem;
    }

    .services h2 {
        font-size: 1.5rem;
    }

    footer {
        font-size: 0.8rem;
        margin-top: 20px;
    }

    .floating-image {
        display: none;
    }
}

@media (max-width: 600px) {
    .floating-image {
        display: none;
    }
}
/* Responsive */
@media (max-width: 768px) {
    .service-detail {
        padding: 40px 20px;
    }

    .service-detail h3 {
        font-size: 1.6rem;
    }

    .service-detail p {
        font-size: 1rem;
    }
}
@media (max-width: 768px) {
    .service-layout {
        grid-template-columns: 1fr; /* stack vertically */
        gap: 20px;
        padding: 0 15px; /* optional: side spacing on small screens */
    }

    .service-detail.full-width {
        max-width: 100%;
        padding: 40px 20px; /* adjust for smaller screens */
    }
}
@media (max-width: 768px) {
  .service-grid {
    max-width: 200px;
    grid-template-columns: 1fr;
    gap: 50px;
  }
}

@media (max-width: 768px) {
  .contact-wrapper {
    flex-direction: column;
    padding: 40px 15px;
  }

  .contact-map,
  .contact-container {
    flex: 1 1 100%;
  }

  #live-map {
    min-height: 250px;
  }

  .contact-container {
    padding: 30px 20px;
    text-align: center;
  }

  .social-section h3 {
    text-align: center;
  }

  .social-icons {
    justify-content: center;
    flex-wrap: wrap;
  }
}