/* =================Infinity Draft Tech Section================ */
         .infinity-draft-tech {
            position: relative;
            overflow: hidden;
            background-color: #000 !important;
         }

         .infinity-draft-tech__content {
            color: #fff;
         }

         .infinity-draft-tech__content h2 {
            font-size: 42px;
            line-height: 1.2;
         }

         .infinity-draft-tech__content p {
            color: rgba(255, 255, 255, 0.9);
            font-size: 18px;
            line-height: 1.7;
         }

         .infinity-draft-highlights {
            list-style: none;
            padding: 0;
            margin: 0;
         }

         .infinity-draft-highlights li {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            color: rgba(255, 255, 255, 0.9);
            font-size: 16px;
            line-height: 1.6;
         }

         .infinity-draft-highlights li i {
            color: #0080FF;
            font-size: 18px;
            margin-top: 4px;
            flex-shrink: 0;
         }

         .infinity-draft-highlights li strong {
            color: #fff;
            font-weight: 600;
         }

         .infinity-draft-tech__video {
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 8px 32px rgba(0, 128, 255, 0.3);
         }

         .infinity-draft-tech__video video {
            width: 100%;
            height: auto;
            display: block;
         }

         @media (max-width: 991px) {
            .infinity-draft-tech__content {
               margin-bottom: 40px;
            }

            .infinity-draft-tech__content h2 {
               font-size: 32px;
            }
         }

         @media (max-width: 767px) {
            .infinity-draft-tech__content h2 {
               font-size: 28px;
            }

            .infinity-draft-tech__content p {
               font-size: 16px;
            }

            .infinity-draft-highlights li {
               font-size: 15px;
            }
         }
/* =================end Infinity Draft Tech================ */

/* =================about================ */
         .work {
            position: relative;
            overflow: hidden;
         }

         .bg-video {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 1;
         }

         .bg-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.55);
            z-index: 2;
         }

         /* Content should be above video */
         .work .container,
         .work .row,
         .work .work__content {
            position: relative;
            z-index: 3;
         }

         @media (max-width: 767px) {
            .bg-video {
               display: none;
            }
            .about-margin{
                   background: linear-gradient(179deg, #000920, transparent);
                  padding: 20px;
            }
              .missions {
    margin-left: 40px;
}
         }
         @media (max-width: 991px) {
    .bg-video {
        display: none;
    }
     .about-margin{
                   background: linear-gradient(179deg, #000920, transparent);
                  padding: 20px;
            }
    .missions {
    margin-left: 90px;
}
}
         /* end-====================== */
         /* framework========================= */
          
         .core-framework-row {
            display: flex;
            justify-content: space-between;
            align-items: stretch;
            gap: 20px;
            border: 3px solid rgba(255, 255, 255, 0.15);
            padding: 20px;
            border-radius: 12px;
            backdrop-filter: blur(6px);
         }

         .core-box {
            flex: 1;
            padding: 20px;
            border-right: 3px solid rgba(255, 255, 255, 0.2);
         }

         .core-box:last-child {
            border-right: none;
         }

         /* 🔢 Numbers Above H6 */
         .core-number {
            display: block;
            color: #ffffff;
            font-size: 22px;
            font-weight: 700;
            margin-bottom: 8px;
            opacity: 0.9;
         }

         /* Headings */
         .core-box h6 {
            background: linear-gradient(90deg, #0080FF -0.51%, #EDF5FF 80%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            font-weight: 600;
            font-size: 17px;
            line-height: 22px;
         }

         /* Paragraphs */
         .core-box p {
            color: #fff;
            opacity: 0.85;
            font-size: 15px;
            line-height: 1.55;
            /* 🔥 better readability */
            margin: 0;
         }

         /* 🔥 Mobile Responsive */
         @media (max-width: 768px) {
            .core-framework-row {
               flex-direction: column;
               padding: 10px;
            }

            .core-box {
               border-right: none;
               border-bottom: 1px solid rgba(255, 255, 255, 0.2);
               padding: 15px 10px;
            }

            .core-box:last-child {
               border-bottom: none;
            }
         }
      /* ======================framework======= */
      /* ------------------solution---------- */
      
         .neon-box {
            position: relative;
            padding: 40px 70px;
            border-radius: 30px;
            border: 2px solid rgb(0 100 211);
            box-shadow: 0 0 25px rgb(20 100 175 / 82%), inset 0 0 20px rgb(20 100 175 / 51%);
            overflow: hidden;
            background: rgba(0,0,0,0.55);
         }

         /* BACKGROUND ICON */
         .neon-box::before {
            content: "";
            position: absolute;
            top: 0px;
            left: 50%;
            transform: translateX(-50%);
            width: 400px;
            height: 400px;
            background-image: url("../images/idraft/coin2.gif");
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            opacity: 0.25;
            z-index: 1;
         }

         @media (max-width: 768px) {
            .neon-box::before {
               width: 300px;
               height: 300px;
               top: 260px;
            }
         }

         /* OVERLAY */
         .neon-box::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to bottom, rgb(0 0 0 / 0%), rgb(0 0 0 / 0%));
            z-index: 2;
         }

         /* CONTENT ALWAYS ABOVE */
         .neon-box * {
            position: relative;
            z-index: 3;
         }

         /* GRID */
         .feature-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px 200px;
         }


         .f-item {
            display: flex;
            align-items: flex-start;
            gap: 5px;
            margin-bottom: 10px;
            max-width: 500px;
         }

         .f-item .f-number {
            font-size: 120px;
            font-weight: 800;
            line-height: 1;
            color: #1D7FFF;
            clip-path: polygon(0% 0%,
                  185% 0%,
                  52% 80%,
                  0% 106%);
            flex-shrink: 0;
         }

         /* CONTENT WRAPPER */
         .f-item .f-content {
            display: block;
         }

         /* TITLE */
         .f-title {
            font-size: 22px;
            font-weight: 600;
            margin-bottom: 0px;
            /* color: #ffffff; */
            background: linear-gradient(90deg, #0080FF -0.51%, #EDF5FF 80%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
         }

         .f-title span {
            color: #1470C8;
         }

         /* DESCRIPTION */
         .f-item p {
            opacity: 0.9;
            margin: 0;
         }

         /* MOBILE RESPONSIVE */
         @media (max-width: 767px) {

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

            .f-item {
               gap: 10px;
            }

            .f-number {
               font-size: 55px !important;
            }

            .neon-box {
               padding: 40px 25px;
            }
         }
         @media (max-width: 991px) {
           .neon-box {
               position: relative;
               padding: 30px 20px;
            }
              .feature-grid {
               /* display: grid; */
               /* grid-template-columns: repeat(2, 1fr); */
               gap: 15px 40px;
            }
            .f-title {
               font-size: 22px;
               line-height: 28px;
            }
            .neon-box::before {
        width: 300px;
        height: 300px;
        top: 150px;
    } 
         }
         /* ======================= */
         /* --------------ecosystem------------- */
         
         .idraft-feature-wrapper {
            margin-top: 60px;
         }

         @media(max-width: 767px) {

            .idraft-feature-wrapper {
               margin-top: 30px;
            }
         }

         .idraft-feature-card {
            background: rgb(0 23 40 / 45%);
            padding: 30px;
            border-radius: 18px;
            height: 100%;
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.1);
            transition: all 0.3s ease;
         }

         .idraft-feature-card:hover {
            background-color: #003b4f;
            transform: translateY(-8px);
            border-color: #00BFFF;
            box-shadow: 0 0 18px rgba(0, 191, 255, 0.4);
         }

         .idraft-feature-title {
            font-size: 22px;
            line-height: 26px;
            font-weight: 700;
            margin-bottom: 12px;
            color: #00C5FF;
         }

         .idraft-feature-text {
            font-size: 16px;
            line-height: 1.6;
            color: #dcdcdc;
         }

         /* Mobile spacing fix */
         @media (max-width: 767px) {
            .idraft-feature-card {
               padding: 25px;
            }

            .subtitle {
               padding: 0 16px;
            }
         }
/* ============end================== */
  /* =====================roadmap================ */
         .neon-roadmap {
            background: #001a2f;
            padding: 100px 0 150px;
         }

         /* Heading */
         .roadmap-heading {
            text-align: center;
            margin-bottom: 70px;
         }

         .title {
            color: #fff;
            font-size: 40px;
            font-weight: 700;
         }

         @media(max-width: 767px) {
            .title {
               color: #fff;
               font-size: 30px;
               font-weight: 700;
            }

            .card-box {
               width: 300px ;
            }

            .center-orb {
               width: 300px !important;
               height: 300px !important;
            }

         }
 
         .subtitle {
            color: #fff;
            max-width: 650px;
            margin: 10px auto 0;
            opacity: 0.9;
         }

         /* FLEX LAYOUT FIX */
         .roadmap-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 60px;
            width: 100%;
            max-width: 1250px;
            margin: auto;
         }

         /* Left & Right columns */
         .roadmap-side {
            display: flex;
            flex-direction: column;
            gap: 20px;
         }

         /* ORB CENTER */
         .roadmap-center {
            display: flex;
            justify-content: center;
            align-items: center;
         }

         .center-orb {
            width: 400px;
            height: 400px;
            border-radius: 50%;
            border: 3px solid #1A9FFF;
            box-shadow: 0 0 10px #1A9FFF;
            overflow: hidden;
            position: relative;
         }

         .center-orb video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
         }


         /* CARD DESIGN */
         .card-box {
            width: 360px;
            padding: 25px 30px;
            border-radius: 18px;
            border: 4px solid rgb(0 128 255);
            backdrop-filter: blur(12px);
            color: #D8E6FF;
            box-shadow: 0 0 0px 7px rgb(0 80 145 / 35%);
            position: relative;
         }

         .card-box h4 {
            font-size: 22px;
            line-height: 26px;
            margin-bottom: 10px;
         }

     


         .roadmap-side:first-child .card-box::after {
            right: -60px;
         }

         .roadmap-side:last-child .card-box::after {
            left: -60px;
         }

         /* RESPONSIVE */
         @media(max-width: 992px) {
            .roadmap-wrapper {
               flex-direction: column;
               gap: 50px;
            }

            .card-box::after {
               display: none;
            }
            .card-box {
                  width: 660px;
          
         }
         }
         .hero-three {
    height: 100vh;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}



/* SUPER IMPORTANT → HERO CONTENT CENTERED */
.hero-three .container,
.hero-three .row,
.hero-three__content {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontal center */
    justify-content: center; /* vertical center */
    text-align: center;
    height: 100%;
}

/* ==============end================== */

@media (max-width: 576px){   
   .card-box {
    width: 360px;
   }  
   h1{
      font-size: 24px;
   }
}


/* ==============tablet========= */
@media(max-width: 992px) {
.hero-three {
    padding-top: 150px;
}
.exchange .exchange__single {
        height: 320px;
    }
       .neon-box::before {
        width: 300px;
        height: 300px;
        top: 50px;
    } 
    .missions {
        margin-left: 200px;
        text-align: start !important;
    }
}

/* Extra Small Devices (Portrait Phones) — 0 to 575px */
@media (max-width: 575.98px) {
    /* fonts, spacing, mobile layout */
   .exchange .exchange__single {
        height: auto;
    }
    
}

/* Small Devices (Mobiles Landscape / Small Phones) — 576px to 767px */
@media (max-width: 767.98px) {
    /* images scale, buttons fit screen */
     .card-box {
    width: 280px;
   }  
     .exchange .exchange__single {
    height: auto;
}

}

/* Medium Devices (Tablets / iPads) — 768px to 991px */
@media (max-width: 991.98px) {
    /* tablet design adjustments */
  .work .work__content {
    margin-top: 60px;
    text-align: start;
}
    
}

/* Large Devices (Small Laptops / Regular Desktops) — 992px to 1199px */
@media (max-width: 1199.98px) {
    /* reduce font-size, container width adjust */
   .roadmap-wrapper {
               flex-direction: column;
               gap: 50px;
            }
             .card-box {
            width: auto;
        margin: 0 25px;
   }  
   .f-title {
    font-size: 22px;
    line-height: 26px;
   }
   .neon-box {
    position: relative;
    padding: 40px 20px;
   }

}

/* Extra Large (Big Screens / iPad Pro / HD Display) — 1200px to 1399px */
@media (max-width: 1399.98px) {
    /* hero section big screens fix */
}

/* Ultra-Wide Screens (Full HD, 2K, 4K Screens) — 1400px+ */
@media (min-width: 1400px) {
    /* large spacing optimized for big screens */
}


/* Team Section Styles */
.team-section {
   background: #000428;
   background: -webkit-linear-gradient(to right, #000428, #004e92);
   background: linear-gradient(to right, #000428, #004e92);
   position: relative;
   overflow: hidden;
}

.team-section::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: 
       radial-gradient(circle at 20% 50%, rgba(0, 217, 255, 0.08) 0%, transparent 50%),
       radial-gradient(circle at 80% 80%, rgba(168, 85, 247, 0.06) 0%, transparent 50%);
   pointer-events: none;
}

.col-lg-2-4 {
   flex: 0 0 20%;
   max-width: 20%;
}

@media (max-width: 991px) {
   .col-lg-2-4 {
       flex: 0 0 33.333333%;
       max-width: 33.333333%;
   }
}

@media (max-width: 767px) {
   .col-lg-2-4 {
       flex: 0 0 50%;
       max-width: 50%;
   }
}

@media (max-width: 575px) {
   .col-lg-2-4 {
       flex: 0 0 100%;
       max-width: 100%;
   }
}

.team-card {
   text-align: center;
   cursor: pointer;
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   padding: 20px;
}

.team-card:hover {
   transform: translateY(-10px);
}

.team-image-wrapper {
   position: relative;
   width: 180px;
   height: 180px;
   margin: 0 auto 20px;
   border-radius: 50%;
   padding: 5px;
   background: linear-gradient(135deg, #00D9FF, #0099FF, #A855F7, #00D9FF);
   background-size: 300% 300%;
   animation: borderRotate 4s ease-in-out infinite;
   box-shadow: 
       0 0 30px rgba(0, 217, 255, 0.4),
       0 0 60px rgba(168, 85, 247, 0.3);
}

.team-card:hover .team-image-wrapper {
   animation: borderRotate 2s ease-in-out infinite, pulseGlow 1.5s ease-in-out infinite;
   box-shadow: 
       0 0 50px rgba(0, 217, 255, 0.6),
       0 0 80px rgba(168, 85, 247, 0.5);
}

.team-image {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
   border: 4px solid #0023505c;
   transition: transform 0.3s ease;
}

.team-card:hover .team-image {
   transform: scale(1.05);
}

.team-overlay {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: linear-gradient(135deg, rgba(0, 217, 255, 0.9), rgba(168, 85, 247, 0.9));
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   transition: opacity 0.3s ease;
}

.team-card:hover .team-overlay {
   opacity: 1;
}

.team-overlay i {
   font-size: 40px;
   color: white;
   animation: iconPulse 1s ease-in-out infinite;
}

.team-info {
   margin-top: 15px;
}

.team-name {
   font-size: 20px;
   font-weight: 700;
   margin-bottom: 5px;
   background: linear-gradient(120deg, #00D9FF 0%, #0099FF 50%, #A855F7 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.team-role {
   font-size: 14px;
   color: rgba(255, 255, 255, 0.7);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 1px;
}

/* Team Modal Styles */
.team-modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 99999;
   display: flex;
   align-items: center;
   justify-content: center;
   opacity: 0;
   visibility: hidden;
   transition: opacity 0.3s ease, visibility 0.3s ease;
}

.team-modal.active {
   opacity: 1;
   visibility: visible;
}

.team-modal-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(0, 4, 40, 0.95);
   backdrop-filter: blur(10px);
   -webkit-backdrop-filter: blur(10px);
}

.team-modal-content {
   position: relative;
   max-width: 800px;
   width: 90%;
   background: linear-gradient(135deg, rgba(0, 217, 255, 0.1) 0%, rgba(168, 85, 247, 0.1) 100%);
   backdrop-filter: blur(30px);
   -webkit-backdrop-filter: blur(30px);
   border-radius: 24px;
   padding: 40px;
   box-shadow: 
       0 20px 60px rgba(0, 217, 255, 0.4),
       0 0 100px rgba(168, 85, 247, 0.3),
       inset 0 1px 0 rgba(255, 255, 255, 0.1);
   border: 2px solid rgba(0, 217, 255, 0.3);
   z-index: 100000;
   max-height: 90vh;
   overflow-y: auto;
   animation: modalSlideUp 0.4s ease-out;
}

.team-modal-close {
   position: absolute;
   top: 20px;
   right: 20px;
   width: 40px;
   height: 40px;
   border: none;
   background: rgba(255, 255, 255, 0.1);
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.3s ease;
   z-index: 100001;
}

.team-modal-close:hover {
   background: rgba(0, 217, 255, 0.3);
   transform: rotate(90deg);
}

.team-modal-close i {
   font-size: 24px;
   color: white;
}

.team-modal-body {
   display: flex;
   gap: 30px;
   align-items: flex-start;
}

.team-modal-image-wrapper {
   flex-shrink: 0;
   width: 220px;
   height: 220px;
   border-radius: 50%;
   padding: 5px;
   background: linear-gradient(135deg, #00D9FF, #0099FF, #A855F7, #00D9FF);
   background-size: 300% 300%;
   animation: borderRotate 4s ease-in-out infinite;
   box-shadow: 
       0 0 40px rgba(0, 217, 255, 0.5),
       0 0 70px rgba(168, 85, 247, 0.4);
}

.team-modal-image {
   width: 100%;
   height: 100%;
   border-radius: 50%;
   object-fit: cover;
   border: 5px solid #000428;
}

.team-modal-details {
   flex: 1;
}

.team-modal-details h3 {
   font-size: 32px;
   font-weight: 800;
   margin-bottom: 8px;
   background: linear-gradient(120deg, #00D9FF 0%, #0099FF 50%, #A855F7 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.team-modal-role {
   font-size: 16px;
   color: var(--idraft-green-neon);
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1.5px;
   margin-bottom: 20px;
}

.team-modal-divider {
   height: 2px;
   background: linear-gradient(90deg, transparent, var(--neon-green), var(--neon-purple), transparent);
   margin: 20px 0;
}

.team-modal-bio {
   font-size: 16px;
   line-height: 1.8;
   color: rgba(255, 255, 255, 0.9);
   margin-bottom: 25px;
}

.team-modal-skills {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.team-skill-tag {
   display: inline-block;
   padding: 8px 16px;
   background: rgba(0, 217, 255, 0.15);
   border: 1px solid rgba(0, 217, 255, 0.3);
   border-radius: 20px;
   font-size: 13px;
   color: var(--idraft-green-neon);
   font-weight: 600;
   transition: all 0.3s ease;
}

.team-skill-tag:hover {
   background: rgba(0, 217, 255, 0.25);
   border-color: rgba(0, 217, 255, 0.5);
   transform: translateY(-2px);
   box-shadow: 0 4px 12px rgba(0, 217, 255, 0.3);
}

/* Animations */
@keyframes borderRotate {
   0% {
       background-position: 0% 50%;
   }
   50% {
       background-position: 100% 50%;
   }
   100% {
       background-position: 0% 50%;
   }
}

@keyframes pulseGlow {
   0%, 100% {
       box-shadow: 
           0 0 30px rgba(0, 217, 255, 0.4),
           0 0 60px rgba(168, 85, 247, 0.3);
   }
   50% {
       box-shadow: 
           0 0 50px rgba(0, 217, 255, 0.6),
           0 0 80px rgba(168, 85, 247, 0.5);
   }
}

@keyframes iconPulse {
   0%, 100% {
       transform: scale(1);
   }
   50% {
       transform: scale(1.2);
   }
}

@keyframes modalSlideUp {
   from {
       opacity: 0;
       transform: translateY(50px) scale(0.9);
   }
   to {
       opacity: 1;
       transform: translateY(0) scale(1);
   }
}

/* Responsive Styles */
@media (max-width: 768px) {
   .team-modal-body {
       flex-direction: column;
       align-items: center;
       text-align: center;
   }
   
   .team-modal-image-wrapper {
       width: 180px;
       height: 180px;
   }
   
   .team-modal-content {
       padding: 30px 20px;
   }
   
   .team-modal-details h3 {
       font-size: 26px;
   }
   
   .team-modal-skills {
       justify-content: center;
   }
}