/* css/components/objectives-section.css */

:root {
   --green-main: #2ecc71;
   --green-dark: #219150;
   --dark-blue: #0f172a;
   --bg-light: #f8fafc;
}

/* ========================================
   STYLE 1: STICKY SPLIT
   ======================================== */
.sticky-wrapper {
   background: white;
   border-radius: 30px;
   overflow: hidden;
   box-shadow: 0 20px 60px rgba(0,0,0,0.05);
}

.sticky-col-left {
   background: #0f172a;
   color: white;
   padding: 60px;
   position: sticky;
   top: 0;
   height: fit-content;
   min-height: 100%;
}

.sticky-col-right {
   padding: 60px;
   background: #fff;
}

.objective-item {
   display: flex;
   gap: 20px;
   margin-bottom: 15px;
   padding-bottom: 15px;
   border-bottom: 1px solid #f1f5f9;
}

.objective-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.obj-number {
   font-size: 2.5rem;
   font-weight: 800;
   color: rgba(46, 204, 113, 0.2);
   line-height: 1;
   flex-shrink: 0;
}

.bg-deco-img {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 50%;
   background-position: bottom;
   background-size: cover;
   opacity: 0.2;
   mask-image: linear-gradient(to top, black, transparent);
}

/* ========================================
   STYLE 2: VERTICAL FLOW
   ======================================== */
.flow-container {
   background: white;
   border-radius: 24px;
   padding: 50px;
   box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

.flow-left {
   position: relative;
   padding-right: 40px;
}

.flow-list {
   position: relative;
   border-left: 3px solid #e2e8f0;
   padding-left: 30px;
   margin-left: 10px;
}

.flow-item {
   position: relative;
   margin-bottom: 35px;
}

.flow-item:last-child {
   margin-bottom: 0;
}

.flow-item::before {
   content: '';
   position: absolute;
   left: -40px;
   top: 5px;
   width: 18px;
   height: 18px;
   background: var(--green-main);
   border: 4px solid white;
   border-radius: 50%;
   box-shadow: 0 0 0 1px #e2e8f0;
}

.flow-item-title {
   font-weight: 700;
   font-size: 1.05rem;
   color: var(--dark-blue);
   margin-bottom: 5px;
}

.sticky-content {
   position: sticky;
   top: 20px;
}

/* ========================================
   STYLE 3: NUMBERED CARDS
   ======================================== */
.numbered-header {
   text-align: center;
   margin-bottom: 50px;
   max-width: 800px;
   margin-left: auto;
   margin-right: auto;
}

.num-card {
   background: white;
   border-radius: 16px;
   padding: 30px 25px 30px 60px;
   position: relative;
   overflow: hidden;
   height: 100%;
   border-bottom: 4px solid transparent;
   transition: 0.3s;
   box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

.num-card:hover {
   transform: translateY(-5px);
   border-bottom-color: var(--green-main);
   box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.big-number {
   position: absolute;
   left: -10px;
   top: -15px;
   font-size: 6rem;
   font-weight: 900;
   color: rgba(46, 204, 113, 0.1);
   line-height: 1;
   transition: 0.3s;
}

.num-card:hover .big-number {
   color: rgba(46, 204, 113, 0.2);
   transform: scale(1.1);
}

.num-content {
   position: relative;
   z-index: 2;
   font-weight: 600;
   color: #334155;
}

/* ========================================
   STYLE 4: MODERN SPLIT
   ======================================== */
.split-obj-wrapper {
   background: white;
   border-radius: 30px;
   padding: 0;
   overflow: hidden;
   box-shadow: 0 15px 50px rgba(0,0,0,0.05);
}

.split-left {
   padding: 60px;
   background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.split-right {
   padding: 60px;
   background: white;
}

.check-item {
   display: flex;
   gap: 20px;
   align-items: flex-start;
   margin-bottom: 20px;
   padding-bottom: 20px;
   border-bottom: 1px solid #f1f5f9;
}

.check-item:last-child {
   border-bottom: none;
   margin-bottom: 0;
   padding-bottom: 0;
}

.check-icon {
   width: 50px;
   height: 50px;
   background: #f0fdf4;
   color: var(--green-main);
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 1.2rem;
   flex-shrink: 0;
   transition: 0.3s;
}

.check-item:hover .check-icon {
   background: var(--green-main);
   color: white;
   transform: scale(1.1);
}

/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 992px) {
   .flow-left {
      margin-bottom: 40px;
   }
   
   .sticky-col-left {
      position: relative;
   }
}