/* =====================================================
   GULF INDIA TALENT
   GLOBAL ENTERPRISE DESIGN SYSTEM
===================================================== */

:root {

   --primary: #0A84FF;
   --secondary: #001B44;
   --accent: #00D4FF;
   --success: #22C55E;

   --bg: #020817;
   --bg2: #071225;
   --bg3: #0c1b35;

   --text: #ffffff;
   --text-muted: #b9c7db;

   --border: rgba(255, 255, 255, 0.08);

   --glass: rgba(255, 255, 255, 0.04);

   --shadow:
      0 10px 40px rgba(0, 132, 255, .20);

   --transition: .35s ease;

}

/* =====================================================
   RESET
===================================================== */

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

html {
   scroll-behavior: smooth;
}

body {

   font-family: 'Inter', sans-serif;
   background: var(--bg);
   color: var(--text);

   overflow-x: hidden;

}

/* =====================================================
   CUSTOM SCROLLBAR
===================================================== */

::-webkit-scrollbar {
   width: 10px;
}

::-webkit-scrollbar-track {
   background: #04101f;
}

::-webkit-scrollbar-thumb {
   background: var(--primary);
   border-radius: 50px;
}

/* =====================================================
   PRELOADER
===================================================== */

#preloader {

   position: fixed;
   top: 0;
   left: 0;

   width: 100%;
   height: 100%;

   background: #020817;

   z-index: 99999;

   display: flex;
   justify-content: center;
   align-items: center;

}

.enterprise-loader img {
   width: 150px;
   animation: pulseLogo 2s infinite;
}

@keyframes pulseLogo {
   0% {
      transform: scale(.95);
   }

   50% {
      transform: scale(1.05);
   }

   100% {
      transform: scale(.95);
   }
}

.loader {

   width: 70px;
   height: 70px;

   border: 5px solid rgba(255, 255, 255, .1);

   border-top: 5px solid var(--primary);

   border-radius: 50%;

   animation: spin 1s linear infinite;

}

@keyframes spin {

   100% {
      transform: rotate(360deg);
   }

}

/* =====================================================
   NAVBAR
===================================================== */

.custom-navbar {

   background: rgba(2, 8, 23, .80);

   backdrop-filter: blur(20px);

   border-bottom: 1px solid rgba(255, 255, 255, .05);

   transition: all .4s ease;

}

.logo {

   height: 55px;
   margin-right: 12px;

}

.brand-text {

   font-weight: 700;
   font-size: 1rem;

}

.nav-link {

   color: white !important;

   font-weight: 500;

   margin-left: 12px;

   transition: var(--transition);

}

.nav-link:hover {

   color: var(--accent) !important;

}

/* =====================================================
   HERO SECTION
===================================================== */

.hero-section {

   position: relative;

   background:
      linear-gradient(135deg,
         rgba(2, 8, 23, .98),
         rgba(0, 27, 68, .95)),

      url('../images/hero-banner.webp');

   background-size: cover;
   background-position: center;

}

.hero-overlay {

   position: absolute;

   width: 100%;
   height: 100%;

   background:

      radial-gradient(circle at center,
         rgba(10, 132, 255, .25),
         transparent 60%);

}

.hero-content {

   position: relative;
   z-index: 2;

}

.hero-badge {

   display: inline-block;

   padding: 10px 20px;

   background: rgba(10, 132, 255, .15);

   border: 1px solid rgba(10, 132, 255, .25);

   border-radius: 50px;

   font-size: .85rem;
   font-weight: 600;

   margin-bottom: 20px;

   color: var(--accent);

}

.hero-content h1 {

   font-size: 4rem;
   font-weight: 900;

   line-height: 1.1;

   margin-bottom: 25px;

}

.hero-content h1 span {

   display: block;

   color: var(--primary);

}

.hero-content p {

   font-size: 1.15rem;

   color: var(--text-muted);

   max-width: 700px;

   line-height: 1.8;

   margin-bottom: 35px;

}

.hero-buttons {

   display: flex;
   gap: 15px;

   margin-bottom: 40px;

}

.hero-image {

   animation: floatImage 5s ease-in-out infinite;

   filter: drop-shadow(0 0 30px rgba(0, 132, 255, .4));

}

@keyframes floatImage {

   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-20px);
   }

   100% {
      transform: translateY(0px);
   }

}

/* =====================================================
   HERO STATS
===================================================== */

.hero-stats {

   display: flex;
   gap: 20px;

   flex-wrap: wrap;

}

.stat-box {

   padding: 20px;

   background: var(--glass);

   border: 1px solid var(--border);

   backdrop-filter: blur(15px);

   border-radius: 16px;

   min-width: 130px;

   text-align: center;

}

.stat-box h3 {

   font-size: 1.8rem;

   font-weight: 800;

   color: var(--primary);

   margin-bottom: 5px;

}

.stat-box p {

   margin: 0;
   font-size: .9rem;

}

/* =====================================================
   GLOBAL SECTION
===================================================== */

.section-padding {

   padding: 120px 0;

}

.section-header {

   margin-bottom: 70px;

}

.section-header h2 {

   font-size: 3rem;

   font-weight: 800;

   margin-bottom: 15px;

}

.section-header p {

   max-width: 700px;

   margin: auto;

   color: var(--text-muted);

}

/* =====================================================
   SERVICE CARDS
===================================================== */

.service-card {

   background:
      linear-gradient(145deg,
         rgba(255, 255, 255, .04),
         rgba(255, 255, 255, .02));

   border: 1px solid var(--border);

   padding: 40px 30px;

   border-radius: 24px;

   transition: .4s;

   height: 100%;

   position: relative;

   overflow: hidden;

}

.service-card::before {

   content: '';

   position: absolute;

   top: -100%;
   left: 0;

   width: 100%;
   height: 100%;

   background:
      linear-gradient(transparent,
         rgba(0, 212, 255, .08),
         transparent);

   transition: .5s;

}

.service-card:hover::before {

   top: 100%;

}

.service-card:hover {

   transform: translateY(-10px);

   box-shadow: var(--shadow);

   border-color: rgba(10, 132, 255, .25);

}

.service-card i {

   font-size: 3rem;

   color: var(--primary);

   margin-bottom: 20px;

}

.service-card h4 {

   font-weight: 700;

   margin-bottom: 15px;

}

.service-card p {

   color: var(--text-muted);

   line-height: 1.8;

}

/* =====================================================
   WHY US
===================================================== */

.why-us {

   padding: 120px 0;

   background:
      linear-gradient(180deg,
         #04101f,
         #071225);

}

.why-us h2 {

   font-size: 3rem;

   font-weight: 800;

   margin-bottom: 25px;

}

.why-us p {

   color: var(--text-muted);

   line-height: 1.9;

}

.feature-list {

   list-style: none;

   padding-left: 0;

   margin-top: 30px;

}

.feature-list li {

   padding: 14px 0;

   border-bottom:
      1px solid rgba(255, 255, 255, .05);

}

.feature-list li::before {

   content: "✓ ";

   color: var(--success);

   font-weight: bold;

   margin-right: 10px;

}

.glass-card {

   background: rgba(255, 255, 255, .04);

   backdrop-filter: blur(20px);

   padding: 50px;

   border-radius: 24px;

   border: 1px solid var(--border);

   box-shadow: var(--shadow);

}

/* =====================================================
   TECHNOLOGY SECTION
===================================================== */

.technology-section {

   background:
      linear-gradient(180deg,
         #020817,
         #071225);

   position: relative;

}

.tech-card {

   background:
      rgba(255, 255, 255, .03);

   border: 1px solid var(--border);

   border-radius: 20px;

   padding: 40px 20px;

   text-align: center;

   transition: .4s;

   height: 100%;

   backdrop-filter: blur(12px);

}

.tech-card:hover {

   transform: translateY(-10px);

   box-shadow:
      0 20px 50px rgba(10, 132, 255, .25);

   border-color:
      rgba(10, 132, 255, .35);

}

.tech-card i {

   font-size: 3rem;

   margin-bottom: 20px;

   color: var(--accent);

}

.tech-card h5 {

   font-weight: 700;

   margin: 0;

}

/* =====================================================
   TRAINING SECTION
===================================================== */

.training-section {

   padding: 120px 0;

   background:
      linear-gradient(135deg,
         #071225,
         #020817);

}

.training-section h2 {

   font-size: 3rem;

   font-weight: 800;

   margin-bottom: 25px;

}

.training-section p {

   color: var(--text-muted);

   line-height: 1.9;

   margin-bottom: 35px;

}

.training-image {

   max-width: 500px;

   animation:
      floatImage 6s ease-in-out infinite;

}

.training-grid {

   display: grid;

   grid-template-columns:
      repeat(2, 1fr);

   gap: 20px;

   margin-top: 30px;

}

.training-item {

   background:
      rgba(255, 255, 255, .03);

   border:
      1px solid var(--border);

   padding: 20px;

   border-radius: 16px;

   display: flex;

   align-items: center;

   gap: 15px;

   transition: .35s;

}

.training-item:hover {

   transform: translateY(-6px);

   border-color:
      rgba(0, 212, 255, .4);

   box-shadow:
      0 15px 35px rgba(0, 212, 255, .15);

}

.training-item i {

   font-size: 1.4rem;

   color: var(--primary);

}

/* =====================================================
   INDUSTRIES
===================================================== */

.industries-section {

   background: #020817;

}

.industry-card {

   background:
      linear-gradient(145deg,
         rgba(255, 255, 255, .03),
         rgba(255, 255, 255, .02));

   padding: 35px 25px;

   text-align: center;

   border-radius: 20px;

   border: 1px solid var(--border);

   transition: .4s;

   height: 100%;

}

.industry-card:hover {

   transform: translateY(-10px);

   box-shadow:
      0 15px 40px rgba(10, 132, 255, .18);

}

.industry-card i {

   font-size: 2.5rem;

   color: var(--primary);

   margin-bottom: 15px;

}

.industry-card h5 {

   margin: 0;

   font-weight: 700;

}

/* =====================================================
   GCC ROADMAP
===================================================== */

.gcc-section {

   padding: 120px 0;

   background:
      linear-gradient(180deg,
         #071225,
         #001B44);

}

.gcc-section h2 {

   font-size: 3rem;

   font-weight: 800;

   margin-bottom: 25px;

}

.gcc-section p {

   line-height: 1.9;

   color: var(--text-muted);

}

.roadmap-card {

   background:
      rgba(255, 255, 255, .04);

   padding: 40px;

   border-radius: 24px;

   border: 1px solid var(--border);

   backdrop-filter: blur(20px);

}

.roadmap-item {

   padding: 20px;

   margin-bottom: 15px;

   background:
      rgba(10, 132, 255, .08);

   border-left:
      4px solid var(--primary);

   border-radius: 10px;

   font-weight: 600;

   transition: .3s;

}

.roadmap-item:hover {

   transform: translateX(10px);

}

/* =====================================================
   CTA SECTION
===================================================== */

.cta-section {

   padding: 120px 0;

   background:
      linear-gradient(135deg,
         #0A84FF,
         #001B44);

   position: relative;

   overflow: hidden;

}

.cta-section::before {

   content: '';

   position: absolute;

   width: 600px;
   height: 600px;

   background:
      rgba(255, 255, 255, .05);

   border-radius: 50%;

   top: -250px;
   right: -250px;

}

.cta-section h2 {

   font-size: 3.5rem;

   font-weight: 900;

   margin-bottom: 20px;

}

.cta-section p {

   font-size: 1.1rem;

   max-width: 700px;

   margin: auto;

   opacity: .9;

}

/* =====================================================
   BUTTONS
===================================================== */

.btn-primary {

   background: var(--primary);

   border: none;

   padding: 14px 32px;

   font-weight: 600;

   border-radius: 12px;

   transition: .35s;

}

.btn-primary:hover {

   transform: translateY(-3px);

   background: #2895ff;

   box-shadow:
      0 15px 35px rgba(10, 132, 255, .4);

}

.btn-outline-light {

   padding: 14px 32px;

   border-radius: 12px;

}

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

.footer {

   background: #010611;

   padding: 90px 0 30px;

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

}

.footer h4,
.footer h5 {

   margin-bottom: 20px;

   font-weight: 700;

}

.footer p {

   color: var(--text-muted);

   line-height: 1.8;

}

.footer-links {

   list-style: none;

   padding-left: 0;

}

.footer-links li {

   margin-bottom: 12px;

}

.footer-links a {

   color: var(--text-muted);

   text-decoration: none;

   transition: .3s;

}

.footer-links a:hover {

   color: var(--primary);

}

.social-icons {

   display: flex;

   gap: 15px;

   margin-top: 20px;

}

.social-icons a {

   width: 45px;
   height: 45px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 50%;

   background:
      rgba(255, 255, 255, .05);

   color: white;

   transition: .35s;

   text-decoration: none;

}

.social-icons a:hover {

   background: var(--primary);

   transform: translateY(-5px);

}

/* =====================================================
   GLOW EFFECTS
===================================================== */

.glow-blue {

   box-shadow:
      0 0 20px rgba(10, 132, 255, .4),
      0 0 50px rgba(10, 132, 255, .2);

}

.glow-cyan {

   box-shadow:
      0 0 20px rgba(0, 212, 255, .4),
      0 0 50px rgba(0, 212, 255, .2);

}

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

.fade-up {

   opacity: 0;

   transform: translateY(40px);

   transition: all .8s ease;

}

.fade-up.active {

   opacity: 1;

   transform: translateY(0);

}

/* =====================================================
   NAVBAR SCROLLED
===================================================== */

.navbar-scrolled {

   background:
      rgba(1, 6, 17, .95) !important;

   backdrop-filter:
      blur(30px);

   box-shadow:
      0 5px 25px rgba(0, 0, 0, .3);

}

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

@media(max-width:991px) {

   .hero-content {

      text-align: center;

   }

   .hero-content h1 {

      font-size: 3rem;

   }

   .hero-buttons {

      justify-content: center;

      flex-wrap: wrap;

   }

   .hero-stats {

      justify-content: center;

   }

   .section-header h2 {

      font-size: 2.2rem;

   }

   .why-us h2,
   .training-section h2,
   .gcc-section h2 {

      font-size: 2.2rem;

   }

   .cta-section h2 {

      font-size: 2.5rem;

   }

   .training-grid {

      grid-template-columns: 1fr;

   }

   .logo {

      height: 45px;

   }

}

/* =====================================================
   SMALL DEVICES
===================================================== */

@media(max-width:768px) {

   .hero-section {

      padding-top: 100px;

   }

   .hero-content h1 {

      font-size: 2.3rem;

   }

   .hero-content p {

      font-size: 1rem;

   }

   .stat-box {

      width: 100%;

   }

   .section-padding {

      padding: 80px 0;

   }

   .training-section,
   .gcc-section,
   .why-us {

      padding: 80px 0;

   }

   .cta-section {

      padding: 80px 0;

   }

   .cta-section h2 {

      font-size: 2rem;

   }

   .footer {

      text-align: center;

   }

   .social-icons {

      justify-content: center;

   }

}

/* =====================================================
   EXTRA SMALL
===================================================== */

@media(max-width:576px) {

   .hero-content h1 {

      font-size: 2rem;

   }

   .hero-badge {

      font-size: .75rem;

   }

   .btn-lg {

      width: 100%;

      margin-bottom: 10px;

   }

   .brand-text {

      display: none;

   }

}

/* =====================================================
   PREMIUM ANIMATED BACKGROUND
===================================================== */

body::before {

   content: '';

   position: fixed;

   top: 0;
   left: 0;

   width: 100%;
   height: 100%;

   pointer-events: none;

   background:
      radial-gradient(circle at 20% 20%,
         rgba(10, 132, 255, .06),
         transparent 25%),
      radial-gradient(circle at 80% 30%,
         rgba(0, 212, 255, .05),
         transparent 25%),
      radial-gradient(circle at 50% 90%,
         rgba(34, 197, 94, .03),
         transparent 25%);

   z-index: -1;

}

/* // Optional: Add a glowing cursor effect */
.cursor-glow {

   position: fixed;

   width: 300px;
   height: 300px;

   border-radius: 50%;

   background:
      radial-gradient(circle,
         rgba(10, 132, 255, .18),
         transparent 70%);

   pointer-events: none;

   z-index: 0;

   transform: translate(-50%, -50%);

}

.floating-icon {

   position: absolute;

   font-size: 40px;

   color: rgba(255, 255, 255, .12);

   animation: floatTech 6s infinite ease-in-out;

}

.icon1 {
   top: 15%;
   left: 10%;
}

.icon2 {
   top: 20%;
   right: 15%;
}

.icon3 {
   bottom: 20%;
   left: 20%;
}

.icon4 {
   bottom: 15%;
   right: 10%;
}

@keyframes floatTech {

   0%,
   100% {
      transform: translateY(0);
   }

   50% {
      transform: translateY(-20px);
   }

}


.hero-tech {

   position: relative;

   width: 100%;
   height: 650px;

}

.tech-icon {

   position: absolute;

   width: 72px;
   height: 72px;

   display: flex;
   align-items: center;
   justify-content: center;

   border-radius: 20px;

   font-size: 32px;

   color: #0A84FF;

   background: rgba(255, 255, 255, .05);

   border: 1px solid rgba(255, 255, 255, .08);

   backdrop-filter: blur(20px);

   box-shadow:
      0 0 30px rgba(10, 132, 255, .15);

   animation: floating 6s ease-in-out infinite;

   transition: .4s;

}

.tech-icon:hover {

   transform: scale(1.2);

   box-shadow:
      0 0 50px rgba(10, 132, 255, .45);

}

.icon-react{top:80px;left:120px;}
.icon-java{top:70px;right:90px;}
.icon-html{top:170px;left:30px;}
.icon-css{top:240px;right:150px;}
.icon-js{top:310px;left:180px;}
.icon-node{top:390px;right:40px;}
.icon-python{top:480px;left:70px;}
.icon-linux{top:530px;right:170px;}

.icon-docker{top:120px;left:250px;}
.icon-github{top:260px;right:260px;}

.icon-cloud{top:70px;left:350px;}
.icon-server{top:200px;right:30px;}

.icon-network{top:420px;left:320px;}
.icon-lock{top:350px;right:120px;}
.icon-code{top:510px;left:250px;}
.icon-mobile{top:550px;right:60px;}