:root {
  --primary: #0066ff;
  --dark: #0a1f3a;
  --accent: #00c6ff;
  --light: #0370ff;
}

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

body {
  font-family: 'Inter', sans-serif;
  background: #ffffff;
  color: #1a2a44;
  line-height: 1.7;
  cursor: default;
  overflow-x: hidden;
}

.custom-cursor {
  position: fixed;
  width: 24px;
  height: 24px;
  border: 2px solid var(--primary);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: all 0.18s ease;
  z-index: 9999;
  mix-blend-mode: difference;
}

.custom-cursor.active {
  width: 80px;
  height: 80px;
  background: rgba(0,102,255,0.2);
  border: none;
}



.logo img {
  height: 45px;   /* adjust size here */
  width: auto;
  display: block;
}


header {
  position: relative;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
  background: var(--dark);
}

.video-background {
  position: absolute;
  inset: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}

.video-iframe {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 110%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  bottom: 100px;
}

header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10,31,58,0.65);
  z-index: 1;
}

.logo-wrapper {
  position: absolute;
  top: 1.5rem;
  left: 5%;
  z-index: 3;
}

.main-logo {
  max-width: 220px;
}

.header-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  padding: 0 1.5rem;
}

h2 {
  font-size: clamp(2.2rem, 5vw, 4rem);
  font-weight: 900;
  margin-bottom: 0.8rem;
}

.tagline {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  color: var(--accent);
  margin: 0.8rem 0;
}

.subtext {
  font-size: 1.25rem;
  max-width: 680px;
  margin: 0 auto 1.8rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.9rem 2rem;
  background: white;
  color: var(--dark);
  font-weight: 700;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.4s ease;
}

.btn:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,102,255,0.3);
}

.scroll-indicator {
  position: absolute;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  animation: float 3s infinite;
}

@keyframes float {
  0%,100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-12px); }
}

.section-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 5%;
}

.dark-section {
  background: linear-gradient(135deg, #001845, #0a2b5e);
  color: white;
  padding-bottom: 50px;
}

.light-section {
  background: white;
}

#about .about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-top: 3rem;
}

.lead {
  font-size: 1.28rem;
  font-weight: 500;
  margin-bottom: 1.2rem;
}

.mission {
  background: rgba(0, 0, 0, 0.1);
  padding: 1.8rem;
  border-radius: 16px;
  margin-top: 2rem;
  backdrop-filter: blur(8px);
}

.products-grid, .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2.2rem;
  margin-top: 3rem;
}

.service-item {
  background: rgba(0, 0, 0, 0.08);
  padding: 2.2rem;
  border-radius: 16px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  transition: all 0.4s;
}

.service-item:hover {
  transform: translateY(-10px);
  background: rgba(0, 0, 0, 0.14);
}

.service-item i {
  color: var(--accent);
  margin-bottom: 1.2rem;
}

.intel-logo {
  max-height: 80px;
  margin-bottom: 1.8rem;
}

.terms-box {
  background: white;
  padding: 2.5rem;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.08);
  max-width: 800px;
  margin: 0 auto;
}

.contact-details {
  font-size: 1.25rem;
  margin: 2.5rem 0;
}

.contact-details p {
  margin: 1rem 0;
}

.contact-form {
  max-width: 680px;
  margin: 3rem auto;
  background: rgba(255,255,255,0.12);
  padding: 2.5rem;
  border-radius: 16px;
  backdrop-filter: blur(12px);
}

input, textarea {
  width: 100%;
  padding: 1rem 1.4rem;
  margin: 1rem 0;
  border: none;
  border-radius: 12px;
  font-size: 1.05rem;
  background: rgba(255,255,255,0.92);
}

textarea {
  min-height: 140px;
}

footer {
  background: var(--dark);
  color: #000134;
  text-align: center;
  padding: 3rem 0%;
}

/* ────────────────────────────────────────────────
   PRODUCT FLIP CARDS – CLEAN FINAL VERSION
───────────────────────────────────────────────── */

.flip-product-card {
  height: 480px;
  perspective: 1200px;
}

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.9s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0,0,0,0.35);
}

.flip-product-card:hover .flip-inner {
  transform: rotateY(180deg);
  box-shadow: 0 25px 70px rgba(0, 102, 255, 0.4);
}

.flip-front,
.flip-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: 16px;
}

.flip-front {
  background: var(--dark);
}

.card-image {
  inset: 0;
  background-size: cover;
  background-position: center;
  position: absolute;
}

.front-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(10, 31, 58, 0.95) 0%, transparent 100%);
  padding: 2.5rem 2rem 1.8rem;
  color: white;
}

.front-overlay h3 {
  margin: 0;
  font-size: 2.1rem;
  font-weight: 800;
  color: var(--accent);
  text-shadow: 0 3px 12px rgba(0,0,0,0.7);
}

.flip-back {
  background: linear-gradient(135deg, #001845, #0a2b5e);
  transform: rotateY(180deg);
  color: white;
  padding: 2.5rem;
  display: flex;
  align-items: center;
}

.back-content {
  transform: rotateY(180deg);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-back h3 {
  color: var(--accent);
  font-size: 1.9rem;
  margin-bottom: 1.6rem;
  text-align: center;
}

.flip-back ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.8rem 0;
}

.flip-back li {
  font-size: 1.08rem;
  margin: 1rem 0;
  position: relative;
  padding-left: 2.2rem;
}

.flip-back li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-weight: bold;
  font-size: 1.3rem;
}

.flip-back .tagline {
  font-size: 1.05rem;
  font-style: italic;
  opacity: 0.9;
  text-align: center;
  margin-top: 1.5rem;
}

.flip-product-card:hover .card-image {
  transform: scale(1.06);
  transition: transform 1.2s ease;
}

@media (max-width: 992px) {
  .about-grid {
    grid-template-columns: 1fr;
  }
  .products-grid, .services-grid {
    grid-template-columns: 1fr;
  }
  header {
    height: 50vh;
  }
}

/* ===============================
   MODERN 3D TILT CARDS
================================ */

.tilt-card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2.5rem;
  margin-top: 3rem;
  perspective: 1200px;
}

.tilt-card {
  height: 420px;
  position: relative;
  transform-style: preserve-3d;
}

.card-inner {
  position: relative;
  height: 100%;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.15s ease-out;
  transform-style: preserve-3d;
  background: linear-gradient(145deg, #001845, #0a2b5e);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

.card-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
}

.card-content {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 2;
  transform: translateZ(60px);
}

.card-content h3 {
  font-size: 2rem;
  color: #00c6ff;
  margin-bottom: 0.6rem;
}


.card-content p {
  font-size: 1.1rem;
  opacity: 0.9;
  color: white;

}

/* Glass shine effect */
.card-inner::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    120deg,
    rgba(255,255,255,0.2) 0%,
    rgba(255,255,255,0.05) 40%,
    transparent 60%
  );
  transform: rotate(25deg);
  transition: all 0.6s ease;
  pointer-events: none;
}

.tilt-card:hover .card-inner::before {
  left: 100%;
}

.tilt-card:hover .card-image {
  transform: scale(1.08);
}

.tilt-card:hover .card-inner {
  box-shadow: 0 35px 80px rgba(0, 102, 255, 0.5);
}

/* ==========================
   180° FLIP CARD SYSTEM
========================== */

.flip-card-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Always 4 columns */
  gap: 2.5rem;
  margin-top: 3rem;
  perspective: 1500px;
  height: 900px;
}

.flip-card {
  height: 380px;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.9s cubic-bezier(0.68,-0.55,0.265,1.55);
  transform-style: preserve-3d;
  border-radius: 18px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  border-radius: 18px;
  overflow: hidden;
}

/* FRONT */
.flip-card-front img {
  width: 100%;
  height: 70%;
  object-fit: cover;
}

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}

.overlay h3 {
  color: #00c6ff;
  font-size: 2rem;
  font-weight: 800;
}

/* BACK */
.flip-card-back {
  background: linear-gradient(135deg, #001845, #0a2b5e);
  color: white;
  transform: rotateY(180deg);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.flip-card-back h3 {
  color: #00c6ff;
  margin-bottom: 1.5rem;
  text-align: center;
}

.flip-card-back ul {
  list-style: none;
  padding: 0;
}

.flip-card-inner {
  border: 3px solid rgba(255,255,255,0.9);
  border-radius: 20px;
  box-shadow:
    0 0 0 2px rgba(255,255,255,0.2),
    0 35px 80px rgba(0,0,0,0.4);
}

.flip-card-back li {
  margin: 1rem 0;
  padding-left: 1.8rem;
  position: relative;
  font-size: 1.05rem;
}

.flip-card-back li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #00c6ff;
  font-weight: bold;
}

.card-description {
    text-align: center;
    color: white;
    margin-top: 20px;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* VIDEO BACKGROUND */

header {
  position: relative;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
  overflow: hidden;
}

.video-background {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.video-background iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 177.77vh;
  height: 100vh;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

header::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 31, 58, 0.65);
  z-index: 1;
}

.header-content {
  position: relative;
  z-index: 2;
}

/* FULLSCREEN HERO */

.hero {
  position: relative;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: white;
}

.video-container {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Works for both video and img */
.video-container video,
.video-container img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    rgba(0, 15, 40, 0.12),
    rgba(0, 15, 40, 0.18)
  );
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 900px;
  transform: translateY(-25px); /* moves content up */
}

.hero-content h1 {
  font-size: clamp(1.7rem, 5vw, 3.2rem);
  font-weight: 700;
  text-align: left;
}

.hero-tagline {
  font-size: 1.8rem;
  margin: 1.5rem 0;
  color: #00c6ff;
}

/* ABOUT SECTION */

.about-section {
  padding: 120px 5%;
  background: #f8fbff;
}

.about-container {
  max-width: 100%;
  margin: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.about-text h2 {
  font-size: 3rem;
  margin-bottom: 2rem;
}

.about-lead {
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 1.5rem;
  color: #003366;
}

.about-text p {
  margin-bottom: 1.3rem;
  line-height: 1.8;
}

.about-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 50px 120px rgba(0,0,0,0.15);
  transition: transform 0.8s ease;
  height: 800px;
  width: 700px;
}

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

.about-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.stat-box {
  background: white;
  padding: 2rem;
  border-radius: 15px;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.stat-box h3 {
  font-size: 1.1rem;
  color: #0066ff;
  margin: 0;
}

.stat-box p {
  font-size: 0.95rem;
  margin: 0;
}

/* RESPONSIVE */

@media(max-width: 992px) {
  .about-container {
    grid-template-columns: 2fr;
  }

  .about-stats {
    flex-direction: column;
  }
}

body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background: #ffffff;
  color: #1f2d3d;
}

.section {
  padding: 80px 10%;
}

h2.section-title {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 60px;
  color: #1f2d3d;
}

/* ---------- SERVICES GRID ---------- */

.services-grid {
  display: grid;
  grid-template-columns: repeat(4 , 1fr);
  gap: 50px;
  text-align: center;
  max-width: 1200px;
  margin: 0 auto;
}

.service-card {
  cursor: pointer;
  transition: all 0.4s ease;
}

.service-card i {
  font-size: 50px;
  color: #1bb1d1;
  margin-bottom: 20px;
}

.service-card h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.service-card:hover {
  transform: translateY(-8px);
}

/* ---------- DETAILS PANEL ---------- */


.service-details h3 {
  margin-top: 0;
  color: #0a1f3a;
}

.service-details ul {
  padding-left: 20px;
  line-height: 1.8;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
/* ==============================
   75% PAGE STYLE SERVICE PANEL
================================ */

.service-panel {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.4s ease;
  z-index: 2000;
}

.service-panel.active {
  opacity: 1;
  visibility: visible;
}

.service-panel-content {
  width: 75%;
  max-width: 1100px;
  max-height: 85vh;
  overflow-y: auto;
  background: rgb(48, 197, 230);
  border-radius: 20px;
  padding: 60px;
  position: relative;
  animation: slideUp 0.5s ease;
  box-shadow: 0 40px 100px rgba(0,0,0,0.3);
}

@keyframes slideUp {
  from {
    transform: translateY(40px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.close-panel {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 32px;
  cursor: pointer;
  color: #0a1f3a;
}

.close-panel:hover {
  color: #0066ff;
}
/* Override homepage full-height section rule */
.hero,
.terms-section,
.section {
  min-height: auto ;
  height: auto ;
}

/* PRODUCT PAGE */

.product-hero {
  padding: 120px 10%;
  text-align: center;
  background: linear-gradient(135deg, #001845, #0a2b5e);
  color: white;
}

.product-hero h1 {
  font-size: 3.5rem;
}

.product-section {
  padding: 100px 10%;
}

.light-bg {
  background: #f8fbff;
}

.product-container {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 4rem;
  align-items: center;
}

.product-container.reverse {
  direction: rtl;
}

.product-container.reverse .product-text {
  direction: ltr;
}

.product-text h2 {
  font-size: 2.2rem;
  margin-bottom: 1.5rem;
  color: #070707;
}

.product-image img {
  width: 100%;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.15);
  transition: transform 0.6s ease;
}

.product-image img:hover {
  transform: scale(1.07);
}

@media(max-width: 992px){
  .product-container {
    grid-template-columns: 1fr;
  }
}

.footer{
    background:#3376a5;
    padding:40px 8%;
}

.footer-container{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    flex-wrap:wrap;
}

.footer-column h3{
    font-size:22px;
    font-weight:600;
    margin-bottom:20px;
}

.footer-column ul{
    list-style:none;
}

.footer-column ul li{
    margin-bottom:12px;
    font-size:16px;
}

.footer-column ul li a{
    text-decoration:none;
    color:#000;
    padding: 15px;
}

.footer-column ul li a:hover{
    color:#e53935;
}

.footer-right{
    max-width:350px;
}

.footer-logo{
    display:flex;
    align-items:center;
    margin-bottom:20px;
}

.footer-logo img{
    width:120px;
    height: 30px;
    margin-right:10px;
}

.footer-logo h2{
    font-size:16px;
    font-weight:500;
}

.footer-address{
    font-size:15px;
    line-height:1.6;
    margin-bottom:10px;
}

.footer-address span{
    color:#000000;
    font-weight:200;
}

.social-icons{
    margin-top:15px;
}

.social-icons a{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    width:40px;
    height:40px;
    background:#000;
    color:#fff;
    border-radius:50%;
    margin-right:10px;
    text-decoration:none;
    transition:0.3s;
}

.social-icons a:hover{
    background:#e53935;
}

.footer-bottom{
    background:#000;
    color:#fff;
    text-align:center;
    padding:30px;
    font-size:14px;
    bottom: 0%;
}
.hpc-wrapper {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap; /* makes it responsive */
}

.hpc-image {
  width: 500px;
  border-radius: 15px;
}

.hpc-content {
  flex: 1;
  min-width: 300px;
}

.modal-content {
  max-width: 1200px;
  margin: auto;
  border-radius: 25px;
  padding: 60px;
  overflow-x: hidden;
}

.service-wrapper {
  display: flex;
  align-items: center;
  gap: 70px;
  margin-bottom: 80px;
  animation: fadeUp 0.8s ease forwards;
}

.service-wrapper.reverse {
  flex-direction: row-reverse;
}

.service-image img {
  width: 520px;
  max-width: 100%;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.15);
  transition: transform 0.4s ease;
}

.service-image img:hover {
  transform: scale(1.03);
}

.service-content {
  flex: 1;
  min-width: 300px;
}

.service-content h2 {
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
  color: #1f2d3d;
}

.service-desc {
  font-size: 18px;
  margin-bottom: 25px;
  color: #555;
}

.service-content ul {
  padding-left: 20px;
}

.service-content li {
  margin-bottom: 12px;
  font-size: 18px;
  color: #000000;
}

@media (max-width: 992px) {
  .service-wrapper {
    flex-direction: column !important;
    text-align: center;
  }

  .service-content h2 {
    font-size: 34px;
  }

  .service-image img {
    width: 100%;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}



.pdf-container {
  max-width: 1000px;      /* controls total width */
  margin: 60px auto;
  display: flex;
  justify-content: center;
  gap: 20px;
}

  .pdf-button {
  width: 220px;          /* smaller width */
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  text-decoration: none;
  color: white;
  font-weight: bold;
  letter-spacing: 1px;
}

        .pdf-icon {
            width: 70px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            background: rgba(0,0,0,0.2);
        }

        .pdf-text {
            flex: 1;
            text-align: center;
        }

        .blue { background: #3498db; }
        .green { background: #2ecc71; }
        .red { background: #e74c3c; }
        .dark { background: #34495e; }

        .pdf-button:hover {
            opacity: 0.85;
        }

        /* Dropdown container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown menu */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #111;
    min-width: 220px;
    box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
    z-index: 1;
}

/* Dropdown links */
.dropdown-content a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Hover effect */
.dropdown-content a:hover {
    background-color: #444;
}

/* Show dropdown on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

#services > h1,
#services > h2 {
  color: rgb(255, 255, 255);
}

.services-grid{
  color: #fffcfc;
}

.blob{
    position:absolute;
    width:300px;
    height:300px;
    background:linear-gradient(45deg,#00c6ff,#0072ff);
    border-radius:50%;
    filter:blur(120px);
    opacity:0.5;
    animation:blobMove 12s infinite alternate;
}

.blob1{
    top:40%;
    left:-100px;
}

.blob2{
    top:20%;
    right:-100px;
}

@keyframes blobMove{
    from{
        transform:translateY(-40px) scale(1);
    }
    to{
        transform:translateY(40px) scale(1.2);
    }
}

.floating-icons{
    position:absolute;
    left:5%;
    top:50%;
    display:flex;
    flex-direction:column;
    gap:30px;
    font-size:30px;
    color:#5fa8ff;
}

.floating-icons i{
    animation:floatIcon 6s infinite ease-in-out;
}

@keyframes floatIcon{
    0%{ transform:translateY(0px);}
    50%{ transform:translateY(-15px);}
    100%{ transform:translateY(0px);}
}

.contact-form{
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.contact-form:hover{
    transform: perspective(800px) rotateX(4deg) rotateY(-4deg);
    box-shadow:0 30px 60px rgba(0,0,0,0.4);
}

button{
    position:relative;
    overflow:hidden;
}

button::before{
    content:"";
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:-100%;
    background:linear-gradient(120deg,transparent,rgba(255,255,255,0.5),transparent);
    transition:0.6s;
}

button:hover::before{
    left:100%;
}

#particles-js{
position:absolute;
width:100%;
height:100%;
z-index:-1;
}

/* CONTACT SECTION */

.contact-section{
position:relative;
overflow:hidden;
padding:120px 0;
}

/* PARTICLE BACKGROUND */

#particles-js{
position:absolute;
inset:0;
z-index:0;
}

/* CONTACT WRAPPER */

.contact-wrapper{
position:relative;
z-index:2;
}

/* TITLE */

.contact-title{
  font-size:3rem;
  margin-bottom:40px;
  display:inline-block;

  background: linear-gradient(90deg,#00c6ff,#0072ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* GLASS CONTACT FORM */

.contact-form{
max-width:600px;
margin:auto;
background:rgba(255,255,255,0.08);
border:1px solid rgba(255,255,255,0.2);
backdrop-filter:blur(20px);
padding:40px;
border-radius:20px;
box-shadow:0 30px 80px rgba(0,0,0,0.5);
transition:0.4s;
}

/* 3D HOVER */

.contact-form:hover{
transform:translateY(-10px) scale(1.02);
box-shadow:0 40px 120px rgba(0,102,255,0.6);
}

/* INPUTS */

.contact-form input,
.contact-form textarea{
width:100%;
padding:16px;
margin:14px 0;
border:none;
border-radius:10px;
background:rgba(255,255,255,0.9);
font-size:16px;
}

/* BUTTON */

.contact-btn{
margin-top:10px;
background:linear-gradient(90deg,#00c6ff,#0072ff);
color:white;
border:none;
padding:14px 30px;
border-radius:40px;
font-weight:600;
transition:0.4s;
}

.contact-btn:hover{
transform:translateY(-4px);
box-shadow:0 15px 40px rgba(0,102,255,0.6);
}



/* ================================
   SECTION GLOW EFFECT
================================ */

.dark-section::after{
content:"";
position:absolute;
width:600px;
height:600px;
background:radial-gradient(circle, rgba(0,198,255,0.25), transparent 70%);
top:30%;
left:50%;
transform:translate(-50%,-50%);
animation:pulseGlow 6s infinite alternate;
z-index:0;
}

@keyframes pulseGlow{
0%{
transform:translate(-50%,-50%) scale(0.8);
opacity:0.4;
}
100%{
transform:translate(-50%,-50%) scale(1.2);
opacity:0.8;
}
}


/* ================================
   ANIMATED CARD BORDER
================================ */

.flip-card-inner::after{
content:"";
position:absolute;
inset:-2px;
border-radius:20px;
background:linear-gradient(
90deg,
#00c6ff,
#0072ff,
#00c6ff
);
background-size:300% 300%;
animation:borderFlow 6s linear infinite;
z-index:-1;
}

@keyframes borderFlow{
0%{
background-position:0% 50%;
}
100%{
background-position:300% 50%;
}
}

/* ================================
   FLOATING LIGHT PARTICLES
================================ */

body::before{
content:"";
position:fixed;
inset:0;
background:
radial-gradient(circle at 20% 30%, rgba(0,198,255,0.3) 0, transparent 40%),
radial-gradient(circle at 80% 70%, rgba(0,102,255,0.3) 0, transparent 40%);
animation:lightMove 18s infinite alternate;
pointer-events:none;
z-index:-1;
}

@keyframes lightMove{
0%{
transform:translate(0,0);
}
100%{
transform:translate(80px,-60px);
}
}

/* ================================
   SERVICE CARD NEON HOVER
================================ */

.service-card{
position:relative;
}

.service-card::before{
content:"";
position:absolute;
inset:-3px;
border-radius:12px;
background:linear-gradient(90deg,#00c6ff,#0072ff,#00c6ff);
background-size:200%;
opacity:0;
transition:0.4s;
z-index:-1;
}

.service-card:hover::before{
opacity:1;
animation:neonFlow 4s linear infinite;
}

@keyframes neonFlow{
0%{background-position:0%}
100%{background-position:200%}
}
.section {
  background: rgb(87, 86, 86);
}

/* ================================
   MOBILE RESPONSIVE ADDITIONS
   Add this to your existing style.css
================================ */

/* TABLET (768px - 1024px) */
@media (max-width: 1024px) {
  .flip-card-container {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    height: auto;
  }

  .flip-card {
    height: 320px;
  }

  .product-content {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .product-images img {
    max-height: 500px;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-image img {
    height: 500px;
    width: 100%;
  }

  .service-wrapper {
    gap: 3rem;
  }

  .service-image img {
    width: 100%;
    max-width: 400px;
  }

  .service-content h2 {
    font-size: 36px;
  }

  .hero-content h1 {
    font-size: 2.2rem;
  }

  .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
}

/* MOBILE LANDSCAPE (768px) */
@media (max-width: 768px) {
  /* ===== NAVBAR ===== */
  .navbar {
    padding: 0;
  }

  .nav-inner {
    padding: 0 2%;
  }

  .nav-links {
    gap: 12px;
  }

  .nav-links a {
    font-size: 13px;
  }

  /* ===== HERO SECTION ===== */
  .hero {
    height: 60vh;
    min-height: 400px;
  }

  .hero-content h1 {
    font-size: 1.8rem;
    margin-bottom: 15px;
  }

  .hero-tagline {
    font-size: 1.3rem;
    margin: 1rem 0;
  }

  .subtext {
    font-size: 1rem;
  }

  .btn {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
  }

  /* ===== SECTIONS ===== */
  .section {
    padding: 50px 5%;
  }

  h2 {
    font-size: 2rem;
  }

  /* ===== PRODUCT SECTION ===== */
  .product-container {
    padding: 0 5% 60px;
  }

  .product-title {
    font-size: 2.2rem;
  }

  .product-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .product-images .frame {
    padding: 15px;
  }

  .product-images img {
    max-height: 400px;
  }

  .features {
    font-size: 15px;
  }

  .features li {
    margin-bottom: 15px;
  }

  .download-btn {
    padding: 15px 30px;
    font-size: 14px;
    gap: 10px;
  }

  /* ===== SPECS ===== */
  .spec-section {
    padding: 0 5%;
  }

  .spec-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .spec-card {
    padding: 25px;
  }

  table {
    font-size: 13px;
  }

  th, td {
    padding: 12px 0;
  }

  /* ===== ABOUT SECTION ===== */
  .about-section {
    padding: 60px 5%;
  }

  .about-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-text h2 {
    font-size: 2rem;
  }

  .about-lead {
    font-size: 1.1rem;
  }

  .about-image img {
    height: 350px;
    width: 100%;
  }

  .about-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .stat-box {
    padding: 1.5rem;
  }

  /* ===== GRID LAYOUTS ===== */
  .products-grid,
  .services-grid,
  .flip-card-container {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .flip-card-container {
    height: auto;
  }

  .flip-card {
    height: 350px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .feature-card {
    padding: 2rem;
  }

  /* ===== SERVICE CARDS ===== */
  .service-wrapper {
    flex-direction: column;
    gap: 2rem;
  }

  .service-wrapper.reverse {
    flex-direction: column;
  }

  .service-image img {
    width: 100%;
    max-width: 100%;
  }

  .service-content h2 {
    font-size: 2rem;
  }

  .service-content li {
    font-size: 15px;
  }

  /* ===== CONTACT FORM ===== */
  .contact-form {
    padding: 2rem;
    max-width: 100%;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 12px;
    margin: 10px 0;
  }

  .contact-btn {
    padding: 12px 25px;
  }

  /* ===== BREADCRUMB ===== */
  .breadcrumb {
    font-size: 12px;
    margin: 30px auto 15px;
  }

  /* ===== LOGOS ===== */
  .logos {
    gap: 30px;
    padding: 0 5%;
  }

  .logos img {
    height: 40px;
  }

  /* ===== FOOTER ===== */
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  /* ===== HCI/HPC SECTIONS ===== */
  .hero h1 {
    font-size: 2rem;
  }

  .hero p {
    font-size: 1rem;
    width: 90%;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .card {
    padding: 25px 20px;
  }

  .comparison-table {
    font-size: 13px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 12px;
  }

  /* ===== STATS ===== */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .stat h2 {
    font-size: 28px;
  }

  /* ===== TIMELINE ===== */
  .timeline-item {
    padding: 20px;
    margin-bottom: 15px;
  }

  /* ===== CTA SECTION ===== */
  .cta {
    padding: 60px 5%;
  }

  .cta h2 {
    font-size: 2rem;
  }

  .cta button {
    padding: 12px 30px;
    font-size: 14px;
  }

  /* ===== SPLIT SECTION ===== */
  .split {
    flex-direction: column;
    gap: 2rem;
    padding: 60px 5%;
  }

  .split img {
    width: 100%;
    max-width: 100%;
  }

  .reverse {
    flex-direction: column;
  }
}

/* MOBILE SMALL (480px - 768px) */
@media (max-width: 480px) {
  /* ===== TYPOGRAPHY ===== */
  h1 {
    font-size: 1.5rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.1rem !important;
  }

  p {
    font-size: 0.95rem;
  }

  /* ===== NAVBAR ===== */
  .navbar {
    height: 60px;
  }

  .logo img {
    height: 30px;
  }

  .nav-links {
    position: absolute;
    top: 60px;
    width: 100%;
    flex-direction: column;
    gap: 0;
    padding: 10px 0;
  }

  .nav-links a {
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  .menu-toggle {
    display: block !important;
  }

  /* ===== HERO ===== */
  .hero {
    height: 50vh;
    min-height: 350px;
  }

  .hero-content {
    padding: 20px;
  }

  .hero-content h1 {
    font-size: 1.5rem;
    margin-bottom: 10px;
  }

  .hero-tagline {
    font-size: 1.1rem;
    margin: 0.8rem 0;
  }

  .subtext {
    font-size: 0.95rem;
    margin-bottom: 1.2rem;
  }

  /* ===== SECTIONS ===== */
  .section-content {
    padding: 0 4%;
  }

  .section {
    padding: 40px 4%;
  }

  /* ===== PRODUCT PAGE ===== */
  .product-container {
    padding: 0 4% 40px;
  }

  .product-title {
    font-size: 1.8rem;
  }

  .breadcrumb {
    font-size: 11px;
    margin: 20px auto 10px;
    padding: 0 4%;
  }

  .features {
    font-size: 14px;
  }

  .features li {
    margin-bottom: 12px;
    padding-left: 8px;
  }

  .features li::before {
    font-size: 18px;
  }

  .download-btn {
    padding: 12px 24px;
    font-size: 13px;
    margin-top: 30px;
  }

  /* ===== SPECS ===== */
  .spec-section {
    padding: 0 4%;
    margin: 80px auto 0;
  }

  .spec-section h2 {
    font-size: 1.8rem;
  }

  .spec-card {
    padding: 20px;
  }

  table {
    font-size: 12px;
  }

  th, td {
    padding: 10px 0;
  }

  /* ===== ABOUT ===== */
  .about-section {
    padding: 40px 4%;
  }

  .about-text h2 {
    font-size: 1.8rem;
    margin-bottom: 1.5rem;
  }

  .about-lead {
    font-size: 1rem;
  }

  .about-text p {
    font-size: 0.95rem;
    margin-bottom: 1rem;
  }

  .about-image img {
    height: 280px;
  }

  .about-stats {
    flex-direction: column;
    gap: 0.8rem;
  }

  .stat-box {
    padding: 1.2rem;
  }

  .stat-box h3 {
    font-size: 1rem;
  }

  .stat-box p {
    font-size: 0.85rem;
  }

  /* ===== GRIDS ===== */
  .products-grid,
  .services-grid,
  .flip-card-container,
  .feature-grid,
  .grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .flip-card {
    height: 300px;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .feature-card i {
    font-size: 35px;
  }

  /* ===== CARDS ===== */
  .card {
    padding: 20px 15px;
  }

  .card i {
    font-size: 30px;
  }

  /* ===== SERVICE ===== */
  .service-card {
    padding: 1.5rem;
  }

  .service-card i {
    font-size: 40px;
  }

  .service-card h3 {
    font-size: 1.1rem;
  }

  .service-wrapper {
    gap: 1.5rem;
  }

  .service-content h2 {
    font-size: 1.6rem;
  }

  .service-desc {
    font-size: 15px;
  }

  .service-content li {
    font-size: 14px;
  }

  /* ===== CONTACT ===== */
  .contact-title {
    font-size: 2rem;
  }

  .contact-form {
    padding: 1.5rem;
    max-width: 100%;
  }

  .contact-form input,
  .contact-form textarea {
    padding: 10px;
    font-size: 15px;
  }

  .contact-form textarea {
    min-height: 100px;
  }

  .contact-btn {
    padding: 10px 20px;
    font-size: 13px;
  }

  /* ===== LOGOS ===== */
  .logos {
    gap: 15px;
    padding: 0 4%;
    margin-top: 50px;
  }

  .logos img {
    height: 35px;
  }

  /* ===== FOOTER ===== */
  .footer {
    padding: 40px 4%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .footer-col h3 {
    font-size: 16px;
  }

  .footer-col a {
    font-size: 13px;
  }

  .footer-brand img {
    width: 150px;
  }

  .footer-bottom {
    padding: 20px;
    font-size: 12px;
  }

  /* ===== STATS ===== */
  .stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 60px 4%;
  }

  .stat h2 {
    font-size: 24px;
  }

  .stat p {
    font-size: 0.9rem;
  }

  /* ===== TIMELINE ===== */
  .timeline {
    padding: 60px 4%;
  }

  .timeline-item {
    padding: 15px;
    margin-bottom: 12px;
    border-left-width: 3px;
  }

  .timeline-item h3 {
    margin-bottom: 8px;
  }

  /* ===== CTA ===== */
  .cta {
    padding: 50px 4%;
  }

  .cta h2 {
    font-size: 1.6rem;
    margin-bottom: 15px;
  }

  .cta button {
    padding: 10px 25px;
    font-size: 13px;
  }

  /* ===== SPLIT ===== */
  .split {
    padding: 50px 4%;
    gap: 1.5rem;
  }

  /* ===== COMPARISON TABLE ===== */
  .comparison-table {
    font-size: 12px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 10px;
  }

  /* ===== HPC/HCI SPECIFIC ===== */
  .hero h1 {
    font-size: 1.6rem;
  }

  .hero p {
    font-size: 0.95rem;
    width: 95%;
  }

  .usecase-grid,
  .programs-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .use,
  .program-card {
    padding: 1.5rem;
  }

  .use {
    padding: 1.2rem;
    font-size: 14px;
  }

  .program-card h3 {
    font-size: 1rem;
  }

  .program-card p {
    font-size: 13px;
  }

  .program-card ul {
    font-size: 13px;
  }

  .program-card li {
    margin-bottom: 5px;
  }

  /* ===== PANEL ===== */
  .service-panel-content {
    width: 90%;
    padding: 30px 20px;
    max-height: 80vh;
  }

  .close-panel {
    font-size: 28px;
    top: 15px;
    right: 15px;
  }
}

/* EXTRA SMALL (< 360px) */
@media (max-width: 360px) {
  .product-title,
  .about-text h2,
  .service-content h2 {
    font-size: 1.5rem;
  }

  .about-image img,
  .service-image img {
    height: 200px;
  }

  .flip-card {
    height: 250px;
  }

  .logos img {
    height: 30px;
  }

  .stats {
    grid-template-columns: 1fr;
  }

  .download-btn {
    padding: 10px 20px;
    font-size: 12px;
  }

  .contact-form {
    padding: 1rem;
  }

  .section {
    padding: 30px 3%;
  }
}

/* ===== UTILITY CLASSES ===== */
@media (max-width: 768px) {
  .hide-mobile {
    display: none !important;
  }
}

@media (min-width: 769px) {
  .show-mobile {
    display: none !important;
  }
}

 
    :root {
      --nav-height: 70px;
    }

    .navbar {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: var(--nav-height);
      background: #0a0f1c;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(12px);
      z-index: 9999;
      display: flex;
      align-items: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      padding: 0 2%;
    }

    .nav-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .logo img {
      height: 40px;
      width: auto;
    }

    .nav-links {
      list-style: none;
      display: flex;
      gap: 18px;
      margin: 0;
      padding: 0;
      align-items: center;
      flex-wrap: nowrap;
    }

    .nav-links a {
      color: white;
      text-decoration: none;
      font-weight: 500;
      font-size: 14px;
      white-space: nowrap;
      position: relative;
      transition: color 0.3s;
    }

    .nav-links a:hover {
      color: #00c6ff;
    }

    .nav-links a::after {
      content: "";
      position: absolute;
      bottom: -6px;
      left: 0;
      width: 0;
      height: 2px;
      background: #00c6ff;
      transition: 0.3s;
    }

    .nav-links a:hover::after {
      width: 100%;
    }

    .dropdown {
      position: relative;
    }

    .dropdown-menu {
      position: absolute;
      top: 100%;
      right: 0;
      left: auto;
      background: #0a0f1c;
      border-radius: 8px;
      padding: 12px 0;
      min-width: 230px;
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
      opacity: 0;
      visibility: hidden;
      transform: translateY(12px);
      transition: all 0.3s ease;
      z-index: 10000;
      overflow: visible;
    }

    .dropdown:hover .dropdown-menu {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .dropdown-menu a {
      display: block;
      padding: 12px 24px;
      color: #ddd;
      text-decoration: none;
      white-space: nowrap;
      transition: all 0.3s;
    }

    .dropdown-menu a:hover {
      color: #00c6ff;
      background: rgba(255, 255, 255, 0.08);
    }

    .menu-toggle {
      display: none;
      font-size: 28px;
      color: white;
      cursor: pointer;
      background: none;
      border: none;
      padding: 5px 10px;
      z-index: 10001;
    }

    .menu-toggle:focus {
      outline: none;
    }

    @media (max-width: 1100px) {
      .nav-links {
        position: fixed;
        top: var(--nav-height);
        right: 0;
        background: #0a0f1c;
        width: 100%;
        max-width: 300px;
        flex-direction: column;
        padding: 20px;
        gap: 0;
        display: none;
        box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.6);
        border-radius: 0 0 0 12px;
      }

      .nav-links.active {
        display: flex;
      }

      .nav-links a {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        font-size: 15px;
      }

      .nav-links a::after {
        display: none;
      }

      .dropdown-menu {
        position: static;
        opacity: 0;
        visibility: hidden;
        transform: translateX(-20px);
        background: rgba(255, 255, 255, 0.05);
        box-shadow: none;
        max-height: 0;
        overflow: hidden;
        transition: all 0.3s ease;
        margin: 10px 0;
      }

      .dropdown.active .dropdown-menu {
        opacity: 1;
        visibility: visible;
        transform: translateX(0);
        max-height: 500px;
      }

      .dropdown-menu a {
        padding: 10px 20px;
        font-size: 13px;
        border: none;
      }

      .menu-toggle {
        display: block;
      }

      .navbar {
        padding: 0 1%;
      }
    }

    @media (max-width: 480px) {
      .nav-links {
        max-width: 100%;
      }

      .logo img {
        height: 32px;
      }

      .menu-toggle {
        font-size: 24px;
      }
    }
 

    
.footer{

background:linear-gradient(120deg,#020617,#0f172a,#020617);

background-size:300% 300%;

animation:footerGradient 14s ease infinite;

position:relative;

padding:90px 10% 30px;

overflow:hidden;

color:white;

}


/* ========================= */
/* SOFT LIGHT SWEEP */
/* ========================= */

.footer::before{

content:"";

position:absolute;

top:0;

left:-100%;

width:60%;

height:100%;

background:linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.05),
transparent
);

animation:footerLight 10s infinite;

}


/* ========================= */
/* FOOTER GRID */
/* ========================= */

.footer-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(220px,1fr));

gap:50px;

position:relative;

z-index:2;

}


/* ========================= */
/* COLUMN */
/* ========================= */

.footer-col{

display:flex;

flex-direction:column;

gap:12px;

}


/* ========================= */
/* COLUMN TITLES */
/* ========================= */

.footer-col h3{

color:#38bdf8;

margin-bottom:15px;

font-size:18px;

}


/* ========================= */
/* LINKS */
/* ========================= */

.footer-col a{

text-decoration:none;

color:#cbd5f5;

font-size:14px;

transition:0.3s;

}

.footer-col a:hover{

color:#38bdf8;

transform:translateX(4px);

}


/* ========================= */
/* BRAND SECTION */
/* ========================= */

.footer-brand img{

width:180px;

margin-bottom:15px;

}

.footer-brand p{

color:#94a3b8;

font-size:14px;

line-height:1.6;

margin-bottom:15px;

}


/* ========================= */
/* CONTACT */
/* ========================= */

.footer-contact p{

font-size:14px;

color:#cbd5f5;

margin-bottom:6px;

}


/* ========================= */
/* SOCIAL ICONS */
/* ========================= */

.footer-social{

margin-top:15px;

}

.footer-social a{

color:white;

font-size:18px;

margin-right:12px;

transition:0.3s;

}

.footer-social a:hover{

color:#38bdf8;

transform:scale(1.2);

}


/* ========================= */
/* FOOTER BOTTOM */
/* ========================= */

.footer-bottom{

margin-top:60px;

padding-top:20px;

border-top:1px solid rgba(255,255,255,0.08);

text-align:center;

font-size:13px;

color:#94a3b8;

position:relative;

z-index:2;

}


/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes footerGradient{

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

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

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

}

@keyframes footerLight{

0%{left:-100%}

100%{left:120%}

}