/* General CSS Reset for Margins and Padding */
* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Arial', sans-serif;
}

a:link, a:visited {
   color: #70daf8;
   text-decoration: none;
}

/* Ensure the body does not overflow */
body {
   width: 100vw;
   overflow-x: hidden; /* Completely hides any overflow content horizontally */
}

.iAIg-body {
   max-width: 100%; /* Keeping this, but technically width: 100% is sufficient */
   overflow-x: hidden; /* 'hidden' is more compatible across browsers than 'clip' */
}

#floating-image {
   position: absolute;
   top: 30px; /* Adjust this value as needed */
   left: 20px; /* Adjust this value as needed */
   width: 30%; /* Adjust the width as needed */
   max-width: 350px; /* Set a maximum width */
   height: auto; /* Maintain aspect ratio */
   z-index: 2; /* Place the image above the banner */
}

/* Hero Section Styles */
.iAIg-hero {
   background: linear-gradient(rgba(61, 1, 125, 10.8), rgba(106, 17, 203, 0.8));
   color: #fff;
   text-align: center;
   padding: 100px 20px;
   position: relative;
}
.iAIg-hero-content {
   margin: 0 auto;
}
.iAIg-hero h1 {
   font-size: 48px;
   margin-bottom: 20px;
}
.iAIg-hero p {
   font-size: 24px;
   margin-bottom: 40px;
}
.iAIg-button-hero {
   background: linear-gradient(to bottom, #faf5fb, #e7effb);
   color: #6a11cb;
   padding: 15px 30px;
   margin: 10px;
   border: none;
   border-radius: 5px;
   font-size: 1.2em;
   cursor: pointer;
   transition: background-color 0.3s;
}
.iAIg-button-hero:hover {
   color: black;
}
/* Section Wrapper */
#why-choose-iAIg.iAIg-section {
   max-width: 1000px;
   margin: 0 auto;
   padding: 20px;
   background: linear-gradient(rgba(242, 240, 244, 0.8), rgba(135, 123, 147, 0.8));
   border-radius: 10px;
   box-shadow: 0 4px 12px rgba(106, 17, 203, 0.3);
   margin-top: 20px;
   margin-bottom: 20px;
}

/* Section Title */
.iAIg-section-title {
   font-size: 2rem;
   font-weight: bold;
   color: #6a11cb;
   text-align: center;
   margin-bottom: 50px;
}

/* Section Subtitle */
.iAIg-section-subtitle {
   font-size: 1.1rem;
   line-height: 1.6;
   text-align: center;
   margin-bottom: 30px;
   color: #333;
}

/* Features List */
.iAIg-features-list {
   display: flex;
   flex-direction: column;
   gap: 30px;
}

/* Feature Items */
.iAIg-feature-item {
   padding: 15px;
   border: 1px solid #eee;
   border-radius: 8px;
   background: #f9f9f9;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.iAIg-feature-item:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 16px rgba(106, 17, 203, 0.2);
}

/* Feature Title */
.iAIg-feature-title {
   font-size: 1.5rem;
   font-weight: 600;
   color: #6a11cb;
   margin-bottom: 10px;
}

/* Feature Description */
.iAIg-feature-description {
   font-size: 1rem;
   line-height: 1.6;
   color: #555;
   margin-bottom: 15px;
}

/* Feature List */
.iAIg-feature-list {
   padding-left: 20px;
   margin-top: 10px;
   margin-bottom: 20px;
   color: #555;
   list-style-type: disc;
}

/* Accuracy Challenge */
.iAIg-accuracy-challenge {
   margin-top: 40px;
   text-align: center;
   padding: 20px;
   background: #f4f4f4;
   border-radius: 8px;
   box-shadow: 0 4px 12px rgba(106, 17, 203, 0.2);
}

.iAIg-stripe-wrapper {
   justify-content: center;
   align-items: center;
   max-width: 100%;
   background-color: #f5f5f5;
   padding: 40px;
   overflow: hidden;
}
.iAIg-stripe-container {
   justify-content: center;
   align-items: center;
}

/* Guru Showcase Styles */
.iAIg-guru-showcase {
   padding: 60px 20px;
   background: linear-gradient(to bottom, #faf5fb, #e7effb);
   text-align: center;
}
.iAIg-guru-showcase h2 {
   color: #6a11cb;
   font-size: 36px;
   margin-bottom: 40px;
}
.iAIg-guru-grid-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
   position: relative;
}
.iAIg-guru-grid {
   display: flex; /* Flexbox to align items in a row */
   overflow-x: auto; /* Horizontal scrolling */
   width: 100%; /* Full width for the container */
   height: 400px; /* Set the height of the grid */
   gap: 20px; /* Space between cards */
   scroll-behavior: smooth; /* Smooth scrolling */
   margin: 0 auto; /* Center the grid */
   position: relative; /* For positioning children if needed */
   padding: 20px; /* Padding around the grid */
}
.iAIg-guru-card {
   width: calc(25% - 20px); /* Fixed width for 4 cards per view minus gap */
   height: 350px; /* Card height */
   background-color: #fff; /* Card background */
   border-radius: 10px; /* Rounded corners */
   text-align: center; /* Center text */
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Shadow */
   cursor: pointer; /* Pointer on hover */
   transition: transform 0.3s ease; /* Smooth hover effect */
   box-sizing: border-box; /* Include padding and border in width calculation */
   padding: 20px; /* Padding inside card */
   flex-shrink: 0; /* Prevent shrinking */
}
.iAIg-guru-card:hover {
   transform: translateY(-10px);
}
.iAIg-guru-card img {
   width: 100px;
   height: 100px;
   margin-bottom: 15px;
}
.iAIg-guru-card h3 {
   color: #6a11cb;
   font-size: 24px;
   margin-bottom: 10px;
}
.iAIg-guru-card p {
   font-size: 16px;
   color: #555;
}
.iAIg-guru-card.highlight {
   border: 2px solid #6a11cb;
   box-shadow: 0 0 15px rgba(106, 17, 203, 0.5);
}

/* Scroll Button Styles */
.iAIg-scroll-button {
   background-color: #6a11cb;
   color: #fff;
   border: none;
   padding: 10px;
   cursor: pointer;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   font-size: 24px;
   z-index: 10;
}
.iAIg-scroll-button:hover {
   color: lightcyan;
}
.iAIg-scroll-button.left {
   left: 0;
}
.iAIg-scroll-button.right {
   right: 0;
}
.iAIg-scroll-button:disabled {
   opacity: 0.5;                   /* Make the button appear faded */
   cursor: not-allowed;
}

.iAIg-platform-overview {
   background: linear-gradient(to bottom, #faf5fb, #eef2f8);
}

/* Footer Styles */
.iAIg-body footer {
   background: linear-gradient(to bottom, #6a11cb, #2575fc);
   color: #fff;
   text-align: center;
   padding: 10px 0;
   position: fixed;
   width: 100%;
   bottom: 0;
}

.iAIg-spinner {
   border: 2px solid #f3f3f3; /* Light grey border */
   width: 14px;
   height: 14px;
   border-radius: 50%;
   border-left-color: #09f;
   animation: spin 1s infinite linear;
}
@keyframes spin {
   0% {
   transform: rotate(0deg);
   }
   100% {
   transform: rotate(360deg);
   }
}

/* Modal Styles */
.iAIg-modal {
   display: none;
   position: fixed;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   justify-content: center;
   align-items: center;
   z-index: 1000;
}
.iAIg-modal-content {
   background: linear-gradient(to bottom, #faf5fb, #e7effb);
   padding: 30px;
   border-radius: 10px;
   text-align: center;
   width: 500px;
   position: relative;
}
.iAIg-modal h2 {
   font-size: 2em;
   color: #333;
   margin-bottom: 20px;
}
.iAIg-email-input {
   width: 400px; /* Set the desired width */
   padding: 10px; /* Add some padding for better UX */
   margin-top: 10px; /* Optional margin for spacing */
   box-sizing: border-box; /* Include padding and border in the width */
   border-radius: 5px;
   font-size: 16px;
}
.iAIg-close-button {
   position: absolute;
   top: 10px;
   right: 10px;
   cursor: pointer;
   font-size: 24px;
}
.iAIg-modal-button {
   background-color: #6a11cb;
   color: #fff;
   border: none;
   padding: 10px 20px;
   margin-top: 20px;
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s ease;
}
.iAIg-modal-button:hover {
   color: lightcyan;
}

/* Section for Platform Overview */
.iAIg-platform-overview {
   padding: 40px;
   background-color: white;
   text-align: center;
   margin-top: 40px; /* Space above to separate from the Gurus section */
}
.iAIg-platform-overview h2 {
   font-size: 2.5em;
   color:#6a11cb;
   margin-bottom: 20px;
}
.iAIg-platform-overview .iAIg-subheading {
   font-size: 1.2em;
   color: #666;
   margin-bottom: 30px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.iAIg-key-features {
   text-align: left;
   max-width: 800px;
   margin: 0 auto 40px;
}
.iAIg-key-features h3 {
   font-size: 1.8em;
   color: #6a11cb;
   margin-bottom: 20px;
}
.iAIg-key-features ul {
   list-style-type: none; /* Removes bullet points */
   padding: 0;
}
.iAIg-key-features li {
   margin-bottom: 15px;
   font-size: 1.1em;
   color: #555;
}
.iAIg-key-features li strong {
   color: #333;
}

.iAIg-buttons {
   margin-top: 20px;
   margin-bottom: 20px;
}
.iAIg-button {
   background: linear-gradient(to bottom, #6a11cb, #2575fc);
   color: #fff;
   padding: 15px 30px;
   margin: 10px;
   border: none;
   border-radius: 5px;
   font-size: 1.2em;
   cursor: pointer;
   transition: background-color 0.3s;
}
.iAIg-button:hover {
   color: lightcyan
}

/* Login Styles */
.iAIg-login-button {
   background: linear-gradient(to bottom, #faf5fb, #e7effb); 
   color: #6a11cb;
   padding: 10px 20px;
   font-size: 18px;
   border: 2px solid #6a11cb;
   cursor: pointer;
   position: fixed;
   top: 10px;
   right: 10px;
   z-index: 1001; /* Keep it on top */
   border-radius: 5px;
   transition: background-color 0.3s ease;
}
.iAIg-login-button:hover {
   color: black;
}

.iAIg-loginForm {
   display: flex;
   flex-direction: column;
}
.iAIg-loginForm label {
   margin-bottom: 10px;
   font-weight: bold;
   text-align: left;
}
.iAIg-loginForm input {
   padding: 10px;
   margin-bottom: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   font-size: 16px;
   width: 100%;
}
.iAIg-login-submit {
   background-color: #6a11cb;
   color: white;
   padding: 10px;
   font-size: 18px;
   border: none;
   cursor: pointer;
   border-radius: 5px;
   transition: background-color 0.3s ease;
}
.iAIg-login-submit:hover {
   color: lightcyan;
}

ul li {
   margin-bottom: 10px;
}
 
/* Mobile Styles */
@media (max-width: 768px) {
   #floating-image {
      display: none; /* Hide the floating image on mobile */
   }

   /* Hero Section Styles */
   .iAIg-hero {
      padding: 50px 10px;
   }
   .iAIg-hero-content {
      margin: 0 auto;
   }
   .iAIg-hero h1 {
      font-size: 32px;
      margin-bottom: 10px;
   }
   .iAIg-hero p {
      font-size: 20px;
      margin-bottom: 10px;
   }
   
   /* Guru Showcase Styles */
   .iAIg-guru-showcase {
      padding: 20px 20px;
      background: linear-gradient(rgba(241, 236, 246, 1), rgba(185, 179, 243, 1));
      text-align: center;
   }
   .iAIg-guru-showcase h2 {
      font-size: 32px;
      margin-bottom: 10px;
   }
   .iAIg-guru-grid {
      height: 350px; /* Set the height of the grid */
      gap: 10px; /* Space between cards */
      scroll-behavior: smooth; /* Smooth scrolling */
      margin: 0 auto; /* Center the grid */
      position: relative; /* For positioning children if needed */
      padding: 10px; /* Padding around the grid */
   }
   .iAIg-guru-card {
      width: calc(33% - 10px); /* Fixed width for 4 cards per view minus gap */
      padding: 10px; /* Padding inside card */
      flex-shrink: 0; /* Prevent shrinking */
   }
   .iAIg-guru-card img {
      width: 50%; 
      height: auto;
      margin-bottom: 10px;
   }
   .iAIg-guru-card h3 {
      font-size: 16px;
      margin-bottom: 5px;
   }   
   .iAIg-guru-card p {
      font-size: 14px;
   }
   .iAIg-body footer {
      z-index: 1001; /* Keep the footer on top */
   }
   .iAIg-modal-content {
      background-color: #fff;
      padding: 30px;
      border-radius: 10px;
      text-align: center;
      width: 90vw;
      position: relative;
   }
   .iAIg-modal h2 {
      font-size: 2em;
      color: #333;
      margin-bottom: 20px;
   }
   
   .iAIg-email-input {
      width: 60%; /* Set the desired width */
      padding: 10px; /* Add some padding for better UX */
      margin-top: 10px; /* Optional margin for spacing */
      box-sizing: border-box; /* Include padding and border in the width */
      border-radius: 5px;
      font-size: 16px;
   }   
}