/* Combined Custom Styles */




 /* New custom styles for the GCP content */
 @keyframes fadeIn {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 @keyframes fadeInUp {
     from {
         opacity: 0;
         transform: translateY(30px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 @keyframes slideDownHero {
     from {
         transform: translateY(-50px);
         opacity: 0;
     }

     to {
         transform: translateY(0);
         opacity: 1;
     }
 }

 @keyframes pulseGlow {

     0%,
     100% {
         filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.7));
     }

     50% {
         filter: drop-shadow(0 0 16px rgba(255, 255, 255, 1));
     }
 }

 @keyframes scaleInX {
     to {
         opacity: 1;
         transform: scaleX(1);
     }
 }

 .hero-section {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
     padding: 100px 20px 80px;
     background: linear-gradient(135deg, #4285F4 0%, #34A853 100%);
     color: white;
     position: relative;
     overflow: hidden;
 }

 .hero-content {
     animation: slideDownHero 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
 }

 .hero-icon {
     width: 90px;
     height: 45px;
     margin-bottom: 25px;
     animation: pulseGlow 3s infinite ease-in-out;
 }

 .hero-title {
     font-size: clamp(2.2rem, 5vw, 3.2rem);
     font-weight: 700;
     margin-bottom: 15px;
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 .hero-subtitle {
     font-size: clamp(1rem, 2.5vw, 1.3rem);
     max-width: 700px;
     margin: 0 auto;
     opacity: 0.9;
     line-height: 1.6;
 }

 /* General Section Styling */
 .section {
     padding: 70px 20px;
     max-width: 1200px;
     margin-left: auto;
     margin-right: auto;
 }

 .intro-section,
 .animated-section {
     opacity: 0;
     animation: fadeInUp 1s ease-out 0.3s forwards;
 }

 .section-title {
     font-size: clamp(1.8rem, 4vw, 2.5rem);
     margin-bottom: 40px;
     text-align: center;
     position: relative;
     color: #1a73e8;
     font-weight: 600;
 }

 .section-title::after {
     content: "";
     display: block;
     width: 70px;
     height: 4px;
     background: linear-gradient(90deg, #4285F4, #34A853);
     margin: 12px auto 0;
     border-radius: 2px;
     opacity: 0;
     transform: scaleX(0);
     animation: scaleInX 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
 }

 .intro-paragraph {
     max-width: 850px;
     margin: 0 auto 20px auto;
     font-size: clamp(1rem, 2vw, 1.15rem);
     line-height: 1.7;
     text-align: center;
     color: #555;
 }

 .intro-paragraph:last-of-type {
     margin-bottom: 0;
 }

 .highlight {
     color: #1a73e8;
     font-weight: 600;
 }

 /* Grid Layout */
 .grid-layout {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 35px;
     margin-top: 50px;
     perspective: 1000px;
 }

 .staggered-grid .grid-item {
     opacity: 0;
     transform: translateY(30px);
     animation: fadeInUp 0.8s ease-out forwards;
     animation-delay: var(--animation-delay, 0s);
 }

 .grid-item {
     background: white;
     border-radius: 16px;
     padding: 30px 25px;
     box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
     transition: transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
     border: 1px solid #e0e0e0;
 }

 .grid-item:hover {
     transform: translateY(-15px) rotateY(5deg) scale(1.05);
     box-shadow: 0 25px 45px rgba(66, 133, 244, 0.25), 0 10px 20px rgba(0, 0, 0, 0.12);
 }

 .grid-item-header {
     display: flex;
     align-items: center;
     margin-bottom: 18px;
 }

 .grid-icon {
     width: 45px;
     height: 45px;
     margin-right: 18px;
     flex-shrink: 0;
 }

 .grid-title {
     font-size: 1.6rem;
     font-weight: 600;
     color: #333;
 }

 .grid-text {
     margin-top: 12px;
     font-size: 1rem;
     line-height: 1.6;
     color: #555;
 }

 .grid-key-benefit {
     margin-top: 15px;
     font-size: 0.95rem;
     color: #333;
 }

 .grid-key-benefit strong {
     color: #1a73e8;
 }

 .grid-service-list-header {
     font-size: 1rem;
     font-weight: 600;
     margin-top: 20px;
     margin-bottom: 8px;
     color: #444;
 }

 .grid-service-list {
     margin-top: 5px;
     padding-left: 20px;
     list-style-type: disc;
 }

 .grid-service-list li {
     margin-bottom: 6px;
     font-size: 0.95rem;
     color: #555;
 }

 /* Free Tier Section */
 .free-tier-section {
     background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
     text-align: center;
     padding: 80px 20px;
     border-radius: 25px;
     margin: 60px auto;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
 }

 .free-tier-title {
     font-size: clamp(1.8rem, 4vw, 2.4rem);
     margin-bottom: 25px;
     color: #1a73e8;
 }

 .free-tier-text {
     font-size: clamp(1rem, 2vw, 1.1rem);
     max-width: 750px;
     margin: 0 auto 20px auto;
     line-height: 1.7;
     color: #444;
 }

 .free-tier-disclaimer {
     font-size: 0.9rem;
     color: #777;
     margin-top: 30px;
     max-width: 650px;
     margin-left: auto;
     margin-right: auto;
     line-height: 1.5;
 }

 /* Call to Action Section */
 .cta-section {
     background: linear-gradient(135deg, #1a73e8, #4285F4);
     color: white;
     text-align: center;
     padding: 80px 20px;
     margin-top: 60px;
 }

 .cta-title {
     font-size: clamp(2rem, 5vw, 2.8rem);
     margin-bottom: 25px;
     font-weight: 700;
     text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
 }

 .cta-text {
     font-size: clamp(1.1rem, 2.5vw, 1.3rem);
     margin-bottom: 40px;
     max-width: 650px;
     margin: 0 auto 40px auto;
     opacity: 0.95;
     line-height: 1.6;
 }

 .cta-button-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 20px;
 }

 .cta-button {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     font-size: 1rem;
     font-weight: 600;
     padding: 14px 30px;
     border-radius: 30px;
     text-decoration: none;
     transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease, color 0.3s ease;
     cursor: pointer;
     border: none;
     min-width: 200px;
 }

 .cta-button:hover {
     transform: translateY(-3px) scale(1.03);
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
 }

 .cta-button:first-of-type,
 .free-tier-section .cta-button {
     background-color: #4285F4;
     color: white;
     box-shadow: 0 5px 15px rgba(66, 133, 244, 0.4);
 }

 .cta-button:first-of-type:hover,
 .free-tier-section .cta-button:hover {
     background-color: #357ae8;
     box-shadow: 0 8px 20px rgba(66, 133, 244, 0.5);
 }

 .cta-button-secondary {
     background-color: transparent;
     color: white;
     border: 2px solid white;
     box-shadow: none;
 }

 .cta-button-secondary:hover {
     background-color: rgba(255, 255, 255, 0.1);
     border-color: #f0f4ff;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }

 .button-icon {
     width: 20px;
     height: 20px;
     margin-left: 10px;
     filter: brightness(0) invert(1);
 }

 .cta-button-secondary .button-icon {
     filter: none;
 }

 /* Responsive Tweaks */
 @media (max-width: 768px) {
     .grid-layout {
         grid-template-columns: 1fr;
         gap: 25px;
     }

     .hero-section {
         padding: 80px 15px 60px;
     }

     .section {
         padding: 50px 15px;
     }

     .cta-section {
         padding: 60px 15px;
     }

     .free-tier-section {
         padding: 60px 15px;
         margin: 40px auto;
     }

     .cta-button-container {
         flex-direction: column;
         align-items: center;
         gap: 15px;
     }

     .cta-button {
         width: 90%;
         max-width: 350px;
     }
 }