/* ========================================= About Us HERO ========================================= */ .scs-about-hero { position: relative; width: 100%; height: 360px; overflow: hidden; font-family: "Roboto", sans-serif; background: #ffffff; } /* ========================================= BACKGROUND IMAGE ========================================= */ .scs-about-hero-bg { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url("../images/about-us-banner.jpg"); background-size: cover; background-position: center right; background-repeat: no-repeat; z-index: 0; } /* ========================================= WHITE GRADIENT OVERLAY ========================================= */ .scs-about-hero-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( 90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.96) 28%, rgba(255,255,255,0.82) 48%, rgba(255,255,255,0.38) 72%, rgba(255,255,255,0.08) 100% ); } /* ========================================= CONTAINER ========================================= */ .scs-about-hero-container { position: relative; z-index: 3; width: calc(100% - 80px); max-width: 1200px; height: 100%; margin: 0 auto; display: flex; align-items: center; } /* ========================================= CONTENT ========================================= */ .scs-about-hero-content { width: 610px; padding-top: 5px; } /* ========================================= ABOUT LABEL ========================================= */ .scs-about-hero-label { display: inline-block; padding: 4px 8px; margin-bottom: 8px; background: #fff0e8; color: #f15a16; border-radius: 3px; font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: 0.3px; } /* ========================================= MAIN HEADING ========================================= */ .scs-about-hero-content h1 { margin: 0; color: #082d58; font-size: 43px; line-height: 1.08; font-weight: 700; letter-spacing: -0.5px; } .scs-about-hero-content h1 span { display: block; color: #f15a16; } /* ========================================= DESCRIPTION ========================================= */ .scs-about-hero-content p { margin: 15px 0 0; color: #233f5d; font-size: 13px; line-height: 1.5; font-weight: 500; } /* ========================================= ORANGE ACCENT ========================================= */ .scs-about-hero-line { width: 45px; height: 3px; margin-top: 14px; background: #f15a16; } /* ========================================= TABLET ========================================= */ @media (max-width: 900px) { .scs-about-hero { height: 320px; } .scs-about-hero-container { width: calc(100% - 50px); } .scs-about-hero-content { width: 530px; } .scs-about-hero-content h1 { font-size: 36px; } .scs-about-hero-content p { font-size: 12px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 600px) { .scs-about-hero { height: 300px; } .scs-about-hero-bg { background-position: 65% center; } .scs-about-hero-overlay { background: linear-gradient( 90deg, rgba(255,255,255,0.98) 0%, rgba(255,255,255,0.94) 58%, rgba(255,255,255,0.55) 100% ); } .scs-about-hero-container { width: calc(100% - 40px); } .scs-about-hero-content { width: 100%; } .scs-about-hero-label { font-size: 14px; padding: 4px 7px; margin-bottom: 7px; } .scs-about-hero-content h1 { font-size: 29px; line-height: 1.08; letter-spacing: -0.3px; } .scs-about-hero-content p { max-width: 300px; margin-top: 11px; font-size: 10px; line-height: 1.45; } .scs-about-hero-line { width: 35px; height: 3px; margin-top: 11px; } } /* ========================================= About Us - WHO WE ARE ========================================= */ .scs-about-who { width: 100%; padding: 30px 0; background: #ffffff; font-family: "Roboto", sans-serif; } .scs-about-who-container { width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 52% 48%; align-items: center; } /* ========================================= LEFT CONTENT ========================================= */ .scs-about-who-content { padding-right: 10px; } .scs-section-label { display: inline-block; padding: 4px 8px; background: #fff0e8; color: #f15a16; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .3px; } .scs-about-who-content h2 { margin: 8px 0 0; color: #082d58; font-size: 32px; line-height: 1.15; font-weight: 700; } .scs-section-line { width: 38px; height: 3px; margin-top: 10px; background: #f15a16; } .scs-about-who-content h3 { margin: 20px 0 10px; color: #173d65; font-size: 19px; line-height: 1.35; font-weight: 600; } .scs-about-who-content p { margin: 0 0 13px; max-width: 590px; color: #000; font-size: 14px; line-height: 1.65; } /* ========================================= HIGHLIGHTS ========================================= */ .scs-about-highlights { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 25px; border-top: 1px solid #dce3eb; border-bottom: 1px solid #dce3eb; } .scs-about-highlight { min-height: 70px; padding: 13px 15px; display: flex; align-items: center; gap: 12px; border-right: 1px solid #dce3eb; } .scs-about-highlight:last-child { border-right: none; } .scs-about-highlight strong { color: #f15a16; font-size: 28px; line-height: 1; font-weight: 700; } .scs-about-highlight span { color: #173d65; font-size: 14px; line-height: 1.35; font-weight: 600; } /* ========================================= RIGHT IMAGE ========================================= */ .scs-about-who-image { position: relative; width: 100%; max-width: 490px; height: auto; margin-left: auto; overflow: visible; } .scs-about-who-image img { width: 100%; height: auto; display: block; object-fit: contain; } /* ========================================= IMAGE CAPTION ========================================= */ .scs-about-image-caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 13px 18px; background: linear-gradient( 90deg, rgba(3,38,83,.95), rgba(3,38,83,.70) ); } .scs-about-image-caption span { color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: .4px; } /* ========================================= TABLET ========================================= */ @media (max-width: 900px) { .scs-about-who { padding: 50px 0; } .scs-about-who-container { width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 52% 48%; align-items: center; gap: 45px; } .scs-about-who-content h2 { font-size: 28px; } .scs-about-who-content h3 { font-size: 17px; } .scs-about-who-content p { font-size: 10px; } .scs-about-who-image { height: 360px; } .scs-about-highlight { padding: 10px; gap: 8px; } .scs-about-highlight strong { font-size: 20px; } } /* ========================================= MOBILE ========================================= */ @media (max-width: 600px) { .scs-about-who { padding: 40px 0; } .scs-about-who-container { width: calc(100% - 40px); display: flex; flex-direction: column; gap: 25px; } .scs-about-who-image { width: 100% !important; max-width: 490px !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 auto !important; overflow: visible !important; } .scs-about-who-image img { width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; object-position: center !important; display: block !important; } .scs-about-who-content { width: 100%; padding: 0; } .scs-about-who-content h2 { font-size: 27px; } .scs-about-who-content h3 { font-size: 17px; margin-top: 16px; } .scs-about-who-content p { font-size: 10px; line-height: 1.6; } .scs-about-highlights { margin-top: 20px; } .scs-about-highlight { min-height: 65px; padding: 9px; display: block; text-align: center; } .scs-about-highlight strong { display: block; margin-bottom: 5px; font-size: 19px; } .scs-about-highlight span { font-size: 8px; } .scs-about-who-image { width: 100%; height: 260px; } } /* ========================================================= WHY CHOOSE SCS + OUR COMMITMENT ========================================================= */ .scs-why-commitment { width: 100%; margin: 0; padding: 0; background: #ffffff; font-family: "Roboto", sans-serif; overflow: hidden; } /* ========================================================= MAIN TWO-COLUMN LAYOUT ========================================================= */ .scs-why-commitment-inner { width: 100%; min-height: 285px; display: grid; grid-template-columns: 50% 50%; } /* ========================================================= COMMON PANEL ========================================================= */ .scs-why-panel, .scs-commitment-panel { position: relative; min-height: 285px; } /* ========================================================= WHY CHOOSE - NAVY PANEL ========================================================= */ .scs-why-panel { position: relative; background: #032653; color: #ffffff; z-index: 2; } /* ========================================================= DIAGONAL EDGE ========================================================= */ .scs-why-panel::after { content: ""; position: absolute; top: 0; right: -75px; width: 120px; height: 100%; background: #032653; clip-path: polygon( 0 0, 62% 0, 0 100% ); z-index: 3; } /* ========================================================= WHY CHOOSE CONTENT ========================================================= */ .scs-panel-content { position: relative; z-index: 5; width: 100%; max-width: 600px; padding: 35px 55px 30px 60px; } /* ========================================================= SECTION HEADING ========================================================= */ .scs-panel-heading { display: flex; align-items: center; gap: 8px; margin: 0 0 21px 0; } .scs-panel-heading h2 { margin: 0; padding: 0; color: #ffffff; font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: 0.2px; } /* Orange line after heading */ .scs-panel-heading span { display: block; width: 32px; height: 3px; flex-shrink: 0; background: #fff; } /* ========================================================= WHY CHOOSE LIST ========================================================= */ .scs-why-list { width: 100%; display: flex; flex-direction: column; gap: 11px; } /* ========================================================= INDIVIDUAL WHY ITEM ========================================================= */ .scs-why-row { width: 100%; display: flex; align-items: center; gap: 10px; } /* ========================================================= ORANGE CHECK ========================================================= */ .scs-check { width: 15px; height: 15px; min-width: 15px; flex: 0 0 15px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #f15a16; color: #ffffff; font-size: 14px; line-height: 1; font-weight: 700; } /* ========================================================= WHY CHOOSE TEXT ========================================================= */ .scs-why-row p { margin: 0; padding: 0; color: #ffffff; font-size: 14px; line-height: 1.35; font-weight: 400; } /* ========================================================= OUR COMMITMENT - WHITE PANEL ========================================================= */ .scs-commitment-panel { position: relative; background: #ffffff; overflow: hidden; z-index: 1; } /* ========================================================= INDUSTRIAL WATERMARK ========================================================= */ .scs-commitment-watermark { position: absolute; right: -5px; bottom: -5px; width: 260px; height: 250px; background-image: url("../images/industrial-watermark.png"); background-repeat: no-repeat; background-position: right bottom; background-size: contain; opacity: 0.10; z-index: 1; pointer-events: none; } /* ========================================================= COMMITMENT CONTENT ========================================================= */ .scs-commitment-content { position: relative; z-index: 4; width: 100%; max-width: 600px; color:#fff; padding: 35px 65px 60px 80px; background-color:#F15A16; } /* ========================================================= COMMITMENT HEADING ========================================================= */ .scs-commitment-content .scs-panel-heading { margin: 0 0 21px 0; } .scs-commitment-content .scs-panel-heading h2 { color: #fff; font-weight:bold; } /* ========================================================= COMMITMENT TEXT ========================================================= */ .scs-commitment-text { max-width: 500px; margin: 0; padding: 0; color: #fff; font-size: 14px; line-height: 1.55; font-weight: 400; } /* ========================================================= SIGNATURE ========================================================= */ .scs-signature { margin-top: 17px; } .scs-signature-line { width: 100px; height: 27px; margin-bottom: 3px; color: #fff; font-family: cursive; font-size: 12px; font-style: italic; } .scs-signature strong { display: block; margin: 0; color: #fff; font-size: 14px; line-height: 1.3; font-weight: 700; } /* ========================================================= TABLET 601px - 900px ========================================================= */ @media (max-width: 900px) and (min-width: 601px) { .scs-why-commitment-inner { min-height: 300px; grid-template-columns: 50% 50%; } .scs-why-panel, .scs-commitment-panel { min-height: 300px; } /* WHY CONTENT */ .scs-panel-content { max-width: none; padding: 35px 30px 30px 35px; } /* DIAGONAL */ .scs-why-panel::after { right: -60px; width: 100px; } /* HEADING */ .scs-panel-heading { margin-bottom: 19px; } .scs-panel-heading h2 { font-size: 14px; } .scs-panel-heading span { width: 28px; } /* LIST */ .scs-why-list { gap: 10px; } .scs-why-row { gap: 8px; } .scs-check { width: 14px; height: 14px; min-width: 14px; flex-basis: 14px; font-size: 8px; } .scs-why-row p { font-size: 8.5px; line-height: 1.35; } /* COMMITMENT */ .scs-commitment-content { max-width: none; padding: 35px 30px 30px 55px; } .scs-commitment-text { max-width: 420px; font-size: 8.5px; } .scs-signature { margin-top: 14px; } .scs-commitment-watermark { width: 210px; height: 210px; } } /* ========================================================= MOBILE 600px AND BELOW ========================================================= */ @media (max-width: 600px) { /* ===================================== MAIN LAYOUT ====================================== */ .scs-why-commitment-inner { width: 100%; min-height: auto; display: flex; flex-direction: column; } /* ===================================== PANELS ====================================== */ .scs-why-panel, .scs-commitment-panel { width: 100%; min-height: auto; } /* ===================================== REMOVE DESKTOP DIAGONAL ====================================== */ .scs-why-panel::after { display: none; } /* ===================================== WHY CHOOSE CONTENT ====================================== */ .scs-panel-content { width: 100%; max-width: none; box-sizing: border-box; padding: 35px 25px 32px 25px; } /* ===================================== HEADING ====================================== */ .scs-panel-heading { margin-bottom: 20px; gap: 7px; } .scs-panel-heading h2 { font-size: 14px; line-height: 1.2; } .scs-panel-heading span { width: 28px; height: 3px; } /* ===================================== WHY LIST ====================================== */ .scs-why-list { gap: 12px; } .scs-why-row { width: 100%; align-items: flex-start; gap: 9px; } /* ===================================== CHECK ICON ====================================== */ .scs-check { width: 16px; height: 16px; min-width: 16px; flex: 0 0 16px; margin-top: 1px; font-size: 14px; } /* ===================================== WHY TEXT ====================================== */ .scs-why-row p { margin: 0; font-size: 10px; line-height: 1.4; } /* ===================================== COMMITMENT PANEL ====================================== */ .scs-commitment-panel { min-height: 300px; } .scs-commitment-content { width: 100%; max-width: none; box-sizing: border-box; padding: 35px 25px 35px 25px; } /* ===================================== COMMITMENT HEADING ====================================== */ .scs-commitment-content .scs-panel-heading { margin-bottom: 20px; } /* ===================================== COMMITMENT TEXT ====================================== */ .scs-commitment-text { max-width: none; margin: 0; font-size: 10px; line-height: 1.55; } /* ===================================== SIGNATURE ====================================== */ .scs-signature { margin-top: 18px; } .scs-signature-line { width: 100px; height: 27px; font-size: 14px; } .scs-signature strong { font-size: 14px; } /* ===================================== WATERMARK ====================================== */ .scs-commitment-watermark { width: 190px; height: 190px; right: -10px; bottom: -10px; opacity: 0.08; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 380px) { .scs-panel-content { padding-left: 20px; padding-right: 20px; } .scs-commitment-content { padding-left: 20px; padding-right: 20px; } .scs-why-row p { font-size: 14px; } .scs-commitment-text { font-size: 14px; } } /* ========================================================= OUR CORE Solutions ========================================================= */ /* ========================================================= OUR CORE Solutions ========================================================= */ .scs-Solutions { width: 100%; padding: 55px 0 60px; background: #ffffff; font-family: "Roboto", sans-serif; } .scs-Solutions-container { width: calc(100% - 100px); max-width: 1200px; margin: 0 auto; } /* ========================================================= SECTION HEADING ========================================================= */ .scs-Solutions-heading { text-align: center; margin-bottom: 30px; } .scs-Solutions-label { color: #f15a16; font-size: 10px; line-height: 1.2; font-weight: 700; letter-spacing: .4px; } .scs-Solutions-heading h2 { margin: 6px 0 0; color: #082d58; font-size: 27px; line-height: 1.2; font-weight: 700; } .scs-Solutions-heading-line { width: 40px; height: 3px; margin: 9px auto 0; background: #f15a16; } /* ========================================================= FOUR CARDS ========================================================= */ .scs-Solutions-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* ========================================================= CARD ========================================================= */ .scs-solution-card { position: relative; min-height: 315px; padding: 20px 18px 22px; background: #ffffff; border: 1px solid #d8e2eb; border-radius: 5px; box-sizing: border-box; text-align: center; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .scs-solution-card:hover { transform: translateY(-3px); border-color: #c4d3e0; box-shadow: 0 8px 22px rgba(3,38,83,.08); } /* ========================================================= TOP AREA ========================================================= */ .scs-solution-top { position: relative; height: 65px; display: flex; align-items: center; justify-content: center; } /* ========================================================= NUMBER ========================================================= */ .scs-solution-number { position: absolute; top: 0; right: 0; color: #dfe7ee; font-size: 17px; line-height: 1; font-weight: 700; } /* ========================================================= ICON ========================================================= */ .scs-solution-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; } .scs-solution-icon img { width: 45px; height: 45px; display: block; object-fit: contain; } /* ========================================================= TITLE ========================================================= */ .scs-solution-card h3 { margin: 13px 0 12px; color: #082d58; font-size: 13px; line-height: 1.35; font-weight: 700; } /* ========================================================= DESCRIPTION ========================================================= */ .scs-solution-card p { margin: 0; color: #000; font-size: 9px; line-height: 1.6; font-weight: 400; } /* ========================================================= TABLET ========================================================= */ @media (max-width: 900px) and (min-width: 601px) { .scs-Solutions { padding: 45px 0 50px; } .scs-Solutions-container { width: calc(100% - 60px); } .scs-Solutions-grid { grid-template-columns: repeat(2, 1fr); gap: 13px; } .scs-solution-card { min-height: 285px; } .scs-solution-card h3 { font-size: 13px; } .scs-solution-card p { font-size: 9px; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 600px) { .scs-Solutions { padding: 40px 0 45px; } .scs-Solutions-container { width: calc(100% - 30px); } .scs-Solutions-heading { margin-bottom: 23px; } .scs-Solutions-heading h2 { font-size: 23px; } .scs-Solutions-grid { grid-template-columns: 1fr; gap: 12px; } .scs-solution-card { min-height: auto; padding: 20px 18px 22px; } .scs-solution-top { height: 58px; } .scs-solution-icon { width: 42px; height: 42px; } .scs-solution-icon img { width: 40px; height: 40px; } .scs-solution-number { font-size: 16px; } .scs-solution-card h3 { margin: 10px 0 10px; font-size: 13px; } .scs-solution-card p { font-size: 9px; line-height: 1.6; } }