/* ? THE REST OF THE STYLES */


/* ===========================
   STATICS SECTION
=========================== */

.sr-only {
   position: absolute;
   width: 1px;
   height: 1px;
   padding: 0;
   margin: -1px;
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
}

/* Statistics Section */
.statistics-section {
   width: 100%;
   padding: 1rem;
   margin: 0 auto;
}

/* Stats Container */
.stats-container {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 1.25rem;
   background-color: var(--dark-bg);
   backdrop-filter: var(--blur-effect);
   border-radius: var(--border-radius);
   padding: 2rem;
   max-width: 100%;
}

/* Stat Card Styles */
.stat-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 0.5rem;
   padding: 1rem;
}

.stat-number {
   font-weight: 700;
   font-size: 1.875rem;
   /* 30px */
   color: var(--text-white);
}

.stat-label {
   text-align: center;
   font-weight: 500;
   color: var(--primary-green);
   font-size: 0.75rem;
   /* 12px */
}

/* Responsive Design */
@media (min-width: 768px) {
   .stats-container {
      grid-template-columns: repeat(4, 1fr);
      padding: 4rem;
   }

   .stat-number {
      font-size: 2.25rem;
      /* 36px */
   }

   .stat-label {
      font-size: 1rem;
      /* 16px */
   }
}

@media (min-width: 1024px) {
   .stats-container {
      padding: 4rem;
   }

   .stat-number {
      font-size: 3rem;
      /* 48px */
   }

   .stat-label {
      font-size: 1.125rem;
      /* 18px */
   }
}

/* ===========================
   ABOUT SECTION
=========================== */

.about-container {
   margin-left: 1rem;
   margin-top: 2.5rem;
}

@media (min-width: 1024px) {
   .about-container {
      margin-left: 3rem;
      margin-top: 8rem;
   }
}

.about-title {
   font-weight: 600;
   white-space: nowrap;
   color: var(--text-white);
   font-size: 1.875rem;
   margin-bottom: 1rem;
}

.about-title span {
   color: var(--primary-green);
}

@media (min-width: 640px) {
   .about-title {
      font-size: 2.25rem;
   }
}

@media (min-width: 768px) {
   .about-title {
      font-size: 3rem;
   }
}

@media (min-width: 1536px) {
   .about-title {
      font-size: 4.5rem;
      line-height: 3.4rem;
   }
}

/* Content Layout */
.about-content {
   display: flex;
   flex-direction: column-reverse;
   width: 100%;
}

@media (min-width: 768px) {
   .about-content {
      flex-direction: row;
   }
}

/* Image Container */
.about-image-container {
   margin-top: -5rem;
   display: flex;
   justify-content: center;
}

@media (min-width: 768px) {
   .about-image-container {
      margin-top: 0;
      width: 50%;
   }
}

.about-image {
   display: block;
   margin: 0 auto;
   border-bottom: 2px solid var(--dark-gray);
   width: 100%;
   max-width: 400px;
}

/* Text Container */
.about-text-container {
   display: flex;
   flex-direction: column;
   width: 100%;
}

@media (min-width: 768px) {
   .about-text-container {
      width: 50%;
   }
}

.about-text {
   text-align: justify;
   margin: 0 0.5rem 0 1rem;
   color: var(--text-gray);
   font-size: 0.875rem;
}

@media (min-width: 640px) {
   .about-text {
      font-size: 1.125rem;
      margin: 0 1.5rem 0 1rem;
   }
}

@media (min-width: 768px) {
   .about-text {
      font-size: 1.25rem;
      margin: 0 2rem 0 1rem;
   }
}

/* Personal Details */
.personal-details-title {
   font-size: 1.25rem;
   font-weight: 600;
   margin: 1rem 0 0 1rem;
}

.personal-details {
   margin-left: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin-top: 1rem;
}

.detail-item {
   display: flex;
   align-items: center;
}

.detail-icon {
   margin-right: 0.5rem;
   color: var(--text-gray);
}

.detail-label {
   color: var(--text-gray);
   font-weight: 500;
   min-width: 80px;
}

.detail-value {
   color: var(--text-white);
   margin-left: 1rem;
}

.detail-link {
   color: var(--primary-green);
   text-decoration: none;
}

.detail-link:hover {
   text-decoration: underline;
}

/* ===========================
   SERVICES SECTION
=========================== */


@media (min-width: 640px) {
   .services-section {
      margin-top: 2rem;
   }
}

@media (min-width: 768px) {
   .services-section {
      margin-top: 3rem;
   }
}

@media (min-width: 1024px) {
   .services-section {
      margin-top: 4rem;
   }
}

/* Services Header */
.services-header {
   display: flex;
   width: min-content;
   justify-content: center;
   margin: 0 auto;
   gap: 0.5rem;
   border-radius: 0.5rem;
   padding: 0.5rem 1rem;
   font-weight: 600;
   margin-bottom: 2rem;
}

.services-header svg {
   margin-top: 2px;
   color: var(--primary-blue);
   height: 18px;
   width: 18px;
}

.services-header span {
   color: var(--primary-blue);
   white-space: nowrap;
}

/* Services Title */
.services-title {
   text-align: center;
   font-weight: 600;
   white-space: nowrap;
   color: var(--text-white);
   font-size: 1.875rem;
   margin: 0 1rem 0 1rem;
}

@media (min-width: 640px) {
   .services-title {
      font-size: 2.125rem;
   }
}

@media (min-width: 768px) {
   .services-title {
      font-size: 2.25rem;
   }
}

@media (min-width: 1024px) {
   .services-title {
      font-size: 3rem;
   }
}

@media (min-width: 1280px) {
   .services-title {
      font-size: 3.75rem;
      line-height: 3.4rem;
   }
}

/* Services Grid */
.services-grid {
   margin-top: 4rem;
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr;
}

@media (min-width: 640px) {
   .services-grid {
      margin-top: 6rem;
   }
}

@media (min-width: 768px) {
   .services-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 4rem;
   }
}

@media (min-width: 1024px) {
   .services-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

/* Service Card */
.service-card {
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
   align-items: center;
   text-align: center;
   padding: 1.5rem;
}

@media (min-width: 640px) {
   .service-card {
      flex-direction: row;
      align-items: flex-start;
      text-align: left;
      gap: 1.5rem;
   }
}

/* Special card for 3 items (last card centered on md screens) */
.service-card-special {
   grid-column: span 2;
   width: 50%;
   margin: 0 auto;
}

@media (min-width: 1024px) {
   .service-card-special {
      grid-column: span 1;
      width: auto;
   }
}

/* Service Icon */
.service-icon {
   display: flex;
   height: 4rem;
   width: 4rem;
   flex-shrink: 0;
   align-items: center;
   justify-content: center;
   border-radius: 1.5rem;
   background-color: var(--card-bg);
   font-size: 1.5rem;
   padding: 1rem;
}

/* Service Content */
.service-content {
   display: grid;
   gap: 0.5rem;
}

.service-title {
   font-size: 1.125rem;
   font-weight: 600;
}

@media (min-width: 640px) {
   .service-title {
      font-size: 1.25rem;
   }
}

@media (min-width: 768px) {
   .service-title {
      font-size: 1.5rem;
   }
}

.service-description {
   font-size: 0.875rem;
   color: var(--text-gray);
}

@media (min-width: 768px) {
   .service-description {
      font-size: 1rem;
   }
}

@media (max-width: 767px) {
   .services-grid {
      display: flex !important;
      flex-direction: column !important;
      gap: 20px;
   }

   .service-card-special {
      width: 100% !important;
      margin: 0 !important;
   }
}




/* ==============================

---------TESTIMONIALS-----------

===============================*/

.testimonials-section {
   margin-top: 3rem;
}

@media (min-width: 768px) {
   .testimonials-section {
      margin-top: 6rem;
   }
}

/* Section Header */
.section-header {
   display: flex;
   width: min-content;
   justify-content: center;
   margin: 0 auto;
   gap: 0.5rem;
   border-radius: 0.5rem;
   padding: 0.5rem 1rem;
   font-weight: 600;
   margin-bottom: 2rem;
}

.section-header svg {
   margin-top: 2px;
   color: var(--primary-blue);
   height: 18px;
   width: 18px;
}

.section-header span {
   color: var(--primary-blue);
   white-space: nowrap;
}

/* Section Title */
.section-title {
   text-align: center;
   font-weight: 700;
   white-space: nowrap;
   color: var(--text-white);
   font-size: 1.875rem;
   line-height: 2.5rem;
   letter-spacing: 0.025em;
   margin-bottom: 5rem;
}

.section-title span {
   color: var(--primary-green);
   letter-spacing: 0.05em;
}

@media (min-width: 640px) {
   .section-title {
      font-size: 2.125rem;
   }
}

@media (min-width: 768px) {
   .section-title {
      font-size: 2.25rem;
      margin-bottom: 8rem;
   }
}

@media (min-width: 1024px) {
   .section-title {
      font-size: 3rem;
      line-height: 3.4rem;
   }
}

@media (min-width: 1280px) {
   .section-title {
      font-size: 3.75rem;
      margin-bottom: 8rem;
   }
}

@media (min-width: 1536px) {
   .section-title {
      font-size: 4.5rem;
   }
}

/* Testimonials Grid */
.testimonials-grid {
   margin-top: 4em;
}

.testimonials-container {
   display: grid;
   gap: 1rem;
   grid-template-columns: 1fr;
   margin: 0 0.5rem;
}

@media (min-width: 768px) {
   .testimonials-container {
      margin: 0 1rem;
   }
}

@media (min-width: 1024px) {
   .testimonials-container {
      grid-template-columns: repeat(3, 1fr);
      gap: 2rem;
   }
}

/* Testimonial Card */
.testimonial-card {
   border-radius: 2rem;
   background-color: var(--card-bgs);
   padding: 1.5rem;
   margin: 1rem 0;
}

@media (min-width: 640px) {
   .testimonial-card {
      padding: 3rem 1.5rem;
      margin: 0;
   }
}

.testimonial-icon {
   display: flex;
   height: 3.5rem;
   width: 3.5rem;
   align-items: center;
   justify-content: center;
   border-radius: 9999px;
   background-color: var(--icon-bg);
   margin-bottom: 1.5rem;
}

.testimonial-icon svg {
   height: 1.5rem;
   width: 1.5rem;
}

.testimonial-text {
   color: var(--text-white);
   margin-bottom: 1.5rem;
   line-height: 1.5;
}

.testimonial-author {
   display: flex;
   gap: 0.5rem;
   align-items: center;
}

.author-image {
   overflow: hidden;
   border-radius: 9999px;
}

.author-image img {
   height: 3rem;
   width: 3rem;
   object-fit: cover;
}

.author-info h4 {
   margin: 0;
   font-size: 1rem;
}

.author-info p {
   margin: 0;
   font-size: 0.75rem;
   color: var(--text-white);
   opacity: 0.8;
}