.hero_section{ padding: 100px 0;} .yellow_shadow{ box-shadow: 0 0 10px 2px rgba(252, 211, 7, 0.3);} h1, h3, p{ line-height: 1.5 !important;} .blue_shadow{ box-shadow: 0 0 10px 2px rgba(0, 201, 252, 0.3);} h1.glow_text{ text-shadow: 0 0 8px rgba(0, 201, 252, 0.3), 0 0 16px rgba(0, 201, 252, 0.3);} .date-card{ border: 2px solid var(--processes);} .webinar-card{ border-radius: 12px;padding: 30px 40px;margin-top: 2rem;background-color: #112A5A;} .date, .time{ font-weight: 600;font-size: 18px;} .speaker-img{ width: 60px;height: 60px;border-radius: 50%;object-fit: cover;margin-right: 12px;} .hero_description{ font-size: 16px;line-height: 26px;font-weight: 500;} .countdown-box{ background-color: rgba(15, 23, 69, 0.4);box-shadow: 0 0 10px 2px rgba(252, 211, 7, 0.3);border-radius: 8px;padding: 10px;min-width: 70px;text-align: center;width: 90px;height: 78px;} .countdown-box h4{ margin: 0;font-size: 40px;font-weight: bold;} .mini_badge{ font-size: 12px;padding: 5px 10px;font-weight: 600;background: var(--data);color: #fff;border-radius: 6px;} .notice_badge p{ font-size: 15px;font-weight: 600;line-height: 17px;rotate: 10deg;padding: 15px 0 0 0;} .notice_badge img{ width: 220px;} .speaker-box p{ font-size: 18px;} .date-block p, .time-block p{ font-size: 18px;} .speaker-box small{ font-weight: 600;} /* Join Us Section */ .join_box{ background: #112A5A;border-radius: 12px;padding: 1.2rem 0.75rem;/* smaller padding */} .join_box img{ display: block;} .join_box p{ font-size: 15px;/* a bit smaller */ line-height: 1.2;/* tighter line height */ margin-top: 0.25rem;/* less gap from icon */} /* Divider line between columns only on desktop */ @media (min-width: 576px){ .join-us-section .cols:first-child{ border-right: 5px solid rgba(252, 211, 7, 0.3);border-radius: 15px;/* white semi-transparent line */ padding-right: 30px;/* breathing space */} .join-us-section .cols:last-child{ padding-left: 30px;/* match spacing on right column */}} @media (max-width: 576px){ .join-us-section .cols:first-child{ margin-bottom: 50px !important;}} /* Divider between left and right content */ @media (min-width: 992px){ .right_col{ border-left: 5px solid rgba(252, 211, 7, 0.3);/* yellow divider */ padding-left: 30px;/* space from divider */}} @media (min-width: 768px) and (max-width: 991px){ .event-info{ justify-content: space-between !important;} .countdown-box{ padding: 15px;}} @media (max-width: 767px){ .event-info{ flex-direction: column !important;align-items: flex-start !important;margin-top: 20px;margin-bottom: 40px;} .notice_badge{ margin-top: 20px;} .notice_badge p{ width: 160px;padding-top: 36px;} .notice_badge div{ display: flex;justify-content: center;align-items: center;} .dates div:first-child{ margin-bottom: 15px;}} @media (max-width: 76px){} .program_section{ padding: 110px 20px;} .event-box-header{ width: 100%;background-color: var(--data);color: var(--workflow);border-radius: 8px 8px 0 0;font-size: 22px;padding: 8px 35px;} .event-box{ max-width: 500px;margin: 0 auto;} .event-box-body{ background-color: #050543d4;color: #fff;padding: 8px 35px;border-radius: 0px 0px 8px 8px;width: 100%;padding: 15px 35px;} .divider{ width: 2px;background: #ffffff1f;z-index: 9999;} .countdown-timer>div{ text-align: center;margin: 0 25px;} .countdown-timer>div div{ font-size: 46px;font-weight: 700;line-height: 1.2;} .countdown-timer small{ font-size: 15px;font-weight: 500;letter-spacing: 1px;color: #fff;} .event-location{ font-weight: 600;font-size: 22px;color: var(--workflow);} .limited-badge{ font-size: 16px;color: var(--data);margin-bottom: 8px;margin-top: 16px;} .timeline-wrapper{ max-width: 800px;margin: 0 auto;padding-left: 40px;} .timeline-line{ position: absolute;top: 10px;left: 60px;width: 8px;height: -webkit-fill-available;background-color: rgba(252, 211, 7, 0.5);border-radius: 50px;z-index: 1;} .timeline-item{ position: relative;margin-bottom: 50px;display: flex;align-items: flex-start;z-index: 2;} .timeline-item .text-muted{ font-size: 14px;font-weight: 500;font-style: normal;padding-top: 6px;} .timeline-time{ width: 60px;font-weight: bold;color: var(--workflow);} .timeline-content h5{ font-style: italic;line-height: 30px;} .timeline-content p{ margin-bottom: 8px;} .timeline-content{ max-width: 600px;color: var(--workflow);} .timeline-content .content p{ margin: 0;} .timeline-content .content .name{ font-style: italic;font-weight: 500;} .timeline-content .content .company-name{ color: var(--processes);font-weight: 600;} .logos{ gap: 4.5rem;padding: 2rem 0;} .timeline-dot{ display: flex;align-items: center;justify-content: center;margin-right: 20px;flex-shrink: 0;z-index: 3;} .timeline-dot:hover{ transform: scale(1.05);} .timeline-time{ display: none;} .timeline-description ul{ padding-left: 1rem;color: #333;font-size: 15px;margin-top: 14px;list-style-type: disc;} .timeline-description li{ margin-bottom: 6px;} .timeline-icon{ font-size: 20px;color: rgba(5, 5, 67, 0.32);} .partner-logos{ margin-top: 60px;background-color: #050543d4;} .date_time{ font-weight: 500;font-size: 22px;} .date_time i{ margin-right: 10px;} .cta-date-time i{ color: var(--processes);font-size: 20px;} .cta-date-time li{ margin-bottom: 18px;color: var(--workflow);} .map-responsive iframe{ border-radius: 12px;width: 100%;height: 100%;} .final-cta-section{ padding: 130px 0;} .feature-box{ min-height: 75px;} .text-nowrap{ white-space: nowrap;} .date-box{ background: #112A5A;text-align: left;} .date-card, .date-box{ font-size: 15px;} .webinar-dates .btn-warning{ background-color: #FFD11A;border: none;color: #000;font-size: 1rem;border-radius: 6px;} .webinar-dates .btn-warning:hover{ background-color: #FFC107;color: #000;} @media (max-width: 576px){ .timeline-line{ left: 20px;height: 93%;} .timeline-wrapper{ padding-left: 0px;} .timeline-time{ width: 50px;font-size: 14px;} .timeline-dot{ margin-right: 15px;} .timeline-description li{ font-size: 14px !important;} .logos{ gap: 3rem;padding: 20px 12px;} .logos img{ height: 38px !important;} .logos img:last-child{ height: 50px !important;} .countdown-timer>div{ margin: 0 12px;}} @media (max-width: 576px){ .hero-title{ font-size: 2rem;} .hero-subtitle{ font-size: 1rem;} .event-box{ max-width: 400px;padding: 30px 8px;} .countdown-timer>div div{ font-size: 12px;} .event-box-body{ font-size: 14px;}} /* ---------->> NEW CSS FOR EVENT PAGE <<--------- */ .achievements{ text-align: center;display: flex;flex-direction: column;align-items: start;font-family: "Arial", sans-serif;} .achievements-title{ font-size: 18px;font-weight: 700;color: #0b0146;/* dark navy */ font-family: "Montserrat", sans-serif;margin-bottom: 20px;} .achievements-cards{ display: flex;justify-content: space-between;gap: 10px;flex-wrap: wrap;width: 100%;} .achievement-card{ flex: 1 1 0;/* equal width distribution */ /* min-width: 0;*/ /* prevents uneven sizing from text/logo */ height: 100%;border-radius: 10px;overflow: hidden;/* background: #fff;*/ transition: transform 0.2s ease-in-out;position: relative;} .achievement-card:hover{ transform: translateY(-5px);} @media (max-width: 991px){ .achievements-cards{ flex-direction: column;/* stack vertically */ align-items: center;/* center cards */} .achievement-card{ flex: unset;}} .webinar_description{ font-size: 15px;line-height: 1.5em;font-weight: 500;} .timeline-box{ border-radius: 8px;} .why_sec.why_block{ border-radius: 8px;} /* Mobile */ @media (max-width: 480px){ .webinar_description{ font-size: 15px;line-height: 1.5em;}} @media (max-width: 576px){ .speaker_img{ width: 120px;}} @media (min-width: 991px) and (max-width: 1440px){ section.first_section .container{ width: 85%;}} #doc-flow{ margin-top: 80px;} .flow_box{ background-color: #112A5A;border-radius: 12px;padding: 40px 0;text-align: center;transition: transform .3s ease, box-shadow .3s ease;display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 200px;width: 65%;z-index: 2;} .flow_box img{ max-width: 120px;height: auto;} .flow_box p{ color: #fff;font-size: 1rem;margin-top: 24px;} /* spacing between boxes */ #doc-flow .row{ /* gap: 60px;*/ flex-wrap: wrap;justify-content: center;} /* animated text overlay */ .file-format{ position: absolute;z-index: 3;top: 57%;left: 14%;transform: translate(-50%, -50%);color: #FCD307;font-weight: 600;text-transform: uppercase;font-size: 15px;white-space: nowrap;width: max-content;height: 24px;/* keeps layout stable during transitions */} /* each label absolutely positioned for animation */ .file-format span{ position: absolute;top: 0;left: 0;transition: none;/* handled by jQuery */} /* animated text overlay */ .doc-type{ position: absolute;z-index: 3;top: 16%;left: 10%;transform: translate(-50%, -50%);color: var(--workflow);font-weight: 600;text-transform: uppercase;font-size: 15px;white-space: nowrap;width: max-content;height: 24px;} /* each label absolutely positioned for animation */ .doc-type span{ position: absolute;top: 0;left: 0;transition: none;} /* continuous dashed yellow line BELOW boxes */ .connecting-line{ position: absolute;bottom: 55%;left: 50%;transform: translateX(-50%);width: 50%;height: 5px;background: repeating-linear-gradient(to right, var(--data) 0 10px, transparent 10px 20px);animation: move-dash 1.2s linear infinite;border-radius: 2px;z-index: 0;opacity: 0.8;} .flow_box_wrapper .flow_title{ margin-top: 15px;} /* wrapper ensures relative positioning */ .flow_wrapper{ position: relative;display: inline-block;} /* basic bubble style */ .bubble{ position: absolute;width: 12px;height: 12px;background-color: #FFF;border-radius: 50%;animation: float-bubble 1.4s ease-in-out infinite;} /* specific corner positions */ .bubble-top-left{ top: 1%;left: 5%;animation-delay: 0s;} .bubble-top-right{ top: 4%;left: 36%;animation-delay: 0.5s;} .bubble-bottom-left{ bottom: 9%;left: 0%;animation-delay: 1s;} .bubble-bottom-right{ bottom: 8%;right: -2%;animation-delay: 1.5s;background-color: var(--processes);} /* continuous movement background line */ @keyframes move-dash{ from{ background-position: 0 0;} to{ background-position: 20px 0;}} /* floating pulse animation xtract logo*/ @keyframes float-bubble{ 0%{ transform: translateY(0) scale(0.9);opacity: 0.8;} 50%{ transform: translateY(0) scale(1);opacity: 1;} 100%{ transform: translateY(0) scale(0.9);opacity: 0.8;}} /* ============================= */ /* RESPONSIVE FIXES */ /* ============================= */ /* Default (Desktop) – 3 columns */ /* Desktop default */ /* Default desktop layout: 3 columns */ /* Flow boxes styling */ #doc-flow .flow_box{ background-color: #112A5A;border-radius: 12px;padding: 40px 0;text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;min-height: 200px;} /* Responsive adjustments */ @media (max-width: 991px){ .connecting-line{ display: block;position: absolute;left: 60%;top: 20%;width: 5px;height: 60%;background: repeating-linear-gradient(to bottom, var(--data) 0 10px, transparent 10px 20px);animation: move-dash-vert 1.5s linear infinite;transform: translateX(-50%);} #doc-flow .doc-type, #doc-flow .file-format{ font-size: 12px;font-weight: 500 ;}} @media (max-width: 526px){ #doc-flow .flow_box{ padding: 15px 0;min-height: 160px;width: 60%;} #doc-flow .flow_box img{ max-width: 95px;} #doc-flow .doc-type, #doc-flow .file-format{ font-size: 12px;font-weight: 500 ;} .flow_box_wrapper .flow_title{ width: 63%;margin-top: 5px;text-align: left;}} @media (min-width: 526px) and (max-width: 991px){ #doc-flow .row{ flex-direction: column !important;} #doc-flow .flow_box{ padding: 30px 0;text-align: center;min-height: 160px;width: 40%;} .flow_box_wrapper .flow_title{ width: 40%;margin-top: 5px;text-align: left;} #doc-flow .flow_box img{ max-width: 95px;}} @media (min-width: 991px) and (max-width: 1024px){ #doc-flow .flow_box{ padding: 30px 0;text-align: center;min-height: 160px;width: 90%;} #doc-flow .flow_box img{ max-width: 80px;} #doc-flow .doc-type, #doc-flow .file-format{ font-size: 13px;font-weight: 500 ;}} @media (min-width: 1025px) and (max-width: 1440px){ #doc-flow .flow_box{ padding: 40px 0;text-align: center;min-height: 170px;width: 90%;} #doc-flow .flow_box img{ max-width: 90px;} #doc-flow .doc-type{ font-size: 14px;}} /* Optional vertical line animation */ @keyframes move-dash-vert{ 0%{ background-position: 0 0;} 100%{ background-position: 0 20px;}}