/* ============================================== FORCES INDIA EXPO 2027 - ABOUT SECTION Bootstrap 4.6.1 Compatible ============================================== */ .forces-india-about-section { --forces-india-navy: #062654; --forces-india-blue: #0756a3; --forces-india-orange: #fe610d; --forces-india-green: #138343; padding: 50px 0; background: #f7faff; position: relative; overflow: hidden; font-family: inherit; } .forces-india-about-section *, .forces-india-about-section *::before, .forces-india-about-section *::after { box-sizing: border-box; } .forces-india-about-container { max-width: 1350px; } /* DECORATIVE BACKGROUND */ .forces-india-about-section::before { content: ""; position: absolute; width: 400px; height: 400px; top: -200px; right: -200px; border: 80px solid rgba(7, 86, 163, 0.035); border-radius: 50%; pointer-events: none; } /* ============================================== LEFT IMAGE ============================================== */ .forces-india-about-visual { position: relative; width: 100%; height: 100%; min-height: 400px; border-radius: 15px; overflow: hidden; background: #dce9f5; box-shadow: 0 18px 42px rgba(3, 29, 66, 0.12); } .forces-india-about-image { position: absolute; width: 100%; height: 100%; inset: 0; display: block; object-fit: cover; object-position: center; transition: transform 0.6s ease; } .forces-india-about-visual:hover .forces-india-about-image { transform: scale(1.035); } /* .forces-india-about-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(2, 22, 49, 0.20) 0%, transparent 35%, rgba(2, 22, 49, 0.14) 55%, rgba(2, 22, 49, 0.95) 100% ); pointer-events: none; } */ /* IMAGE TOP LABEL */ .forces-india-about-photo-top { position: absolute; z-index: 2; left: 25px; top: 25px; display: inline-flex; align-items: center; gap: 9px; padding: 11px 17px; background: rgba(255, 255, 255, 0.96); color: var(--forces-india-navy); font-size: 12px; font-weight: 800; letter-spacing: 1px; border-radius: 5px; } .forces-india-about-live-dot { width: 8px; height: 8px; flex-shrink: 0; background: var(--forces-india-orange); border-radius: 50%; } /* IMAGE BOTTOM EVENT DETAILS */ .forces-india-about-photo-bottom { position: absolute; z-index: 2; left: 30px; right: 30px; bottom: 32px; color: #fff; } .forces-india-about-date { display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 20px; } .forces-india-about-date i { color: var(--forces-india-orange); font-size: 25px; } .forces-india-about-venue { display: flex; align-items: flex-start; gap: 13px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.3); color: #fff; font-size: 16px; line-height: 1.6; } .forces-india-about-venue i { color: var(--forces-india-orange); font-size: 22px; margin-top: 3px; } .forces-india-about-venue strong { display: block; color: #fff; } /* ============================================== RIGHT CONTENT ============================================== */ .forces-india-about-content { padding: 5px 0 5px 30px; position: relative; z-index: 1; } /* SECTION LABEL */ .forces-india-about-label { display: flex; align-items: center; gap: 12px; color: var(--forces-india-blue); font-size: 13px; letter-spacing: 2px; font-weight: 800; margin-bottom: 15px; } .forces-india-about-label-line { width: 34px; height: 3px; border-radius: 10px; background: var(--forces-india-orange); } /* TITLE */ .forces-india-about-title { color: var(--forces-india-navy); font-size: 43px; line-height: 1.17; font-weight: 800; letter-spacing: -1.1px; margin: 0 0 18px; } .forces-india-about-title span { color: var(--forces-india-orange); } /* SUBTITLE */ .forces-india-about-subtitle { font-size: 17px; line-height: 1.65; color: #111 !important; margin-bottom: 21px; } .forces-india-about-subtitle strong { font-weight: 650; } /* FORCES BAR */ .forces-india-about-forces { display: flex; align-items: center; gap: 13px; background: #eaf2fc; border-left: 3px solid var(--forces-india-blue); padding: 13px 17px; color: var(--forces-india-navy); font-size: 20px; line-height: 1.6; font-weight: 750; margin-bottom: 20px; border-radius: 0 7px 7px 0; } .forces-india-about-forces i { font-size: 20px; color: var(--forces-india-blue); flex-shrink: 0; } /* EXPO THEME */ .forces-india-about-theme { display: flex; gap: 15px; align-items: flex-start; background: #fff; border: 1px solid #e0e8f2; border-radius: 9px; padding: 17px 19px; margin-bottom: 23px; box-shadow: 0 5px 18px rgba(2, 30, 70, 0.035); } .forces-india-about-theme-icon { width: 40px; height: 40px; min-width: 40px; display: flex; justify-content: center; align-items: center; background: #fff0e5; color: var(--forces-india-orange); border-radius: 8px; font-size: 18px; } .forces-india-about-theme-label { display: block; color: var(--forces-india-orange); font-size: 13px; font-weight: 800; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .5px; } .forces-india-about-theme-text { color: var(--forces-india-navy); font-size: 20px; line-height: 1.55; font-weight: 750; } /* DESCRIPTION */ .forces-india-about-description { margin-bottom: 25px; } .forces-india-about-description p { color: #111 !important; font-size: 17px !important; line-height: 1.85; text-align: justify; font-weight: 400; margin: 0; /* text-align: left; */ } .forces-india-about-description strong { color: inherit; font-weight: 700; } /* ============================================== MORE ABOUT BUTTON ============================================== */ .forces-india-about-btn-wrap { display: flex; align-items: center; } .forces-india-about-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 50px; padding: 5px 5px 5px 22px; background: var(--forces-india-navy); color: #fff !important; border-radius: 6px; text-decoration: none !important; font-size: 15px; font-weight: 750; transition: background .3s ease, box-shadow .3s ease; } .forces-india-about-btn-icon { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--forces-india-orange); color: #fff; border-radius: 4px; transition: background .3s ease, transform .3s ease; } .forces-india-about-btn:hover, .forces-india-about-btn:focus { background: var(--forces-india-blue); color: #fff !important; box-shadow: 0 8px 20px rgba(4, 38, 84, 0.15); } .forces-india-about-btn:hover .forces-india-about-btn-icon { background: #e76600; transform: translateX(2px); } /* ============================================== RESPONSIVE ============================================== */ @media (max-width: 1199.98px) { .forces-india-about-section { padding: 70px 0; } .forces-india-about-content { padding-left: 10px; } .forces-india-about-title { font-size: 38px; } } @media (max-width: 991.98px) { .forces-india-about-visual { height: 430px; min-height: 430px; } .forces-india-about-content { padding: 25px 0 0; } .forces-india-about-title { font-size: 38px; } } @media (max-width: 767.98px) { .forces-india-about-section { padding: 50px 0; } .forces-india-about-visual { height: 350px; min-height: 350px; } .forces-india-about-title { font-size: 33px; letter-spacing: -0.5px; } .forces-india-about-date { font-size: 21px; } .forces-india-about-photo-bottom { left: 20px; right: 20px; bottom: 22px; } .forces-india-about-photo-top { left: 20px; top: 20px; } .forces-india-about-content { padding-top: 20px; } .forces-india-about-description p { line-height: 1.75; } } @media (max-width: 420px) { .forces-india-about-title { font-size: 30px; } .forces-india-about-forces { align-items: flex-start; font-size: 14px; } .forces-india-about-theme { padding: 15px; } .forces-india-about-date { font-size: 18px; } .forces-india-about-venue { font-size: 14px; } .forces-india-about-visual { height: 310px; min-height: 310px; } } /* ============================================ FORCES INDIA - VISION & MISSION Bootstrap 4.6.1 ============================================ */ .forces-india-vision-section { padding: 50px 0; background: #eef3fa; position: relative; overflow: hidden; } .forces-india-vision-section *, .forces-india-vision-section *::before, .forces-india-vision-section *::after { box-sizing: border-box; } .forces-india-vision-container { max-width: 1350px; } /* MAIN DARK BOX */ .forces-india-vision-box { position: relative; padding: 50px 65px 50px; border-radius: 16px; background: linear-gradient( 125deg, #041b3c 0%, #062b5c 55%, #04366d 100% ); overflow: hidden; isolation: isolate; box-shadow: 0 22px 55px rgba(4, 31, 70, 0.14); } .forces-india-vision-box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px; background: linear-gradient( 90deg, #ff7500 0%, #ff7500 36%, #ffffff 50%, #148c49 65%, #148c49 100% ); z-index: 2; } /* SUBTLE BACKGROUND ELEMENTS */ .forces-india-vision-circle { position: absolute; width: 500px; height: 500px; right: -210px; top: -230px; border: 1px solid rgba(255,255,255,0.07); border-radius: 50%; pointer-events: none; } .forces-india-vision-circle::before, .forces-india-vision-circle::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,0.06); border-radius: 50%; } .forces-india-vision-circle::before { inset: 55px; } .forces-india-vision-circle::after { inset: 115px; } .forces-india-vision-grid { position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.025) 1px, transparent 1px ); background-size: 55px 55px; opacity: 0.45; pointer-events: none; } /* SECTION HEADING */ .forces-india-vision-heading { position: relative; z-index: 1; text-align: center; margin-bottom: 55px; } .forces-india-vision-heading-icon { width: 58px; height: 58px; display: inline-flex; justify-content: center; align-items: center; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.06); border-radius: 50%; color: #ff810d; font-size: 25px; margin-bottom: 20px; } .forces-india-vision-heading h2 { font-size: 38px; line-height: 1.3; font-weight: 800; letter-spacing: -0.6px; color: #ffffff; margin: 0; } .forces-india-vision-heading h2 span { color: #ff900b; } .forces-india-vision-heading-line { display: flex; align-items: center; justify-content: center; margin-top: 22px; } .forces-india-vision-heading-line::before, .forces-india-vision-heading-line::after { content: ""; width: 50px; height: 1px; background: rgba(255,255,255,0.25); } .forces-india-vision-heading-line span { display: block; width: 32px; height: 4px; border-radius: 5px; background: #ff7900; margin: 0 12px; } /* VISION CONTENT */ .forces-india-vision-content { position: relative; z-index: 1; padding: 20px 35px 20px 5px; } .forces-india-vision-small-title { display: flex; align-items: center; gap: 13px; font-size: 14px; font-weight: 800; letter-spacing: 2px; color: #ff930f; margin-bottom: 28px; } .forces-india-vision-number { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: #ffffff; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); border-radius: 7px; letter-spacing: 0; } .forces-india-vision-quote-icon { color: rgba(255, 138, 0, 0.55); font-size: 47px; line-height: 1; margin-bottom: 12px; } .forces-india-vision-quote { margin: 0; color: #ffffff; font-size: 24px; line-height: 1.75; font-weight: 500; letter-spacing: 0.1px; border: 0; padding: 0; } .forces-india-vision-bottom-line { width: 70px; height: 4px; background: #ff8000; border-radius: 10px; margin-top: 28px; } /* MISSION CARD */ .forces-india-vision-mission-card { position: relative; z-index: 1; background: #ffffff; padding: 18px 28px 18px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.3); box-shadow: 0 15px 40px rgba(0, 12, 30, 0.13); overflow: hidden; } .forces-india-vision-mission-card::before { content: ""; position: absolute; left: 0; top: 32px; width: 4px; height: 65px; background: #ff7900; border-radius: 0 5px 5px 0; } .forces-india-vision-mission-head { display: flex; align-items: center; gap: 15px; margin-bottom: 24px; } .forces-india-vision-mission-icon { width: 57px; height: 57px; min-width: 57px; display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 23px; border-radius: 9px; background: #062b5c; } .forces-india-vision-mission-title span { font-size: 12px; color: #ff7900; font-weight: 800; letter-spacing: 2px; } .forces-india-vision-mission-title h3 { color: #062b5c; font-size: 22px; font-weight: 800; margin: 4px 0 0; letter-spacing: 0.3px; } .forces-india-vision-mission-card p { font-size: 17px !important; line-height: 1.9; color: #111111 !important; font-weight: 400; margin: 0; } /* CARD FOOTER */ .forces-india-vision-mission-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 25px; padding-top: 18px; border-top: 1px solid #e8edf4; } .forces-india-vision-mission-footer span { width: 55px; height: 3px; background: linear-gradient( 90deg, #ff7900 50%, #168e4a 50% ); border-radius: 5px; } .forces-india-vision-mission-footer i { color: #0b4e91; font-size: 20px; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1199.98px) { .forces-india-vision-box { padding: 55px 45px; } .forces-india-vision-quote { font-size: 22px; } .forces-india-vision-heading h2 { font-size: 34px; } } @media (max-width: 991.98px) { .forces-india-vision-section { padding: 60px 0; } .forces-india-vision-box { padding: 45px 35px; } .forces-india-vision-heading { margin-bottom: 35px; } .forces-india-vision-content { padding: 0 5px 15px; } .forces-india-vision-quote { font-size: 22px; line-height: 1.65; } } @media (max-width: 767.98px) { .forces-india-vision-section { padding: 45px 0; } .forces-india-vision-box { padding: 40px 22px; border-radius: 12px; } .forces-india-vision-heading h2 { font-size: 29px; } .forces-india-vision-heading { margin-bottom: 30px; } .forces-india-vision-quote { font-size: 20px; } .forces-india-vision-mission-card { padding: 28px 23px 22px; } .forces-india-vision-mission-title h3 { font-size: 20px; } .forces-india-vision-mission-card p { line-height: 1.75; } } @media (max-width: 420px) { .forces-india-vision-box { padding: 35px 18px; } .forces-india-vision-heading h2 { font-size: 26px; } .forces-india-vision-quote { font-size: 19px; } .forces-india-vision-mission-card { padding: 25px 20px; } } /* ============================================== FORCES INDIA - OBJECTIVES SECTION Bootstrap 4.6.1 Compatible ============================================== */ .forces-india-objectives-section { --forces-india-obj-navy: #062654; --forces-india-obj-blue: #0756a3; --forces-india-obj-orange: #ff7900; position: relative; background: #f8fbff; padding: 50px 0; overflow: hidden; } .forces-india-objectives-section *, .forces-india-objectives-section *::before, .forces-india-objectives-section *::after { box-sizing: border-box; } .forces-india-objectives-container { max-width: 1350px; } /* SUBTLE BACKGROUND */ .forces-india-objectives-section::before { content: ""; position: absolute; width: 440px; height: 440px; border: 1px solid rgba(7, 86, 163, 0.055); border-radius: 50%; left: -270px; bottom: -260px; pointer-events: none; } .forces-india-objectives-section::after { content: ""; position: absolute; right: 0; top: 0; width: 230px; height: 230px; background-image: radial-gradient( rgba(7, 86, 163, 0.12) 1px, transparent 1px ); background-size: 17px 17px; opacity: 0.30; pointer-events: none; } /* ============================================== LEFT INTRO ============================================== */ .forces-india-objectives-intro { position: relative; z-index: 1; padding: 8px 35px 0 0; } /* ICON */ .forces-india-objectives-symbol { width: 65px; height: 65px; display: flex; align-items: center; justify-content: center; background: #e9f1fb; color: var(--forces-india-obj-blue); border-radius: 12px; font-size: 28px; margin-bottom: 25px; border-left: 4px solid var(--forces-india-obj-orange); } /* TITLE */ .forces-india-objectives-title { font-size: 40px; font-weight: 800; line-height: 1.23; letter-spacing: -0.8px; color: var(--forces-india-obj-navy); margin: 0 0 20px; } .forces-india-objectives-title span { display: block; color: var(--forces-india-obj-blue); } /* TITLE DECORATION */ .forces-india-objectives-title-line { width: 75px; height: 4px; background: #dce7f4; border-radius: 6px; margin-bottom: 26px; overflow: hidden; } .forces-india-objectives-title-line span { display: block; width: 42px; height: 100%; background: var(--forces-india-obj-orange); } /* INTRO DESCRIPTION */ .forces-india-objectives-description { font-size: 17px !important; line-height: 1.9; color: #111111 !important; font-weight: 400; margin: 0; } .forces-india-objectives-description strong { color: inherit; font-weight: 700; } /* LOWER ACCENT */ .forces-india-objectives-accent { width: 42px; height: 3px; margin-top: 25px; border-radius: 4px; background: var(--forces-india-obj-orange); } /* ============================================== RIGHT OBJECTIVES CONTENT ============================================== */ .forces-india-objectives-content { position: relative; z-index: 1; background: #ffffff; border: 1px solid #e3eaf3; border-radius: 12px; padding: 32px 34px 25px; box-shadow: 0 12px 40px rgba(6, 38, 84, 0.045); } /* TOP HEADING */ .forces-india-objectives-top { display: flex; align-items: center; gap: 17px; margin-bottom: 20px; } .forces-india-objectives-top h3 { font-size: 23px; line-height: 1.4; font-weight: 800; color: var(--forces-india-obj-navy); margin: 0; white-space: nowrap; } .forces-india-objectives-top-line { height: 1px; background: #dce5f0; flex: 1; } .forces-india-objectives-top-icon { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: #edf3fb; color: var(--forces-india-obj-blue); font-size: 17px; } /* ============================================== OBJECTIVES GRID ============================================== */ .forces-india-objectives-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 30px; row-gap: 0; padding: 0; margin: 0; list-style: none; } /* EACH OBJECTIVE - NO HEAVY CARDS */ .forces-india-objectives-item { display: flex; align-items: flex-start; gap: 15px; min-width: 0; padding: 9px 2px; border-bottom: 1px solid #e6edf5; position: relative; transition: padding-left 0.25s ease; } .forces-india-objectives-item::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: var(--forces-india-obj-orange); transition: width 0.3s ease; } .forces-india-objectives-item:hover { padding-left: 5px; } .forces-india-objectives-item:hover::after { width: 55px; } /* NUMBER */ .forces-india-objectives-number { display: inline-flex; align-items: center; justify-content: center; width: 39px; height: 39px; min-width: 39px; border: 1px solid #d4e2f2; background: #f1f6fc; border-radius: 8px; font-size: 14px; font-weight: 800; color: var(--forces-india-obj-blue); transition: background .3s ease, color .3s ease; } .forces-india-objectives-item:hover .forces-india-objectives-number { background: var(--forces-india-obj-navy); border-color: var(--forces-india-obj-navy); color: #ffffff; } /* OBJECTIVE TEXT */ .forces-india-objectives-text { font-size: 17px; line-height: 1.6; color: #111111; font-weight: 550; padding-top: 5px; } /* REMOVE BOTTOM BORDER FROM FINAL ROW */ .forces-india-objectives-item:nth-last-child(-n+2) { border-bottom-color: transparent; } /* ============================================== BOTTOM TRICOLOR ACCENT ============================================== */ .forces-india-objectives-footer-line { display: flex; width: 90px; height: 3px; margin-top: 22px; border-radius: 4px; overflow: hidden; } .forces-india-objectives-footer-orange { width: 33.33%; background: #ff7900; } .forces-india-objectives-footer-white { width: 33.33%; background: #dbe4f1; } .forces-india-objectives-footer-green { width: 33.34%; background: #138343; } /* ============================================== RESPONSIVE ============================================== */ @media (max-width: 1199.98px) { .forces-india-objectives-section { padding: 70px 0; } .forces-india-objectives-title { font-size: 35px; } .forces-india-objectives-intro { padding-right: 15px; } .forces-india-objectives-content { padding: 28px 25px; } .forces-india-objectives-list { column-gap: 18px; } .forces-india-objectives-item { gap: 10px; } } @media (max-width: 991.98px) { .forces-india-objectives-section { padding: 60px 0; } .forces-india-objectives-intro { padding-right: 0; } .forces-india-objectives-title { font-size: 36px; } .forces-india-objectives-content { padding: 30px; } } @media (max-width: 767.98px) { .forces-india-objectives-section { padding: 50px 0; } .forces-india-objectives-title { font-size: 32px; } .forces-india-objectives-symbol { width: 55px; height: 55px; font-size: 24px; margin-bottom: 20px; } .forces-india-objectives-content { padding: 25px 22px; } .forces-india-objectives-top h3 { font-size: 21px; } .forces-india-objectives-list { grid-template-columns: 1fr; } .forces-india-objectives-item { padding: 16px 0; } .forces-india-objectives-item:nth-last-child(2) { border-bottom-color: #e6edf5; } .forces-india-objectives-text { font-size: 17px; } } @media (max-width: 420px) { .forces-india-objectives-title { font-size: 29px; } .forces-india-objectives-content { padding: 22px 18px; } .forces-india-objectives-top { gap: 10px; } .forces-india-objectives-top-icon { width: 33px; height: 33px; font-size: 15px; } .forces-india-objectives-number { width: 35px; height: 35px; min-width: 35px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .forces-india-objectives-item, .forces-india-objectives-item::after, .forces-india-objectives-number { transition: none; } } /* ============================================== FORCES INDIA - MAJOR ATTRACTIONS Bootstrap 4.6.1 / Font Awesome 6.5.0 ============================================== */ .forces-india-attractions-section { --forces-india-attractions-navy: #041a39; --forces-india-attractions-blue: #0756a3; --forces-india-attractions-orange: #ff8000; position: relative; padding: 85px 0 0; background: linear-gradient( 130deg, #041832 0%, #062856 58%, #07366e 100% ); overflow: hidden; isolation: isolate; } .forces-india-attractions-section *, .forces-india-attractions-section *::before, .forces-india-attractions-section *::after { box-sizing: border-box; } .forces-india-attractions-container { max-width: 1350px; position: relative; z-index: 2; } /* ============================================== BACKGROUND DECORATION ============================================== */ .forces-india-attractions-section::before { content: ""; position: absolute; width: 560px; height: 560px; top: -290px; right: -210px; border: 1px solid rgba(255,255,255,0.07); border-radius: 50%; box-shadow: 0 0 0 70px rgba(255,255,255,0.015), 0 0 0 150px rgba(255,255,255,0.012); pointer-events: none; } .forces-india-attractions-section::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.025) 1px, transparent 1px ); background-size: 65px 65px; pointer-events: none; } /* ============================================== SECTION HEADING ============================================== */ .forces-india-attractions-heading { text-align: center; max-width: 850px; margin: 0 auto 48px; } .forces-india-attractions-tag { display: inline-flex; align-items: center; gap: 10px; color: #ff970e; font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 20px; } .forces-india-attractions-tag i { font-size: 17px; } .forces-india-attractions-heading h2 { font-size: 42px; line-height: 1.3; font-weight: 800; letter-spacing: -0.7px; color: #ffffff; margin: 0; } .forces-india-attractions-heading h2 span { display: block; color: #ff900b; } .forces-india-attractions-heading-line { display: flex; justify-content: center; align-items: center; margin-top: 23px; } .forces-india-attractions-heading-line::before, .forces-india-attractions-heading-line::after { content: ""; width: 50px; height: 1px; background: rgba(255,255,255,0.30); } .forces-india-attractions-heading-line span { width: 40px; height: 4px; background: #ff8000; border-radius: 5px; margin: 0 12px; } /* ============================================== ATTRACTIONS LIST - EDITORIAL GRID ============================================== */ .forces-india-attractions-list-wrap { position: relative; padding: 12px 0 55px; } .forces-india-attractions-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 55px; row-gap: 0; margin: 0; padding: 0; list-style: none; } /* INDIVIDUAL LIST ITEM */ .forces-india-attractions-item { display: flex; align-items: center; gap: 18px; min-width: 0; min-height: 78px; padding: 15px 8px 15px 0; border-bottom: 1px solid rgba(255,255,255,0.13); position: relative; transition: padding-left 0.3s ease; } /* SMALL HOVER ACCENT */ .forces-india-attractions-item::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #ff8000; transition: width 0.3s ease; } .forces-india-attractions-item:hover { padding-left: 7px; } .forces-india-attractions-item:hover::after { width: 85px; } /* ICON BOX */ .forces-india-attractions-icon { width: 46px; height: 46px; min-width: 46px; display: flex; align-items: center; justify-content: center; color: #ff990d; background: rgba(255,255,255,0.065); border: 1px solid rgba(255,255,255,0.14); border-radius: 8px; font-size: 19px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .forces-india-attractions-item:hover .forces-india-attractions-icon { background: #ff8000; border-color: #ff8000; color: #ffffff; } /* TEXT */ .forces-india-attractions-text { color: #ffffff; font-size: 17px; font-weight: 550; line-height: 1.55; transition: color 0.3s ease; } .forces-india-attractions-stats { position: relative; margin-top: 12px; background: rgba(0, 12, 34, 0.42); border: 1px solid rgba(255,255,255,0.12); border-bottom: none; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 -8px 35px rgba(0,0,0,0.06); } /* TOP SAFFRON ACCENT */ .forces-india-attractions-stats::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: linear-gradient( 90deg, #ff8000 0%, #ff8000 33%, #ffffff 50%, #158747 67%, #158747 100% ); } /* SINGLE STAT BLOCK */ .forces-india-attractions-stat { position: relative; display: flex; align-items: center; justify-content: center; gap: 20px; min-height: 160px; padding: 25px 20px; } .forces-india-attractions-stat::after { content: ""; position: absolute; right: 0; top: 24%; height: 52%; width: 1px; background: rgba(255,255,255,0.16); } .forces-india-attractions-stats .col-md-4:last-child .forces-india-attractions-stat::after { display: none; } /* STAT ICON */ .forces-india-attractions-stat-icon { display: flex; justify-content: center; align-items: center; width: 62px; height: 62px; min-width: 62px; border-radius: 50%; color: #ff9208; font-size: 25px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); } .forces-india-attractions-stat-info { display: flex; flex-direction: column; align-items: flex-start; } /* NUMBERS */ .forces-india-attractions-stat-number { font-size: 43px; line-height: 1.2; font-weight: 850; color: #ffffff; letter-spacing: -0.8px; white-space: nowrap; } .forces-india-attractions-stat-number span { color: #ff8c00; } /* LABELS */ .forces-india-attractions-stat-label { font-size: 16px; color: #dce8f7; line-height: 1.5; font-weight: 550; margin-top: 5px; } @media (max-width: 1199.98px) { .forces-india-attractions-section { padding-top: 70px; } .forces-india-attractions-heading h2 { font-size: 37px; } .forces-india-attractions-list { column-gap: 35px; } .forces-india-attractions-item { gap: 14px; } .forces-india-attractions-stat { gap: 14px; } .forces-india-attractions-stat-number { font-size: 38px; } .forces-india-attractions-stat-icon { width: 54px; height: 54px; min-width: 54px; font-size: 22px; } } @media (max-width: 991.98px) { .forces-india-attractions-heading h2 { font-size: 34px; } .forces-india-attractions-list { column-gap: 22px; } .forces-india-attractions-text { font-size: 16px; } .forces-india-attractions-icon { width: 41px; height: 41px; min-width: 41px; font-size: 17px; } .forces-india-attractions-stat { flex-direction: column; text-align: center; gap: 10px; min-height: 180px; } .forces-india-attractions-stat-info { align-items: center; } .forces-india-attractions-stat-number { font-size: 36px; } .forces-india-attractions-stat-label { font-size: 14px; } } @media (max-width: 767.98px) { .forces-india-attractions-section { padding-top: 55px; } .forces-india-attractions-heading { margin-bottom: 28px; } .forces-india-attractions-heading h2 { font-size: 30px; } .forces-india-attractions-tag { font-size: 12px; letter-spacing: 1.5px; } /* SINGLE COLUMN ON MOBILE */ .forces-india-attractions-list { grid-template-columns: 1fr; column-gap: 0; } .forces-india-attractions-list-wrap { padding: 0 0 40px; } .forces-india-attractions-item { min-height: 70px; padding: 13px 0; } .forces-india-attractions-text { font-size: 17px; } .forces-india-attractions-stats { margin-top: 0; } .forces-india-attractions-stat { flex-direction: row; justify-content: flex-start; text-align: left; min-height: 115px; padding: 22px 25px; } .forces-india-attractions-stat-info { align-items: flex-start; } .forces-india-attractions-stat::after { right: 25px; left: 25px; top: auto; bottom: 0; width: auto; height: 1px; } .forces-india-attractions-stats .col-md-4:last-child .forces-india-attractions-stat::after { display: none; } .forces-india-attractions-stat-number { font-size: 38px; } .forces-india-attractions-stat-label { font-size: 15px; } } @media (max-width: 420px) { .forces-india-attractions-heading h2 { font-size: 27px; } .forces-india-attractions-item { gap: 13px; } .forces-india-attractions-icon { width: 40px; height: 40px; min-width: 40px; } .forces-india-attractions-text { font-size: 16px; } .forces-india-attractions-stat-number { font-size: 35px; } } @media (prefers-reduced-motion: reduce) { .forces-india-attractions-item, .forces-india-attractions-item::after, .forces-india-attractions-icon, .forces-india-attractions-text { transition: none; } } /* ======================================== FORCES INDIA - SEPARATE STATISTICS Bootstrap 4.6.1 Compatible ========================================= */ .forces-india-stats-section { padding: 55px 0 55px; background: #f2f7fc; position: relative; overflow: hidden; } .forces-india-stats-section *, .forces-india-stats-section *::before, .forces-india-stats-section *::after { box-sizing: border-box; } .forces-india-stats-container { max-width: 1350px; } /* SECTION HEADING */ .forces-india-stats-heading { text-align: center; margin-bottom: 38px; } .forces-india-stats-subheading { display: block; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #d66a00; margin-bottom: 10px; } .forces-india-stats-heading h2 { font-size: 38px; font-weight: 800; color: #062654; line-height: 1.25; margin: 0; } .forces-india-stats-heading-line { width: 50px; height: 4px; background: #ff7900; border-radius: 6px; margin: 18px auto 0; } /* MAIN WRAPPER */ .forces-india-stats-wrapper { background: #ffffff; border: 1px solid #e0e9f3; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 35px rgba(6, 38, 84, 0.06); } /* INDIVIDUAL STAT */ .forces-india-stats-item { position: relative; min-height: 235px; padding: 35px 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; transition: background 0.3s ease; } .forces-india-stats-item:hover { background: #f8fbff; } /* VERTICAL DIVIDER */ .forces-india-stats-wrapper .col-md-4:not(:last-child) .forces-india-stats-item::after { content: ""; position: absolute; right: 0; top: 20%; height: 60%; width: 1px; background: #dee8f2; } /* ICON */ .forces-india-stats-icon { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border-radius: 12px; background: #edf4fc; color: #0756a3; font-size: 25px; margin-bottom: 18px; transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease; } .forces-india-stats-item:hover .forces-india-stats-icon { background: #062654; color: #ffffff; transform: translateY(-4px); } /* LARGE NUMBERS */ .forces-india-stats-number { display: flex; align-items: baseline; justify-content: center; gap: 3px; font-size: 53px; line-height: 1.1; font-weight: 850; color: #062654; letter-spacing: -1.5px; font-variant-numeric: tabular-nums; white-space: nowrap; margin-bottom: 13px; } .forces-india-stats-number span { font-size: 35px; font-weight: 800; color: #ff7900; } /* LABEL */ .forces-india-stats-label { font-size: 17px; line-height: 1.5; font-weight: 650; color: #111111; } /* TRICOLOR ACCENT */ .forces-india-stats-tricolor { display: flex; width: 100%; height: 4px; } .forces-india-stats-tricolor span { flex: 1; } .forces-india-stats-tricolor span:nth-child(1) { background: #ff7900; } .forces-india-stats-tricolor span:nth-child(2) { background: #ffffff; } .forces-india-stats-tricolor span:nth-child(3) { background: #138343; } /* ======================================== RESPONSIVE DESIGN ========================================= */ @media (max-width: 991.98px) { .forces-india-stats-section { padding: 60px 0; } .forces-india-stats-item { min-height: 215px; padding: 30px 12px; } .forces-india-stats-number { font-size: 43px; } .forces-india-stats-number span { font-size: 28px; } .forces-india-stats-label { font-size: 16px; } } @media (max-width: 767.98px) { .forces-india-stats-section { padding: 50px 0; } .forces-india-stats-heading { margin-bottom: 30px; } .forces-india-stats-heading h2 { font-size: 31px; } .forces-india-stats-item { min-height: 190px; padding: 28px 20px; } .forces-india-stats-number { font-size: 45px; } .forces-india-stats-wrapper .col-md-4:not(:last-child) .forces-india-stats-item::after { top: auto; bottom: 0; left: 12%; right: 12%; width: 76%; height: 1px; } .forces-india-stats-label { font-size: 17px; } } @media (max-width: 420px) { .forces-india-stats-heading h2 { font-size: 28px; } .forces-india-stats-subheading { font-size: 11px; } .forces-india-stats-number { font-size: 43px; } } @media (prefers-reduced-motion: reduce) { .forces-india-stats-item, .forces-india-stats-icon { transition: none; } } /* =========================================== FORCES INDIA - KEY FOCUS SECTORS ============================================ */ .forces-india-focus-section { padding: 50px 0; background: #f8fbff; position: relative; overflow: hidden; } .forces-india-focus-section *, .forces-india-focus-section *::before, .forces-india-focus-section *::after { box-sizing: border-box; } .forces-india-focus-container { max-width: 1350px; } /* subtle background */ .forces-india-focus-section::before { content: ""; position: absolute; width: 420px; height: 420px; left: -220px; top: -180px; border: 70px solid rgba(7, 86, 163, 0.03); border-radius: 50%; pointer-events: none; } .forces-india-focus-section::after { content: ""; position: absolute; right: 0; bottom: 0; width: 220px; height: 220px; background-image: radial-gradient(rgba(7, 86, 163, 0.10) 1px, transparent 1px); background-size: 16px 16px; opacity: 0.25; pointer-events: none; } /* heading */ .forces-india-focus-heading { margin-bottom: 42px; position: relative; z-index: 1; } .forces-india-focus-subtitle { display: block; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #d96f00; margin-bottom: 10px; } .forces-india-focus-heading h2 { font-size: 40px; line-height: 1.25; font-weight: 800; color: #062654; margin: 0; } .forces-india-focus-heading-line { width: 55px; height: 4px; margin: 18px auto 0; background: #ff7900; border-radius: 8px; } /* card */ .forces-india-focus-card { background: #ffffff; border: 1px solid #e3ebf5; border-radius: 14px; overflow: hidden; height: 100%; box-shadow: 0 12px 35px rgba(6, 38, 84, 0.06); transition: transform 0.35s ease, box-shadow 0.35s ease; position: relative; z-index: 1; } .forces-india-focus-card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(6, 38, 84, 0.12); } /* image */ .forces-india-focus-image-wrap { position: relative; height: 240px; overflow: hidden; background: #dbe8f5; } .forces-india-focus-image-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, rgba(4, 26, 57, 0.05) 0%, rgba(4, 26, 57, 0.18) 60%, rgba(4, 26, 57, 0.45) 100% ); pointer-events: none; } .forces-india-focus-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; } .forces-india-focus-card:hover .forces-india-focus-image { transform: scale(1.06); } /* count badge */ .forces-india-focus-count { position: absolute; top: 16px; left: 16px; z-index: 2; min-width: 42px; height: 42px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; background: #ff7900; color: #ffffff; font-size: 14px; font-weight: 800; border-radius: 8px; box-shadow: 0 6px 18px rgba(255, 121, 0, 0.28); } /* card body */ .forces-india-focus-card-body { padding: 22px 22px 24px; } .forces-india-focus-card-body h3 { font-size: 18px; text-align: center; line-height: 1.45; font-weight: 600; color: #000000; margin: 0; } /* responsive */ @media (max-width: 1199.98px) { .forces-india-focus-heading h2 { font-size: 36px; } .forces-india-focus-image-wrap { height: 220px; } .forces-india-focus-card-body h3 { font-size: 19px; } } @media (max-width: 991.98px) { .forces-india-focus-section { padding: 70px 0; } .forces-india-focus-heading h2 { font-size: 33px; } .forces-india-focus-image-wrap { height: 230px; } } @media (max-width: 767.98px) { .forces-india-focus-section { padding: 50px 0; } .forces-india-focus-heading { margin-bottom: 30px; } .forces-india-focus-heading h2 { font-size: 29px; } .forces-india-focus-image-wrap { height: 220px; } .forces-india-focus-card-body { padding: 18px 18px 20px; } .forces-india-focus-card-body h3 { font-size: 18px; } } @media (max-width: 420px) { .forces-india-focus-heading h2 { font-size: 26px; } .forces-india-focus-image-wrap { height: 205px; } .forces-india-focus-count { min-width: 38px; height: 38px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .forces-india-focus-card, .forces-india-focus-image { transition: none; } } /* ============================================== FORCES INDIA - BENEFITS OF PARTICIPATION PREMIUM DEFENCE EDITORIAL GRID Bootstrap 4.6.1 ============================================== */ .forces-india-bp-section { background: linear-gradient( 120deg, #03152e 0%, #062653 65%, #07366b 100% ); padding: 50px 0; position: relative; overflow: hidden; isolation: isolate; } .forces-india-bp-section *, .forces-india-bp-section *::before, .forces-india-bp-section *::after { box-sizing: border-box; } .forces-india-bp-container { max-width: 1350px; position: relative; z-index: 1; } /* SUBTLE RADAR PATTERN */ .forces-india-bp-section::before { content: ""; position: absolute; width: 550px; height: 550px; right: -210px; top: -300px; border-radius: 50%; border: 1px solid rgba(255,255,255,.07); box-shadow: 0 0 0 70px rgba(255,255,255,.018), 0 0 0 145px rgba(255,255,255,.012); pointer-events: none; } .forces-india-bp-section::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(255,255,255,.1) 1px, transparent 1px ); background-size: 27px 27px; opacity: .16; pointer-events: none; } /* ============================================== HEADING ============================================== */ .forces-india-bp-header { display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-bottom: 52px; } .forces-india-bp-eyebrow { display: inline-flex; align-items: center; gap: 12px; color: #ff970f; font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 18px; } .forces-india-bp-eyebrow span { width: 35px; height: 3px; background: #ff8500; border-radius: 5px; } .forces-india-bp-header h2 { font-size: 44px; font-weight: 800; line-height: 1.25; letter-spacing: -1px; color: #ffffff; margin: 0; } .forces-india-bp-header h2 span { color: #ff940c; } .forces-india-bp-header-mark { width: 90px; height: 90px; min-width: 90px; border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #ff920b; font-size: 38px; background: rgba(255,255,255,.035); } /* ============================================== FOUR-COLUMN GRID ============================================== */ .forces-india-bp-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: forces-bp-counter; border-top: 1px solid rgba(255,255,255,.18); } .forces-india-bp-grid li { background-color: white; position: relative; counter-increment: forces-bp-counter; min-height: 150px; padding: 29px 25px 26px; border-right: 1px solid rgba(53, 53, 53, 0.267); border-bottom: 1px solid rgba(53, 53, 53, 0.267); transition: background .3s ease; } /* NO CARDS - JUST CLEAN GRID LINES */ .forces-india-bp-grid li:nth-child(4n) { border-right: none; } .forces-india-bp-grid li:hover { background: rgba(255,255,255,.065); } /* NUMBERS */ .forces-india-bp-grid li::before { content: counter(forces-bp-counter, decimal-leading-zero); display: block; color: #ff990f; font-size: 15px; font-weight: 800; letter-spacing: 1px; margin-bottom: 18px; } /* HOVER ORANGE BAR */ .forces-india-bp-grid li::after { content: ""; position: absolute; left: 25px; bottom: -1px; width: 0; height: 3px; background: #ff8500; transition: width .3s ease; } .forces-india-bp-grid li:hover::after { width: 58px; } /* BENEFIT TEXT */ .forces-india-bp-grid h3 { color: #000000; font-size: 17px; line-height: 1.6; font-weight: 600; margin: 0; letter-spacing: 0; } /* ============================================== FOOTER ACCENT ============================================== */ .forces-india-bp-footer { display: flex; justify-content: flex-end; margin-top: 30px; } .forces-india-bp-footer span { display: block; width: 105px; height: 4px; background: linear-gradient( 90deg, #ff8500 0%, #ff8500 33%, #fff 33%, #fff 66%, #148948 66% ); border-radius: 6px; } /* ============================================== RESPONSIVE ============================================== */ @media (max-width: 1199.98px) { .forces-india-bp-section { padding: 75px 0; } .forces-india-bp-header h2 { font-size: 39px; } .forces-india-bp-grid li { padding: 25px 20px; } } @media (max-width: 991.98px) { .forces-india-bp-section { padding: 65px 0; } .forces-india-bp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .forces-india-bp-grid li:nth-child(4n) { border-right: 1px solid rgba(255,255,255,.13); } .forces-india-bp-grid li:nth-child(2n) { border-right: none; } .forces-india-bp-grid li { min-height: 130px; } .forces-india-bp-header h2 { font-size: 35px; } } @media (max-width: 575.98px) { .forces-india-bp-section { padding: 55px 0; } .forces-india-bp-header { margin-bottom: 30px; } .forces-india-bp-header h2 { font-size: 30px; } .forces-india-bp-header-mark { display: none; } .forces-india-bp-grid { grid-template-columns: 1fr; } .forces-india-bp-grid li, .forces-india-bp-grid li:nth-child(4n) { border-right: none; } .forces-india-bp-grid li { min-height: auto; padding: 20px 12px; } .forces-india-bp-grid li::before { margin-bottom: 8px; } .forces-india-bp-grid li::after { left: 12px; } .forces-india-bp-grid h3 { font-size: 17px; } .forces-india-bp-eyebrow { font-size: 11px; letter-spacing: 1.2px; } } @media (prefers-reduced-motion: reduce) { .forces-india-bp-grid li, .forces-india-bp-grid li::after { transition: none; } } .bg-dark{ background: url("../images/bg/bg-dark.png") no-repeat center center; background-size: cover; background-attachment: fixed; } /* ============================================= FORCES INDIA - PREMIUM BREADCRUMB BANNER Bootstrap 4.6.1 Compatible ============================================= */ .forces-india-breadcrumb { position: relative; min-height: 290px; background: linear-gradient( 110deg, #03162f 0%, #062b5b 65%, #084682 100% ); overflow: hidden; isolation: isolate; } .forces-india-breadcrumb *, .forces-india-breadcrumb *::before, .forces-india-breadcrumb *::after { box-sizing: border-box; } /* IMAGE ON RIGHT */ .forces-india-breadcrumb-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 47%; background-image: linear-gradient( 90deg, rgba(4, 30, 67, 0.18), rgba(4, 30, 67, 0.04) ), url("../images/bg/force.jpg"); background-size: cover; background-position: center; clip-path: polygon( 16% 0, 100% 0, 100% 100%, 0 100% ); z-index: 1; } /* ORANGE DIAGONAL LINE */ .forces-india-breadcrumb-cut { position: absolute; inset: 0; z-index: 2; background: #ff8100; clip-path: polygon( 60.5% 0, 61% 0, 53.5% 100%, 53% 100% ); pointer-events: none; } /* SUBTLE TACTICAL GRID */ .forces-india-breadcrumb-pattern { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient( rgba(255,255,255,0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.035) 1px, transparent 1px ); background-size: 38px 38px; pointer-events: none; } /* CONTAINER */ .forces-india-breadcrumb-container { max-width: 1350px; min-height: 230px; display: flex; align-items: center; position: relative; z-index: 3; } .forces-india-breadcrumb-content { width: 58%; padding: 28px 0; } /* TOP SMALL LABEL */ .forces-india-breadcrumb-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 800; letter-spacing: 2px; color: #ff9b24; margin-bottom: 14px; } .forces-india-breadcrumb-tag span { display: block; width: 28px; height: 3px; background: #ff8100; border-radius: 10px; } /* PAGE HEADING */ .forces-india-breadcrumb-title { font-size: 46px; line-height: 1.2; font-weight: 800; letter-spacing: -0.8px; color: #ffffff; margin: 0 0 21px; text-transform: none; } .forces-india-breadcrumb-title span { color: #ff920c; } /* BREADCRUMB NAVIGATION */ .forces-india-breadcrumb-nav { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; list-style: none; padding: 10px 17px; margin: 0; border: 1px solid rgba(255,255,255,0.16); border-radius: 5px; background: rgba(255,255,255,0.075); } .forces-india-breadcrumb-nav li { color: #ffffff; font-size: 14px; line-height: 1.5; font-weight: 600; } .forces-india-breadcrumb-nav a { display: inline-flex; align-items: center; gap: 8px; color: #dceaff; text-decoration: none; transition: color 0.25s ease; } .forces-india-breadcrumb-nav a:hover, .forces-india-breadcrumb-nav a:focus { color: #ff970b; text-decoration: none; } .forces-india-breadcrumb-nav a i { color: #ff970b; font-size: 13px; } .forces-india-breadcrumb-nav .forces-india-breadcrumb-separator { color: #ff970b; font-size: 10px; } /* BOTTOM TRICOLOR ACCENT */ .forces-india-breadcrumb-bottom { position: absolute; left: 0; bottom: 0; z-index: 4; width: 100%; height: 4px; background: linear-gradient( 90deg, #ff8100 0%, #ff8100 33.33%, #ffffff 33.33%, #ffffff 66.66%, #138747 66.66%, #138747 100% ); } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 991.98px) { .forces-india-breadcrumb, .forces-india-breadcrumb-container { min-height: 210px; } .forces-india-breadcrumb-title { font-size: 39px; } .forces-india-breadcrumb-content { width: 62%; } } @media (max-width: 767.98px) { .forces-india-breadcrumb, .forces-india-breadcrumb-container { min-height: 190px; } /* Full image with dark overlay on mobile */ .forces-india-breadcrumb-photo { width: 100%; clip-path: none; opacity: 0.25; background-position: center; } .forces-india-breadcrumb-cut { display: none; } .forces-india-breadcrumb-content { width: 100%; padding: 30px 0; } .forces-india-breadcrumb-title { font-size: 34px; margin-bottom: 18px; } .forces-india-breadcrumb-tag { font-size: 11px; letter-spacing: 1.3px; } .forces-india-breadcrumb-nav { padding: 9px 13px; gap: 9px; } .forces-india-breadcrumb-nav li { font-size: 13px; } } @media (max-width: 420px) { .forces-india-breadcrumb-title { font-size: 30px; } .forces-india-breadcrumb-tag { font-size: 10px; } } @media (prefers-reduced-motion: reduce) { .forces-india-breadcrumb-nav a { transition: none; } } /* ============================================= FORCES INDIA - ABOUT EXPO INNER PAGE Bootstrap 4.6.1 Compatible ============================================= */ .forces-india-inner-about-section { --forces-india-inner-about-navy: #062654; --forces-india-inner-about-blue: #0756a3; --forces-india-inner-about-orange: #ff7900; position: relative; padding: 50px 0; background: #ffffff; overflow: hidden; } .forces-india-inner-about-section *, .forces-india-inner-about-section *::before, .forces-india-inner-about-section *::after { box-sizing: border-box; } .forces-india-inner-about-container { max-width: 1350px; position: relative; z-index: 1; } /* BACKGROUND ACCENT */ .forces-india-inner-about-section::before { content: ""; position: absolute; top: 0; right: 0; width: 33%; height: 75%; background: linear-gradient( 135deg, #f3f8fe 0%, #eaf3fc 100% ); border-radius: 0 0 0 110px; pointer-events: none; } /* ============================================= SECTION HEADING ============================================= */ .forces-india-inner-about-heading { position: relative; text-align: center; margin-bottom: 48px; } .forces-india-inner-about-tag { display: inline-flex; align-items: center; gap: 10px; color: #d96a00; font-size: 13px; font-weight: 800; letter-spacing: 1.8px; margin-bottom: 14px; } .forces-india-inner-about-tag i { color: #ff7900; font-size: 17px; } .forces-india-inner-about-heading h2 { color: #062654; font-size: 42px; line-height: 1.25; font-weight: 800; letter-spacing: -0.7px; margin: 0; } .forces-india-inner-about-heading h2 span { color: #0756a3; } .forces-india-inner-about-heading-line { display: flex; align-items: center; justify-content: center; margin: 20px auto 0; gap: 9px; } .forces-india-inner-about-heading-line::before, .forces-india-inner-about-heading-line::after { content: ""; width: 35px; height: 1px; background: #d5e2f1; } .forces-india-inner-about-heading-line span { width: 45px; height: 4px; background: #ff7900; border-radius: 5px; } /* ============================================= LEFT CONTENT ============================================= */ .forces-india-inner-about-content { padding: 0 35px 0 0; position: relative; } .forces-india-inner-about-content p { color: #111111 !important; font-size: 17px !important; line-height: 1.85; font-weight: 400; margin: 0 0 22px; text-align: left; } .forces-india-inner-about-content p:last-child { margin-bottom: 0; } .forces-india-inner-about-content strong { color: #111111; font-weight: 700; } /* FIRST PARAGRAPH HIGHLIGHT */ .forces-india-inner-about-content p:first-child { border-left: 3px solid #ff7900; padding-left: 18px; } /* ============================================= RIGHT IMAGE COMPOSITION ============================================= */ .forces-india-inner-about-visual { position: relative; width: 100%; height: 610px; padding-left: 35px; } /* MAIN IMAGE */ .forces-india-inner-about-main-image { position: absolute; top: 0; right: 0; width: 100%; /* height: 88%; */ border-radius: 13px; overflow: hidden; background: #dbe7f4; box-shadow: 0 16px 38px rgba(5, 34, 74, 0.12); } .forces-india-inner-about-main-image img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .5s ease; } /* SMALL OVERLAPPING PHOTO */ .forces-india-inner-about-small-image { position: absolute; left: 0; bottom: 15px; z-index: 2; width: 55%; height: 195px; border: 6px solid #ffffff; border-radius: 11px; background: #e2ebf4; overflow: hidden; box-shadow: 0 13px 30px rgba(5,34,74,0.15); } .forces-india-inner-about-small-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .5s ease; } .forces-india-inner-about-visual:hover img { transform: scale(1.035); } /* ORANGE DECORATIVE CORNER */ .forces-india-inner-about-corner { position: absolute; width: 82px; height: 82px; right: -13px; top: -13px; border-top: 5px solid #ff7900; border-right: 5px solid #ff7900; border-radius: 0 15px 0 0; pointer-events: none; } /* ============================================= BOTTOM PREMIUM STATEMENT ============================================= */ .forces-india-inner-about-statement { position: relative; display: flex; align-items: center; gap: 25px; margin-top: 52px; padding: 29px 35px; background: linear-gradient( 110deg, #041a39, #07356c ); border-radius: 10px; overflow: hidden; border-left: 5px solid #ff7900; } .forces-india-inner-about-statement::after { content: ""; position: absolute; right: -65px; top: -115px; width: 270px; height: 270px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.09); pointer-events: none; } /* QUOTE ICON */ .forces-india-inner-about-statement-icon { width: 58px; height: 58px; min-width: 58px; display: flex; align-items: center; justify-content: center; border-radius: 10px; color: #ff910c; background: rgba(255,255,255,0.09); font-size: 25px; } /* STATEMENT TEXT */ .forces-india-inner-about-statement-text { flex: 1; color: #ffffff; font-size: 25px; line-height: 1.45; font-weight: 750; letter-spacing: -0.3px; } .forces-india-inner-about-statement-text span { color: #ff970f; font-weight: 800; } /* DECORATIVE ARROW */ .forces-india-inner-about-statement-decoration { color: rgba(255,255,255,0.19); font-size: 44px; margin-left: auto; padding-right: 10px; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1199.98px) { .forces-india-inner-about-section { padding: 75px 0; } .forces-india-inner-about-content { padding-right: 20px; } .forces-india-inner-about-visual { height: 570px; } .forces-india-inner-about-heading h2 { font-size: 38px; } } @media (max-width: 991.98px) { .forces-india-inner-about-section { padding: 65px 0; } .forces-india-inner-about-content { padding: 0; margin-bottom: 42px; } .forces-india-inner-about-visual { max-width: 600px; height: 450px; margin: 0 auto; } .forces-india-inner-about-main-image { width: 85%; height: 90%; } .forces-india-inner-about-small-image { width: 45%; height: 175px; } .forces-india-inner-about-corner { right: -10px; } .forces-india-inner-about-statement { margin-top: 42px; } } @media (max-width: 767.98px) { .forces-india-inner-about-section { padding: 50px 0; } .forces-india-inner-about-heading { margin-bottom: 32px; } .forces-india-inner-about-heading h2 { font-size: 32px; } .forces-india-inner-about-content p { font-size: 17px !important; line-height: 1.75; margin-bottom: 18px; } .forces-india-inner-about-visual { height: 360px; max-width: 500px; } .forces-india-inner-about-small-image { height: 135px; } .forces-india-inner-about-statement { gap: 15px; padding: 22px 20px; margin-top: 32px; } .forces-india-inner-about-statement-text { font-size: 21px; } .forces-india-inner-about-statement-icon { width: 45px; height: 45px; min-width: 45px; font-size: 20px; } .forces-india-inner-about-statement-decoration { display: none; } } @media (max-width: 420px) { .forces-india-inner-about-heading h2 { font-size: 28px; } .forces-india-inner-about-tag { font-size: 11px; letter-spacing: 1px; } .forces-india-inner-about-visual { height: 310px; } .forces-india-inner-about-small-image { width: 50%; height: 120px; border-width: 4px; } .forces-india-inner-about-statement-text { font-size: 19px; } .forces-india-inner-about-statement { align-items: flex-start; gap: 12px; padding: 20px 15px; } } @media (prefers-reduced-motion: reduce) { .forces-india-inner-about-main-image img, .forces-india-inner-about-small-image img { transition: none; } } /* ============================================= FORCES INDIA - WHO SHOULD EXHIBIT Bootstrap 4.6.1 / Font Awesome 6.5.0 ============================================= */ .forces-india-wse-section { --forces-india-wse-navy: #062654; --forces-india-wse-blue: #0756a3; --forces-india-wse-orange: #ff7900; position: relative; padding: 50px 0; background: linear-gradient( 120deg, #03172f 0%, #062756 65%, #07366d 100% ); overflow: hidden; isolation: isolate; } .forces-india-wse-section *, .forces-india-wse-section *::before, .forces-india-wse-section *::after { box-sizing: border-box; } .forces-india-wse-container { max-width: 1350px; position: relative; z-index: 2; } /* SUBTLE TECH BACKGROUND */ .forces-india-wse-section::before { content: ""; position: absolute; width: 600px; height: 600px; left: -310px; bottom: -300px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.07); box-shadow: 0 0 0 80px rgba(255,255,255,0.015), 0 0 0 160px rgba(255,255,255,0.01); pointer-events: none; } .forces-india-wse-section::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient( rgba(255,255,255,0.08) 1px, transparent 1px ); background-size: 28px 28px; opacity: 0.23; pointer-events: none; } /* ============================================= LEFT INTRO ============================================= */ .forces-india-wse-intro { position: relative; padding: 20px 35px 20px 0; } .forces-india-wse-tag { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 800; letter-spacing: 1.6px; color: #ff970e; margin-bottom: 20px; } .forces-india-wse-tag span { display: block; width: 30px; height: 3px; background: #ff7900; border-radius: 5px; } .forces-india-wse-intro h2 { font-size: 45px; line-height: 1.2; font-weight: 800; color: #ffffff; letter-spacing: -0.9px; margin: 0; } .forces-india-wse-intro h2 span { display: block; color: #ff920b; } .forces-india-wse-heading-line { width: 75px; height: 4px; border-radius: 5px; background: #ff7900; margin-top: 25px; } /* SHIELD GRAPHIC */ .forces-india-wse-emblem { display: flex; align-items: center; justify-content: flex-start; margin-top: 65px; padding-left: 25px; } .forces-india-wse-emblem-ring { width: 170px; height: 170px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.025); position: relative; } .forces-india-wse-emblem-ring::before { content: ""; position: absolute; inset: 18px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.22); } .forces-india-wse-emblem-ring::after { content: ""; position: absolute; inset: -18px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.06); } .forces-india-wse-emblem-ring i { font-size: 66px; color: #ff8c0a; opacity: 0.88; } /* ============================================= RIGHT WHITE PANEL ============================================= */ .forces-india-wse-panel { background: #ffffff; border-radius: 15px; overflow: hidden; box-shadow: 0 22px 55px rgba(0, 12, 34, 0.17); border: 1px solid rgba(255,255,255,0.25); } /* TWO COLUMN LIST */ .forces-india-wse-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 20px 28px; list-style: none; } /* EACH LIST ITEM */ .forces-india-wse-item { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 22px 15px; border-bottom: 1px solid #e5edf5; transition: background 0.3s ease; } .forces-india-wse-item:nth-child(odd) { border-right: 1px solid #e5edf5; } .forces-india-wse-item:nth-last-child(-n+2) { border-bottom: none; } .forces-india-wse-item:hover { background: #f5f9fe; } /* ICON */ .forces-india-wse-icon { width: 42px; height: 42px; min-width: 42px; display: flex; align-items: center; justify-content: center; background: #edf4fc; border: 1px solid #dce8f6; border-radius: 8px; color: #0756a3; font-size: 18px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .forces-india-wse-item:hover .forces-india-wse-icon { background: #062654; border-color: #062654; color: #ffffff; } /* TEXT */ .forces-india-wse-text { color: #111111; font-size: 17px; line-height: 1.6; font-weight: 550; padding-top: 4px; } /* BOTTOM ACCENT */ .forces-india-wse-panel-bottom { display: flex; width: 100%; height: 5px; } .forces-india-wse-panel-bottom span { flex: 1; } .forces-india-wse-panel-bottom span:nth-child(1) { background: #ff7900; } .forces-india-wse-panel-bottom span:nth-child(2) { background: #ffffff; } .forces-india-wse-panel-bottom span:nth-child(3) { background: #138747; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1199.98px) { .forces-india-wse-section { padding: 75px 0; } .forces-india-wse-intro h2 { font-size: 40px; } .forces-india-wse-list { padding: 15px; } .forces-india-wse-item { padding: 19px 12px; gap: 12px; } } @media (max-width: 991.98px) { .forces-india-wse-section { padding: 65px 0; } .forces-india-wse-intro { padding: 0; margin-bottom: 35px; } .forces-india-wse-intro h2 { font-size: 37px; } .forces-india-wse-emblem { display: none; } .forces-india-wse-list { padding: 18px 24px; } .forces-india-wse-item { padding: 20px 14px; } } @media (max-width: 767.98px) { .forces-india-wse-section { padding: 55px 0; } .forces-india-wse-intro { margin-bottom: 30px; } .forces-india-wse-intro h2 { font-size: 32px; } .forces-india-wse-list { grid-template-columns: 1fr; padding: 12px 20px; } .forces-india-wse-item { border-right: none !important; padding: 17px 0; } .forces-india-wse-item:nth-last-child(2) { border-bottom: 1px solid #e5edf5; } .forces-india-wse-text { font-size: 17px; } } @media (max-width: 420px) { .forces-india-wse-intro h2 { font-size: 29px; } .forces-india-wse-tag { font-size: 11px; letter-spacing: 1.1px; } .forces-india-wse-list { padding: 10px 15px; } .forces-india-wse-icon { width: 38px; height: 38px; min-width: 38px; font-size: 16px; } .forces-india-wse-item { gap: 12px; } } @media (prefers-reduced-motion: reduce) { .forces-india-wse-item, .forces-india-wse-icon { transition: none; } } /* ============================================== FORCES INDIA - WHO SHOULD VISIT LIGHT PREMIUM EDITORIAL LIST DESIGN Bootstrap 4.6.1 Compatible ============================================== */ .forces-india-wsv-section { --forces-india-wsv-navy: #062654; --forces-india-wsv-blue: #0756a3; --forces-india-wsv-orange: #ff7900; position: relative; padding: 50px 0; background: #f5f9fe; overflow: hidden; isolation: isolate; } .forces-india-wsv-section *, .forces-india-wsv-section *::before, .forces-india-wsv-section *::after { box-sizing: border-box; } .forces-india-wsv-container { max-width: 1350px; position: relative; z-index: 2; } /* SUBTLE BACKGROUND */ .forces-india-wsv-section::before { content: ""; position: absolute; width: 440px; height: 440px; top: -240px; right: -180px; border: 1px solid rgba(7,86,163,0.07); border-radius: 50%; box-shadow: 0 0 0 65px rgba(7,86,163,0.015), 0 0 0 125px rgba(7,86,163,0.01); pointer-events: none; } .forces-india-wsv-section::after { content: ""; position: absolute; width: 240px; height: 240px; left: 0; bottom: 0; background-image: radial-gradient( rgba(7,86,163,0.12) 1px, transparent 1px ); background-size: 18px 18px; opacity: 0.25; pointer-events: none; } /* ============================================== SECTION HEADING ============================================== */ .forces-india-wsv-heading { text-align: center; margin-bottom: 50px; } .forces-india-wsv-tag { display: inline-flex; align-items: center; gap: 13px; color: #cf6800; font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 17px; } .forces-india-wsv-tag-line { display: block; width: 28px; height: 2px; background: #ff7900; border-radius: 3px; } .forces-india-wsv-heading h2 { font-size: 43px; line-height: 1.25; font-weight: 800; letter-spacing: -0.8px; color: #062654; margin: 0; } .forces-india-wsv-heading h2 span { color: #0756a3; } /* DECORATIVE SHIELD DIVIDER */ .forces-india-wsv-heading-decoration { display: flex; align-items: center; justify-content: center; gap: 13px; margin-top: 20px; color: #ff7900; } .forces-india-wsv-heading-decoration span { display: block; width: 58px; height: 1px; background: #cbd9e8; } .forces-india-wsv-heading-decoration i { font-size: 19px; } /* ============================================== MAIN CONTENT ============================================== */ .forces-india-wsv-content { position: relative; background: #ffffff; border: 1px solid #e2eaf4; border-top: 4px solid #0756a3; border-radius: 10px; padding: 20px 38px; box-shadow: 0 12px 35px rgba(6,38,84,0.045); } /* TWO-COLUMN OPEN LIST */ .forces-india-wsv-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 52px; row-gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: forces-india-wsv-counter; } /* EACH VISITOR CATEGORY */ .forces-india-wsv-item { counter-increment: forces-india-wsv-counter; display: flex; align-items: center; gap: 17px; min-width: 0; /* min-height: 79px; */ padding: 10px 5px; position: relative; border-bottom: 1px solid #e5edf5; transition: padding-left 0.25s ease; } /* VERTICAL CENTRE DIVIDER */ .forces-india-wsv-item:nth-child(odd)::after { content: ""; position: absolute; right: -26px; top: 18%; height: 64%; width: 1px; background: #e5edf5; } /* AUTOMATIC NUMBERING */ .forces-india-wsv-item::before { content: counter( forces-india-wsv-counter, decimal-leading-zero ); display: inline-flex; align-items: center; justify-content: center; width: 43px; height: 43px; min-width: 43px; border-radius: 8px; background: #edf4fb; border: 1px solid #dce7f4; color: #0756a3; font-size: 14px; line-height: 1; font-weight: 800; font-variant-numeric: tabular-nums; transition: color .3s ease, background .3s ease, border-color .3s ease; } /* ITEM TEXT */ .forces-india-wsv-text { font-size: 17px; line-height: 1.65; font-weight: 550; color: #111111; } /* HOVER DESIGN */ .forces-india-wsv-item:hover { padding-left: 10px; } .forces-india-wsv-item:hover::before { background: #062654; border-color: #062654; color: #ffffff; } /* FINAL ROW */ .forces-india-wsv-item:nth-last-child(-n+2) { border-bottom: none; } /* ============================================== BOTTOM BRAND ACCENT ============================================== */ .forces-india-wsv-footer { display: flex; justify-content: center; margin-top: 35px; } .forces-india-wsv-footer span { width: 110px; height: 4px; border-radius: 5px; background: linear-gradient( 90deg, #ff7900 0%, #ff7900 33.33%, #d5e0ed 33.33%, #d5e0ed 66.66%, #138747 66.66% ); } /* ============================================== RESPONSIVE DESIGN ============================================== */ @media (max-width: 1199.98px) { .forces-india-wsv-section { padding: 75px 0; } .forces-india-wsv-heading h2 { font-size: 38px; } .forces-india-wsv-content { padding: 18px 25px; } .forces-india-wsv-list { column-gap: 32px; } .forces-india-wsv-item:nth-child(odd)::after { right: -16px; } } @media (max-width: 991.98px) { .forces-india-wsv-section { padding: 65px 0; } .forces-india-wsv-heading h2 { font-size: 35px; } .forces-india-wsv-list { column-gap: 22px; } .forces-india-wsv-item { gap: 11px; } .forces-india-wsv-item:nth-child(odd)::after { right: -11px; } .forces-india-wsv-text { font-size: 17px; } } @media (max-width: 767.98px) { .forces-india-wsv-section { padding: 55px 0; } .forces-india-wsv-heading { margin-bottom: 32px; } .forces-india-wsv-heading h2 { font-size: 31px; } .forces-india-wsv-content { padding: 12px 20px; } /* SINGLE COLUMN */ .forces-india-wsv-list { grid-template-columns: 1fr; } .forces-india-wsv-item { min-height: 68px; padding: 14px 0; gap: 14px; } .forces-india-wsv-item:nth-child(odd)::after { display: none; } .forces-india-wsv-item:nth-last-child(2) { border-bottom: 1px solid #e5edf5; } .forces-india-wsv-text { font-size: 17px; line-height: 1.6; } } @media (max-width: 420px) { .forces-india-wsv-heading h2 { font-size: 28px; } .forces-india-wsv-tag { font-size: 11px; letter-spacing: 1px; gap: 8px; } .forces-india-wsv-tag-line { width: 18px; } .forces-india-wsv-content { padding: 10px 15px; } .forces-india-wsv-item { gap: 12px; } .forces-india-wsv-item::before { width: 37px; height: 37px; min-width: 37px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .forces-india-wsv-item, .forces-india-wsv-item::before { transition: none; } } /* ============================================== FORCES INDIA EXPO 2027 PREMIUM CONTACT PAGE Bootstrap 4.6.1 Compatible ============================================== */ .forces-india-contact-section { --forces-india-contact-navy: #062654; --forces-india-contact-blue: #0756a3; --forces-india-contact-orange: #ff7900; position: relative; background: #f4f8fd; padding-bottom: 85px; overflow: hidden; } .forces-india-contact-section *, .forces-india-contact-section *::before, .forces-india-contact-section *::after { box-sizing: border-box; } .forces-india-contact-container { max-width: 1350px; } /* ============================================== DARK HEADER ============================================== */ .forces-india-contact-header { position: relative; background: linear-gradient( 115deg, #031831 0%, #062654 58%, #074584 100% ); padding: 65px 0 135px; overflow: hidden; } .forces-india-contact-header::before { content: ""; position: absolute; width: 440px; height: 440px; right: -130px; top: -220px; border: 1px solid rgba(255,255,255,0.10); border-radius: 50%; box-shadow: 0 0 0 65px rgba(255,255,255,0.025), 0 0 0 130px rgba(255,255,255,0.015); pointer-events: none; } .forces-india-contact-header-pattern { position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,0.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,0.025) 1px, transparent 1px ); background-size: 48px 48px; pointer-events: none; } /* HEADING */ .forces-india-contact-heading { position: relative; z-index: 1; text-align: center; } .forces-india-contact-overline { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #ff9a23; margin-bottom: 15px; } .forces-india-contact-overline span { display: block; width: 30px; height: 3px; background: #ff7900; border-radius: 5px; } .forces-india-contact-heading h2 { color: #ffffff; font-size: 45px; line-height: 1.2; font-weight: 800; letter-spacing: -0.8px; margin: 0; } .forces-india-contact-heading h2 span { color: #ff920e; } .forces-india-contact-heading-line { width: 60px; height: 4px; background: #ff7900; border-radius: 10px; margin: 22px auto 0; } /* ============================================== OVERLAPPING WHITE PANEL ============================================== */ .forces-india-contact-main { position: relative; z-index: 2; background: #ffffff; padding: 42px; border-radius: 15px; margin-top: -80px; box-shadow: 0 18px 55px rgba(5, 34, 74, 0.10); border: 1px solid #e4ebf4; } /* ============================================== INTRODUCTION ============================================== */ .forces-india-contact-intro { display: flex; align-items: center; gap: 20px; padding: 0 0 30px; margin-bottom: 30px; border-bottom: 1px solid #e4ebf4; } .forces-india-contact-intro-symbol { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; min-width: 62px; background: #eaf2fc; color: #0756a3; border-radius: 12px; font-size: 25px; border-left: 3px solid #ff7900; } .forces-india-contact-intro p { font-size: 17px !important; line-height: 1.8; color: #111111 !important; font-weight: 400; margin: 0; } /* ============================================== CONTACT INFORMATION CARDS ============================================== */ /* EQUAL HEIGHT */ .forces-india-contact-main .row > [class*="col-"] { display: flex; } .forces-india-contact-card { position: relative; width: 100%; min-width: 0; display: flex; flex-direction: column; background: #f7faff; border: 1px solid #e1eaf4; border-radius: 12px; padding: 30px; overflow: hidden; transition: transform 0.3s ease, background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } .forces-india-contact-card:hover { transform: translateY(-4px); background: #ffffff; border-color: #cddceb; box-shadow: 0 12px 30px rgba(6, 38, 84, 0.08); } /* ORANGE TOP BORDER HOVER */ .forces-india-contact-card::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 3px; background: #ff7900; transition: width 0.35s ease; } .forces-india-contact-card:hover::before { width: 100%; } /* ============================================== CARD TOP ICON & NUMBER ============================================== */ .forces-india-contact-card-top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 23px; } .forces-india-contact-card-icon { width: 60px; height: 60px; min-width: 60px; display: flex; justify-content: center; align-items: center; background: #062654; color: #ffffff; border-radius: 12px; font-size: 24px; transition: background 0.3s ease, transform 0.3s ease; } .forces-india-contact-card:hover .forces-india-contact-card-icon { background: #0756a3; transform: scale(1.04); } .forces-india-contact-card-number { font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -1px; color: #dce7f4; font-variant-numeric: tabular-nums; } /* ============================================== CARD CONTENT ============================================== */ .forces-india-contact-card-content { position: relative; } .forces-india-contact-card-content h3 { font-size: 23px; font-weight: 800; line-height: 1.35; color: #062654; margin: 0 0 13px; } .forces-india-contact-divider { width: 48px; height: 3px; background: #ff7900; border-radius: 6px; margin-bottom: 19px; } /* CONTACT PARAGRAPHS */ .forces-india-contact-card-content p { font-size: 17px !important; line-height: 1.85; color: #111111 !important; margin: 0; font-weight: 400; overflow-wrap: anywhere; } .forces-india-contact-card-content p strong { display: block; font-size: 17px; font-weight: 600; color: #111111; } .forces-india-contact-card-content p strong + strong { margin-top: 5px; } /* EMAIL & PHONE LINKS */ .forces-india-contact-card-content a { display: inline-flex; align-items: center; gap: 13px; max-width: 100%; color: #0756a3; text-decoration: none; overflow-wrap: anywhere; transition: color 0.25s ease; } .forces-india-contact-card-content a strong { color: #0756a3 !important; font-size: 17px; font-weight: 700; } .forces-india-contact-card-content a i { font-size: 13px; color: #ff7900; flex-shrink: 0; transition: transform 0.25s ease; } .forces-india-contact-card-content a:hover, .forces-india-contact-card-content a:focus { color: #ff7900; text-decoration: none; } .forces-india-contact-card-content a:hover strong, .forces-india-contact-card-content a:focus strong { color: #d66a00 !important; } .forces-india-contact-card-content a:hover i { transform: translate(2px, -2px); } .forces-india-contact-card-content a:focus-visible { outline: 2px solid #0756a3; outline-offset: 5px; } /* COMPACT EMAIL / PHONE CARDS */ .forces-india-contact-card-compact { padding: 27px 30px; } .forces-india-contact-card-compact .forces-india-contact-card-top { margin-bottom: 18px; } .forces-india-contact-card-compact .forces-india-contact-card-icon { width: 55px; height: 55px; min-width: 55px; font-size: 22px; } /* ============================================== RESPONSIVE - TABLET ============================================== */ @media (max-width: 1199.98px) { .forces-india-contact-section { padding-bottom: 70px; } .forces-india-contact-heading h2 { font-size: 40px; } .forces-india-contact-main { padding: 32px; } .forces-india-contact-card { padding: 25px; } } @media (max-width: 991.98px) { .forces-india-contact-header { padding: 55px 0 120px; } .forces-india-contact-heading h2 { font-size: 37px; } .forces-india-contact-main { margin-top: -65px; padding: 30px; } .forces-india-contact-card { padding: 25px; } } /* ============================================== RESPONSIVE - MOBILE ============================================== */ @media (max-width: 767.98px) { .forces-india-contact-section { padding-bottom: 50px; } .forces-india-contact-header { padding: 45px 0 110px; } .forces-india-contact-heading h2 { font-size: 32px; } .forces-india-contact-overline { font-size: 11px; letter-spacing: 1.3px; } .forces-india-contact-main { margin-top: -65px; padding: 22px; border-radius: 12px; } .forces-india-contact-intro { gap: 15px; align-items: flex-start; padding-bottom: 22px; margin-bottom: 25px; } .forces-india-contact-intro-symbol { width: 49px; height: 49px; min-width: 49px; font-size: 21px; } .forces-india-contact-intro p { font-size: 17px !important; line-height: 1.7; } .forces-india-contact-card { padding: 23px; } .forces-india-contact-card-icon { width: 53px; height: 53px; min-width: 53px; font-size: 21px; } .forces-india-contact-card-number { font-size: 32px; } .forces-india-contact-card-content h3 { font-size: 21px; } .forces-india-contact-card-content p { font-size: 17px !important; line-height: 1.7; } } @media (max-width: 420px) { .forces-india-contact-heading h2 { font-size: 29px; } .forces-india-contact-main { padding: 16px; } .forces-india-contact-card { padding: 20px; } .forces-india-contact-intro { gap: 12px; } .forces-india-contact-intro-symbol { width: 43px; height: 43px; min-width: 43px; font-size: 18px; } .forces-india-contact-card-top { margin-bottom: 17px; } } /* ACCESSIBILITY */ @media (prefers-reduced-motion: reduce) { .forces-india-contact-card, .forces-india-contact-card::before, .forces-india-contact-card-icon, .forces-india-contact-card-content a, .forces-india-contact-card-content a i { transition: none; } } /* ============================================ FORCES INDIA - WHY EXHIBIT AT THE SHOW PREMIUM IMAGE + EDITORIAL LIST Bootstrap 4.6.1 Compatible ============================================ */ .forces-india-whyex-section { --forces-india-whyex-navy: #062654; --forces-india-whyex-blue: #0756a3; --forces-india-whyex-orange: #ff7900; position: relative; padding: 85px 0; background: #f6f9fd; overflow: hidden; } .forces-india-whyex-section *, .forces-india-whyex-section *::before, .forces-india-whyex-section *::after { box-sizing: border-box; } .forces-india-whyex-container { max-width: 1350px; position: relative; z-index: 1; } /* SUBTLE BACKGROUND DESIGN */ .forces-india-whyex-section::before { content: ""; position: absolute; width: 400px; height: 400px; right: -200px; top: -230px; border-radius: 50%; border: 1px solid rgba(7, 86, 163, 0.07); box-shadow: 0 0 0 65px rgba(7,86,163,.02); pointer-events: none; } /* ============================================ LEFT IMAGE PANEL ============================================ */ .forces-india-whyex-visual { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 565px; overflow: hidden; border-radius: 12px; background: #062654; box-shadow: 0 18px 40px rgba(6,38,84,.12); } /* IMAGE */ .forces-india-whyex-image { position: relative; flex: 1; min-height: 290px; overflow: hidden; background: #d7e5f3; } .forces-india-whyex-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 35%, rgba(4,25,55,.4) 100% ); pointer-events: none; } .forces-india-whyex-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: center; display: block; transition: transform .5s ease; } .forces-india-whyex-visual:hover img { transform: scale(1.045); } /* NAVY TITLE PANEL */ .forces-india-whyex-heading { position: relative; padding: 15px 30px 18px; background: linear-gradient( 125deg, #041b3a, #07366d ); overflow: hidden; } .forces-india-whyex-heading::after { content: ""; position: absolute; width: 190px; height: 190px; border: 1px solid rgba(255,255,255,.08); border-radius: 50%; right: -90px; bottom: -110px; pointer-events: none; } /* SMALL LABEL */ .forces-india-whyex-label { display: inline-flex; align-items: center; gap: 9px; font-size: 11px; font-weight: 800; letter-spacing: 1.3px; color: #ff990f; margin-bottom: 19px; } .forces-india-whyex-label i { font-size: 15px; } /* MAIN HEADING */ .forces-india-whyex-heading h2 { font-size: 34px; line-height: 1.25; font-weight: 800; color: #ffffff; letter-spacing: -0.6px; margin: 0; } .forces-india-whyex-heading h2 span { display: block; color: #ff920b; } .forces-india-whyex-title-line { width: 65px; height: 4px; background: #ff7900; border-radius: 5px; margin-top: 25px; } /* SAFFRON CORNER DETAIL */ .forces-india-whyex-corner { position: absolute; top: 0; left: 0; width: 70px; height: 5px; background: #ff7900; z-index: 2; } /* ============================================ RIGHT BENEFITS PANEL ============================================ */ .forces-india-whyex-content { display: flex; flex-direction: column; justify-content: center; height: 100%; background: #ffffff; border: 1px solid #e2eaf3; border-radius: 12px; padding: 25px 32px; box-shadow: 0 10px 35px rgba(6,38,84,.035); } /* TWO COLUMN GRID */ .forces-india-whyex-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); column-gap: 35px; margin: 0; padding: 0; list-style: none; counter-reset: forces-india-whyex-counter; } /* INDIVIDUAL BENEFIT */ .forces-india-whyex-item { counter-increment: forces-india-whyex-counter; position: relative; display: flex; align-items: flex-start; gap: 14px; min-width: 0; min-height: 82px; padding: 18px 3px; border-bottom: 1px solid #e7edf5; transition: padding-left .25s ease; } .forces-india-whyex-item:hover { padding-left: 8px; } /* AUTOMATIC SERIAL NUMBER */ .forces-india-whyex-item::before { content: counter( forces-india-whyex-counter, decimal-leading-zero ); flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 7px; color: #0756a3; background: #edf4fc; border: 1px solid #dce7f3; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .25s ease, color .25s ease; } .forces-india-whyex-item:hover::before { background: #062654; color: #ffffff; } /* TEXT - 17PX BLACK */ .forces-india-whyex-item span { display: block; color: #111111; font-size: 17px; font-weight: 600; line-height: 1.6; padding-top: 3px; } /* REMOVE FINAL ROW DIVIDERS */ .forces-india-whyex-item:nth-last-child(-n+2) { border-bottom: none; } /* BOTTOM DECORATION */ .forces-india-whyex-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 18px; border-top: 1px solid #e5edf5; } .forces-india-whyex-bottom span { width: 85px; height: 4px; border-radius: 5px; background: linear-gradient( 90deg, #ff7900 0%, #ff7900 45%, #138747 45%, #138747 100% ); } .forces-india-whyex-bottom i { color: #0756a3; font-size: 23px; } /* ============================================ RESPONSIVE - LARGE TABLET ============================================ */ @media (max-width: 1199.98px) { .forces-india-whyex-section { padding: 70px 0; } .forces-india-whyex-heading { padding: 28px 24px; } .forces-india-whyex-heading h2 { font-size: 30px; } .forces-india-whyex-content { padding: 20px; } .forces-india-whyex-list { column-gap: 20px; } .forces-india-whyex-item { gap: 10px; padding: 15px 2px; } } /* ============================================ RESPONSIVE - TABLET ============================================ */ @media (max-width: 991.98px) { .forces-india-whyex-section { padding: 60px 0; } .forces-india-whyex-visual { min-height: 0; height: auto; flex-direction: row; } .forces-india-whyex-image { flex: 0 0 45%; min-height: 270px; } .forces-india-whyex-heading { flex: 1; display: flex; flex-direction: column; justify-content: center; } .forces-india-whyex-heading h2 { font-size: 32px; } .forces-india-whyex-content { padding: 25px; } .forces-india-whyex-list { column-gap: 35px; } .forces-india-whyex-item { min-height: 75px; } } /* ============================================ RESPONSIVE - MOBILE ============================================ */ @media (max-width: 767.98px) { .forces-india-whyex-section { padding: 50px 0; } .forces-india-whyex-visual { flex-direction: column; } .forces-india-whyex-image { flex: none; height: 240px; min-height: 240px; } .forces-india-whyex-heading { padding: 25px; } .forces-india-whyex-heading h2 { font-size: 30px; } .forces-india-whyex-label { margin-bottom: 12px; } .forces-india-whyex-content { padding: 20px; } .forces-india-whyex-list { grid-template-columns: 1fr; } .forces-india-whyex-item { min-height: auto; padding: 15px 0; } .forces-india-whyex-item:nth-last-child(2) { border-bottom: 1px solid #e7edf5; } .forces-india-whyex-item span { font-size: 17px; } } @media (max-width: 420px) { .forces-india-whyex-heading h2 { font-size: 27px; } .forces-india-whyex-image { height: 210px; min-height: 210px; } .forces-india-whyex-content { padding: 16px; } .forces-india-whyex-item { gap: 12px; } .forces-india-whyex-item::before { width: 35px; height: 35px; } } @media (prefers-reduced-motion: reduce) { .forces-india-whyex-image img, .forces-india-whyex-item, .forces-india-whyex-item::before { transition: none; } } /* ========================================== FORCES INDIA - EXHIBITORS PROFILE ICON LEFT / TEXT RIGHT - LIST DESIGN =========================================== */ .forces-india-ep-section { --forces-india-ep-navy: #062654; --forces-india-ep-blue: #0756a3; --forces-india-ep-orange: #ff7900; padding: 80px 0; background: #f6f9fd; position: relative; overflow: hidden; } .forces-india-ep-section *, .forces-india-ep-section *::before, .forces-india-ep-section *::after { box-sizing: border-box; } .forces-india-ep-container { max-width: 1350px; position: relative; z-index: 1; } /* BACKGROUND DETAIL */ .forces-india-ep-section::before { content: ""; position: absolute; width: 350px; height: 350px; right: -200px; top: -200px; border: 1px solid rgba(7,86,163,.07); border-radius: 50%; pointer-events: none; } /* HEADING */ .forces-india-ep-heading { text-align: center; margin-bottom: 42px; } .forces-india-ep-label { display: block; color: #cc6900; font-size: 13px; font-weight: 800; letter-spacing: 2px; margin-bottom: 12px; } .forces-india-ep-heading h2 { font-size: 42px; line-height: 1.25; color: #062654; font-weight: 800; margin: 0; } .forces-india-ep-heading h2 span { color: #0756a3; } .forces-india-ep-heading-line { width: 60px; height: 4px; background: #ff7900; border-radius: 5px; margin: 20px auto 0; } /* TWO-COLUMN LIST */ .forces-india-ep-list { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); column-gap: 30px; row-gap: 0; list-style: none; padding: 0; margin: 0; } /* HORIZONTAL ICON + TEXT */ .forces-india-ep-item { display: flex; align-items: center; gap: 20px; min-width: 0; min-height: 100px; padding: 18px 10px 18px 0; border-bottom: 1px solid #dce7f2; position: relative; transition: padding-left .3s ease; } .forces-india-ep-item:hover { padding-left: 8px; } /* ORANGE HOVER LINE */ .forces-india-ep-item::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: #ff7900; transition: width .3s ease; } .forces-india-ep-item:hover::after { width: 95px; } /* BIG LEFT ICON */ .forces-india-ep-icon { display: flex; align-items: center; justify-content: center; width: 68px; height: 68px; min-width: 68px; background: #e8f1fb; border: 1px solid #d4e3f3; border-radius: 12px; color: #0756a3; font-size: 30px; transition: background .3s ease, color .3s ease, transform .3s ease; } .forces-india-ep-item:hover .forces-india-ep-icon { background: #062654; color: #ffffff; transform: translateY(-2px); } /* RIGHT TEXT */ .forces-india-ep-text { flex: 1; display: block; font-size: 17px; line-height: 1.65; font-weight: 600; color: #111111; } /* ========================================== RESPONSIVE =========================================== */ @media (max-width: 1199.98px) { .forces-india-ep-section { padding: 70px 0; } .forces-india-ep-list { column-gap: 35px; } .forces-india-ep-icon { width: 60px; height: 60px; min-width: 60px; font-size: 27px; } .forces-india-ep-item { gap: 16px; } } @media (max-width: 991.98px) { .forces-india-ep-section { padding: 60px 0; } .forces-india-ep-heading h2 { font-size: 36px; } .forces-india-ep-list { column-gap: 24px; } .forces-india-ep-item { gap: 13px; min-height: 95px; } .forces-india-ep-icon { width: 55px; height: 55px; min-width: 55px; font-size: 24px; } } @media (max-width: 767.98px) { .forces-india-ep-section { padding: 50px 0; } .forces-india-ep-heading { margin-bottom: 30px; } .forces-india-ep-heading h2 { font-size: 31px; } /* SINGLE COLUMN */ .forces-india-ep-list { grid-template-columns: 1fr; } .forces-india-ep-item { min-height: 85px; padding: 14px 0; gap: 16px; } .forces-india-ep-icon { width: 56px; height: 56px; min-width: 56px; font-size: 24px; } .forces-india-ep-text { font-size: 17px; } } @media (max-width: 420px) { .forces-india-ep-heading h2 { font-size: 28px; } .forces-india-ep-label { font-size: 11px; letter-spacing: 1px; } .forces-india-ep-item { gap: 13px; } .forces-india-ep-icon { width: 52px; height: 52px; min-width: 52px; font-size: 22px; } } @media (prefers-reduced-motion: reduce) { .forces-india-ep-item, .forces-india-ep-item::after, .forces-india-ep-icon { transition: none; } } /* ============================================= FORCES INDIA - WHY ATTEND LIGHT EDITORIAL / RIGHT SIDE PHOTO Bootstrap 4.6.1 ============================================= */ .forces-india-wa-section { --forces-india-wa-navy: #062654; --forces-india-wa-blue: #0756a3; --forces-india-wa-orange: #ff7900; position: relative; padding: 85px 0; background: #f8fbff; overflow: hidden; } .forces-india-wa-section *, .forces-india-wa-section *::before, .forces-india-wa-section *::after { box-sizing: border-box; } .forces-india-wa-container { max-width: 1350px; position: relative; z-index: 1; } /* SUBTLE BACKGROUND */ .forces-india-wa-section::before { content: ""; position: absolute; top: -180px; left: -200px; width: 400px; height: 400px; border: 1px solid rgba(7, 86, 163, .07); border-radius: 50%; pointer-events: none; } /* ============================================= LEFT CONTENT ============================================= */ .forces-india-wa-content { padding: 10px 35px 10px 0; height: 100%; } /* HEADING */ .forces-india-wa-heading { margin-bottom: 35px; } .forces-india-wa-label { display: inline-flex; align-items: center; gap: 10px; color: #d46a00; font-size: 13px; letter-spacing: 1.6px; font-weight: 800; margin-bottom: 17px; } .forces-india-wa-label i { font-size: 18px; color: #ff7900; } .forces-india-wa-heading h2 { margin: 0; font-size: 43px; line-height: 1.25; font-weight: 800; color: #062654; letter-spacing: -.7px; } .forces-india-wa-heading h2 span { color: #0756a3; } .forces-india-wa-heading-line { height: 4px; width: 65px; background: #ff7900; border-radius: 5px; margin-top: 20px; } /* ============================================= TWO COLUMN NUMBERED BENEFITS ============================================= */ .forces-india-wa-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 35px; margin: 0; padding: 0; list-style: none; counter-reset: forces-india-wa-count; } .forces-india-wa-list li { counter-increment: forces-india-wa-count; position: relative; display: flex; align-items: flex-start; gap: 14px; padding: 19px 0; min-width: 0; border-bottom: 1px solid #dce6f1; transition: padding-left .25s ease; } .forces-india-wa-list li:hover { padding-left: 5px; } /* LARGE NUMBER LEFT */ .forces-india-wa-list li::before { content: counter( forces-india-wa-count, decimal-leading-zero ); display: block; flex-shrink: 0; color: #e47600; font-size: 24px; line-height: 1.3; font-weight: 800; letter-spacing: -1px; font-variant-numeric: tabular-nums; min-width: 35px; } /* BENEFIT TEXT */ .forces-india-wa-list li span { display: block; color: #111111; font-size: 17px; font-weight: 600; line-height: 1.65; padding-top: 2px; } /* BOTTOM ROW */ .forces-india-wa-list li:nth-last-child(-n+2) { border-bottom: 0; } /* ============================================= REGISTER NOW BUTTON ============================================= */ .forces-india-wa-btn-wrap { margin-top: 35px; } .forces-india-wa-btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 28px; background: #062654; color: #ffffff !important; padding: 6px 6px 6px 23px; min-height: 55px; border-radius: 6px; font-size: 15px; font-weight: 800; letter-spacing: .4px; text-decoration: none !important; transition: background .3s ease, box-shadow .3s ease; } .forces-india-wa-btn-icon { width: 43px; height: 43px; display: flex; justify-content: center; align-items: center; background: #ff7900; color: #ffffff; border-radius: 4px; font-size: 17px; transition: transform .3s ease; } .forces-india-wa-btn:hover, .forces-india-wa-btn:focus { background: #0756a3; color: #ffffff !important; box-shadow: 0 10px 25px rgba(6,38,84,.18); } .forces-india-wa-btn:hover .forces-india-wa-btn-icon { transform: translateX(3px); } .forces-india-wa-btn:focus-visible { outline: 3px solid #ff7900; outline-offset: 4px; } /* ============================================= RIGHT EXHIBITION PHOTO ============================================= */ .forces-india-wa-visual { position: relative; width: 100%; height: 100%; min-height: 650px; overflow: hidden; border-radius: 12px; background: #dce8f5; box-shadow: 0 18px 40px rgba(6,38,84,.12); } /* MAIN IMAGE */ .forces-india-wa-image { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; transition: transform .5s ease; } .forces-india-wa-visual:hover .forces-india-wa-image { transform: scale(1.035); } /* LIGHT PHOTO GRADIENT */ .forces-india-wa-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 180deg, transparent 58%, rgba(3,22,47,.12) 75%, rgba(3,22,47,.7) 100% ); pointer-events: none; } /* SAFFRON TOP BAR */ .forces-india-wa-photo-top { position: absolute; z-index: 2; left: 0; top: 0; width: 95px; height: 5px; background: #ff7900; } /* PHOTO BOTTOM DETAIL */ .forces-india-wa-photo-bottom { position: absolute; left: 25px; right: 25px; bottom: 25px; z-index: 2; display: flex; justify-content: space-between; align-items: flex-end; } .forces-india-wa-photo-symbol { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.4); border-radius: 9px; background: rgba(3,30,65,.6); color: #ffffff; font-size: 25px; } .forces-india-wa-photo-lines { display: flex; gap: 5px; width: 75px; height: 4px; } .forces-india-wa-photo-lines span:first-child { flex: 2; background: #ff7900; } .forces-india-wa-photo-lines span:last-child { flex: 1; background: #ffffff; } /* ============================================= RESPONSIVE ============================================= */ @media (max-width: 1199.98px) { .forces-india-wa-section { padding: 70px 0; } .forces-india-wa-heading h2 { font-size: 38px; } .forces-india-wa-content { padding-right: 20px; } .forces-india-wa-list { column-gap: 20px; } .forces-india-wa-list li { gap: 10px; padding: 17px 0; } .forces-india-wa-list li::before { font-size: 21px; } } @media (max-width: 991.98px) { .forces-india-wa-section { padding: 60px 0; } .forces-india-wa-content { padding: 0; } .forces-india-wa-heading h2 { font-size: 36px; } .forces-india-wa-visual { min-height: 0; height: 430px; max-width: 700px; margin: 0 auto; } .forces-india-wa-list { column-gap: 35px; } } @media (max-width: 767.98px) { .forces-india-wa-section { padding: 50px 0; } .forces-india-wa-heading { margin-bottom: 25px; } .forces-india-wa-heading h2 { font-size: 32px; } .forces-india-wa-list { grid-template-columns: 1fr; } .forces-india-wa-list li { padding: 15px 0; gap: 14px; } .forces-india-wa-list li:nth-last-child(2) { border-bottom: 1px solid #dce6f1; } .forces-india-wa-list li span { font-size: 17px; } .forces-india-wa-btn-wrap { margin-top: 27px; } .forces-india-wa-visual { height: 420px; } } @media (max-width: 420px) { .forces-india-wa-heading h2 { font-size: 29px; } .forces-india-wa-label { font-size: 11px; letter-spacing: 1px; } .forces-india-wa-visual { height: 370px; } .forces-india-wa-list li::before { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .forces-india-wa-list li, .forces-india-wa-image, .forces-india-wa-btn, .forces-india-wa-btn-icon { transition: none; } } /* ============================================ FORCES INDIA - VISITORS PROFILE PAGE Bootstrap 4.6.1 Compatible ============================================ */ .forces-india-vprofile-section { --forces-india-vprofile-navy: #062654; --forces-india-vprofile-blue: #0756a3; --forces-india-vprofile-orange: #ff7900; position: relative; padding: 80px 0; background: #f7faff; overflow: hidden; } .forces-india-vprofile-section *, .forces-india-vprofile-section *::before, .forces-india-vprofile-section *::after { box-sizing: border-box; } .forces-india-vprofile-container { max-width: 1350px; position: relative; z-index: 1; } /* ============================================ TOP DARK DEFENCE AGENCIES PANEL ============================================ */ .forces-india-vprofile-agencies { position: relative; background: linear-gradient( 115deg, #041a38 0%, #062957 65%, #084580 100% ); border-radius: 14px; padding: 35px 40px 38px; overflow: hidden; margin-bottom: 65px; box-shadow: 0 15px 38px rgba(6,38,84,.12); isolation: isolate; } .forces-india-vprofile-agencies::before { content: ""; position: absolute; width: 350px; height: 350px; right: -130px; top: -180px; border-radius: 50%; border: 1px solid rgba(255,255,255,.09); box-shadow: 0 0 0 50px rgba(255,255,255,.018), 0 0 0 100px rgba(255,255,255,.012); pointer-events: none; } .forces-india-vprofile-agencies::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient( rgba(255,255,255,.025) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 48px 48px; pointer-events: none; } /* AGENCIES HEADING */ .forces-india-vprofile-agencies-heading { position: relative; z-index: 1; display: flex; align-items: center; gap: 18px; margin-bottom: 25px; } .forces-india-vprofile-agencies-icon { display: flex; align-items: center; justify-content: center; width: 58px; height: 58px; min-width: 58px; border-radius: 10px; background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.17); color: #ff970d; font-size: 25px; } .forces-india-vprofile-agencies-heading span { display: block; color: #ff970d; font-size: 12px; font-weight: 800; letter-spacing: 1.7px; margin-bottom: 6px; } .forces-india-vprofile-agencies-heading h2 { margin: 0; font-size: 26px; line-height: 1.35; font-weight: 800; color: #ffffff; } /* AGENCIES NAME STRIP */ .forces-india-vprofile-agencies-list { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 10px 0; } .forces-india-vprofile-agencies-list span { display: inline-flex; align-items: center; color: #ffffff; font-size: 20px; font-weight: 600; line-height: 1.6; white-space: normal; } .forces-india-vprofile-agencies-list span:not(:last-child)::after { content: ""; display: inline-block; width: 4px; height: 4px; min-width: 4px; margin: 0 15px; border-radius: 50%; background: #ff8b00; vertical-align: middle; } /* BOTTOM ACCENT */ .forces-india-vprofile-agencies-accent { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: linear-gradient( 90deg, #ff7900 0%, #ff7900 33.33%, #ffffff 33.33%, #ffffff 66.66%, #138747 66.66% ); } /* ============================================ VISITORS PROFILE HEADING ============================================ */ .forces-india-vprofile-heading { display: flex; align-items: center; justify-content: space-between; gap: 25px; margin-bottom: 35px; } .forces-india-vprofile-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: 1.7px; font-weight: 800; color: #cf6800; margin-bottom: 14px; } .forces-india-vprofile-eyebrow span { width: 30px; height: 3px; border-radius: 4px; background: #ff7900; } .forces-india-vprofile-heading h2 { margin: 0; font-size: 42px; line-height: 1.25; font-weight: 800; color: #062654; letter-spacing: -.7px; } .forces-india-vprofile-heading h2 span { color: #0756a3; } .forces-india-vprofile-heading-line { width: 65px; height: 4px; border-radius: 5px; background: #ff7900; margin-top: 18px; } .forces-india-vprofile-heading-mark { display: flex; justify-content: center; align-items: center; width: 75px; height: 75px; min-width: 75px; background: #e8f1fb; border: 1px solid #dce7f4; border-radius: 50%; color: #0756a3; font-size: 30px; } /* ============================================ VISITOR PROFILE GRID OPEN EDITORIAL STYLE - NO HEAVY CARDS ============================================ */ .forces-india-vprofile-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; counter-reset: forces-india-vprofile-counter; background: #ffffff; border: 1px solid #dfe9f4; border-top: 3px solid #0756a3; border-radius: 10px; overflow: hidden; } /* EACH CATEGORY */ .forces-india-vprofile-item { counter-increment: forces-india-vprofile-counter; display: flex; align-items: center; gap: 17px; position: relative; min-width: 0; min-height: 105px; padding: 22px 20px; border-right: 1px solid #e6edf5; border-bottom: 1px solid #e6edf5; background: #ffffff; transition: background .3s ease, padding-left .3s ease; } .forces-india-vprofile-item:nth-child(3n) { border-right: none; } .forces-india-vprofile-item:nth-last-child(-n+3) { border-bottom: none; } /* AUTOMATIC NUMBER */ .forces-india-vprofile-item::before { content: counter( forces-india-vprofile-counter, decimal-leading-zero ); display: flex; justify-content: center; align-items: center; flex: 0 0 43px; width: 43px; height: 43px; border-radius: 9px; background: #edf4fc; border: 1px solid #dbe7f5; color: #0756a3; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; transition: background .3s ease, color .3s ease; } /* RIGHT TEXT */ .forces-india-vprofile-item span { display: block; color: #111111; font-size: 17px; line-height: 1.6; font-weight: 550; overflow-wrap: break-word; } /* HOVER */ .forces-india-vprofile-item:hover { background: #f4f8fd; padding-left: 25px; } .forces-india-vprofile-item:hover::before { background: #062654; color: #ffffff; } /* SMALL ORANGE DETAIL */ .forces-india-vprofile-item::after { content: ""; position: absolute; left: 0; top: 24%; width: 3px; height: 0; border-radius: 0 3px 3px 0; background: #ff7900; transition: height .3s ease; } .forces-india-vprofile-item:hover::after { height: 52%; } /* ============================================ BOTTOM BRAND LINE ============================================ */ .forces-india-vprofile-bottom-line { display: flex; width: 105px; height: 4px; border-radius: 5px; overflow: hidden; margin: 35px auto 0; } .forces-india-vprofile-bottom-line span { flex: 1; } .forces-india-vprofile-bottom-line span:nth-child(1) { background: #ff7900; } .forces-india-vprofile-bottom-line span:nth-child(2) { background: #d6e1ee; } .forces-india-vprofile-bottom-line span:nth-child(3) { background: #138747; } /* ============================================ RESPONSIVE - TABLET ============================================ */ @media (max-width: 1199.98px) { .forces-india-vprofile-section { padding: 70px 0; } .forces-india-vprofile-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .forces-india-vprofile-item:nth-child(3n) { border-right: 1px solid #e6edf5; } .forces-india-vprofile-item:nth-child(2n) { border-right: none; } .forces-india-vprofile-item:nth-last-child(3) { border-bottom: 1px solid #e6edf5; } .forces-india-vprofile-agencies { padding: 30px; } } @media (max-width: 991.98px) { .forces-india-vprofile-section { padding: 60px 0; } .forces-india-vprofile-agencies { margin-bottom: 50px; } .forces-india-vprofile-heading h2 { font-size: 36px; } .forces-india-vprofile-item { padding: 18px; min-height: 95px; gap: 13px; } } /* ============================================ RESPONSIVE - MOBILE ============================================ */ @media (max-width: 767.98px) { .forces-india-vprofile-section { padding: 50px 0; } .forces-india-vprofile-agencies { padding: 25px 20px 30px; margin-bottom: 40px; } .forces-india-vprofile-agencies-heading { gap: 12px; } .forces-india-vprofile-agencies-icon { width: 48px; height: 48px; min-width: 48px; font-size: 21px; } .forces-india-vprofile-agencies-heading h2 { font-size: 22px; } .forces-india-vprofile-agencies-list span { font-size: 14px; } .forces-india-vprofile-agencies-list span:not(:last-child)::after { margin: 0 10px; } .forces-india-vprofile-heading { margin-bottom: 27px; } .forces-india-vprofile-heading h2 { font-size: 31px; } .forces-india-vprofile-heading-mark { display: none; } /* SINGLE COLUMN */ .forces-india-vprofile-list { grid-template-columns: 1fr; } .forces-india-vprofile-item, .forces-india-vprofile-item:nth-child(3n) { border-right: none; } .forces-india-vprofile-item { min-height: 80px; padding: 16px; gap: 14px; } .forces-india-vprofile-item:nth-last-child(2) { border-bottom: 1px solid #e6edf5; } .forces-india-vprofile-item:nth-last-child(3) { border-bottom: 1px solid #e6edf5; } .forces-india-vprofile-item span { font-size: 17px; } } @media (max-width: 420px) { .forces-india-vprofile-heading h2 { font-size: 28px; } .forces-india-vprofile-agencies-heading h2 { font-size: 19px; } .forces-india-vprofile-agencies-heading span { font-size: 10px; letter-spacing: 1px; } .forces-india-vprofile-item { padding: 15px 12px; gap: 12px; } .forces-india-vprofile-item::before { flex-basis: 38px; width: 38px; height: 38px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .forces-india-vprofile-item, .forces-india-vprofile-item::before, .forces-india-vprofile-item::after { transition: none; } }