:root {
  --brand:        #6f3df5;
  --brand-2:      #8b6dff;
  --brand-3:      #a78bfa;
  --brand-deep:   #5a2dd6;
  --brand-soft:   #f1ecff;
  --brand-soft-2: #e8e0ff;
  --brand-bg:     #f9f6ff;
  --brand-glow:   rgba(111,61,245,0.35);

  --bg:           #ffffff;
  --bg-cream:     #fdfcff;
  --bg-tint:      #f6f3fc;

  --ink:          #1c1538;
  --ink-2:        #3d3361;
  --ink-mute:     #6c6489;
  --ink-dim:      #9893ad;

  --rule:         #ece8f5;
  --rule-soft:    #f3f0fa;

  --pink:         #ec4899;
  --pink-soft:    #fce7f3;
  --teal:         #14b8a6;
  --teal-soft:    #d1fae8;
  --orange:       #f97316;
  --orange-soft:  #fed7aa;
  --emerald:      #10b981;
  --amber:        #f59e0b;
  --amber-soft:   #fef3c7;
  --cyan:         #06b6d4;
  --cyan-soft:    #cffafe;

  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 36px;
  --r-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(28,21,56,0.05);
  --shadow-md: 0 10px 32px rgba(111,61,245,0.10);
  --shadow-lg: 0 24px 60px rgba(111,61,245,0.15);
  --shadow-glow: 0 0 60px rgba(111,61,245,0.25);
}


.hero-ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, rgba(117, 84, 247, 1) 0%, rgba(117, 84, 247, 1) 62%, rgba(147, 94, 223, 1) 95%);
  color: white;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  transition: all 0.2s;
  box-shadow: 0 4px 24px rgba(168, 85, 247, 0.4);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(168, 85, 247, 0.5);
}
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 20px;
  transition: color 0.2s;
  border: 1px solid #fff;
  border-radius: 10px;
}
.btn-ghost:hover {
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}

/*==========================================
AI Performance Section
===========================================*/

.ai-performance-section{
  position:relative;
    background:linear-gradient(180deg,#f8f5ff 0%,#ffffff 100%);
  overflow:hidden;
}

.ai-performance-section::before{
  content:"";
  position:absolute;
  width:450px;
  height:450px;
  background:#522d8d;
  opacity:.08;
  border-radius:50%;
  top:-180px;
  right:-120px;
  filter:blur(40px);
}

.ai-performance-section::after{
  content:"";
  position:absolute;
  width:350px;
  height:350px;
  background:transparent;
  opacity:.08;
  border-radius:50%;
  left:-120px;
  bottom:-150px;
  filter:blur(50px);
}

/* Grid */

.ai-performance-section .performance-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:30px;
  position:relative;
  z-index:2;
}

/* Card */

.ai-performance-section .performance-card{
  background:#fff;
  border-radius:22px;
  padding:30px 20px 10px;
  text-align:center;
  border:1px solid rgba(82,45,141,.12);
  transition:.35s;
  position:relative;
  overflow:hidden;
}

.ai-performance-section .performance-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:#522d8d;
}

.ai-performance-section .performance-card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 45px rgba(82,45,141,.18);
}

.ai-performance-section .number{
  font-size:34px;
  font-weight:800;
  color:#522d8d;
  line-height:1;
}

.ai-performance-section .divider{
  width:55px;
  height:4px;
  background:#522d8d;
  margin:10px auto;
  border-radius:10px;
}

.ai-performance-section .performance-card h4{
  font-size:16px;
  font-weight:300;
  margin-bottom:0px;
  color:#222;
  padding-bottom: 20px;
}

.ai-performance-section .performance-card p{
  color:#777;
  font-size:15px;
  line-height:1.7;
}

.web-inner-section p{text-align: left;}
.toggle-container {
display: flex;
gap: 12px;
font-size: 16px;
font-weight: 500;
color: #111;
justify-content: center;
align-items: center;
}
.toggle-switch {
position: relative;
width: 70px;
height: 40px;
background: #522e8b; /* Default to Dollar */
border-radius: 30px;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: background-color 0.3s ease;
}
.toggle-switch.monthly {
background: #7656f4; /* INR when toggled */
}
.toggle-switch input {
display: none;
}
.toggle-slider {
position: absolute;
top: 5px;
left: 5px;
width: 30px;
height: 30px;
background: white;
border-radius: 50%;
transition: transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
color: #522e8b;
}
.toggle-switch input:checked+.toggle-slider {
transform: translateX(30px);
}
.toggle-switch input:checked+.toggle-slider .currency-symbol {
color: #7656f4;
}
.currency-symbol {
transition: color 0.3s ease;
pointer-events: none;
}
.toggle-container span.active {
font-weight: 700;
color: #522e8b;
}
.toggle-container span.monthly-active {
font-weight: 700;
color: #7656f4;
}

.tech-specs-section {
  background: linear-gradient(90deg, rgb(82 45 141) 0%, rgb(106 70 246) 62%, rgb(140 94 243) 100%);
  padding: 80px 0;
  color: #fff;
  font-family: "Inter", sans-serif;
  position: relative;
  overflow: hidden;
}

.tech-specs-section::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,0.1) 0%, transparent 70%);
  animation: rotateBg 20s linear infinite;
  z-index: 0;
  opacity: 0.4;
}

@keyframes rotateBg {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.section-title {
  text-align: center;
  font-size: 38px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 60px;
  position: relative;
  z-index: 1;
  text-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

.tech-specs-section-box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  position: relative;
  z-index: 1;
}

.specs-block {
  flex: 1 1 48%;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 25px 30px;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  transition: all 0.4s ease;
}

.specs-block:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
  background: rgba(255,255,255,0.15);
}

.specs-block h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.2);
  padding-bottom: 8px;
}

.specs-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.specs-list li {
  font-size: 16px;
  color: #e0e0e0;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  display: flex;
  align-items: center;
  transition: color 0.3s ease;
}

.specs-list li:hover {
  color: #fff;
  text-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.specs-list li strong {
  color: #fff;
  font-weight: 600;
  flex: 0 0 45%;
}

@media (max-width: 992px) {
  .tech-specs-section-box {
    flex-direction: column;
  }

  .specs-block {
    flex: 1 1 100%;
  }

  .specs-list li {
    flex-direction: column;
    align-items: flex-start;
  }

  .specs-list li strong {
    margin-bottom: 6px;
  }
}

.tablesection {
  padding: 60px 0;
  background: #fff;
}

.tablesection .heading1 {
  font-size: 28px;
  font-weight: 700;
  color: #111;
}

.tablesection .purple {
  color: #6a11cb;
}

.tablesection .subtext {
  font-size: 16px;
  color: #555;
  margin-bottom: 25px;
}

.webtblesection {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}

.webtblesection th {
  background: linear-gradient(90deg, #6a11cb 0%, #8659e9 100%);
  color: #fff;
  text-align: left;
  padding: 12px 15px;
  font-weight: 600;
  font-size: 15px;
}

.webtblesection td {
  padding: 12px 15px;
  border:1px solid #e1cfff;
  color: #333;
  vertical-align: top;
}

.webtblesection tr:nth-child(even) {
  background: #fafafa;
}

.webtblesection tr:hover {
  background: #f5f3ff;
  transition: 0.3s;
}

.section-time-page .buttons a{width:auto;}
@media (max-width: 768px) {
  .webtblesection th, .webtblesection td {
    font-size: 13px;
    padding: 10px;
  }
  .tablesection .heading1 {
    font-size: 22px;
  }
}

.error::before{border-width: initial;
  border-style: none;}
  .modal-content {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  }
  /* SVG background behind everything */
  .modal-content .bg-decor {
  position: absolute;
  inset: 0;
  width: 120%;
  height: 120%;
  transform: translate(18%, -31%) scale(1.05);
  pointer-events: none;
  z-index: 0;
  transform: rotate(204deg);
  top: -111px;
  left: 273px;
  }
  /* Ensures content appears above SVG */
  .modal-content-page > *:not(.bg-decor) {
  position: relative;
  z-index: 1;
  }
  /* =================== Modal Backdrop =================== */
  .modal-backdrop {
  background: rgba(0, 0, 0, 0.3) !important;
  z-index: 1040 !important;
  pointer-events: none !important;
  opacity: 1 !important;
  }
  /* =================== Modal Container =================== */
  .modal {
  display: none;
  position: fixed;
  z-index: 1050 !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(3px);
  transition: opacity 0.3s ease-out;
  opacity: 0;
  }
  .modal.show {
  display: block;
  opacity: 1;
  }
  /* =================== Modal Dialog (Centered) =================== */
  .modal-dialog {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  margin: 0 !important;
  z-index: 1060 !important;
  width: 100%;
  max-width: 500px;
  }
  /* Optional: Improve vertical centering on very short screens */
  @media screen and (max-height: 600px) {
  .modal-dialog {
  top: 40% !important;
  }
  }
  /* =================== Modal Content =================== */
  .modal-content {
  border-radius: 10px;
  padding: 40px!important;
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.3);
  z-index: 1065;
  width: 100%;
  background: rgb(117, 84, 247);
  background: linear-gradient(180deg, rgb(231 215 255) 0%, rgb(255 255 255) 95%);
  }
  /* =================== Inputs & Buttons =================== */
  .modal-body input,
  .modal-body textarea {
  width: 100%;
  padding: 14px;
  margin-bottom: 0;
  border-radius: 5px;
  border: 1px solid #aa7eed;
  font-size: 14px;
  box-shadow: 0 4px 15px rgba(123, 63, 243, 0.3);
  }
  .inquiry-pop .modal-dialog ul li {
  list-style: none;
  display: inline-block;
  width: 100%;
  text-align: left;
  padding: 10px 0;
  }
  .modal-content .close-btn-button, #tooltip2 .close-btn-button {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 20px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: inline-flex
  ;
  align-items: center;
  border-radius: 50%;
  justify-content: center;
  }
  .modal-content .close-btn-button:hover, #tooltip2 .close-btn-button:hover {
  background: #cebced;
  }
  .inquiry-pop button.close {
  position: absolute;
  right: 5px;
  font-size: 30px;
  cursor: pointer;
  top: -3px;
  text-align: right;
  color: #522e8f;
  }
  .inquiry-pop .modal-dialog .heading2 {
  color: #000;
  font-size: 25px;
  padding: 0 0 10px 0;
  width: auto;
  margin: 0;
  font-weight: 500;
  }
  .inquiry-pop .modal-dialog ul {
  margin: 0;
  padding: 0;
  }
  /* =================== Close Button Styling =================== */
  .modal-header .close {
  font-size: 24px;
  color: #000;
  opacity: 0.8;
  }
  .inquiry-pop .modal-dialog .modal-content {
  border-radius: 10px;
  padding: 20px;
  }
  .modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
  }
  .modal-body{padding:0;}
  .inquiry-pop .modal-dialog ul li a.submitbtn {
  transition: 0.3s;
  display: inline-block;
  margin-top: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  width: auto;
  background: #522e8f;
  text-transform: uppercase;
  }
  .inquiry-pop .modal-dialog ul li .submitbtn:hover {
  background: #7b58b7;
  box-shadow: 0 0 20px 1px rgb(82 46 143 / 24%);
  }
  .hardwarefeaturesclass p{color: #000!important;}
  .grid-page-new .grid-item h3{margin-top: 0;}
  .hardware-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(320px,1fr));
    gap:28px;
    margin-top:40px;
}

.hardware-card{
    position:relative;
    display:flex;
    gap:22px;
    align-items:flex-start;

    padding:32px;

    border-radius:18px;

    background:#fff;

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

    backdrop-filter:blur(14px);

    transition:.35s ease;

    overflow:hidden;
}

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

    box-shadow:0 18px 45px rgba(0,0,0,.25);

    border-color:#8d63ff;
}

.hardware-number{
  min-width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #8358eb, #522d8d);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
}

.hardware-content h3{
  color: #522d8d;
  margin-bottom: 15px;
  text-align: left;
  font-weight: 600;
}

.hardware-content p{
    font-size: 16px!important;
    line-height: 22px!important;
    margin:0;
    text-align: left;
}

.hardware-card-last{
    grid-column:1/-1;
}

@media(max-width:991px){

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

.hardware-card-last{
grid-column:auto;
}

}

@media(max-width:576px){

.hardware-card{

flex-direction:column;

padding:24px;
}

.hardware-number{

width:60px;
height:60px;

font-size:20px;
}

}
/*=========================
Responsive
==========================*/

@media(min-width: 1024px){
  .inner-main {
      margin-top: 0;
  }
  .ai-performance-section{padding:70px 0;}
  .parasections{padding-top: 50px;}
}


@media(max-width:1199px){

  .ai-performance-section .performance-grid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:767px){

  .ai-performance-section .ai-performance-section{
padding:70px 0;
}

.ai-performance-section .performance-grid{
grid-template-columns:1fr;
gap:20px;
}

.ai-performance-section .performance-card{
padding:35px 25px;
}

.ai-performance-section .number{
font-size:38px;
}

.ai-performance-section .performance-card h4{
font-size:20px;
}

}

section.deploy-section {
background: #f8f4ff;
}

.col-md-4.why-cyf-md-4 span.img-span{width: 70px!important;}
.benefits-sections{text-align: left;}
.section-content{background: #fff;}
.exploreUpdate{width: 300px;}

.section-2 .feature-container{grid-template-columns:repeat(auto-fit, minmax(340px, 1fr));padding-bottom: 30px;padding-top: 0;}
.section-2 .feature-card{margin-top: 24px;}

.comparison-table {
  width: 100%;
  margin: auto;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 10px;
}

.comparison-table thead th {
  background: #522d8d;
  color: #fff;
  padding: 18px;
  text-align: left;
  font-size: 20px;
  border-right: 1px solid #ddd;
}

.comparison-table tbody td {
  padding: 18px;
  vertical-align: top;
  border-bottom: 1px solid #e6e6e6;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
  border-right: 1px solid #ddd;
}

.comparison-table tbody tr:nth-child(even) {
  background: #fafafa;
}

.comparison-table tbody tr:hover {
  background: #fafafa;
}


@media (max-width:768px){

  .comparison-table,
  .comparison-table thead,
  .comparison-table tbody,
  .comparison-table th,
  .comparison-table td,
  .comparison-table tr{
      display:block;
  }

  .comparison-table thead{
      display:none;
  }

  .comparison-table tr{
      margin-bottom:20px;
      border:1px solid #ddd;
      border-radius:8px;
      overflow:hidden;
      background:#fff;
  }

  .comparison-table td{
      border:none;
      padding:15px;
  }

  .comparison-table td::before{
      display:block;
      font-weight:bold;
      color:#0B3C8A;
      margin-bottom:8px;
  }

  .comparison-table td:first-child::before{
      content:"Infrastructure Gap";
  }

  .comparison-table td:last-child::before{
      content:"Cyfuture AI Solution";
  }
}

.cfai-ai-stack-v2{
  background:#fff;
}

.cfai-ai-stack-v2 .cfai-stack-card{
  background:#fff;
  border:1px solid #ece7fa;
  border-radius:18px;
  padding:30px;
  display:flex;
  align-items:flex-start;
  height:100%;
  transition:.35s;
}

.cfai-ai-stack-v2 .cfai-stack-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(82,45,141,.18);
}

.cfai-ai-stack-v2 .cfai-stack-icon{
  width: 50px;
  height: 50px;
  min-width: 50px;
  border-radius:16px;
  background: #f3edfd;
  color: #522d8d;
  display:flex;
  justify-content:center;
  align-items:center;
  font-size:28px;
  margin-right:22px;
}

.cfai-ai-stack-v2 .cfai-stack-content{
  width:100%;
}

.cfai-ai-stack-v2 .cfai-stack-content h4{
  font-size:20px;
  font-weight:700;
  color:#522d8d;
  margin-bottom:20px;
}

.cfai-ai-stack-v2 .cfai-tech-list{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.cfai-ai-stack-v2 .cfai-tech-list span{
  background: #fff;
  color: #000;
  padding: 9px 15px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  transition: .3s;
  border: 1px solid #522d8d;
}

.cfai-ai-stack-v2 .cfai-tech-list span:hover{
  background:#522d8d;
  color:#fff;
}

.cfai-ai-stack-v2 .cfai-bottom-card{
  background:#522d8d;
  color:#fff;
  border-radius:18px;
  padding:35px 30px;
  height:100%;
  transition:.35s;
}

.cfai-ai-stack-v2 .cfai-bottom-card:hover{
  transform:translateY(-8px);
  box-shadow:0 18px 40px rgba(82,45,141,.25);
}

.cfai-ai-stack-v2 .cfai-bottom-card h5{
  font-size:22px;
  font-weight:700;
  margin-bottom:18px;
}

.cfai-ai-stack-v2 .cfai-bottom-card p{
  margin:0;
  line-height:28px;
  color:#f4f4f4;
}

@media (max-width:991px){

.cfai-ai-stack-v2{
  padding:70px 0;
}

.cfai-ai-stack-v2 .cfai-stack-card{
  flex-direction:column;
}

.cfai-ai-stack-v2 .cfai-stack-icon{
  margin-right:0;
  margin-bottom:20px;
}

.cfai-ai-stack-v2 .cfai-stack-content h4{
  font-size:22px;
}

}

@media (max-width:767px){

.cfai-ai-stack-v2 .cfai-stack-description{
  font-size:16px;
  line-height:28px;
}

.cfai-ai-stack-v2 .cfai-stack-content h4{
  font-size:20px;
}

.cfai-ai-stack-v2 .cfai-bottom-card{
  text-align:center;
}

}

.hero-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px 7px 8px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-sm);
  font-size: 12.5px; color: var(--ink-2); font-weight: 500;
  margin-bottom: 28px;
}
.hero-pill .chip {
  background: linear-gradient(135deg, var(--brand-2) 0%, var(--brand) 100%);
  color: #fff;
  padding: 3px 10px; border-radius: var(--r-pill);
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
}
.hero-pill .chip.green { background: linear-gradient(135deg, #10b981, #0d9488);-webkit-text-fill-color: inherit; }

.rentnext-section .gpu-server-image-box{

  background: #fff;
  padding: 40px 20px;
  border-radius: 4px;
  min-height: 314px;
}
.rentnext-section .gpu-row p{color: #000;}
.rentnext-section .gpu-row h3{color: #522d8d;font-size: 20px;}
.rentnext-section .gpu-row .gpu-serverpara{color: #522d8d;font-size: 16px;
  margin-bottom: 10px;
  display: block;}
.rentnext-section .gpu-img{
  background: #f2ebff;
  padding: 20px;
  overflow: hidden;
}