/* ... (Ensure the @font-face for Century Gothic is at the top) ... */ @font-face { font-family: 'Century Gothic'; src: local('Century Gothic'), local('CenturyGothic'), local('AppleGothic'), sans-serif; font-weight: 500; } @font-face { font-family: 'Century Gothic'; src: local('Century Gothic Bold'), local('CenturyGothic-Bold'), local('CenturyGothicBold'), local('AppleGothic'), sans-serif; font-weight: 700; /* Maps to Bold */ } /* ... (Import Montserrat in HTML ) ... */ :root { /* Color Definitions */ --royal-blue: #26283e; --medium-blue: #7a83d6; --accent-red: #D72529; --dark-grey: #3E4244; --medium-grey: #D7E0E0; --light-grey: #EEF1F1; --pure-white: #FFFFFF; /* Font Families */ --font-display: 'Montserrat Alternates', 'Montserrat', sans-serif; --font-body: 'Century Gothic', sans-serif; } body { font-family: var(--font-body); color: var(--royal-blue); /* Royal Blue is the primary text color */ } /* ================================================================= */ /* Example Application: Hero Section Typography */ /* /* Base Styles based on Font Definitions */ .hero-title { /* Montserrat alternates (Header 1 / 48px Regular) in design */ /* font-family: var(--font-display); */ font-size: 48px; font-weight: 600; line-height: 1.2; color: #26283e; } .section-heading { /* Montserrat alternates (Header 2 / 32px Regular) */ font-family: var(--font-display); font-size: 32px; font-weight: 400; line-height: 1.3; color: var(--royal-blue); } .tag-label { /* CENTURY GOTHIC (TAGS / 14px Bold) */ font-family: var(--font-body); font-size: 14px; font-weight: bold; color: #26283e; letter-spacing: 0.1em; text-transform: uppercase; border: 2px solid #d72529; padding: 0.2rem 0.6rem; display: inline-block; border-radius: 17px; } .label-text { /* CENTURY GOTHIC (Labels / 16px Regular) */ /* font-family: var(--font-body); */ font-size: 16px; font-weight: 600; COLOR: #26283e; } .lead-text, .body-text { /* Subtitle (20px Regular) and general text */ font-family: var(--font-body); font-size: 20px; font-weight: 400; color: var(--dark-grey); } .text-accent { color: #d72529; } /* ======================= */ /* 2. Header & Navigation */ /* ======================= */ .main-header { background-color: var(--royal-blue); color: var(--pure-white); padding: 0px 0px; } .navbar-brand { color: var(--pure-white); } .logo-group svg { color: var(--pure-white); } .logo-text { font-weight: 700; font-size: 1.5rem; font-family: var(--font-body); /* Using body font for logo text */ } .navbar-toggler { border-color: rgba(255, 255, 255, 0.2); } .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='rgba(255, 255, 255, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); } .nav-link-item { color: var(--pure-white) !important; text-decoration: none; padding: 0.5rem 1rem; font-family: var(--font-body); font-size: 18px; font-weight: 400; opacity: 0.8; transition: opacity 0.2s; } .nav-link-item:hover, .nav-link-item.active { opacity: 1; color: var(--pure-white) !important; } /* Button Styling (Buttons / 18px Bold) */ .btn-red { background-color: var(--accent-red); color: var(--pure-white); border: 1px solid var(--accent-red); font-family: var(--font-body); font-weight: bold; font-size: 18px; border-radius: 6px; padding: 0.6rem 1.5rem; border-radius: 40px; } .btn-red:hover { background-color: #b91d20; color: var(--pure-white); border-color: #b91d20; } .btn-outline-primary { color: var(--royal-blue); border: 1px solid var(--medium-grey); background-color: transparent; font-family: var(--font-body); font-weight: bold; font-size: 18px; border-radius: 6px; padding: 0.6rem 1.5rem; } .btn-outline-primary:hover { /* border-color: aqua !important; */ background-color: var(--light-grey); border-color: var(--royal-blue); } /* ======================= */ /* 3. Hero Section */ /* ======================= */ .hero-section { /* background-color: var(--pure-white); */ /* Adding subtle bottom margin to align with the start of the next section's content */ padding-bottom: 5rem; overflow: hidden; background-image: url(/images/back.jpg); background-repeat: no-repeat; background-size: cover; position: relative !important; } .hero-background-wave { position: absolute; bottom: 0; left: 0; right: 0; /* Simulate the abstract wave/grid seen in the design image */ background: radial-gradient(circle at 50% 100%, rgba(122, 206, 214, 0.1) 0%, rgba(255, 255, 255, 0) 60%), repeating-linear-gradient(0deg, var(--medium-grey), var(--medium-grey) 1px, transparent 1px, transparent 100px), repeating-linear-gradient(90deg, var(--medium-grey), var(--medium-grey) 1px, transparent 1px, transparent 100px); height: 100%; opacity: 0.5; z-index: -1; } .hero-feature-bar { position: relative; /* top: 5rem; */ /* Positioned below the main content, floating */ /* background-color: var(--pure-white); */ /* border: 1px solid var(--medium-grey); */ /* border-radius: 8px; */ /* box-shadow: 0 8px 15px rgba(0, 0, 0, 0.05); */ } .feature-item { padding: 0.5rem 0; /* Add vertical divider lines */ border-right: 1px solid var(--medium-grey); } .feature-item:last-child { border-right: none; } @media (max-width: 768px) { .feature-item { border-right: none; border-bottom: 1px solid var(--medium-grey); } .feature-item:last-child { border-bottom: none; } .hero-feature-bar { top: 2rem; } } .icon-circle-small svg { color: var(--royal-blue); } /* ======================= */ /* 4. Section Spotlight */ /* ======================= */ .section-spotlight { position: relative; /* Adjust margin to account for the floating hero-feature-bar */ margin-top: 5rem; } .icon-circle-large { background-color: var(--medium-blue); width: 80px; height: 80px; border-radius: 50%; display: flex; justify-content: center; align-items: center; color: var(--pure-white); } .placeholder-image { /* Simulating the abstract black/white image */ background-color: #3e4244; background-image: linear-gradient(135deg, #1f1f1f 0%, #444444 100%); min-height: 450px; border-radius: 0.5rem; position: absolute; right: 0; top: -50px; width: 60%; z-index: -1; overflow: hidden; } @media (max-width: 991px) { .placeholder-image { display: none !important; } } /* ======================= */ /* 5. Footer (Simple implementation using Royal Blue) */ /* ======================= */ .main-footer { background-color: var(--royal-blue); color: var(--pure-white); } .main-footer .logo-group svg { color: var(--pure-white); } .main-footer .logo-text { color: var(--pure-white); } a.btn.btn-lg.btn-outline-primary.d-flex.align-items-center { border: 2px solid #d72529; border-radius: 40px; } p.lead-text.mt-4.mb-5 { max-width: 60%; margin: 0 auto; } section.hero-section.text-center.py-5.position-relative {} .container.py-5 {} .overlay { position: absolute; background-color: #ffffffc9; /* height: 100%; */ position: absolute; height: 100%; width: 100%; top: 0; bottom: 0; left: 0; z-index: 0; } .container.py-5 { z-index: 2; position: relative; } a.navbar-brand.d-flex.align-items-center img { max-width: 110px; } /* Font Variables (Confirmation) */ .section-heading { font-family: var(--font-display); /* Montserrat alternates */ font-size: 32px; /* Header 2 */ font-weight: 600; /* Regular */ color: var(--royal-blue); line-height: 1.3; } .section-heading b { font-weight: 700; /* Bolding "experience" */ } .body-text-spotlight { font-family: var(--font-body); /* Century Gothic */ font-size: 16px; /* Labels */ font-weight: 400; /* Regular */ color: var(--royal-blue); } .tag-label-about { /* "About" tag style */ font-family: var(--font-body); font-size: 14px; /* TAGS */ font-weight: 700; /* BOLD */ color: var(--accent-red); letter-spacing: normal; text-transform: capitalize; border: 1px solid var(--accent-red); padding: 0.3rem 0.8rem; border-radius: 50px; display: inline-block; margin=t: 1; } /* ======================= */ /* 4. Section Spotlight Positioning & Decor */ /* ======================= */ .section-spotlight { position: relative; margin-top: 0; overflow: hidden; padding-top: 0 !important; } /* Large Decorative Blue Circle (Matching image_802e1c.jpg) */ .decorative-circle-large { background-color: var(--medium-blue); /* #7ACED6 */ width: 40vw; max-width: 400px; height: 40vw; max-height: 400px; border-radius: 50%; /* Position exactly as seen in the image: far left and partially above */ top: -320px; left: -200px; z-index: -2; opacity: 1; /* Appears solid in the design */ } /* Abstract Flag Image Placeholder (Matching image_802e1c.jpg) */ .placeholder-image-flag { /* Set dimensions and absolute position relative to its column container */ position: absolute; right: 0px; /* Overlap to the right */ top: 0px; /* Positioned high up */ width: 100%; max-width: 600px; height: 600px; overflow: hidden; z-index: -1; } .dummy-flag-image { /* Style the actual image inside the placeholder for visual effect */ width: 100%; height: 100%; object-fit: cover; /* Optional: Add grayscale effect to match the design */ filter: grayscale(100%); } /* Responsive Hide for Large Elements */ @media (max-width: 991px) { /* Hiding both decorative elements on tablet/mobile */ .decorative-circle-large, .placeholder-image-flag { display: none !important; } } .col-lg-5.col-md-10.mx-auto.mx-lg-0.position-relative { padding-top: 110px; } /* ... (Ensure the :root variables are defined at the top) ... */ /* ======================= */ /* 5. Goals/Solutions Cards */ /* ======================= */ .bg-light-gray-custom { background-color: #fff; /* #EEF1F1 */ } /* ------------------------------------------- */ /* Section Titles (Century Gothic 700/Bold) */ /* ------------------------------------------- */ .section-title-sm { /* Title 1 / 24p Regular in design, forced to 700 for visibility */ font-family: var(--font-body); font-size: 40px; font-weight: 600; color: var(--royal-blue); /* #284042 */ } .subtitle-text { /* Subtitle / 20p Regular in design, forced to 700 for visibility */ font-family: var(--font-body); font-size: 20px; font-weight: 500; color: var(--royal-blue); max-width: 70%; text-align: center; margin: 0 auto; } /* ------------------------------------------- */ /* Card Styling */ /* ------------------------------------------- */ .solution-card { background-color: var(--pure-white); /* #FFFFFF */ border: 1px solid var(--medium-grey); /* #D7E0E0 */ border-radius: 0.5rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03); transition: box-shadow 0.3s; min-height: 220px; } .solution-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); } .card-title-lg { /* Title 2 / 20p BOLD in design - already 700 */ font-family: var(--font-body); font-weight: 700; font-size: 20px; margin-bottom: 0.5rem; color: var(--royal-blue); } .card-text-body { /* Labels / 16p Regular in design, forced to 700 for visibility */ font-family: var(--font-display); font-size: 16px; font-weight: 500; color: var(--royal-blue); /* opacity: 0.9; */ /* Maintain slight visual difference */ min-height: 40px; } .card-link-sm { /* Labels / 16p Regular in design, forced to 700 for visibility */ font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--royal-blue); text-decoration: none; transition: color 0.2s; display: inline-flex; /* For aligning the arrow icon */ align-items: center; } .card-link-sm:hover { color: var(--accent-red); /* #D72529 */ } .card-link-sm svg { /* Color the arrow icon to match the link color */ fill: currentColor; } /* style.css additions/updates */ /* ... (Ensure all previous card styling is present) ... */ /* ------------------------------------------- */ /* Card Icons (Line-Art Style) */ /* ------------------------------------------- */ .solution-icon svg { /* Royal Blue (#284042) for the lines */ stroke: var(--royal-blue); fill: none; /* Crucial for line-art style */ stroke-width: 2; } .lastt img { max-width: 100px; float: left; } .solution-card.contact-card.p-4.text-center.lastt { float: right; /* position: absolute; */ } span.random { color: red; text-align: center; margin: 0 auto; display: block; font-weight: 600; padding-bottom: 20px; font-size: 20px; } a.btn.btn-red.d-flex.align-items-center.justify-content-center.sec { display: block; width: 240px; margin: 0 auto; } /* style.css additions */ /* ------------------------------------ */ /* 6. Process Flow Section (3-Step Model) */ /* ------------------------------------ */ .section-process-flow { background-color: var(--pure-white); position: relative; /* Optional: Add a subtle background pattern if available in the design */ } /* --- Card Styles --- */ .process-step-card { position: relative; padding: 2.5rem 1.5rem 1.5rem; width: 90%; /* Control the width of the cards */ max-width: 300px; /* The distinctive red rounded border */ border: 2px solid var(--accent-red); /* #D72529 */ border-radius: 1rem; text-align: center; transition: transform 0.2s, box-shadow 0.2s; } .process-step-card:hover { box-shadow: 0 8px 15px rgba(215, 37, 41, 0.1); } .card-title-process { /* Century Gothic, Title 2/20p, Bold */ font-family: var(--font-body); font-weight: 700; font-size: 20px; color: var(--royal-blue); margin-bottom: 0; } /* --- Icon Styles --- */ .process-icon svg { stroke: var(--royal-blue); /* #284042 */ fill: none; stroke-width: 2; } /* --- Step Number Bubble --- */ .step-number { position: absolute; top: -15px; /* Position above the card border */ left: 50%; transform: translateX(-50%); width: 30px; height: 30px; line-height: 26px; /* Center text vertically */ /* Styling */ border: 2px solid var(--accent-red); border-radius: 50%; background-color: var(--pure-white); /* Font style: Century Gothic, 16p Bold (Labels/Tags) */ font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--accent-red); z-index: 10; } /* --- Connection Line (Desktop Only) --- */ .process-flow-col { position: relative; } .connection-line { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); width: 100%; height: 2px; background-color: var(--medium-grey); /* Subtle grey line */ z-index: -1; } /* Hide the line on the last step */ .process-flow-col:last-child .connection-line { display: none !important; } /* --- CTA Button (Talk to Radian) --- */ .btn-cta-red { /* Based on Talk to Radian button */ font-family: var(--font-body); font-weight: 700; /* Bold */ font-size: 18px; /* Buttons 18p */ background-color: var(--accent-red); color: var(--pure-white); border-radius: 50px; padding: 0.75rem 2rem; box-shadow: 0 4px 10px rgba(215, 37, 41, 0.4); text-decoration: none; transition: background-color 0.2s, box-shadow 0.2s; } .btn-cta-red:hover { background-color: #c02023; /* Slightly darker red */ color: var(--pure-white); } .btn-cta-red svg { /* White arrow fill */ fill: var(--pure-white); } /* Responsive adjustments */ @media (max-width: 767px) { .process-flow-row { /* On mobile, stack them vertically */ flex-direction: column; align-items: center; } .process-flow-col { margin-bottom: 3rem; /* Add space between stacked cards */ width: 100%; } .process-step-card { width: 80%; /* Expand card width on mobile */ max-width: none; } /* Add vertical line connector for mobile (optional, but professional) */ .process-flow-col:not(:last-child)::after { content: ''; position: absolute; bottom: -3rem; left: 50%; transform: translateX(-50%); width: 2px; height: 3rem; background-color: var(--medium-grey); z-index: -1; } /* Hide the horizontal line on mobile */ .connection-line { display: none !important; } } .col-md-4.col-12.process-flow-col { float: left; margin-bottom: 70px; } /* style.css additions */ /* ------------------------------------ */ /* 8. Footer Section (Updated Design) */ /* ------------------------------------ */ .footer-section-updated { background-color: var(--dark-blue); /* #284042 */ color: var(--pure-white); /* #FFFFFF */ font-family: var(--font-body); /* Century Gothic */ background-color: var(--royal-blue); padding-bottom: 10px !important; } /* --- Logo & Brand --- */ .footer-logo { display: flex; align-items: center; margin-bottom: 0.75rem !important; } .footer-brand-name { /* radion text underneath the logo - using the labels/body style */ font-size: 16px; font-weight: 700; /* Century Gothic Bold */ margin-left: -15px; /* Adjust for logo alignment */ line-height: 1; } /* --- Introductory Text --- */ .footer-text-intro { /* Labels / 16p, forced to 700 for visibility */ font-size: 16px; font-weight: 700; line-height: 1.6; opacity: 0.9; margin-bottom: 0; } /* --- Contact Info List --- */ .footer-contact-list { padding-left: 0; } .footer-contact-list li { margin-bottom: 0.75rem; } .footer-contact-link { /* Labels / 16p, forced to 700 for visibility */ display: flex; align-items: center; color: var(--pure-white); font-size: 16px; font-weight: 700; text-decoration: none; opacity: 0.8; transition: opacity 0.2s, color 0.2s; } .footer-contact-link:hover { color: var(--accent-red); /* #D72529 */ opacity: 1; } .footer-contact-link svg { /* Icon styling for email/location/phone */ stroke: var(--pure-white); fill: none; transition: stroke 0.2s; } .footer-contact-link:hover svg { stroke: var(--accent-red); } /* --- Navigation Titles --- */ .footer-title { /* Title 2 / 20p, Bold */ font-size: 20px; font-weight: 700; margin-bottom: 1.25rem; color: var(--pure-white); } /* --- Navigation Links --- */ .footer-nav-list { padding-left: 0; } .footer-link { /* Labels / 16p, forced to 700 for visibility */ display: inline-block; color: var(--pure-white); font-size: 16px; font-weight: 700; text-decoration: none; margin-bottom: 0.5rem; opacity: 0.8; transition: opacity 0.2s, color 0.2s; } .footer-link:hover { color: var(--accent-red); opacity: 1; } /* --- Copyright --- */ .footer-text-copyright { /* TAGS / 14p, Bold */ font-size: 14px; font-weight: 700; opacity: 0.6; } /* --- Responsive Adjustments --- */ @media (max-width: 991px) { /* Tablet/Mobile Layout: Stack navigation columns vertically */ .col-lg-4.col-md-12.col-12:not(:first-child) { margin-bottom: 2.5rem; /* Space between the navigation columns */ } } section.section-spotlight.py-5 { padding-bottom: 0 !important; margin-bottom: 0; } .btn-red:hover { border: 1px solid red; color: #000; background: #fff; } .btn-red:hover svg { filter: invert(1); } a.btn.btn-lg.btn-outline-primary.d-flex.align-items-center:hover { background: #d72529; } a.btn.btn-lg.btn-outline-primary.d-flex.align-items-center:hover svg { filter: invert(1); }