/**
 * HighMarket Academy LLP - Home Page Stylesheet
 * Used on index.php
 * Styling: Professional Square Architecture
 */

/* Hero Section */
.hero-section {
   position: relative;
   overflow: hidden;
   min-height: 500px;
   display: flex;
   align-items: center;
   background: #182232;
   color: #fff;
   padding: 0;
}
.hero-bg-carousel {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}
.hero-bg-carousel .carousel-inner,
.hero-bg-carousel .carousel-item {
   width: 100%;
   height: 100%;
   position: absolute;
   top: 0;
   left: 0;
}
.hero-bg-carousel .carousel-item img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
.hero-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg, rgba(24, 34, 50, 0.70) 0%, rgba(28, 38, 56, 0.50) 55%, rgba(28, 38, 56, 0.25) 100%);
   z-index: 2;
}
.hero-content {
   position: relative;
   z-index: 3;
   padding: 75px 0 70px;
}
.hero-tagline {
   display: inline-flex;
   align-items: center;
   background: rgba(182, 117, 95, 0.18);
   color: #e6bcae;
   border: 1px solid rgba(182, 117, 95, 0.45);
   border-radius: 0;
   padding: 7px 20px;
   font-size: 13.5px;
   font-weight: 700;
   margin-bottom: 20px;
   letter-spacing: 0.5px;
}
.hero-title {
   font-size: 42px;
   font-weight: 800;
   line-height: 1.25;
   margin-bottom: 20px;
   color: #ffffff;
   letter-spacing: -0.5px;
}
.hero-desc {
   font-size: 16.5px;
   color: #f1f5f9;
   line-height: 1.7;
   margin-bottom: 16px;
   max-width: 740px;
}

/* Feature Cards (Who We Serve) */
.feature-card {
   background: #faf6f0;
   border-radius: 0;
   padding: 30px 24px;
   box-shadow: 0 8px 24px rgba(24, 34, 50, 0.05);
   transition: all 0.3s ease;
   height: 100%;
   border: 1px solid #ebd9c8;
   position: relative;
   overflow: hidden;
}
.feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 16px 35px rgba(182, 117, 95, 0.15);
   border-color: #b6755f;
   background: #ffffff;
}
.feature-card .card-icon {
   width: 60px;
   height: 60px;
   border-radius: 0;
   background: linear-gradient(135deg, #f5ede4 0%, #ebd9c8 100%);
   color: #b6755f;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 26px;
   margin-bottom: 20px;
   border: 1px solid rgba(182, 117, 95, 0.3);
   transition: all 0.3s ease;
}
.feature-card:hover .card-icon {
   background: linear-gradient(135deg, #c4856f 0%, #b6755f 100%);
   color: #ffffff;
   transform: scale(1.04);
}
.feature-card h4 {
   font-size: 20px;
   font-weight: 700;
   color: #243047;
   margin-bottom: 12px;
}
.feature-card p {
   color: #64748b;
   font-size: 15px;
   line-height: 1.6;
}
.feature-card .card-motto {
   font-size: 13px;
   font-weight: 700;
   color: #b6755f;
   text-transform: uppercase;
   letter-spacing: 0.5px;
   margin-top: 15px;
   display: block;
}

/* Process Steps (How Learning Works) */
.process-step {
   background: #faf6f0;
   border-radius: 0;
   padding: 22px 15px;
   text-align: center;
   border: 1.5px solid #ebd9c8;
   position: relative;
   box-shadow: 0 4px 12px rgba(0,0,0,0.03);
   transition: all 0.3s ease;
}
.process-step:hover {
   border-color: #b6755f;
   background: #243047;
   color: #ffffff;
   transform: translateY(-3px);
   box-shadow: 0 10px 24px rgba(182, 117, 95, 0.18);
}
.process-step:hover h5, .process-step:hover span {
   color: #ffffff !important;
}
.process-step:hover .step-num {
   color: #e6bcae !important;
}
.process-step .step-num {
   font-size: 12px;
   font-weight: 800;
   color: #b6755f;
   display: block;
   margin-bottom: 6px;
   letter-spacing: 1px;
}
.process-step h5 {
   font-size: 17px;
   font-weight: 700;
   color: #243047;
   margin-bottom: 0;
}

/* Value Pills */
.value-pill {
   background: #faf6f0;
   border: 1px solid #ebd9c8;
   padding: 12px 18px;
   border-radius: 0;
   font-size: 15px;
   font-weight: 600;
   color: #1e293b;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   gap: 12px;
   transition: all 0.2s;
   box-shadow: 0 2px 6px rgba(0,0,0,0.02);
}
.value-pill:hover {
   background: #ffffff;
   border-color: #b6755f;
   transform: translateX(4px);
}
.value-pill i {
   color: #b6755f;
   font-size: 16px;
}

/* CTA Box */
.cta-box {
   background: linear-gradient(135deg, #1c2638 0%, #243047 100%);
   border-radius: 0;
   padding: 50px 40px;
   color: #fff;
   position: relative;
   overflow: hidden;
   border-top: 4px solid #628e84;
}

/* What We Do Section Styles */
.wwd-card-wrapper {
   background: #faf6f0;
   border-radius: 0;
   border: 1px solid #ebd9c8;
   padding: 32px 28px;
   height: 100%;
   box-shadow: 0 4px 20px rgba(24, 34, 50, 0.04);
   transition: all 0.3s ease;
}
.wwd-card-wrapper:hover {
   border-color: #b6755f;
   box-shadow: 0 10px 30px rgba(182, 117, 95, 0.12);
}
.wwd-item-card {
   background: #f5ede4;
   border: 1px solid #ebd9c8;
   border-radius: 0;
   padding: 16px 16px;
   height: 100%;
   display: flex;
   align-items: flex-start;
   gap: 14px;
   transition: all 0.3s ease;
}
.wwd-item-card:hover {
   background: #ffffff;
   border-color: #b6755f;
   box-shadow: 0 6px 18px rgba(182, 117, 95, 0.12);
   transform: translateY(-2px);
}
.wwd-item-icon {
   width: 44px;
   height: 44px;
   border-radius: 0;
   background: #fbf0eb;
   color: #b6755f;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   flex-shrink: 0;
   transition: all 0.3s ease;
   border: 1px solid rgba(182, 117, 95, 0.2);
}
.wwd-item-card:hover .wwd-item-icon {
   background: linear-gradient(135deg, #c4856f, #b6755f);
   color: #ffffff;
   transform: scale(1.03);
}
.wwd-item-title {
   font-size: 15px;
   font-weight: 700;
   color: #243047;
   margin-bottom: 3px;
   line-height: 1.35;
}
.wwd-item-card:hover .wwd-item-title {
   color: #b6755f;
}
.wwd-item-desc {
   font-size: 13px;
   color: #64748b;
   line-height: 1.5;
   margin-bottom: 0;
}

.wwd-objective-card {
   background: linear-gradient(145deg, #182232 0%, #243047 60%, #1c2638 100%);
   border-radius: 0;
   padding: 36px 30px;
   color: #ffffff;
   height: 100%;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   overflow: hidden;
   box-shadow: 0 12px 36px rgba(24, 34, 50, 0.18);
   border: 1px solid rgba(229, 169, 59, 0.35);
}
.wwd-objective-card::before {
   content: '';
   position: absolute;
   top: -40px;
   right: -40px;
   width: 180px;
   height: 180px;
   background: radial-gradient(circle, rgba(229, 169, 59, 0.2) 0%, rgba(229, 169, 59, 0) 70%);
   border-radius: 0;
   pointer-events: none;
}
.wwd-objective-tag {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: rgba(229, 169, 59, 0.18);
   color: #e6bcae;
   border: 1px solid rgba(229, 169, 59, 0.4);
   border-radius: 0;
   padding: 5px 14px;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 18px;
}
.wwd-objective-title {
   font-size: 23px;
   font-weight: 800;
   color: #ffffff;
   line-height: 1.35;
   margin-bottom: 16px;
}
.wwd-objective-desc {
   font-size: 15px;
   line-height: 1.7;
   color: #f1f5f9;
   margin-bottom: 22px;
}
.wwd-objective-pill {
   background: rgba(255, 255, 255, 0.08);
   border: 1px solid rgba(255, 255, 255, 0.12);
   border-radius: 0;
   padding: 10px 14px;
   margin-bottom: 10px;
   display: flex;
   align-items: center;
   gap: 12px;
   font-size: 13.5px;
   color: #f8fafc;
   transition: all 0.25s ease;
}
.wwd-objective-pill:hover {
   background: rgba(255, 255, 255, 0.14);
   border-color: rgba(229, 169, 59, 0.5);
}
.wwd-objective-pill i {
   color: #b6755f;
   font-size: 15px;
   width: 20px;
   text-align: center;
   flex-shrink: 0;
}

/* Responsive Media Queries */
@media (max-width: 991.98px) {
   .hero-section {
      min-height: auto;
   }
   .hero-content {
      padding: 60px 15px 55px;
   }
   .hero-title {
      font-size: 33px;
      line-height: 1.3;
   }
   .hero-desc {
      font-size: 15.5px;
   }
}

@media (max-width: 767.98px) {
   .hero-content {
      padding: 48px 18px 46px;
   }
   .hero-tagline {
      font-size: 12px;
      padding: 5px 14px;
      margin-bottom: 15px;
   }
   .hero-title {
      font-size: 26px;
      line-height: 1.32;
      margin-bottom: 15px;
   }
   .hero-desc {
      font-size: 14.5px;
      line-height: 1.65;
      margin-bottom: 14px;
   }
   .section-heading {
      font-size: 26px;
   }
   .cta-box {
      padding: 35px 22px;
   }
}

@media (max-width: 480px) {
   .hero-content {
      padding: 40px 14px 40px;
   }
   .hero-title {
      font-size: 23px;
      line-height: 1.34;
   }
   .hero-desc {
      font-size: 14px;
   }
}