/* ================================================== COLORS ================================================== */ :root { --navy: #0a234f; --navy-dark: #061735; --navy-light: #183765; --orange: #7CB12D; --orange-dark: #7CB12D; --orange-light: #fff2e6; --white: #ffffff; --bg: #f7f9fc; --text: #102b57; --grey: #68758d; --border: #e6eaf1; --shadow: 0 20px 50px rgba(5, 28, 65, 0.13); } /* ================================================== RESET ================================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", sans-serif; background: var(--bg); color: var(--text); } a { text-decoration: none; } /* ================================================== COMPLETE HEADER ================================================== */ .site-header { position: sticky; top: 0; z-index: 9999; } /* ================================================== UNIQUE TOP HEADER ================================================== */ .top-header { width: 100%; color: white; background: linear-gradient(105deg, #061735 0%, #0a234f 55%, #15396e 100%); position: relative; overflow: hidden; } /* decorative orange line */ .top-header::after { content: ""; position: absolute; right: 0; bottom: 0; height: 2px; width: 35%; background: linear-gradient(90deg, transparent, var(--orange)); } .top-container { max-width: 1480px; min-height: 42px; margin: auto; padding: 0 30px; display: flex; align-items: center; justify-content: space-between; gap: 30px; } .top-left, .top-right { display: flex; align-items: center; } .top-left { gap: 18px; } .top-right { gap: 25px; } .top-info { color: rgba(255, 255, 255, 0.87); font-size: 12px; font-weight: 500; display: flex; gap: 8px; align-items: center; transition: 0.25s; } .top-info:hover { color: var(--orange); } .top-icon { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 50%; color: var(--orange); background: rgba(255, 255, 255, 0.08); } .top-divider { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.18); } .working-hours { font-size: 12px; color: rgba(255, 255, 255, 0.84); display: flex; align-items: center; gap: 8px; } .status-dot { width: 7px; height: 7px; background: #35d879; border-radius: 50%; box-shadow: 0 0 0 4px rgba(53, 216, 121, 0.12); } .top-help-link { font-size: 12px; font-weight: 600; color: white; display: flex; align-items: center; gap: 7px; } .top-help-link span { color: var(--orange); transition: 0.2s; } .top-help-link:hover span { transform: translateX(4px); } /* ================================================== MAIN HEADER ================================================== */ .main-header { background: rgba(255, 255, 255, 0.98); box-shadow: 0 7px 30px rgba(8, 32, 70, 0.07); backdrop-filter: blur(15px); } .header-container { max-width: 1480px; min-height: 88px; margin: auto; padding: 0 30px; display: flex; align-items: center; gap: 22px; } /* ================================================== LOGO ================================================== */ .logo { flex: 0 0 230px; width: 230px; } .logo img { width: 100%; display: block; height: auto; } /* ================================================== NAVBAR ================================================== */ .navbar { margin-left: auto; } .nav-list { display: flex; align-items: center; gap: 3px; list-style: none; } .nav-item { position: relative; } /* ================================================== MAIN NAV LINKS ================================================== */ .nav-link { border: 0; background: transparent; padding: 13px 12px; color: var(--navy); font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; border-radius: 9px; display: flex; align-items: center; gap: 8px; white-space: nowrap; transition: color 0.2s, background 0.2s; } .nav-link:hover { background: var(--orange-light); color: var(--orange); } /* ================================================== + / - ICON ================================================== */ .plus-icon { width: 12px; height: 12px; position: relative; display: inline-block; flex-shrink: 0; } /* horizontal line */ .plus-icon::before { content: ""; position: absolute; width: 10px; height: 1.5px; background: currentColor; left: 1px; top: 5px; border-radius: 10px; } /* vertical line */ .plus-icon::after { content: ""; position: absolute; width: 1.5px; height: 10px; background: currentColor; left: 5px; top: 1px; border-radius: 10px; transition: opacity 0.2s, transform 0.2s; } /* REMOVE VERTICAL LINE ON HOVER */ .has-dropdown:hover > .nav-link .plus-icon::after { opacity: 0; transform: rotate(90deg); } /* ================================================== DROPDOWN ================================================== */ .dropdown-menu { position: absolute; top: calc(100% + 11px); left: 0; min-width: 245px; padding: 8px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.99); border-radius: 13px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s, transform 0.18s, visibility 0.18s; } /* triangle */ .dropdown-menu::after { content: ""; position: absolute; top: -6px; left: 28px; width: 11px; height: 11px; background: white; border-left: 1px solid var(--border); border-top: 1px solid var(--border); transform: rotate(45deg); } /* hover bridge */ .dropdown-menu::before { content: ""; position: absolute; top: -15px; left: 0; height: 15px; width: 100%; } .has-dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* ================================================== DROPDOWN LINKS ================================================== */ .dropdown-link, .submenu-toggle { width: 100%; min-height: 42px; padding: 10px 12px; border: none; background: transparent; border-radius: 8px; color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 500; cursor: pointer; text-align: left; display: flex; align-items: center; justify-content: space-between; gap: 15px; transition: 0.2s; } .dropdown-link:hover, .submenu-toggle:hover, .has-submenu:hover > .submenu-toggle { color: var(--orange); background: var(--orange-light); } /* ================================================== CUSTOM CHEVRON ================================================== */ .chevron-icon { width: 8px; height: 8px; border-right: 1.7px solid currentColor; border-top: 1.7px solid currentColor; transform: rotate(45deg); margin-right: 3px; transition: transform 0.2s; } /* ================================================== SUBMENU ================================================== */ .has-submenu { position: relative; } .submenu { position: absolute; top: -8px; left: calc(100% + 9px); min-width: 285px; padding: 8px; background: white; border: 1px solid var(--border); border-radius: 13px; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateX(8px); transition: 0.18s ease; } .submenu::before { content: ""; position: absolute; width: 12px; height: 100%; left: -12px; top: 0; } .has-submenu:hover > .submenu { opacity: 1; visibility: visible; transform: translateX(0); } .submenu a { min-height: 42px; padding: 10px 12px; display: flex; align-items: center; border-radius: 8px; color: var(--text); font-size: 13.5px; font-weight: 500; white-space: nowrap; transition: 0.2s; } .submenu a:hover { color: var(--orange); background: var(--orange-light); } /* menu widths */ .cloud-dropdown { min-width: 285px; } .business-dropdown { min-width: 315px; } .consultancy-dropdown { min-width: 250px; } /* CONSULTANCY SUBMENU OPEN LEFT */ .submenu-left { left: auto; right: calc(100% + 9px); transform: translateX(-8px); } .has-submenu:hover > .submenu-left { transform: translateX(0); } /* ================================================== CTA ================================================== */ .support-button { display: flex; align-items: center; gap: 9px; color: white; background: linear-gradient(135deg, var(--orange), #7CB12D); border-radius: 10px; padding: 8px 15px 8px 8px; font-size: 13px; font-weight: 700; flex-shrink: 0; box-shadow: 0 8px 20px rgba(255, 122, 0, 0.22); transition: 0.2s; } .support-button:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 122, 0, 0.3); } .support-circle { width: 31px; height: 31px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.18); font-size: 17px; } /* ================================================== MOBILE TOGGLE ================================================== */ .mobile-toggle { display: none; width: 43px; height: 43px; background: white; border: 1px solid var(--border); border-radius: 9px; padding: 9px; cursor: pointer; } .mobile-toggle span { display: block; width: 100%; height: 2px; background: var(--navy); margin: 5px 0; border-radius: 10px; transition: 0.25s; } /* ================================================== DEMO ================================================== */ .demo-section { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 70px 20px; background: radial-gradient( circle at 20% 10%, rgba(255, 122, 0, 0.09), transparent 30% ), radial-gradient(circle at 90% 30%, rgba(10, 35, 79, 0.08), transparent 35%), #f7f9fc; } .demo-label { color: var(--orange); font-weight: 700; } .demo-section h1 { margin: 12px 0; color: var(--navy); font-size: clamp(36px, 6vw, 64px); } .demo-section p { color: var(--grey); } /* ================================================== LAPTOP RESPONSIVE ================================================== */ @media (max-width: 1280px) { .header-container { padding: 0 18px; gap: 12px; } .logo { flex-basis: 190px; width: 190px; } .nav-link { font-size: 12.5px; padding: 12px 8px; gap: 6px; } .support-button { padding: 7px 11px 7px 7px; } } /* ================================================== MOBILE / TABLET ================================================== */ @media (max-width: 1050px) { .top-container { padding: 0 18px; } .header-container { min-height: 78px; flex-wrap: wrap; padding: 8px 18px; } .logo { width: 205px; flex-basis: 205px; } .mobile-toggle { display: block; margin-left: auto; } .support-button { order: 2; } .navbar { display: none; width: 100%; order: 3; margin: 0; border-top: 1px solid var(--border); } .site-header.menu-open .navbar { display: block; } .nav-list { display: block; width: 100%; padding: 8px 0; max-height: calc(100vh - 130px); overflow-y: auto; } .nav-item { border-bottom: 1px solid var(--border); } .nav-link { width: 100%; min-height: 48px; padding: 13px 11px; font-size: 14px; justify-content: space-between; } /* MOBILE + TO - */ .has-dropdown.open > .nav-link .plus-icon::after { opacity: 0; } /* stop desktop hover */ .has-dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; } .dropdown-menu { position: static; min-width: 100%; display: none; opacity: 1; visibility: visible; transform: none; border: none; border-radius: 0; box-shadow: none; padding: 0 0 8px 12px; } .dropdown-menu::before, .dropdown-menu::after { display: none; } .has-dropdown.open > .dropdown-menu { display: block; } .dropdown-link, .submenu-toggle { min-height: 42px; font-size: 13.5px; } /* nested accordion */ .submenu { position: static; display: none; width: 100%; min-width: 100%; opacity: 1; visibility: visible; transform: none !important; border: none; box-shadow: none; border-radius: 0; padding: 2px 0 5px 13px; margin-left: 7px; border-left: 2px solid var(--orange-light); } .has-submenu.open > .submenu { display: block; } .has-submenu.open > .submenu-toggle .chevron-icon { transform: rotate(135deg); } .submenu a { white-space: normal; } .submenu-left { position: static; } } /* ================================================== SMALL MOBILE ================================================== */ @media (max-width: 650px) { .top-header { display: none; } .header-container { padding: 7px 13px; } .logo { width: 175px; flex-basis: 175px; } .support-button { display: none; } .mobile-toggle { margin-left: auto; } } /* ===================================================== BOOTSTRAP HEADER CONFLICT FIX Keep this at the END of style.css ===================================================== */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* ===================================================== HEADER RESET AGAINST BOOTSTRAP ===================================================== */ .site-header, .site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; } .site-header { width: 100%; overflow: visible; } .site-header ul, .site-header li { margin: 0; padding: 0; list-style: none; } .site-header a { text-decoration: none; } .site-header .nav-item a { color: #7CB12D; } .site-header button { margin: 0; border: 0; box-shadow: none; font-family: inherit; } /* ===================================================== HEADER CONTAINERS ===================================================== */ .site-header .header-container, .site-header .top-container { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; } /* ===================================================== NAV FIX ===================================================== */ .site-header .navbar { margin-left: auto; } .site-header .nav-list { display: flex; align-items: center; gap: 3px; margin: 0; padding: 0; } .site-header .nav-item { position: relative; } /* ===================================================== MAIN NAV LINK ===================================================== */ .site-header .nav-link { width: auto; display: flex; align-items: center; padding: 13px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--navy); font-family: inherit; font-size: 13.5px; line-height: 1.2; font-weight: 600; white-space: nowrap; box-shadow: none; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--orange); background: var(--light-orange); box-shadow: none; } /* ===================================================== FIRST LEVEL DROPDOWN ===================================================== */ .site-header .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; display: block; min-width: 245px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .site-header .dropdown-menu::before { content: ""; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } .site-header .dropdown-parent:hover > .dropdown-menu, .site-header .has-dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* ===================================================== DROPDOWN LINKS ===================================================== */ .site-header .dropdown-menu > a, .site-header .submenu-toggle { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.35; font-weight: 500; text-align: left; box-shadow: none; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .site-header .dropdown-menu > a:hover, .site-header .submenu-toggle:hover, .site-header .submenu-parent:hover > .submenu-toggle, .site-header .has-submenu:hover > .submenu-toggle { color: var(--orange); background: var(--light-orange); } /* ===================================================== IMPORTANT REMOVE ONLY INNER SUBMENU ARROWS ===================================================== */ /* Custom chevron */ .site-header .submenu-toggle .chevron-icon { display: none !important; } /* If inner arrow is span with › */ .site-header .submenu-toggle > span:last-child:not(:first-child) { display: none !important; } /* Common nested arrow classes */ .site-header .submenu-toggle .arrow, .site-header .submenu-toggle .submenu-arrow, .site-header .submenu-toggle .dropdown-arrow { display: none !important; } /* Bootstrap may generate dropdown caret */ .site-header .submenu-toggle.dropdown-toggle::after { display: none !important; content: none !important; } /* Keep text aligned after arrow removal */ .site-header .submenu-toggle { justify-content: flex-start !important; gap: 0 !important; } /* ===================================================== NESTED SUBMENU ===================================================== */ .site-header .submenu-parent, .site-header .has-submenu { position: relative; } .site-header .submenu { position: absolute; top: -8px; left: calc(100% + 9px); display: block; min-width: 275px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .site-header .submenu::before { content: ""; position: absolute; top: 0; left: -10px; width: 10px; height: 100%; } .site-header .submenu-parent:hover > .submenu, .site-header .has-submenu:hover > .submenu { opacity: 1; visibility: visible; transform: translateX(0); } /* ===================================================== SUBMENU LINKS ===================================================== */ .site-header .submenu a { display: flex; align-items: center; min-height: 40px; padding: 9px 11px; border-radius: 8px; color: var(--text); font-size: 13px; line-height: 1.35; font-weight: 500; text-decoration: none; transition: color 0.18s ease, background 0.18s ease; } .site-header .submenu a:hover { color: var(--orange); background: var(--light-orange); } /* ===================================================== RIGHT SIDE MENU FIX ===================================================== */ .site-header .consultancy-menu, .site-header .consultancy-dropdown { left: auto; right: 0; } .site-header .consultancy-menu .submenu, .site-header .consultancy-dropdown .submenu, .site-header .submenu-left { left: auto; right: calc(100% + 9px); } /* ===================================================== BOOTSTRAP CARET FIX Keep main dropdown icons as your own design ===================================================== */ /* Bootstrap .dropdown-toggle::after may create an unwanted second arrow. Remove Bootstrap's generated caret only. */ .site-header .nav-link.dropdown-toggle::after { display: none !important; content: none !important; } /* ===================================================== MOBILE / TABLET ===================================================== */ @media (max-width: 1050px) { .site-header .navbar { width: 100%; margin: 0; display: none; border-top: 1px solid var(--border); } .site-header.menu-open .navbar, .site-header.mobile-open .navbar { display: block; } .site-header .nav-list { display: block; width: 100%; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .site-header .nav-item { width: 100%; border-bottom: 1px solid var(--border); } .site-header .nav-link { width: 100%; min-height: 48px; padding: 13px 11px; justify-content: space-between; font-size: 14px; } /* MAIN DROPDOWN */ .site-header .dropdown-menu { position: static; display: none; width: 100%; min-width: 0; margin: 0; padding: 0 0 8px 12px; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .site-header .dropdown-menu::before { display: none; } .site-header .dropdown-parent:hover > .dropdown-menu, .site-header .has-dropdown:hover > .dropdown-menu { display: none; } .site-header .dropdown-parent.open > .dropdown-menu, .site-header .has-dropdown.open > .dropdown-menu { display: block; } /* NESTED */ .site-header .submenu { position: static; display: none; width: 100%; min-width: 0; margin-left: 7px; padding: 2px 0 5px 12px; border: 0; border-left: 2px solid var(--light-orange); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .site-header .submenu::before { display: none; } .site-header .submenu-parent:hover > .submenu, .site-header .has-submenu:hover > .submenu { display: none; } .site-header .submenu-parent.open > .submenu, .site-header .has-submenu.open > .submenu { display: block; } /* INNER SUBMENU ARROWS REMAIN REMOVED */ .site-header .submenu-toggle { justify-content: flex-start !important; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 650px) { .site-header .top-header { display: none; } .site-header .support-button { display: none; } } /* ===================================================== BOOTSTRAP HEADER CONFLICT FIX Keep this at the END of style.css ===================================================== */ html, body { width: 100%; max-width: 100%; overflow-x: hidden; } /* ===================================================== HEADER RESET AGAINST BOOTSTRAP ===================================================== */ .site-header, .site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; } .site-header { width: 100%; overflow: visible; } .site-header ul, .site-header li { margin: 0; padding: 0; list-style: none; } .site-header a { text-decoration: none; } .site-header button { margin: 0; border: 0; box-shadow: none; font-family: inherit; } /* ===================================================== HEADER CONTAINERS ===================================================== */ .site-header .header-container, .site-header .top-container { width: 100%; max-width: 1480px; margin-left: auto; margin-right: auto; } /* ===================================================== NAV FIX ===================================================== */ .site-header .navbar { margin-left: auto; } .site-header .nav-list { display: flex; align-items: center; gap: 3px; margin: 0; padding: 0; } .site-header .nav-item { position: relative; } /* ===================================================== MAIN NAV LINK ===================================================== */ .site-header .nav-link { width: auto; display: flex; align-items: center; padding: 13px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--navy); font-family: inherit; font-size: 13.5px; line-height: 1.2; font-weight: 600; white-space: nowrap; box-shadow: none; cursor: pointer; transition: color 0.2s ease, background 0.2s ease; } .site-header .nav-link:hover, .site-header .nav-link:focus { color: var(--orange); background: var(--light-orange); box-shadow: none; } /* ===================================================== FIRST LEVEL DROPDOWN ===================================================== */ .site-header .dropdown-menu { position: absolute; top: calc(100% + 10px); left: 0; display: block; min-width: 245px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .site-header .dropdown-menu::before { content: ""; position: absolute; top: -12px; left: 0; width: 100%; height: 12px; } .site-header .dropdown-parent:hover > .dropdown-menu, .site-header .has-dropdown:hover > .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } /* ===================================================== DROPDOWN LINKS ===================================================== */ .site-header .dropdown-menu > a, .site-header .submenu-toggle { width: 100%; min-height: 42px; display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--text); font-family: inherit; font-size: 13.5px; line-height: 1.35; font-weight: 500; text-align: left; box-shadow: none; cursor: pointer; transition: background 0.18s ease, color 0.18s ease; } .site-header .dropdown-menu > a:hover, .site-header .submenu-toggle:hover, .site-header .submenu-parent:hover > .submenu-toggle, .site-header .has-submenu:hover > .submenu-toggle { color: var(--orange); background: var(--light-orange); } /* ===================================================== IMPORTANT REMOVE ONLY INNER SUBMENU ARROWS ===================================================== */ /* Custom chevron */ .site-header .submenu-toggle .chevron-icon { display: none !important; } /* If inner arrow is span with › */ .site-header .submenu-toggle > span:last-child:not(:first-child) { display: none !important; } /* Common nested arrow classes */ .site-header .submenu-toggle .arrow, .site-header .submenu-toggle .submenu-arrow, .site-header .submenu-toggle .dropdown-arrow { display: none !important; } /* Bootstrap may generate dropdown caret */ .site-header .submenu-toggle.dropdown-toggle::after { display: none !important; content: none !important; } /* Keep text aligned after arrow removal */ .site-header .submenu-toggle { justify-content: flex-start !important; gap: 0 !important; } /* ===================================================== NESTED SUBMENU ===================================================== */ .site-header .submenu-parent, .site-header .has-submenu { position: relative; } .site-header .submenu { position: absolute; top: -8px; left: calc(100% + 9px); display: block; min-width: 275px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 13px; background: #fff; box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateX(8px); transition: opacity 0.18s ease, visibility 0.18s ease, transform 0.18s ease; } .site-header .submenu::before { content: ""; position: absolute; top: 0; left: -10px; width: 10px; height: 100%; } .site-header .submenu-parent:hover > .submenu, .site-header .has-submenu:hover > .submenu { opacity: 1; visibility: visible; transform: translateX(0); } /* ===================================================== SUBMENU LINKS ===================================================== */ .site-header .submenu a { display: flex; align-items: center; min-height: 40px; padding: 9px 11px; border-radius: 8px; color: var(--text); font-size: 13px; line-height: 1.35; font-weight: 500; text-decoration: none; transition: color 0.18s ease, background 0.18s ease; } .site-header .submenu a:hover { color: var(--orange); background: var(--light-orange); } /* ===================================================== RIGHT SIDE MENU FIX ===================================================== */ .site-header .consultancy-menu, .site-header .consultancy-dropdown { left: auto; right: 0; } .site-header .consultancy-menu .submenu, .site-header .consultancy-dropdown .submenu, .site-header .submenu-left { left: auto; right: calc(100% + 9px); } /* ===================================================== BOOTSTRAP CARET FIX Keep main dropdown icons as your own design ===================================================== */ /* Bootstrap .dropdown-toggle::after may create an unwanted second arrow. Remove Bootstrap's generated caret only. */ .site-header .nav-link.dropdown-toggle::after { display: none !important; content: none !important; } /* ===================================================== MOBILE / TABLET ===================================================== */ @media (max-width: 1050px) { .site-header .navbar { width: 100%; margin: 0; display: none; border-top: 1px solid var(--border); } .site-header.menu-open .navbar, .site-header.mobile-open .navbar { display: block; } .site-header .nav-list { display: block; width: 100%; max-height: calc(100vh - 100px); overflow-y: auto; overflow-x: hidden; padding: 8px 0; } .site-header .nav-item { width: 100%; border-bottom: 1px solid var(--border); } .site-header .nav-link { width: 100%; min-height: 48px; padding: 13px 11px; justify-content: space-between; font-size: 14px; } /* MAIN DROPDOWN */ .site-header .dropdown-menu { position: static; display: none; width: 100%; min-width: 0; margin: 0; padding: 0 0 8px 12px; border: 0; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .site-header .dropdown-menu::before { display: none; } .site-header .dropdown-parent:hover > .dropdown-menu, .site-header .has-dropdown:hover > .dropdown-menu { display: none; } .site-header .dropdown-parent.open > .dropdown-menu, .site-header .has-dropdown.open > .dropdown-menu { display: block; } /* NESTED */ .site-header .submenu { position: static; display: none; width: 100%; min-width: 0; margin-left: 7px; padding: 2px 0 5px 12px; border: 0; border-left: 2px solid var(--light-orange); border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; transform: none; } .site-header .submenu::before { display: none; } .site-header .submenu-parent:hover > .submenu, .site-header .has-submenu:hover > .submenu { display: none; } .site-header .submenu-parent.open > .submenu, .site-header .has-submenu.open > .submenu { display: block; } /* INNER SUBMENU ARROWS REMAIN REMOVED */ .site-header .submenu-toggle { justify-content: flex-start !important; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 650px) { .site-header .top-header { display: none; } .site-header .support-button { display: none; } } /* ========================================= SHOW INNER SUBMENU ARROWS AGAIN ========================================= */ .site-header .submenu-toggle { justify-content: space-between !important; gap: 12px !important; } /* custom chevron */ .site-header .submenu-toggle .chevron-icon { display: inline-block !important; width: 7px; height: 7px; flex-shrink: 0; border-top: 1.6px solid currentColor; border-right: 1.6px solid currentColor; transform: rotate(45deg); margin-right: 4px; transition: transform 0.2s ease, color 0.2s ease; } /* agar arrow simple span me hai */ .site-header .submenu-toggle > span:last-child:not(:first-child) { display: inline-flex !important; align-items: center; margin-left: auto; } /* Bootstrap ka extra caret fir bhi hide rahe */ .site-header .submenu-toggle.dropdown-toggle::after { display: none !important; content: none !important; } /* hover */ .site-header .submenu-parent:hover > .submenu-toggle .chevron-icon, .site-header .has-submenu:hover > .submenu-toggle .chevron-icon { color: var(--orange); transform: translateX(2px) rotate(45deg); } /* ========================================= MOBILE ========================================= */ @media (max-width: 1050px) { .site-header .submenu-toggle { justify-content: space-between !important; } .site-header .submenu-toggle .chevron-icon { transform: rotate(45deg); } /* open submenu par arrow down */ .site-header .submenu-parent.open > .submenu-toggle .chevron-icon, .site-header .has-submenu.open > .submenu-toggle .chevron-icon { transform: rotate(135deg); } } @media (max-width: 1050px) { .site-header .header-container { display: flex; align-items: center; width: 100%; } .site-header .logo { margin-right: auto; } .site-header .menu-toggle, .site-header .mobile-toggle { margin-left: auto !important; margin-right: 0 !important; flex-shrink: 0; } } /* ========================================================= FINAL MOBILE HEADER / DROPDOWN FIX Added for current Bootstrap navbar markup. Keep this block at the VERY END of the stylesheet. ========================================================= */ /* Current header uses .custom-navbar + Bootstrap collapse/dropdown */ .site-header .custom-navbar { width: 100%; background: #fff; } .site-header .custom-navbar .navbar-collapse { overflow: visible; } /* Let Bootstrap control visibility with .show */ .site-header .custom-navbar .dropdown-menu { display: none; } .site-header .custom-navbar .dropdown-menu.show { display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* Bootstrap dropdown items in the current Laravel header */ .site-header .custom-navbar .dropdown-item { display: flex; align-items: center; gap: 9px; width: 100%; min-height: 42px; padding: 10px 12px; border-radius: 8px; color: var(--text) !important; font-size: 13.5px; font-weight: 500; white-space: normal; background: transparent; } .site-header .custom-navbar .dropdown-item:hover, .site-header .custom-navbar .dropdown-item:focus, .site-header .custom-navbar .dropdown-item.active { color: var(--orange) !important; background: var(--orange-light); } .site-header .custom-navbar .dropdown-item i { color: var(--orange); flex-shrink: 0; } /* Current Bootstrap main dropdown caret should remain visible */ .site-header .custom-navbar .nav-link.dropdown-toggle::after { display: inline-block !important; content: "" !important; margin-left: 7px; vertical-align: middle; border-top: 0.32em solid; border-right: 0.32em solid transparent; border-bottom: 0; border-left: 0.32em solid transparent; transition: transform 0.2s ease; } .site-header .custom-navbar .nav-link.dropdown-toggle.show::after { transform: rotate(180deg); } /* Bootstrap hamburger must stay usable */ .site-header .custom-navbar .navbar-toggler { position: relative; z-index: 10002; box-shadow: none !important; } @media (max-width: 991.98px) { /* IMPORTANT: old custom CSS hides .navbar itself at <=1050px. Current markup uses .navbar as the outer wrapper, so force it visible. */ .site-header .custom-navbar.navbar { display: flex !important; flex-wrap: wrap; width: 100%; margin: 0; border-top: 0; } .site-header .custom-navbar > .container { display: flex; flex-wrap: wrap; align-items: center; width: 100%; } .site-header .custom-navbar .brand-logo { margin-right: auto; } .site-header .custom-navbar .navbar-collapse { flex-basis: 100%; width: 100%; margin-top: 8px; padding: 8px 0; border-top: 1px solid var(--border); background: #fff; } /* Bootstrap collapse controls main mobile menu */ .site-header .custom-navbar .navbar-collapse:not(.show):not(.collapsing) { display: none !important; } .site-header .custom-navbar .navbar-collapse.show, .site-header .custom-navbar .navbar-collapse.collapsing { display: block !important; } .site-header .custom-navbar .navbar-nav { display: block !important; width: 100%; margin: 0 !important; padding: 0; max-height: calc(100vh - 150px); overflow-y: auto; overflow-x: hidden; } .site-header .custom-navbar .nav-item { width: 100%; border-bottom: 1px solid var(--border); } .site-header .custom-navbar .nav-link { width: 100% !important; min-height: 48px; padding: 13px 11px !important; display: flex !important; align-items: center; justify-content: space-between; font-size: 14px; white-space: normal; } /* Disable old custom hover logic on Bootstrap dropdowns */ .site-header .custom-navbar .nav-item.dropdown:hover > .dropdown-menu { display: none !important; opacity: 1 !important; visibility: visible !important; } .site-header .custom-navbar .nav-item.dropdown > .dropdown-menu.show { display: block !important; } .site-header .custom-navbar .dropdown-menu { position: static !important; inset: auto !important; float: none; width: 100%; min-width: 0; margin: 0 !important; padding: 3px 0 8px 12px; border: 0; border-radius: 0; box-shadow: none; opacity: 1 !important; visibility: visible !important; transform: none !important; background: transparent; } .site-header .custom-navbar .dropdown-menu::before, .site-header .custom-navbar .dropdown-menu::after { display: none !important; } .site-header .custom-navbar .dropdown-item { margin-bottom: 2px; background: #fff; } .site-header .custom-navbar .header-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; width: 100%; margin: 10px 0 0; padding-top: 10px; } } @media (max-width: 575.98px) { .site-header .custom-navbar .header-actions { flex-direction: column; align-items: stretch; } .site-header .custom-navbar .support-card, .site-header .custom-navbar .quote-btn { width: 100%; } } /* ========================================================= LEGACY CUSTOM HEADER MOBILE FIX Keeps uploaded .has-dropdown/.has-submenu header working too. ========================================================= */ @media (max-width: 1050px) { .site-header .has-dropdown.open > .dropdown-menu { display: block !important; opacity: 1 !important; visibility: visible !important; } .site-header .has-submenu.open > .submenu { display: block !important; opacity: 1 !important; visibility: visible !important; } .site-header .has-dropdown.open:hover > .dropdown-menu { display: block !important; } .site-header .has-submenu.open:hover > .submenu { display: block !important; } } /*------------------------------banner section-------------------------------------*/ /* ========================================================= COMPUTER SERVICES 360 FULL RESPONSIVE 3D HERO SECTION ========================================================= */ .cs360-hero{ --green:#77AF25; --green-light:#93C941; --dark:#181D22; --deep:#0B0F12; --panel:#20272C; --white:#FFFFFF; --muted:#A8B0B6; position:relative; width:100%; min-height:780px; overflow:hidden; isolation:isolate; display:flex; align-items:center; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 80% 42%, rgba(119,175,37,.18), transparent 29% ), radial-gradient( circle at 8% 80%, rgba(119,175,37,.07), transparent 27% ), linear-gradient( 115deg, #0B0F12 0%, #181D22 48%, #101519 100% ); } /* ========================================================= BACKGROUND EFFECTS ========================================================= */ .cs360-bg-grid{ position:absolute; inset:-30%; z-index:-5; background-image: linear-gradient( rgba(255,255,255,.026) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.026) 1px, transparent 1px ); background-size:60px 60px; transform: perspective(900px) rotateX(62deg) scale(1.25); transform-origin:center bottom; animation: cs360GridMove 15s linear infinite; } .cs360-glow-main{ position:absolute; width:min(720px,60vw); aspect-ratio:1; right:-12%; top:-10%; border-radius:50%; z-index:-4; background: radial-gradient( circle, rgba(119,175,37,.24) 0%, rgba(119,175,37,.08) 42%, transparent 72% ); filter:blur(10px); animation: cs360GlowMove 7s ease-in-out infinite alternate; } .cs360-glow-left{ position:absolute; width:450px; height:450px; left:-220px; bottom:-210px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.09), transparent 70% ); z-index:-4; } .cs360-beam{ position:absolute; width:230px; height:150%; top:-30%; right:33%; z-index:-3; background: linear-gradient( 90deg, transparent, rgba(119,175,37,.035), transparent ); transform:rotate(18deg); animation: cs360BeamMove 8s ease-in-out infinite alternate; } @keyframes cs360GridMove{ to{ background-position:0 60px; } } @keyframes cs360GlowMove{ to{ transform: translate(-60px,50px) scale(1.12); } } @keyframes cs360BeamMove{ to{ transform: translateX(100px) rotate(18deg); } } /* ========================================================= MAIN CONTAINER ========================================================= */ .cs360-container { position: relative; z-index: 5; width: min(1440px,92%); margin: auto; display: grid; grid-template-columns: minmax(0,1.04fr) minmax(0,.96fr); gap: clamp(45px,5vw,85px); align-items: center; padding: clamp(34px,7vw,50px) 0; perspective: 1800px; } /* ========================================================= LEFT CONTENT ========================================================= */ .cs360-content{ position:relative; z-index:10; min-width:0; } /* BADGE */ .cs360-badge{ display:inline-flex; align-items:center; gap:10px; padding:9px 15px; margin-bottom:24px; border-radius:50px; background: rgba(119,175,37,.08); border: 1px solid rgba(119,175,37,.30); color:#D5E6BD; font-size:11px; font-weight:700; letter-spacing:1.6px; text-transform:uppercase; backdrop-filter:blur(10px); opacity:0; animation: cs360BadgeIn .75s .15s cubic-bezier(.16,1,.3,1) forwards; } .cs360-badge-dot{ width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow: 0 0 0 5px rgba(119,175,37,.10), 0 0 18px var(--green); animation: cs360DotPulse 1.8s infinite; } /* HEADING */ .cs360-heading{ margin:0; max-width:780px; color:#fff; font-size: clamp(39px,6vw,45px); line-height:.96; font-weight:800; letter-spacing: clamp(-3px,-.25vw,-1px); } .cs360-heading-line{ display:block; overflow:hidden; padding-bottom:6px; } .cs360-heading-one{ display:block; opacity:0; transform: translateY(100%) rotateX(-35deg); animation: cs360HeadingOne .9s .5s cubic-bezier(.16,1,.3,1) forwards; } .cs360-heading-two{ display:block; color:var(--green); opacity:0; transform: translateX(-90px) rotateY(42deg); transform-origin:left center; animation: cs360HeadingTwo .95s .8s cubic-bezier(.16,1,.3,1) forwards; } /* DESCRIPTION */ .cs360-description{ max-width:650px; margin:27px 0 0; color:#AAB1B6; font-size: clamp(15px,1.1vw,17px); line-height:1.8; opacity:0; animation: cs360FadeUp .8s 1.08s ease forwards; } /* FEATURES */ .cs360-features{ display:grid; grid-template-columns: repeat(2,minmax(0,max-content)); gap:12px 22px; margin-top:28px; } .cs360-feature{ display:flex; align-items:center; gap:9px; color:#E3E7E9; font-size:13px; font-weight:600; white-space:nowrap; opacity:0; } .cs360-feature:nth-child(1){ animation: cs360FeatureIn .6s 1.3s ease forwards; } .cs360-feature:nth-child(2){ animation: cs360FeatureIn .6s 1.43s ease forwards; } .cs360-feature:nth-child(3){ animation: cs360FeatureIn .6s 1.56s ease forwards; } .cs360-feature:nth-child(4){ animation: cs360FeatureIn .6s 1.69s ease forwards; } .cs360-feature-icon{ width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:50%; background: rgba(119,175,37,.12); border: 1px solid rgba(119,175,37,.23); color:var(--green); font-size:11px; } /* BUTTONS */ .cs360-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:35px; opacity:0; animation: cs360FadeUp .8s 1.9s ease forwards; } .cs360-btn{ min-height:55px; padding:0 28px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:9px; text-decoration:none; font-size:14px; font-weight:700; position:relative; overflow:hidden; transition: .35s ease; } .cs360-btn-primary{ color:#fff; background: linear-gradient( 90deg, #6FA51F, #83BC30 ); box-shadow: 0 15px 40px rgba(119,175,37,.23); } .cs360-btn-primary::before{ content:""; position:absolute; width:45px; height:200px; top:-70px; left:-80px; background: rgba(255,255,255,.28); transform:rotate(27deg); transition:.7s; } .cs360-btn-primary:hover::before{ left:130%; } .cs360-btn-primary:hover{ transform:translateY(-4px); box-shadow: 0 20px 50px rgba(119,175,37,.35); } .cs360-btn-outline{ color:#fff; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); backdrop-filter:blur(10px); } .cs360-btn-outline:hover{ color:var(--green); border-color:var(--green); transform:translateY(-4px); } /* ========================================================= RIGHT VISUAL ========================================================= */ .cs360-right{ position:relative; width:100%; min-width:0; min-height:630px; display:flex; justify-content:center; align-items:center; perspective:1700px; transform-style:preserve-3d; transition: transform .18s ease-out; } /* ========================================================= RINGS ========================================================= */ .cs360-ring{ position:absolute; border-radius:50%; pointer-events:none; opacity:0; } .cs360-ring-1{ width:min(560px,90%); aspect-ratio:1; border: 1px dashed rgba(119,175,37,.20); animation: cs360RingShow .8s 1.05s ease forwards, cs360RingRotate 30s 2s linear infinite; } .cs360-ring-2{ width:min(460px,76%); aspect-ratio:1; border: 1px solid rgba(255,255,255,.07); animation: cs360RingShow .8s 1.22s ease forwards, cs360RingReverse 25s 2.1s linear infinite; } .cs360-ring-3{ width:min(350px,60%); aspect-ratio:1; border: 1px solid rgba(119,175,37,.11); animation: cs360RingShow .8s 1.38s ease forwards, cs360RingPulse 4s 2s ease-in-out infinite; } /* glow */ .cs360-right-glow{ position:absolute; width:min(390px,65%); aspect-ratio:1; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.22), rgba(119,175,37,.07) 42%, transparent 72% ); filter:blur(10px); animation: cs360RightGlow 4s ease-in-out infinite; } /* ========================================================= 360 BADGE ========================================================= */ .cs360-round-badge{ position:absolute; top:20px; right:6%; z-index:25; width:100px; height:100px; border-radius:50%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; background: linear-gradient( 145deg, rgba(34,42,48,.97), rgba(16,21,25,.96) ); border: 1px solid rgba(119,175,37,.28); box-shadow: 0 18px 45px rgba(0,0,0,.30), inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(14px); opacity:0; animation: cs360RoundIn .9s 2.05s cubic-bezier(.16,1,.3,1) forwards, cs360RoundFloat 4s 3s ease-in-out infinite; } .cs360-round-badge strong{ color:var(--green); font-size:24px; line-height:1; } .cs360-round-badge span{ margin-top:5px; color:#fff; font-size:9px; letter-spacing:.7px; text-transform:uppercase; } /* ========================================================= FLOATING CARDS ========================================================= */ .cs360-mini-card{ position:absolute; z-index:22; width:180px; padding:13px 14px; display:flex; align-items:center; gap:10px; border-radius:13px; background: rgba(20,26,31,.88); border: 1px solid rgba(255,255,255,.10); backdrop-filter:blur(15px); box-shadow: 0 18px 45px rgba(0,0,0,.27); opacity:0; } .cs360-mini-icon{ width:39px; height:39px; flex:0 0 39px; display:grid; place-items:center; border-radius:10px; background: rgba(119,175,37,.12); color:var(--green); font-size:15px; font-weight:700; } .cs360-mini-card strong{ display:block; margin-bottom:4px; color:#fff; font-size:12px; } .cs360-mini-card small{ color:#8D959A; font-size:10px; } .cs360-mini-left{ top:105px; left:0; animation: cs360MiniLeftIn .8s 2.2s cubic-bezier(.16,1,.3,1) forwards, cs360MiniFloat1 4.5s 3.1s ease-in-out infinite; } .cs360-mini-right{ top:230px; right:0; animation: cs360MiniRightIn .8s 2.4s cubic-bezier(.16,1,.3,1) forwards, cs360MiniFloat2 4.8s 3.2s ease-in-out infinite; } .cs360-mini-bottom{ left:4%; bottom:55px; animation: cs360MiniBottomIn .8s 2.6s cubic-bezier(.16,1,.3,1) forwards, cs360MiniFloat3 5s 3.4s ease-in-out infinite; } /* ========================================================= MAIN FORM ========================================================= */ .cs360-form{ position:relative; z-index:20; width:min(435px,76%); padding: clamp(28px,3vw,35px); box-sizing:border-box; border-radius:25px; background: linear-gradient( 145deg, rgba(37,45,51,.97), rgba(17,22,26,.98) ); border: 1px solid rgba(255,255,255,.13); backdrop-filter:blur(20px); box-shadow: 0 40px 100px rgba(0,0,0,.52), 0 15px 60px rgba(119,175,37,.05), inset 0 1px rgba(255,255,255,.08); opacity:0; transform: translateX(180px) translateZ(-120px) rotateY(90deg) rotateZ(10deg) scale(.7); transform-style:preserve-3d; animation: cs360FormEntrance 1.2s 1.3s cubic-bezier(.16,1,.3,1) forwards; transition: transform .18s ease-out, box-shadow .3s ease; } .cs360-form.cs360-form-ready{ opacity:1; } .cs360-form::before{ content:""; position:absolute; top:0; left:35px; width:112px; height:4px; border-radius: 0 0 10px 10px; background: linear-gradient( 90deg, var(--green), var(--green-light) ); box-shadow: 0 0 24px rgba(119,175,37,.7); } /* Form top */ .cs360-form-count{ position:absolute; right:25px; top:25px; color:#737B80; font-size:9px; letter-spacing:1.3px; } .cs360-form-label{ display:block; max-width:75%; margin-bottom:8px; color:var(--green); font-size:10px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:0; animation: cs360FieldIn .5s 2.35s ease forwards; } .cs360-form h3{ margin:0; color:#fff; font-size: clamp(23px,2vw,28px); line-height:1.2; opacity:0; animation: cs360FieldIn .5s 2.48s ease forwards; } .cs360-form-desc{ max-width:350px; margin:9px 0 22px; color:#91999F; font-size:13px; line-height:1.6; opacity:0; animation: cs360FieldIn .5s 2.61s ease forwards; } /* ========================================================= FORM FIELDS ========================================================= */ .cs360-form-row{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:10px; } .cs360-field{ margin-bottom:11px; opacity:0; } .cs360-f1{ animation: cs360FieldIn .5s 2.75s ease forwards; } .cs360-f2{ animation: cs360FieldIn .5s 2.88s ease forwards; } .cs360-f3{ animation: cs360FieldIn .5s 3.01s ease forwards; } .cs360-f4{ animation: cs360FieldIn .5s 3.14s ease forwards; } .cs360-f5{ animation: cs360FieldIn .5s 3.27s ease forwards; } .cs360-field input, .cs360-field select, .cs360-field textarea{ width:100%; box-sizing:border-box; outline:none; border: 1px solid rgba(255,255,255,.09); border-radius:9px; background: rgba(255,255,255,.045); color:#fff; font-family:inherit; font-size:13px; transition:.3s; } .cs360-field input, .cs360-field select{ height:50px; padding:0 14px; } .cs360-field textarea{ height:82px; padding:14px; resize:none; } .cs360-field input::placeholder, .cs360-field textarea::placeholder{ color:#788187; } .cs360-field select{ color:#899197; } .cs360-field select option{ color:#fff; background:#181D22; } .cs360-field input:focus, .cs360-field select:focus, .cs360-field textarea:focus{ border-color: rgba(119,175,37,.65); background: rgba(119,175,37,.055); box-shadow: 0 0 0 3px rgba(119,175,37,.07); } /* Submit */ .cs360-submit{ width:100%; min-height:54px; border:0; border-radius:9px; display:flex; align-items:center; justify-content:center; gap:9px; cursor:pointer; position:relative; overflow:hidden; color:#fff; background: linear-gradient( 90deg, #6FA51F, #84BD30 ); font-size:14px; font-weight:700; box-shadow: 0 14px 35px rgba(119,175,37,.22); opacity:0; animation: cs360FieldIn .5s 3.42s ease forwards; transition:.35s; } .cs360-submit::before{ content:""; position:absolute; width:65px; height:120px; top:-35px; left:-100px; background: rgba(255,255,255,.25); transform:rotate(27deg); transition:.7s; } .cs360-submit:hover::before{ left:120%; } .cs360-submit:hover{ transform:translateY(-3px); box-shadow: 0 20px 45px rgba(119,175,37,.35); } .cs360-trust{ margin-top:13px; display:flex; align-items:center; justify-content:center; gap:7px; color:#747D82; font-size:10px; text-align:center; opacity:0; animation: cs360FieldIn .5s 3.55s ease forwards; } .cs360-trust span{ color:var(--green); } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes cs360BadgeIn{ from{ opacity:0; transform: translateX(-50px) rotateZ(-12deg) scale(.8); } to{ opacity:1; transform:none; } } @keyframes cs360DotPulse{ 50%{ opacity:.5; transform:scale(.7); } } @keyframes cs360HeadingOne{ to{ opacity:1; transform:none; } } @keyframes cs360HeadingTwo{ to{ opacity:1; transform:none; } } @keyframes cs360FadeUp{ from{ opacity:0; transform:translateY(25px); } to{ opacity:1; transform:none; } } @keyframes cs360FeatureIn{ from{ opacity:0; transform: translateX(-25px) rotateY(-25deg); } to{ opacity:1; transform:none; } } @keyframes cs360RingShow{ from{ opacity:0; transform: scale(.4) rotate(-70deg); } to{ opacity:1; transform: scale(1) rotate(0); } } @keyframes cs360RingRotate{ to{ transform:rotate(360deg); } } @keyframes cs360RingReverse{ to{ transform:rotate(-360deg); } } @keyframes cs360RingPulse{ 50%{ transform:scale(1.06); border-color: rgba(119,175,37,.3); } } @keyframes cs360RightGlow{ 50%{ transform:scale(1.12); opacity:.65; } } @keyframes cs360FormEntrance{ 0%{ opacity:0; transform: translateX(180px) translateZ(-120px) rotateY(90deg) rotateZ(10deg) scale(.7); } 55%{ opacity:1; transform: translateX(-18px) translateZ(45px) rotateY(-10deg) rotateZ(-2deg) scale(1.03); } 78%{ opacity:1; transform: translateX(7px) translateZ(30px) rotateY(3deg) scale(.995); } 100%{ opacity:1; transform: translateX(0) translateZ(30px) rotateX(2deg) rotateY(-5deg) rotateZ(0) scale(1); } } @keyframes cs360FieldIn{ from{ opacity:0; transform: translateX(25px) rotateY(-12deg); } to{ opacity:1; transform:none; } } @keyframes cs360MiniLeftIn{ from{ opacity:0; transform: translateX(-100px) rotateY(-90deg) scale(.7); } to{ opacity:1; transform:none; } } @keyframes cs360MiniRightIn{ from{ opacity:0; transform: translateX(100px) rotateY(90deg) scale(.7); } to{ opacity:1; transform:none; } } @keyframes cs360MiniBottomIn{ from{ opacity:0; transform: translateY(90px) rotateX(80deg) scale(.7); } to{ opacity:1; transform:none; } } @keyframes cs360MiniFloat1{ 50%{ transform: translateY(-12px) rotateZ(1deg); } } @keyframes cs360MiniFloat2{ 50%{ transform: translateY(12px) rotateZ(-1deg); } } @keyframes cs360MiniFloat3{ 50%{ transform: translateX(10px) translateY(-5px); } } @keyframes cs360RoundIn{ from{ opacity:0; transform: translateY(-60px) rotateZ(90deg) scale(.5); } to{ opacity:1; transform:none; } } @keyframes cs360RoundFloat{ 50%{ transform: translateY(-10px) rotateZ(3deg); } } /* ========================================================= LARGE LAPTOP 1180PX AND BELOW ========================================================= */ @media(max-width:1180px){ .cs360-container{ width:94%; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap:35px; } .cs360-heading{ font-size: clamp(50px,5.6vw,70px); } .cs360-description{ font-size:15px; } .cs360-right{ min-height:600px; } .cs360-form{ width:min(410px,76%); } .cs360-mini-card{ width:165px; } .cs360-mini-left{ left:-5px; } .cs360-mini-right{ right:-5px; } } /* ========================================================= TABLET / SMALL LAPTOP 960PX ========================================================= */ @media(max-width:960px){ .cs360-hero{ min-height:auto; } .cs360-container{ width:min(760px,90%); grid-template-columns:1fr; gap:55px; padding: 75px 0 65px; } .cs360-content{ text-align:center; display:flex; flex-direction:column; align-items:center; } .cs360-heading{ max-width:700px; font-size: clamp(50px,9vw,72px); } .cs360-description{ max-width:650px; } .cs360-features{ justify-content:center; } .cs360-actions{ justify-content:center; } .cs360-right{ width:100%; max-width:680px; margin:auto; min-height:650px; } .cs360-form{ width:min(435px,70%); } .cs360-mini-left{ left:0; top:115px; } .cs360-mini-right{ right:0; top:240px; } .cs360-mini-bottom{ left:6%; bottom:65px; } .cs360-round-badge{ right:5%; } } /* ========================================================= TABLET PORTRAIT 760PX ========================================================= */ @media(max-width:760px){ .cs360-container{ width:90%; padding: 60px 0 55px; } .cs360-heading{ font-size: clamp(44px,10vw,60px); letter-spacing:-1.5px; } .cs360-description{ line-height:1.7; } .cs360-features{ width:100%; max-width:450px; grid-template-columns: repeat(2,minmax(0,1fr)); gap:11px; } .cs360-feature{ white-space:normal; text-align:left; } .cs360-right{ min-height:610px; } .cs360-form{ width:min(420px,78%); } .cs360-mini-card{ width:150px; padding:11px; } .cs360-mini-icon{ width:34px; height:34px; flex-basis:34px; } .cs360-mini-card strong{ font-size:10px; } .cs360-mini-card small{ font-size:8.5px; } .cs360-round-badge{ width:84px; height:84px; } .cs360-round-badge strong{ font-size:20px; } .cs360-round-badge span{ font-size:7px; } } /* ========================================================= MOBILE 600PX ========================================================= */ @media(max-width:600px){ .cs360-bg-grid{ opacity:.45; } .cs360-beam{ display:none; } .cs360-container{ width:90%; gap:40px; padding: 50px 0; } .cs360-badge{ font-size:9px; letter-spacing:1.2px; padding:8px 12px; margin-bottom:20px; } .cs360-heading{ font-size: clamp(40px,12vw,52px); line-height:1; letter-spacing:-1.3px; } .cs360-description{ margin-top:21px; font-size:14px; line-height:1.65; } .cs360-features{ grid-template-columns:1fr; max-width:300px; gap:10px; margin-top:22px; } .cs360-feature{ font-size:12px; } .cs360-actions{ width:100%; margin-top:28px; gap:10px; } .cs360-btn{ width:100%; box-sizing:border-box; } /* RIGHT */ .cs360-right{ min-height:auto; display:block; perspective:none; } .cs360-ring, .cs360-mini-card, .cs360-round-badge, .cs360-right-glow{ display:none; } /* MOBILE FORM */ .cs360-form{ width:100%; padding:26px 20px 22px; border-radius:20px; transform:none !important; animation: cs360MobileFormIn .9s 1.4s cubic-bezier(.16,1,.3,1) forwards; } .cs360-form::before{ width:85px; left:22px; } .cs360-form-count{ right:18px; top:20px; font-size:8px; } .cs360-form-label{ max-width:68%; font-size:8px; letter-spacing:1.2px; } .cs360-form h3{ font-size:24px; } .cs360-form-desc{ font-size:12px; margin-bottom:19px; } .cs360-form-row{ grid-template-columns:1fr; gap:0; } .cs360-field input, .cs360-field select{ height:49px; } .cs360-field textarea{ height:80px; } .cs360-submit{ min-height:52px; font-size:13px; } .cs360-trust{ font-size:9px; } } /* ========================================================= SMALL MOBILE 400PX ========================================================= */ @media(max-width:400px){ .cs360-container{ width:92%; padding: 42px 0; } .cs360-heading{ font-size:20px; } .cs360-description{ font-size:13px; } .cs360-form{ padding: 24px 17px 20px; } .cs360-form h3{ font-size:22px; } .cs360-form-count{ display:none; } .cs360-form-label{ max-width:100%; } } /* ========================================================= MOBILE ENTRY ========================================================= */ @keyframes cs360MobileFormIn{ from{ opacity:0; transform: translateY(70px) scale(.94); } to{ opacity:1; transform: translateY(0) scale(1); } } /* ========================================================= REDUCED MOTION ACCESSIBILITY ========================================================= */ @media(prefers-reduced-motion:reduce){ .cs360-hero *, .cs360-hero *::before, .cs360-hero *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /*-------------------end hero bannre----------------------------------*/ /* ===================================================== ABOUT SECTION Bootstrap .container used No extra section horizontal padding ===================================================== */ /* ========================================================= COMPUTER SERVICES 360 LIGHT PREMIUM 3D ABOUT SECTION ========================================================= */ .cs-abt{ --green:#77AF25; --green-dark:#608F18; --green-soft:#EDF5E2; --dark:#181D22; --text:#555E64; --border:#E4E9DE; --white:#FFFFFF; --cream:#F7F9F4; position:relative; width:100%; overflow:hidden; isolation:isolate; padding: clamp(85px,0vw,130px) 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 12% 35%, rgba(119,175,37,.14), transparent 24% ), radial-gradient( circle at 88% 72%, rgba(119,175,37,.08), transparent 24% ), linear-gradient( 135deg, #FFFFFF 0%, #F7F9F4 52%, #F1F6EB 100% ); } /* ========================================================= BACKGROUND DECORATION ========================================================= */ .cs-abt-shape{ position:absolute; width:580px; height:580px; left:-220px; top:-120px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.14), rgba(119,175,37,.04) 45%, transparent 72% ); z-index:-4; animation: csAbtGlow 7s ease-in-out infinite alternate; } @keyframes csAbtGlow{ to{ transform: translate(70px,50px) scale(1.12); } } /* perspective ground */ .cs-abt-perspective{ position:absolute; width:100%; height:540px; left:0; bottom:-330px; z-index:-3; perspective:700px; overflow:hidden; } .cs-abt-perspective::before{ content:""; position:absolute; width:140%; height:700px; left:-20%; top:-80px; background-image: linear-gradient( rgba(119,175,37,.09) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.09) 1px, transparent 1px ); background-size:65px 65px; transform: rotateX(67deg) scale(1.1); transform-origin:center top; mask-image: linear-gradient( to bottom, rgba(0,0,0,.7), transparent 72% ); animation: csAbtPerspectiveMove 12s linear infinite; } @keyframes csAbtPerspectiveMove{ to{ background-position: 0 65px; } } /* vertical decorative text */ .cs-abt-side-word{ position:absolute; right:-25px; top:50%; transform: translateY(-50%) rotate(90deg); font-size: clamp(60px,7vw,110px); font-weight:800; letter-spacing:7px; color: rgba(24,29,34,.025); text-transform:uppercase; pointer-events:none; z-index:-2; } /* ========================================================= CONTAINER ========================================================= */ .cs-abt-container{ width:min(1400px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.05fr); gap: clamp(60px,7vw,105px); align-items:center; position:relative; z-index:5; perspective:1800px; } /* ========================================================= LEFT VISUAL ========================================================= */ .cs-abt-visual{ position:relative; width:100%; min-height:590px; display:flex; align-items:center; justify-content:center; perspective:1600px; transform-style:preserve-3d; transition: transform .18s ease-out; } /* giant transparent circle */ .cs-abt-circle{ position:absolute; width:min(510px,90%); aspect-ratio:1; border-radius:50%; background: linear-gradient( 145deg, rgba(255,255,255,.68), rgba(119,175,37,.035) ); border: 1px solid rgba(119,175,37,.15); box-shadow: inset 0 0 70px rgba(119,175,37,.04); opacity:0; transform: scale(.45) rotate(-70deg); transition: opacity .9s ease, transform 1s cubic-bezier(.16,1,.3,1); } .cs-abt.active .cs-abt-circle{ opacity:1; transform: scale(1) rotate(0); } /* orbit line */ .cs-abt-orbit{ position:absolute; width:min(550px,96%); aspect-ratio:1; border-radius:50%; border: 1px dashed rgba(119,175,37,.28); opacity:0; transition: opacity .7s .3s ease; animation: csAbtRotate 30s linear infinite; } .cs-abt.active .cs-abt-orbit{ opacity:1; } .cs-abt-orbit::after{ content:""; position:absolute; width:11px; height:11px; border-radius:50%; top:63px; left:84px; background:var(--green); box-shadow: 0 0 0 6px rgba(119,175,37,.12), 0 0 22px rgba(119,175,37,.5); } @keyframes csAbtRotate{ to{ transform:rotate(360deg); } } /* ========================================================= MAIN IMAGE ========================================================= */ .cs-abt-main-image{ position:absolute; width:min(405px,72%); height:490px; z-index:5; border-radius:26px; overflow:hidden; background:#ddd; border: 7px solid #fff; box-shadow: 0 35px 80px rgba(30,45,18,.18); opacity:0; transform: translateX(-130px) translateZ(-180px) rotateY(-70deg) rotateZ(-7deg) scale(.75); transform-style:preserve-3d; transition: opacity .9s .15s ease, transform 1.2s .15s cubic-bezier(.16,1,.3,1); } .cs-abt.active .cs-abt-main-image{ opacity:1; transform: translateX(0) translateZ(20px) rotateX(3deg) rotateY(-8deg) rotateZ(-1deg) scale(1); } .cs-abt-main-image img{ width:100%; height:100%; display:block; object-fit:cover; transform:scale(1.03); transition: transform .8s ease; } .cs-abt-main-image:hover img{ transform:scale(1.09); } .cs-abt-main-image::after{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, transparent 52%, rgba(14,20,11,.08) 68%, rgba(14,20,11,.63) 100% ); } /* image bottom label */ .cs-abt-image-text{ position:absolute; z-index:3; left:24px; right:24px; bottom:24px; } .cs-abt-image-text small{ display:block; margin-bottom:7px; color:#B6E17B; font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; } .cs-abt-image-text strong{ color:#fff; font-size:18px; line-height:1.35; } /* ========================================================= SECOND 3D IMAGE ========================================================= */ .cs-abt-small-image{ position:absolute; width:205px; height:240px; right:0; bottom:10px; z-index:10; overflow:hidden; border-radius:20px; border: 7px solid #fff; box-shadow: 0 25px 55px rgba(35,48,25,.17); opacity:0; transform: translateX(110px) translateY(80px) translateZ(-100px) rotateY(75deg) rotateZ(15deg) scale(.55); transition: opacity .8s .75s ease, transform 1.1s .75s cubic-bezier(.16,1,.3,1); } .cs-abt.active .cs-abt-small-image{ opacity:1; transform: translateX(0) translateY(0) translateZ(70px) rotateY(7deg) rotateZ(3deg) scale(1); } .cs-abt-small-image img{ width:100%; height:100%; object-fit:cover; } /* ========================================================= ROUND BADGE ========================================================= */ .cs-abt-badge{ position:absolute; width:126px; height:126px; top:30px; right:20px; z-index:15; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; background: linear-gradient( 145deg, #7EB62B, #638E20 ); border: 7px solid rgba(255,255,255,.92); box-shadow: 0 20px 45px rgba(83,119,26,.24); opacity:0; transform: translateY(-80px) rotateZ(130deg) scale(.4); transition: opacity .7s .95s ease, transform 1s .95s cubic-bezier(.16,1,.3,1); } .cs-abt.active .cs-abt-badge{ opacity:1; transform: translateY(0) rotateZ(0) scale(1); animation: csAbtBadgeFloat 4s 2s ease-in-out infinite; } .cs-abt-badge strong{ color:#fff; font-size:30px; line-height:1; } .cs-abt-badge span{ color: rgba(255,255,255,.87); margin-top:6px; font-size:8px; line-height:1.4; letter-spacing:.7px; text-transform:uppercase; } @keyframes csAbtBadgeFloat{ 50%{ transform: translateY(-10px) rotateZ(3deg); } } /* ========================================================= FLOAT CARD ========================================================= */ .cs-abt-float{ position:absolute; z-index:14; left:0; bottom:70px; min-width:185px; display:flex; align-items:center; gap:12px; padding:15px 16px; border-radius:15px; background: rgba(255,255,255,.94); border: 1px solid rgba(119,175,37,.13); box-shadow: 0 20px 50px rgba(45,65,27,.14); backdrop-filter:blur(12px); opacity:0; transform: translateX(-110px) rotateY(-80deg); transition: opacity .75s .95s ease, transform 1s .95s cubic-bezier(.16,1,.3,1); } .cs-abt.active .cs-abt-float{ opacity:1; transform:none; animation: csAbtFloatCard 4.5s 2s ease-in-out infinite; } .cs-abt-float-icon{ width:43px; height:43px; flex:0 0 43px; border-radius:12px; display:grid; place-items:center; background: var(--green-soft); color:var(--green); font-size:17px; } .cs-abt-float strong{ display:block; color:var(--dark); font-size:13px; margin-bottom:4px; } .cs-abt-float small{ color:#8B9390; font-size:9px; } @keyframes csAbtFloatCard{ 50%{ transform: translateY(-12px) rotateZ(-1deg); } } /* ========================================================= RIGHT CONTENT ========================================================= */ .cs-abt-content{ min-width:0; position:relative; } /* top small label */ .cs-abt-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:19px; color:var(--green-dark); font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; opacity:0; transform: translateX(40px) rotateY(-20deg); transition: opacity .6s .2s ease, transform .7s .2s ease; } .cs-abt-label::before{ content:""; width:35px; height:2px; background:var(--green); } .cs-abt.active .cs-abt-label{ opacity:1; transform:none; } /* heading */ .cs-abt-title{ max-width:710px; margin:0; color:var(--dark); font-size: clamp(43px,4.5vw,46px); line-height:1.04; letter-spacing: clamp(-2.5px,-.18vw,-1px); font-weight:800; } .cs-abt-title-row{ display:block; overflow:hidden; } .cs-abt-title-row > span{ display:block; opacity:0; transform: translateY(110%) rotateX(-30deg); transition: opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1); } .cs-abt-title-row:nth-child(1) > span{ transition-delay:.38s; } .cs-abt-title-row:nth-child(2) > span{ transition-delay:.57s; } .cs-abt.active .cs-abt-title-row > span{ opacity:1; transform:none; } .cs-abt-green{ color:var(--green); } /* text */ .cs-abt-text{ max-width:650px; margin:24px 0 0; color:var(--text); font-size:16px; line-height:1.8; opacity:0; transform:translateY(25px); transition: opacity .7s .76s ease, transform .7s .76s ease; } .cs-abt.active .cs-abt-text{ opacity:1; transform:none; } /* ========================================================= FEATURE CARDS ========================================================= */ .cs-abt-points{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:13px; margin-top:30px; } .cs-abt-point{ position:relative; min-height:96px; display:flex; align-items:flex-start; gap:13px; padding:18px; border-radius:15px; background: rgba(255,255,255,.68); border: 1px solid rgba(57,74,47,.08); box-shadow: 0 10px 30px rgba(42,60,31,.04); opacity:0; transform: translateY(35px) rotateX(20deg); transform-origin:center bottom; transition: border-color .35s ease, background .35s ease, box-shadow .35s ease; } .cs-abt-point:nth-child(1){ transition: opacity .6s .95s ease, transform .7s .95s ease, border-color .35s, background .35s, box-shadow .35s; } .cs-abt-point:nth-child(2){ transition: opacity .6s 1.08s ease, transform .7s 1.08s ease, border-color .35s, background .35s, box-shadow .35s; } .cs-abt-point:nth-child(3){ transition: opacity .6s 1.21s ease, transform .7s 1.21s ease, border-color .35s, background .35s, box-shadow .35s; } .cs-abt-point:nth-child(4){ transition: opacity .6s 1.34s ease, transform .7s 1.34s ease, border-color .35s, background .35s, box-shadow .35s; } .cs-abt.active .cs-abt-point{ opacity:1; transform:none; } .cs-abt-point:hover{ transform: translateY(-6px) perspective(700px) rotateX(2deg); background:#fff; border-color: rgba(119,175,37,.28); box-shadow: 0 18px 40px rgba(70,96,49,.10); } .cs-abt-point-icon{ width:42px; height:42px; flex:0 0 42px; display:grid; place-items:center; border-radius:11px; background: linear-gradient( 145deg, #EDF5E2, #E5F0D7 ); color:var(--green-dark); font-size:13px; font-weight:800; } .cs-abt-point strong{ display:block; color:var(--dark); font-size:14px; margin-bottom:5px; } .cs-abt-point p{ color:#778077; font-size:11px; line-height:1.55; margin:0; } /* ========================================================= STATS ========================================================= */ .cs-abt-stats{ display:grid; grid-template-columns: repeat(3,1fr); gap:10px; margin-top:28px; opacity:0; transform:translateY(25px); transition: opacity .7s 1.5s ease, transform .7s 1.5s ease; } .cs-abt.active .cs-abt-stats{ opacity:1; transform:none; } .cs-abt-stat{ position:relative; overflow:hidden; padding:17px; border-radius:13px; background:#fff; border: 1px solid var(--border); box-shadow: 0 10px 25px rgba(31,50,20,.04); } .cs-abt-stat::before{ content:""; position:absolute; width:45px; height:45px; right:-18px; top:-18px; border-radius:50%; background: rgba(119,175,37,.10); } .cs-abt-stat strong{ display:block; color:var(--green); font-size:16px; margin-bottom:4px; } .cs-abt-stat span{ color:#7F8781; font-size:9px; letter-spacing:.6px; text-transform:uppercase; } /* ========================================================= BUTTON ========================================================= */ .cs-abt-action{ margin-top:29px; opacity:0; transform:translateY(25px); transition: opacity .7s 1.66s ease, transform .7s 1.66s ease; } .cs-abt.active .cs-abt-action{ opacity:1; transform:none; } .cs-abt-btn{ min-height:54px; padding:0 27px; display:inline-flex; align-items:center; justify-content:center; gap:10px; position:relative; overflow:hidden; border-radius:9px; background: linear-gradient( 90deg, #6FA51F, #85BD31 ); color:#fff; text-decoration:none; font-size:14px; font-weight:700; box-shadow: 0 15px 35px rgba(119,175,37,.20); transition: transform .35s ease, box-shadow .35s ease; } .cs-abt-btn::before{ content:""; position:absolute; width:45px; height:180px; top:-65px; left:-75px; background: rgba(255,255,255,.28); transform:rotate(27deg); transition:.7s; } .cs-abt-btn:hover::before{ left:125%; } .cs-abt-btn:hover{ transform:translateY(-4px); box-shadow: 0 20px 45px rgba(119,175,37,.32); } /* ========================================================= TABLET ========================================================= */ @media(max-width:1000px){ .cs-abt-container{ width:min(760px,90%); grid-template-columns:1fr; gap:65px; } .cs-abt-content{ text-align:center; } .cs-abt-label{ justify-content:center; } .cs-abt-title{ margin:auto; } .cs-abt-text{ margin: 24px auto 0; } .cs-abt-points{ text-align:left; } .cs-abt-visual{ width:min(650px,100%); margin:auto; min-height:600px; } .cs-abt-main-image{ width:min(400px,68%); } .cs-abt-small-image{ right:5%; } .cs-abt-badge{ right:7%; } .cs-abt-float{ left:5%; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .cs-abt{ padding: 65px 0; } .cs-abt-container{ width:90%; gap:45px; } .cs-abt-side-word{ display:none; } /* VISUAL */ .cs-abt-visual{ min-height:470px; perspective:none; } .cs-abt-circle{ width:390px; max-width:115%; } .cs-abt-orbit{ width:420px; max-width:122%; } .cs-abt-main-image{ width:82%; height:390px; border-width:5px; transform: translateY(60px) rotateX(20deg) scale(.88); } .cs-abt.active .cs-abt-main-image{ transform:none; } .cs-abt-small-image{ width:132px; height:165px; right:-1%; bottom:10px; border-width:4px; } .cs-abt-badge{ width:85px; height:85px; right:0; top:10px; border-width:4px; } .cs-abt-badge strong{ font-size:20px; } .cs-abt-badge span{ font-size:6px; } .cs-abt-float{ min-width:150px; left:0; bottom:23px; padding:11px; } .cs-abt-float-icon{ width:35px; height:35px; flex-basis:35px; } .cs-abt-float strong{ font-size:11px; } .cs-abt-float small{ font-size:8px; } /* CONTENT */ .cs-abt-label{ font-size:9px; letter-spacing:1.2px; margin-bottom:15px; } .cs-abt-title{ font-size: clamp(38px,11vw,48px); } .cs-abt-text{ font-size:14px; line-height:1.7; } .cs-abt-points{ grid-template-columns:1fr; gap:10px; margin-top:24px; } .cs-abt-point{ min-height:auto; } .cs-abt-stats{ grid-template-columns: 1fr 1fr; gap:9px; } .cs-abt-stat:last-child{ grid-column: 1 / -1; } .cs-abt-btn{ width:100%; box-sizing:border-box; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .cs-abt-container{ width:92%; } .cs-abt-visual{ min-height:420px; } .cs-abt-main-image{ height:350px; width:86%; } .cs-abt-small-image{ width:112px; height:140px; } .cs-abt-badge{ width:73px; height:73px; } .cs-abt-title{ font-size:23px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cs-abt *, .cs-abt *::before, .cs-abt *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /*----------our digital experience-------------------*/ .cs-srv{ --green:#77AF25; --green-dark:#5f8f19; --green-light:#9bd14c; --green-soft:#eef6e5; --dark:#181D22; --text:#687178; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:clamp(85px,8vw,25px) 0; font-family:Arial,Helvetica,sans-serif; background:#f7f9f4; } /* ========================================================= BACKGROUND IMAGE ========================================================= */ .cs-srv-bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-position:center; background-repeat:no-repeat; transform:scale(1.04); animation: srvBgMove 18s ease-in-out infinite alternate; } @keyframes srvBgMove{ to{ transform: scale(1.09) translateX(-12px); } } /* ========================================================= BACKGROUND OVERLAY ========================================================= */ .cs-srv-overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(247,249,244,.95) 0%, rgba(247,249,244,.87) 33%, rgba(247,249,244,.70) 60%, rgba(247,249,244,.48) 100% ); } .cs-srv-fade{ position:absolute; inset:0; z-index:-8; background: linear-gradient( 180deg, rgba(247,249,244,.96) 0%, rgba(247,249,244,.25) 15%, rgba(247,249,244,.10) 48%, rgba(247,249,244,.22) 76%, rgba(247,249,244,.95) 100% ); } /* ========================================================= GREEN AMBIENT LIGHT ========================================================= */ .cs-srv-glow{ position:absolute; width:650px; height:650px; right:-220px; top:80px; border-radius:50%; z-index:-7; background: radial-gradient( circle, rgba(119,175,37,.22), rgba(119,175,37,.08) 38%, transparent 70% ); filter:blur(12px); animation: srvGlow 7s ease-in-out infinite alternate; } @keyframes srvGlow{ to{ transform: translate(-70px,40px) scale(1.12); } } /* ========================================================= DECORATIVE CIRCLE ========================================================= */ .cs-srv-circle{ position:absolute; width:430px; height:430px; right:4%; top:17%; border-radius:50%; z-index:-6; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.035); backdrop-filter:blur(2px); animation: srvCircle 9s ease-in-out infinite alternate; } @keyframes srvCircle{ to{ transform: translate(-25px,25px) scale(1.05); } } /* ========================================================= PERSPECTIVE FLOOR ========================================================= */ .cs-srv-floor{ position:absolute; left:-15%; right:-15%; bottom:-370px; height:650px; z-index:-5; background-image: linear-gradient( rgba(119,175,37,.10) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.10) 1px, transparent 1px ); background-size:66px 66px; transform: perspective(700px) rotateX(67deg) scale(1.3); transform-origin:center top; mask-image: linear-gradient( to bottom, rgba(0,0,0,.6), transparent 75% ); animation: srvFloorMove 12s linear infinite; } @keyframes srvFloorMove{ to{ background-position:0 66px; } } /* ========================================================= CONTAINER ========================================================= */ .cs-srv-container{ position:relative; z-index:4; width:min(1420px,92%); margin:auto; } /* ========================================================= HEADER ========================================================= */ .cs-srv-header{ max-width:860px; margin: 0 auto clamp(45px,5vw,70px); text-align:center; perspective:1000px; } .cs-srv-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--green-dark); font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; opacity:0; transform: translateY(25px) rotateX(30deg); transition: opacity .65s ease, transform .8s cubic-bezier(.16,1,.3,1); } .cs-srv-label::before, .cs-srv-label::after{ content:""; width:30px; height:1px; background: rgba(119,175,37,.6); } .cs-srv.active .cs-srv-label{ opacity:1; transform:none; } /* TITLE */ .cs-srv-title{ margin:0; color:var(--dark); font-size: clamp(40px,4.6vw,42px); line-height:1.04; font-weight:800; letter-spacing: clamp(-2.5px,-.2vw,-1px); } .cs-srv-title-line{ display:block; overflow:hidden; } .cs-srv-title-line > span{ display:block; opacity:0; transform: translateY(105%) rotateX(-35deg); transform-origin:center bottom; transition: opacity .75s ease, transform .9s cubic-bezier(.16,1,.3,1); } .cs-srv-title-line:nth-child(1) > span{ transition-delay:.18s; } .cs-srv-title-line:nth-child(2) > span{ transition-delay:.38s; } .cs-srv.active .cs-srv-title-line > span{ opacity:1; transform:none; } .cs-srv-green{ color:var(--green); } .cs-srv-intro{ max-width:700px; margin:22px auto 0; color:#606a70; font-size:16px; line-height:1.75; opacity:0; transform:translateY(20px); transition: opacity .7s .55s ease, transform .7s .55s ease; } .cs-srv.active .cs-srv-intro{ opacity:1; transform:none; } /* ========================================================= SERVICES GRID ========================================================= */ .cs-srv-grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:clamp(18px,2vw,27px); perspective:1500px; } /* ========================================================= CARD ========================================================= */ .cs-srv-card{ position:relative; min-height:345px; padding:clamp(24px,2.2vw,32px); border-radius:22px; overflow:hidden; background: linear-gradient( 145deg, rgba(255,255,255,.91), rgba(249,251,247,.80) ); border: 1px solid rgba(54,70,44,.10); backdrop-filter:blur(16px); box-shadow: 0 18px 45px rgba(52,70,41,.08); opacity:0; transform-style:preserve-3d; will-change:transform; transition: opacity .75s ease, transform .9s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, border-color .35s ease, background .35s ease; } /* ========================================================= ENTRY ANIMATION ========================================================= */ .cs-srv-card:nth-child(1){ transform: translateX(-90px) translateY(60px) rotateY(-35deg) scale(.86); transition-delay:.68s; } .cs-srv-card:nth-child(2){ transform: translateY(100px) rotateX(35deg) scale(.84); transition-delay:.82s; } .cs-srv-card:nth-child(3){ transform: translateX(90px) translateY(60px) rotateY(35deg) scale(.86); transition-delay:.96s; } .cs-srv-card:nth-child(4){ transform: translateX(-90px) translateY(60px) rotateY(-30deg) scale(.86); transition-delay:1.10s; } .cs-srv-card:nth-child(5){ transform: translateY(100px) rotateX(-35deg) scale(.84); transition-delay:1.24s; } .cs-srv-card:nth-child(6){ transform: translateX(90px) translateY(60px) rotateY(30deg) scale(.86); transition-delay:1.38s; } .cs-srv.active .cs-srv-card{ opacity:1; transform: translate(0,0) rotateX(0) rotateY(0) scale(1); } /* ========================================================= NEW CLEAN HOVER ========================================================= */ .cs-srv-card:hover{ transform: translateY(-10px) scale(1.01); border-color: rgba(119,175,37,.30); background: linear-gradient( 145deg, rgba(255,255,255,.97), rgba(247,251,243,.90) ); box-shadow: 0 30px 70px rgba(52,75,38,.14); } /* glow appears */ .cs-srv-card::before{ content:""; position:absolute; width:210px; height:210px; top:-125px; right:-125px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.18), transparent 68% ); opacity:.55; transition: transform .5s ease, opacity .5s ease; } .cs-srv-card:hover::before{ transform: scale(1.7) translate(-15px,15px); opacity:1; } /* bottom green line */ .cs-srv-card::after{ content:""; position:absolute; left:30px; right:30px; bottom:0; height:3px; border-radius:10px 10px 0 0; background: linear-gradient( 90deg, transparent, var(--green), transparent ); transform:scaleX(0); transition: transform .45s ease; } .cs-srv-card:hover::after{ transform:scaleX(1); } /* ========================================================= FEATURED CARD ========================================================= */ .cs-srv-card.featured{ background: linear-gradient( 145deg, rgba(32,40,45,.98), rgba(18,23,27,.98) ); border-color: rgba(119,175,37,.22); box-shadow: 0 22px 55px rgba(25,32,23,.18); } .cs-srv-card.featured:hover{ background: linear-gradient( 145deg, #252e33, #151b1f ); border-color: rgba(119,175,37,.42); box-shadow: 0 30px 70px rgba(21,29,18,.28); } /* ========================================================= NUMBER ========================================================= */ .cs-srv-number{ position:absolute; right:25px; top:24px; color: rgba(24,29,34,.075); font-size:43px; font-weight:800; line-height:1; transition:.35s; } .cs-srv-card:hover .cs-srv-number{ color: rgba(119,175,37,.16); transform: translateY(-3px); } .cs-srv-card.featured .cs-srv-number{ color: rgba(255,255,255,.055); } /* ========================================================= ICON ========================================================= */ .cs-srv-icon-wrap{ position:relative; width:70px; height:70px; margin-bottom:24px; perspective:600px; } .cs-srv-icon-back{ position:absolute; inset:0; border-radius:19px; background: linear-gradient( 145deg, #eaf4df, #dceccb ); border: 1px solid rgba(119,175,37,.15); transform: rotate(-7deg); transition: transform .45s ease; } .cs-srv-icon{ position:absolute; inset:6px; display:grid; place-items:center; border-radius:15px; background:#fff; color:var(--green-dark); font-size:23px; font-weight:700; box-shadow: 0 10px 25px rgba(65,83,51,.10); transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease, box-shadow .35s ease; } .cs-srv-card:hover .cs-srv-icon-back{ transform: rotate(7deg) scale(1.05); } .cs-srv-card:hover .cs-srv-icon{ transform: translateY(-5px) scale(1.06); color:#fff; background:var(--green); box-shadow: 0 14px 30px rgba(119,175,37,.24); } .cs-srv-card.featured .cs-srv-icon-back{ background: rgba(119,175,37,.13); border-color: rgba(119,175,37,.24); } .cs-srv-card.featured .cs-srv-icon{ color:#fff; background:var(--green); } /* ========================================================= CONTENT ========================================================= */ .cs-srv-card h3{ position:relative; z-index:2; margin:0 0 10px; color:var(--dark); font-size:22px; line-height:1.25; transition: color .3s ease, transform .35s ease; } .cs-srv-card:hover h3{ color:var(--green-dark); transform: translateX(3px); } .cs-srv-card > p{ position:relative; z-index:2; margin:0; color:#6e787e; font-size:13px; line-height:1.7; } .cs-srv-card.featured h3{ color:#fff; } .cs-srv-card.featured:hover h3{ color:var(--green-light); } .cs-srv-card.featured > p{ color:#aab2b6; } /* ========================================================= TAGS ========================================================= */ .cs-srv-tags{ position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:7px; margin-top:18px; } .cs-srv-tags span{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:8px; color:#68716b; background: rgba(247,249,245,.94); border: 1px solid #e8ede4; font-size:9px; transition: background .3s ease, border-color .3s ease, transform .3s ease; } .cs-srv-tags span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--green); } .cs-srv-card:hover .cs-srv-tags span{ background: rgba(119,175,37,.07); border-color: rgba(119,175,37,.16); transform: translateY(-2px); } .cs-srv-card.featured .cs-srv-tags span{ color:#bdc5c8; background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.07); } /* ========================================================= LINK ========================================================= */ .cs-srv-link{ position:absolute; left:clamp(24px,2.2vw,32px); bottom:clamp(22px,2.2vw,29px); z-index:3; display:inline-flex; align-items:center; gap:9px; color:var(--dark); font-size:12px; font-weight:700; text-decoration:none; transition: color .3s ease, transform .3s ease; } .cs-srv-link-icon{ width:30px; height:30px; display:grid; place-items:center; border-radius:50%; color:var(--green-dark); background:var(--green-soft); transition: transform .35s ease, color .35s ease, background .35s ease; } .cs-srv-card:hover .cs-srv-link{ color:var(--green-dark); transform: translateX(3px); } .cs-srv-card:hover .cs-srv-link-icon{ transform: translateX(5px); color:#fff; background:var(--green); } .cs-srv-card.featured .cs-srv-link{ color:#fff; } /* ========================================================= LAPTOP ========================================================= */ @media(max-width:1100px){ .cs-srv-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); } .cs-srv-bg{ background-position:62% center; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:760px){ .cs-srv{ padding: 75px 0; } .cs-srv-container{ width:90%; } .cs-srv-grid{ grid-template-columns:1fr; max-width:620px; margin:auto; gap:16px; } .cs-srv-card{ min-height:330px; } .cs-srv-card:nth-child(n){ transform: translateY(65px) rotateX(15deg) scale(.94); } .cs-srv.active .cs-srv-card:nth-child(n){ transform:none; } .cs-srv-card:hover{ transform: translateY(-6px) scale(1.005); } .cs-srv-overlay{ background: rgba(247,249,244,.78); } .cs-srv-bg{ background-position:68% center; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:500px){ .cs-srv{ padding: 65px 0; } .cs-srv-container{ width:90%; } .cs-srv-header{ margin-bottom:40px; } .cs-srv-label{ font-size:9px; letter-spacing:1.2px; } .cs-srv-label::before, .cs-srv-label::after{ width:20px; } .cs-srv-title{ font-size:23px; } .cs-srv-intro{ font-size:14px; line-height:1.7; } .cs-srv-card{ min-height:320px; padding:22px 20px; border-radius:18px; } .cs-srv-number{ top:20px; right:18px; font-size:34px; } .cs-srv-icon-wrap{ width:62px; height:62px; margin-bottom:20px; } .cs-srv-card h3{ font-size:20px; } .cs-srv-card > p{ font-size:12px; } .cs-srv-link{ left:20px; bottom:20px; } .cs-srv-circle{ display:none; } .cs-srv-floor{ opacity:.45; } .cs-srv-bg{ background-position:70% center; filter: saturate(.9); } .cs-srv-overlay{ background: rgba(247,249,244,.76); } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cs-srv *, .cs-srv *::before, .cs-srv *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /*-------------------------------------------------------------*/ /* ========================================================= WHY CHOOSE US DARK PREMIUM 3D SECTION ========================================================= */ .cswhy-dark{ --green:#77AF25; --green-light:#98CF48; --dark:#181D22; --deep:#0B0F12; --panel:#171D21; --white:#FFFFFF; --muted:#9DA5AA; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:clamp(90px,8vw,130px) 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 80% 28%, rgba(119,175,37,.15), transparent 26% ), radial-gradient( circle at 10% 85%, rgba(119,175,37,.06), transparent 25% ), linear-gradient( 120deg, #0B0F12 0%, #161C20 48%, #101519 100% ); } /* ========================================================= BACKGROUND IMAGE ========================================================= */ .cswhy-dark-bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-repeat:no-repeat; background-position:center right; opacity:.18; transform:scale(1.05); animation: cswhyDarkBgMove 18s ease-in-out infinite alternate; } @keyframes cswhyDarkBgMove{ to{ transform: scale(1.10) translateX(-15px); } } /* ========================================================= IMAGE OVERLAY ========================================================= */ .cswhy-dark-overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(8,12,15,.98) 0%, rgba(14,19,23,.95) 38%, rgba(13,18,22,.82) 67%, rgba(8,12,15,.88) 100% ); } /* ========================================================= GREEN GLOW ========================================================= */ .cswhy-dark-glow{ position:absolute; width:620px; height:620px; right:-220px; top:40px; border-radius:50%; z-index:-8; background: radial-gradient( circle, rgba(119,175,37,.22), rgba(119,175,37,.08) 40%, transparent 72% ); filter:blur(10px); animation: cswhyDarkGlowMove 7s ease-in-out infinite alternate; } @keyframes cswhyDarkGlowMove{ to{ transform: translate(-70px,50px) scale(1.12); } } /* ========================================================= PERSPECTIVE LINES ========================================================= */ .cswhy-dark-lines{ position:absolute; left:-20%; right:-20%; bottom:-390px; height:720px; z-index:-7; background-image: linear-gradient( rgba(119,175,37,.07) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.07) 1px, transparent 1px ); background-size:70px 70px; transform: perspective(700px) rotateX(67deg) scale(1.35); transform-origin:center top; mask-image: linear-gradient( to bottom, rgba(0,0,0,.7), transparent 78% ); animation: cswhyDarkLinesMove 13s linear infinite; } @keyframes cswhyDarkLinesMove{ to{ background-position:0 70px; } } /* ========================================================= DECORATIVE SIDE LINE ========================================================= */ .cswhy-dark-side-line{ position:absolute; top:13%; right:7%; width:1px; height:74%; z-index:-6; background: linear-gradient( transparent, rgba(119,175,37,.30), transparent ); opacity:.45; } /* ========================================================= CONTAINER ========================================================= */ .cswhy-dark-container{ position:relative; z-index:4; width:min(1400px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(55px,7vw,110px); align-items:center; perspective:1800px; } /* ========================================================= LEFT CONTENT ========================================================= */ .cswhy-dark-content{ position:relative; z-index:5; } /* LABEL */ .cswhy-dark-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:20px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; opacity:0; transform: translateX(-45px) rotateY(-20deg); transition: opacity .65s ease, transform .8s cubic-bezier(.16,1,.3,1); } .cswhy-dark-label::before{ content:""; width:34px; height:2px; background:var(--green); } .cswhy-dark.active .cswhy-dark-label{ opacity:1; transform:none; } /* TITLE */ .cswhy-dark-title{ margin:0; max-width:680px; color:#fff; font-size:clamp(30px,5vw,33px); line-height:1.02; font-weight:800; letter-spacing: clamp(-2.8px,-.2vw,-1px); } .cswhy-dark-title-row{ display:block; overflow:hidden; } .cswhy-dark-title-row > span{ display:block; opacity:0; transform: translateY(110%) rotateX(-35deg); transform-origin:left bottom; transition: opacity .8s ease, transform .95s cubic-bezier(.16,1,.3,1); } .cswhy-dark-title-row:nth-child(1) > span{ transition-delay:.2s; } .cswhy-dark-title-row:nth-child(2) > span{ transition-delay:.42s; } .cswhy-dark.active .cswhy-dark-title-row > span{ opacity:1; transform:none; } .cswhy-dark-green{ color:var(--green); } /* DESCRIPTION */ .cswhy-dark-text{ max-width:590px; margin:25px 0 0; color:#A8B0B5; font-size:16px; line-height:1.8; opacity:0; transform:translateY(24px); transition: opacity .7s .62s ease, transform .7s .62s ease; } .cswhy-dark.active .cswhy-dark-text{ opacity:1; transform:none; } /* SMALL TRUST LIST */ .cswhy-dark-list{ display:grid; grid-template-columns: repeat(2,minmax(0,max-content)); gap:12px 20px; margin-top:30px; } .cswhy-dark-list-item{ display:flex; align-items:center; gap:9px; color:#DCE1E4; font-size:13px; font-weight:600; opacity:0; transform:translateX(-25px); transition: opacity .6s ease, transform .6s ease; } .cswhy-dark-list-item:nth-child(1){ transition-delay:.82s; } .cswhy-dark-list-item:nth-child(2){ transition-delay:.95s; } .cswhy-dark-list-item:nth-child(3){ transition-delay:1.08s; } .cswhy-dark-list-item:nth-child(4){ transition-delay:1.21s; } .cswhy-dark.active .cswhy-dark-list-item{ opacity:1; transform:none; } .cswhy-dark-check{ width:27px; height:27px; flex:0 0 27px; display:grid; place-items:center; border-radius:50%; color:var(--green); background: rgba(119,175,37,.11); border: 1px solid rgba(119,175,37,.23); font-size:11px; } /* ========================================================= RIGHT GRID ========================================================= */ .cswhy-dark-cards{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:18px; perspective:1600px; } /* ========================================================= CARD ========================================================= */ .cswhy-dark-card{ position:relative; min-height:245px; padding:27px; overflow:hidden; border-radius:22px; background: linear-gradient( 145deg, rgba(31,38,43,.92), rgba(16,21,25,.94) ); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 22px 55px rgba(0,0,0,.25); backdrop-filter:blur(18px); opacity:0; transform-style:preserve-3d; transition: opacity .75s ease, transform .95s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* DIFFERENT ENTRY */ .cswhy-dark-card:nth-child(1){ transform: translateX(-80px) translateY(70px) rotateY(-42deg) scale(.84); transition-delay:.72s; } .cswhy-dark-card:nth-child(2){ transform: translateX(80px) translateY(70px) rotateY(42deg) scale(.84); transition-delay:.88s; } .cswhy-dark-card:nth-child(3){ transform: translateX(-80px) translateY(80px) rotateY(-35deg) scale(.86); transition-delay:1.04s; } .cswhy-dark-card:nth-child(4){ transform: translateX(80px) translateY(80px) rotateY(35deg) scale(.86); transition-delay:1.20s; } .cswhy-dark.active .cswhy-dark-card{ opacity:1; transform: translateX(0) translateY(0) rotateY(0) scale(1); } /* ========================================================= CARD HOVER ========================================================= */ .cswhy-dark-card:hover{ transform: translateY(-9px) scale(1.01); border-color: rgba(119,175,37,.32); background: linear-gradient( 145deg, rgba(36,44,49,.98), rgba(18,24,28,.98) ); box-shadow: 0 30px 70px rgba(0,0,0,.35); } /* green light */ .cswhy-dark-card::before{ content:""; position:absolute; width:200px; height:200px; top:-120px; right:-120px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.22), transparent 70% ); transition: transform .5s ease, opacity .5s ease; } .cswhy-dark-card:hover::before{ transform:scale(1.7); } /* bottom accent */ .cswhy-dark-card::after{ content:""; position:absolute; left:28px; right:28px; bottom:0; height:3px; background: linear-gradient( 90deg, transparent, var(--green), transparent ); transform:scaleX(0); transition:transform .45s ease; } .cswhy-dark-card:hover::after{ transform:scaleX(1); } /* ========================================================= CARD ICON ========================================================= */ .cswhy-dark-icon-wrap{ position:relative; width:62px; height:62px; margin-bottom:22px; } .cswhy-dark-icon-bg{ position:absolute; inset:0; border-radius:17px; background: rgba(119,175,37,.11); border: 1px solid rgba(119,175,37,.18); transform:rotate(-7deg); transition: transform .4s ease; } .cswhy-dark-icon{ position:absolute; inset:6px; display:grid; place-items:center; border-radius:14px; color:var(--green); background: rgba(255,255,255,.04); font-size:18px; font-weight:800; transition: transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease; } .cswhy-dark-card:hover .cswhy-dark-icon-bg{ transform: rotate(7deg) scale(1.05); } .cswhy-dark-card:hover .cswhy-dark-icon{ transform: translateY(-4px) scale(1.05); color:#fff; background:var(--green); } /* ========================================================= CARD TEXT ========================================================= */ .cswhy-dark-card h3{ margin:0 0 10px; color:#fff; font-size:20px; line-height:1.25; transition: color .3s ease, transform .3s ease; } .cswhy-dark-card:hover h3{ color:var(--green-light); transform:translateX(3px); } .cswhy-dark-card p{ margin:0; color:#9FA8AD; font-size:12px; line-height:1.7; } /* ========================================================= CARD NUMBER ========================================================= */ .cswhy-dark-number{ position:absolute; top:23px; right:24px; color: rgba(255,255,255,.055); font-size:38px; font-weight:800; line-height:1; transition: color .3s ease, transform .3s ease; } .cswhy-dark-card:hover .cswhy-dark-number{ color: rgba(119,175,37,.16); transform: translateY(-3px); } /* ========================================================= RESPONSIVE - LAPTOP ========================================================= */ @media(max-width:1050px){ .cswhy-dark-container{ gap:45px; } .cswhy-dark-title{ font-size: clamp(44px,5.8vw,62px); } .cswhy-dark-card{ min-height:225px; padding:23px; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:850px){ .cswhy-dark{ padding: 80px 0; } .cswhy-dark-container{ width:min(760px,90%); grid-template-columns:1fr; gap:55px; } .cswhy-dark-content{ text-align:center; display:flex; flex-direction:column; align-items:center; } .cswhy-dark-text{ margin-left:auto; margin-right:auto; } .cswhy-dark-list{ justify-content:center; } .cswhy-dark-cards{ max-width:700px; width:100%; margin:auto; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .cswhy-dark{ padding: 65px 0; } .cswhy-dark-container{ width:90%; gap:40px; } .cswhy-dark-label{ font-size:9px; letter-spacing:1.2px; } .cswhy-dark-label::before{ width:22px; } .cswhy-dark-title{ font-size: clamp(38px,11vw,48px); line-height:1.05; } .cswhy-dark-text{ font-size:14px; line-height:1.7; } .cswhy-dark-list{ grid-template-columns:1fr; width:100%; max-width:300px; gap:10px; text-align:left; } .cswhy-dark-cards{ grid-template-columns:1fr; gap:14px; } .cswhy-dark-card{ min-height:auto; padding:22px 20px; transform: translateY(55px) rotateX(16deg) scale(.94) !important; } .cswhy-dark.active .cswhy-dark-card{ transform:none !important; } .cswhy-dark-card:hover{ transform: translateY(-6px) scale(1.005) !important; } .cswhy-dark-icon-wrap{ width:57px; height:57px; margin-bottom:18px; } .cswhy-dark-card h3{ font-size:18px; } .cswhy-dark-card p{ font-size:11px; } .cswhy-dark-number{ font-size:32px; top:20px; right:20px; } .cswhy-dark-bg{ background-position:65% center; opacity:.14; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .cswhy-dark-container{ width:92%; } .cswhy-dark-title{ font-size:24px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cswhy-dark *, .cswhy-dark *::before, .cswhy-dark *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ===================================================== TRUST / TESTIMONIAL SECTION ===================================================== */ /* ========================================================= FAQ SECTION ========================================================= */ .cs-faq{ --green:#77AF25; --green-dark:#5f8f19; --green-light:#98cf48; --green-soft:#eef6e5; --dark:#181D22; --text:#697278; --white:#ffffff; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:clamp(90px,8vw,130px) 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 12% 28%, rgba(119,175,37,.11), transparent 24% ), radial-gradient( circle at 92% 78%, rgba(119,175,37,.07), transparent 23% ), linear-gradient( 135deg, #ffffff 0%, #f8faf6 52%, #f1f6eb 100% ); } /* ========================================================= BACKGROUND IMAGE ========================================================= */ .cs-faq-bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-repeat:no-repeat; background-position:center right; opacity:.12; transform:scale(1.05); animation: csFaqBgMove 18s ease-in-out infinite alternate; } @keyframes csFaqBgMove{ to{ transform: scale(1.10) translateX(-15px); } } /* ========================================================= OVERLAY ========================================================= */ .cs-faq-overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(248,250,246,.98) 0%, rgba(248,250,246,.94) 36%, rgba(248,250,246,.86) 65%, rgba(248,250,246,.77) 100% ); } /* ========================================================= GRID ========================================================= */ .cs-faq-grid-bg{ position:absolute; inset:0; z-index:-8; background-image: linear-gradient( rgba(119,175,37,.045) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.045) 1px, transparent 1px ); background-size:70px 70px; mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent ); opacity:.55; } /* ========================================================= GLOW ========================================================= */ .cs-faq-glow{ position:absolute; width:560px; height:560px; right:-190px; top:70px; border-radius:50%; z-index:-7; background: radial-gradient( circle, rgba(119,175,37,.18), rgba(119,175,37,.05) 45%, transparent 72% ); animation: csFaqGlowMove 7s ease-in-out infinite alternate; } @keyframes csFaqGlowMove{ to{ transform: translate(-60px,40px) scale(1.1); } } /* ========================================================= CONTAINER ========================================================= */ .cs-faq-container{ position:relative; z-index:4; width:min(1400px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,.78fr) minmax(0,1.22fr); gap:clamp(55px,7vw,110px); align-items:start; perspective:1800px; } /* ========================================================= LEFT ========================================================= */ .cs-faq-left{ position:sticky; top:90px; } /* LABEL */ .cs-faq-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--green-dark); font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; opacity:0; transform: translateX(-40px) rotateY(-18deg); transition: opacity .65s ease, transform .8s cubic-bezier(.16,1,.3,1); } .cs-faq-label::before{ content:""; width:34px; height:2px; background:var(--green); } .cs-faq.active .cs-faq-label{ opacity:1; transform:none; } /* TITLE */ .cs-faq-title{ margin:0; max-width:600px; color:var(--dark); font-size: clamp(44px,4.7vw,48px); line-height:1.04; font-weight:800; letter-spacing: clamp(-2.5px,-.2vw,-1px); } .cs-faq-title-row{ display:block; overflow:hidden; } .cs-faq-title-row > span{ display:block; opacity:0; transform: translateY(108%) rotateX(-35deg); transform-origin:left bottom; transition: opacity .8s ease, transform .95s cubic-bezier(.16,1,.3,1); } .cs-faq-title-row:nth-child(1) > span{ transition-delay:.18s; } .cs-faq-title-row:nth-child(2) > span{ transition-delay:.38s; } .cs-faq.active .cs-faq-title-row > span{ opacity:1; transform:none; } .cs-faq-green{ color:var(--green); } /* DESCRIPTION */ .cs-faq-text{ max-width:560px; margin:24px 0 0; color:#657078; font-size:16px; line-height:1.8; opacity:0; transform:translateY(22px); transition: opacity .7s .58s ease, transform .7s .58s ease; } .cs-faq.active .cs-faq-text{ opacity:1; transform:none; } /* SMALL INFO */ .cs-faq-note{ margin-top:28px; display:flex; align-items:center; gap:11px; color:#657078; font-size:12px; opacity:0; transform:translateY(20px); transition: opacity .65s .78s ease, transform .65s .78s ease; } .cs-faq.active .cs-faq-note{ opacity:1; transform:none; } .cs-faq-note-icon{ width:37px; height:37px; flex:0 0 37px; display:grid; place-items:center; border-radius:10px; background:var(--green-soft); color:var(--green-dark); font-weight:800; } /* ========================================================= RIGHT FAQ LIST ========================================================= */ .cs-faq-list{ display:flex; flex-direction:column; gap:14px; perspective:1400px; } /* ========================================================= FAQ ITEM ========================================================= */ .cs-faq-item{ position:relative; overflow:hidden; border-radius:18px; background: linear-gradient( 145deg, rgba(255,255,255,.92), rgba(248,250,246,.84) ); border: 1px solid rgba(57,72,47,.09); box-shadow: 0 16px 40px rgba(55,72,44,.06); backdrop-filter:blur(15px); opacity:0; transform-style:preserve-3d; transition: opacity .7s ease, transform .9s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* STAGGERED ENTRY */ .cs-faq-item:nth-child(1){ transform: translateX(90px) rotateY(28deg) scale(.92); transition-delay:.68s; } .cs-faq-item:nth-child(2){ transform: translateX(90px) rotateY(24deg) scale(.92); transition-delay:.82s; } .cs-faq-item:nth-child(3){ transform: translateX(90px) rotateY(20deg) scale(.92); transition-delay:.96s; } .cs-faq-item:nth-child(4){ transform: translateX(90px) rotateY(16deg) scale(.92); transition-delay:1.10s; } .cs-faq-item:nth-child(5){ transform: translateX(90px) rotateY(12deg) scale(.92); transition-delay:1.24s; } .cs-faq-item:nth-child(6){ transform: translateX(90px) rotateY(8deg) scale(.92); transition-delay:1.38s; } .cs-faq.active .cs-faq-item{ opacity:1; transform: translateX(0) rotateY(0) scale(1); } /* ACTIVE ITEM */ .cs-faq-item.active{ border-color: rgba(119,175,37,.30); background: linear-gradient( 145deg, #ffffff, #f4f9ef ); box-shadow: 0 22px 50px rgba(58,80,41,.10); } /* GREEN SIDE ACCENT */ .cs-faq-item::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background: linear-gradient( 180deg, var(--green), var(--green-light) ); transform:scaleY(0); transform-origin:center; transition: transform .35s ease; } .cs-faq-item.active::before{ transform:scaleY(1); } /* ========================================================= QUESTION BUTTON ========================================================= */ .cs-faq-question{ width:100%; border:0; outline:0; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 24px; background:transparent; text-align:left; font-family:inherit; } /* NUMBER */ .cs-faq-q-wrap{ display:flex; align-items:center; gap:15px; min-width:0; } .cs-faq-number{ flex:0 0 auto; color: rgba(24,29,34,.15); font-size:12px; font-weight:800; letter-spacing:.6px; transition: color .3s ease; } .cs-faq-item.active .cs-faq-number{ color:var(--green); } /* QUESTION */ .cs-faq-question-text{ color:var(--dark); font-size:16px; font-weight:700; line-height:1.45; transition: color .3s ease; } .cs-faq-item.active .cs-faq-question-text{ color:var(--green-dark); } /* ========================================================= PLUS ICON ========================================================= */ .cs-faq-toggle{ width:38px; height:38px; flex:0 0 38px; position:relative; border-radius:50%; background:var(--green-soft); border: 1px solid rgba(119,175,37,.15); transition: transform .4s cubic-bezier(.16,1,.3,1), background .35s ease; } .cs-faq-toggle::before, .cs-faq-toggle::after{ content:""; position:absolute; left:50%; top:50%; width:13px; height:2px; border-radius:10px; background:var(--green-dark); transform: translate(-50%,-50%); transition: transform .35s ease, background .35s ease; } .cs-faq-toggle::after{ transform: translate(-50%,-50%) rotate(90deg); } .cs-faq-item.active .cs-faq-toggle{ transform:rotate(180deg); background:var(--green); } .cs-faq-item.active .cs-faq-toggle::before{ background:#fff; } .cs-faq-item.active .cs-faq-toggle::after{ background:#fff; transform: translate(-50%,-50%) rotate(0deg); } /* ========================================================= ANSWER ========================================================= */ .cs-faq-answer{ max-height:0; overflow:hidden; opacity:0; transition: max-height .5s cubic-bezier(.16,1,.3,1), opacity .35s ease; } .cs-faq-answer-inner{ padding: 0 24px 22px 54px; color:#707980; font-size:13px; line-height:1.75; } .cs-faq-item.active .cs-faq-answer{ opacity:1; } /* ========================================================= HOVER ========================================================= */ .cs-faq-item:not(.active):hover{ transform:translateY(-4px); border-color: rgba(119,175,37,.20); box-shadow: 0 20px 45px rgba(58,80,41,.08); } .cs-faq-item:not(.active):hover .cs-faq-toggle{ transform:scale(1.05); } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ .cs-faq{ padding:80px 0; } .cs-faq-container{ width:min(760px,90%); grid-template-columns:1fr; gap:50px; } .cs-faq-left{ position:relative; top:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .cs-faq-text{ margin-left:auto; margin-right:auto; } .cs-faq-note{ justify-content:center; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .cs-faq{ padding:65px 0; } .cs-faq-container{ width:90%; gap:38px; } .cs-faq-label{ font-size:9px; letter-spacing:1.2px; } .cs-faq-label::before{ width:22px; } .cs-faq-title{ font-size: clamp(37px,11vw,47px); } .cs-faq-text{ font-size:14px; line-height:1.7; } .cs-faq-note{ font-size:11px; text-align:left; } .cs-faq-item:nth-child(n){ transform: translateY(45px) rotateX(12deg) scale(.95); } .cs-faq.active .cs-faq-item:nth-child(n){ transform:none; } .cs-faq-question{ padding:19px 17px; gap:12px; } .cs-faq-q-wrap{ gap:10px; } .cs-faq-question-text{ font-size:14px; } .cs-faq-number{ font-size:10px; } .cs-faq-toggle{ width:34px; height:34px; flex-basis:34px; } .cs-faq-answer-inner{ padding: 0 17px 19px 17px; font-size:12px; line-height:1.7; } .cs-faq-bg{ background-position:65% center; } .cs-faq-overlay{ background: rgba(248,250,246,.82); } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .cs-faq-container{ width:92%; } .cs-faq-title{ font-size: 24px; } .cs-faq-question{ padding: 17px 15px; } .cs-faq-answer-inner{ padding: 0 15px 17px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cs-faq *, .cs-faq *::before, .cs-faq *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ===================================================== TRUST SECTION ROOT ===================================================== */ .trustSection { position: relative; overflow: hidden; padding: 78px 0; background: linear-gradient( 135deg, #f7f9fd 0%, #ffffff 48%, #fff8f1 100% ); } /* ===================================================== BACKGROUND SHAPES ===================================================== */ .trustSection__shape { position: absolute; border-radius: 50%; pointer-events: none; } .trustSection__shape--one { width: 420px; height: 420px; top: -250px; right: -210px; background: radial-gradient( circle, rgba(255,121,0,.13), transparent 70% ); animation: trustShapeOne 12s ease-in-out infinite; } .trustSection__shape--two { width: 360px; height: 360px; bottom: -230px; left: -210px; background: radial-gradient( circle, rgba(16,43,87,.07), transparent 70% ); animation: trustShapeTwo 14s ease-in-out infinite; } @keyframes trustShapeOne { 50% { transform: translateY(-15px) scale(1.05); } } @keyframes trustShapeTwo { 50% { transform: translateY(15px) scale(1.04); } } /* ===================================================== LEFT ===================================================== */ .trustSection__left { position: relative; z-index: 3; } /* ===================================================== TAG ===================================================== */ .trustSection__tag { width: fit-content; display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 8px 12px; border: 1px solid rgba(255,121,0,.17); border-radius: 100px; background: rgba(255,121,0,.06); color: #7CB12D; font-size: 16px; font-weight: 700; } .trustSection__tag span { width: 8px; height: 8px; flex: 0 0 8px; border-radius: 50%; background: #7CB12D; box-shadow: 0 0 0 5px rgba(255,121,0,.10); animation: trustTagPulse 2.6s infinite; } @keyframes trustTagPulse { 50% { box-shadow: 0 0 0 10px rgba(255,121,0,0); } } /* ===================================================== HEADING ===================================================== */ .trustSection__left h2 { margin: 0 0 18px; color: #102b57; font-size: clamp( 35px, 3.2vw, 48px ); line-height: 1.08; letter-spacing: -1.25px; } .trustSection__left h2 em { display: block; margin-top: 5px; color: #7CB12D; font-style: normal; } /* ===================================================== INTRO ===================================================== */ .trustSection__left > p { margin: 0 0 28px; max-width: 520px; color: #68778a; font-size: 16px; line-height: 1.72; } /* ===================================================== STATS ===================================================== */ .trustStats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin-bottom: 18px; } /* ===================================================== STAT CARD ===================================================== */ .trustStat { position: relative; min-height: 108px; overflow: hidden; padding: 15px; border: 1px solid #e7ecf3; border-radius: 13px; background: #ffffff; box-shadow: 0 10px 25px rgba(16,43,87,.05); transition: transform .4s ease, border-color .4s ease, box-shadow .4s ease; } .trustStat::after { content: ""; position: absolute; width: 80px; height: 80px; right: -52px; top: -52px; border-radius: 50%; background: #7CB12D; opacity: .055; transition: transform .5s ease, opacity .5s ease; } .trustStat:hover { transform: translateY(-5px); border-color: rgba(255,121,0,.22); box-shadow: 0 17px 35px rgba(16,43,87,.09); } .trustStat:hover::after { opacity: .10; transform: scale(1.7); } /* NUMBER */ .trustStat__top { display: flex; align-items: flex-end; margin-bottom: 10px; } .trustStat strong, .trustStat b { display: inline; color: #102b57; font-size: 28px; line-height: 1; font-weight: 700; } .trustStat b { margin-left: 2px; color: #7CB12D; font-size: 17px; } .trustStat span { display: block; color: #7b8797; font-size: 10px; line-height: 1.45; } /* ===================================================== MINI TRUST BOX ===================================================== */ .trustSection__mini { display: flex; align-items: center; gap: 12px; padding: 13px; border: 1px solid #e6ebf2; border-radius: 13px; background: rgba(255,255,255,.86); box-shadow: 0 10px 26px rgba(16,43,87,.045); } .trustSection__miniIcon { width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient( 145deg, #102b57, #194982 ); box-shadow: 0 8px 18px rgba(16,43,87,.17); } .trustSection__miniIcon svg { width: 20px; height: 20px; fill: none; stroke: #ffffff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .trustSection__mini strong { display: block; margin-bottom: 3px; color: #102b57; font-size: 12px; } .trustSection__mini span { display: block; color: #7a8797; font-size: 10px; line-height: 1.45; } /* ===================================================== TESTIMONIAL BOX ===================================================== */ .testimonialBox { position: relative; z-index: 3; min-height: 440px; overflow: hidden; padding: 30px 32px 26px; border: 1px solid #e4eaf2; border-radius: 22px; background: linear-gradient( 145deg, #ffffff, #f8fafc ); box-shadow: 0 22px 55px rgba(16,43,87,.10); } /* ORANGE CORNER GLOW */ .testimonialBox::before { content: ""; position: absolute; width: 220px; height: 220px; right: -130px; top: -140px; border-radius: 50%; background: #7CB12D; opacity: .07; pointer-events: none; } /* ===================================================== TOP ===================================================== */ .testimonialBox__top { position: relative; z-index: 3; display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; margin-bottom: 12px; } .testimonialBox__top > div:first-child span { display: block; margin-bottom: 3px; color: #7CB12D; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; } .testimonialBox__top > div:first-child strong { display: block; color: #102b57; font-size: 18px; } /* ===================================================== QUOTE ===================================================== */ .testimonialBox__quote { color: rgba(255,121,0,.12); font-family: Georgia, serif; font-size: 90px; line-height: .65; pointer-events: none; } /* ===================================================== SLIDER ===================================================== */ .testimonialSlider { position: relative; min-height: 280px; } .testimonialSlide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateX(38px) scale(.985); filter: blur(4px); transition: opacity .9s ease, transform 1.05s cubic-bezier(.16,.72,.2,1), filter .8s ease, visibility .9s ease; } .testimonialSlide.active { position: relative; opacity: 1; visibility: visible; transform: translateX(0) scale(1); filter: blur(0); } /* ===================================================== STARS ===================================================== */ .testimonialSlide__stars { margin-bottom: 17px; color: #7CB12D; font-size: 15px; letter-spacing: 3px; } /* ===================================================== TESTIMONIAL TEXT ===================================================== */ .testimonialSlide > p { max-width: 650px; margin: 0 0 28px; color: #102b57; font-size: clamp( 20px, 2vw, 20px ); line-height: 1.55; letter-spacing: -.35px; font-weight: 500; } /* ===================================================== AUTHOR ===================================================== */ .testimonialSlide__author { display: flex; align-items: center; gap: 11px; } .testimonialSlide__avatar { width: 49px; height: 49px; flex: 0 0 49px; display: grid; place-items: center; border-radius: 50%; background: linear-gradient( 135deg, #102b57, #194982 ); color: #ffffff; font-size: 11px; font-weight: 700; box-shadow: 0 9px 20px rgba(16,43,87,.18); } .testimonialSlide__author strong { display: block; margin-bottom: 3px; color: #102b57; font-size: 12px; } .testimonialSlide__author span { display: block; color: #8994a2; font-size: 9px; } /* ===================================================== BOTTOM CONTROLS ===================================================== */ .testimonialBox__bottom { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; } /* ===================================================== DOTS ===================================================== */ .testimonialDots { display: flex; align-items: center; gap: 7px; } .testimonialDot { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 30px; background: #d2d9e3; cursor: pointer; transition: width .35s ease, background .35s ease; } .testimonialDot.active { width: 30px; background: #7CB12D; } /* ===================================================== ARROWS ===================================================== */ .testimonialArrows { display: flex; gap: 7px; } .testimonialArrows button { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid #dfe5ed; border-radius: 10px; background: #ffffff; color: #102b57; font-size: 15px; cursor: pointer; box-shadow: 0 7px 16px rgba(16,43,87,.05); transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease; } .testimonialArrows button:hover { border-color: #102b57; background: #102b57; color: #ffffff; transform: translateY(-2px); } /* ===================================================== PROGRESS ===================================================== */ .testimonialProgress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: #edf0f4; } .testimonialProgress span { display: block; width: 0; height: 100%; background: linear-gradient( 90deg, #102b57, #7CB12D ); } .testimonialProgress span.running { animation: testimonialTimer 6.5s linear forwards; } @keyframes testimonialTimer { from { width: 0; } to { width: 100%; } } /* ===================================================== SLOW REVEAL ===================================================== */ .trustReveal { opacity: 0; transform: translateY(42px) scale(.985); filter: blur(6px); will-change: opacity, transform, filter; transition: opacity 1.25s ease var(--trust-delay,0ms), transform 1.45s cubic-bezier(.16,.72,.2,1) var(--trust-delay,0ms), filter 1.15s ease var(--trust-delay,0ms); } .trustReveal--left { transform: translateX(-48px) scale(.985); } .trustReveal--right { transform: translateX(48px) scale(.985); } .trustReveal.trustShow { opacity: 1; transform: translate(0,0) scale(1); filter: blur(0); } /* ===================================================== TABLET ===================================================== */ @media(max-width:991.98px) { .trustSection { padding: 60px 0; } .testimonialBox { min-height: 410px; } } /* ===================================================== MOBILE ===================================================== */ @media(max-width:575.98px) { .trustSection { padding: 45px 0; } .trustSection__tag { font-size: 16px; } .trustSection__left h2 { font-size: 31px; line-height: 1.13; } .trustSection__left > p { font-size: 16px; } .trustStats { grid-template-columns: 1fr; } .trustStat { min-height: 86px; } .testimonialBox { min-height: 400px; padding: 23px 18px; } .testimonialBox__quote { font-size: 70px; } .testimonialSlide > p { font-size: 20px; line-height: 1.5; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media(prefers-reduced-motion:reduce) { .trustReveal { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .trustSection__shape, .trustSection__tag span { animation: none !important; } .testimonialSlide { transition: none !important; } } /* ========================================================= PREMIUM CTA SECTION ========================================================= */ .cs-cta{ --green:#77AF25; --green-light:#98CF48; --dark:#181D22; --deep:#0A0E11; --white:#FFFFFF; --muted:#A4ADB2; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:clamp(70px,7vw,110px) 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 78% 35%, rgba(119,175,37,.18), transparent 28% ), linear-gradient( 115deg, #0A0E11 0%, #171D21 48%, #0E1317 100% ); } /* ========================================================= BACKGROUND IMAGE ========================================================= */ .cs-cta-bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-position:center; background-repeat:no-repeat; opacity:.16; transform:scale(1.05); animation: csCtaBgMove 16s ease-in-out infinite alternate; } @keyframes csCtaBgMove{ to{ transform: scale(1.10) translateX(-14px); } } /* ========================================================= OVERLAY ========================================================= */ .cs-cta-overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(7,10,13,.98) 0%, rgba(12,17,20,.93) 45%, rgba(10,14,18,.82) 72%, rgba(7,10,13,.90) 100% ); } /* ========================================================= GREEN GLOW ========================================================= */ .cs-cta-glow{ position:absolute; width:560px; height:560px; right:-190px; top:-130px; border-radius:50%; z-index:-8; background: radial-gradient( circle, rgba(119,175,37,.25), rgba(119,175,37,.08) 42%, transparent 72% ); filter:blur(9px); animation: csCtaGlowMove 7s ease-in-out infinite alternate; } @keyframes csCtaGlowMove{ to{ transform: translate(-60px,50px) scale(1.12); } } /* ========================================================= PERSPECTIVE GRID ========================================================= */ .cs-cta-grid{ position:absolute; left:-15%; right:-15%; bottom:-350px; height:620px; z-index:-7; background-image: linear-gradient( rgba(119,175,37,.07) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.07) 1px, transparent 1px ); background-size:70px 70px; transform: perspective(700px) rotateX(67deg) scale(1.3); transform-origin:center top; mask-image: linear-gradient( to bottom, rgba(0,0,0,.7), transparent 78% ); animation: csCtaGridMove 13s linear infinite; } @keyframes csCtaGridMove{ to{ background-position:0 70px; } } /* ========================================================= CONTAINER ========================================================= */ .cs-cta-container{ position:relative; z-index:4; width:min(1280px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,1fr) auto; gap:50px; align-items:center; perspective:1400px; } /* ========================================================= LEFT CONTENT ========================================================= */ .cs-cta-content{ max-width:820px; } /* LABEL */ .cs-cta-label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:18px; color:var(--green); font-size:11px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; opacity:0; transform: translateX(-40px) rotateY(-20deg); transition: opacity .65s ease, transform .8s cubic-bezier(.16,1,.3,1); } .cs-cta-label::before{ content:""; width:34px; height:2px; background:var(--green); } .cs-cta.active .cs-cta-label{ opacity:1; transform:none; } /* ========================================================= TITLE ========================================================= */ .cs-cta-title{ margin:0; color:#fff; font-size:clamp(30px,4.8vw,35px); line-height:1.03; font-weight:800; letter-spacing: clamp(-2.6px,-.2vw,-1px); } .cs-cta-title-row{ display:block; overflow:hidden; } .cs-cta-title-row > span{ display:block; opacity:0; transform: translateY(110%) rotateX(-35deg); transform-origin:left bottom; transition: opacity .8s ease, transform .95s cubic-bezier(.16,1,.3,1); } .cs-cta-title-row:nth-child(1) > span{ transition-delay:.18s; } .cs-cta-title-row:nth-child(2) > span{ transition-delay:.38s; } .cs-cta.active .cs-cta-title-row > span{ opacity:1; transform:none; } .cs-cta-green{ color:var(--green); } /* ========================================================= TEXT ========================================================= */ .cs-cta-text{ max-width:700px; margin:22px 0 0; color:var(--muted); font-size:16px; line-height:1.75; opacity:0; transform:translateY(22px); transition: opacity .7s .58s ease, transform .7s .58s ease; } .cs-cta.active .cs-cta-text{ opacity:1; transform:none; } /* ========================================================= BUTTONS ========================================================= */ .cs-cta-actions{ display:flex; flex-direction:column; gap:12px; min-width:215px; opacity:0; transform: translateX(80px) rotateY(30deg) scale(.9); transition: opacity .8s .72s ease, transform .95s .72s cubic-bezier(.16,1,.3,1); } .cs-cta.active .cs-cta-actions{ opacity:1; transform:none; } .cs-cta-btn{ min-height:55px; padding:0 24px; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:10px; text-decoration:none; font-size:13px; font-weight:700; position:relative; overflow:hidden; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, color .35s ease; } /* PRIMARY */ .cs-cta-btn-primary{ color:#fff; background: linear-gradient( 90deg, #6FA51F, #85BE31 ); box-shadow: 0 15px 38px rgba(119,175,37,.24); } .cs-cta-btn-primary::before{ content:""; position:absolute; width:45px; height:180px; top:-60px; left:-75px; background: rgba(255,255,255,.26); transform:rotate(27deg); transition:.7s; } .cs-cta-btn-primary:hover::before{ left:125%; } .cs-cta-btn-primary:hover{ transform:translateY(-4px); box-shadow: 0 20px 48px rgba(119,175,37,.34); } /* SECONDARY */ .cs-cta-btn-secondary{ color:#fff; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.13); backdrop-filter:blur(10px); } .cs-cta-btn-secondary:hover{ transform:translateY(-4px); color:var(--green); border-color: rgba(119,175,37,.55); } /* ========================================================= DECORATIVE LINE ========================================================= */ .cs-cta-top-line{ position:absolute; left:50%; top:0; width:min(600px,50%); height:1px; transform:translateX(-50%); background: linear-gradient( 90deg, transparent, rgba(119,175,37,.55), transparent ); } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ .cs-cta{ padding:80px 0; } .cs-cta-container{ width:min(760px,90%); grid-template-columns:1fr; gap:35px; text-align:center; } .cs-cta-content{ margin:auto; } .cs-cta-label{ justify-content:center; } .cs-cta-text{ margin-left:auto; margin-right:auto; } .cs-cta-actions{ min-width:0; width:100%; max-width:420px; margin:auto; flex-direction:row; } .cs-cta-btn{ flex:1; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .cs-cta{ padding:65px 0; } .cs-cta-container{ width:90%; gap:30px; } .cs-cta-label{ font-size:9px; letter-spacing:1.2px; } .cs-cta-label::before{ width:22px; } .cs-cta-title{ font-size: clamp(38px,11vw,48px); } .cs-cta-text{ font-size:14px; line-height:1.7; } .cs-cta-actions{ flex-direction:column; } .cs-cta-btn{ width:100%; box-sizing:border-box; } .cs-cta-bg{ background-position:65% center; opacity:.12; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .cs-cta-container{ width:92%; } .cs-cta-title{ font-size:24px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .cs-cta *, .cs-cta *::before, .cs-cta *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ===================================================== FOOTER ===================================================== */ /* ========================================================= COMPUTER SERVICES PREMIUM GREEN 3D FOOTER ========================================================= */ .siteFooter{ --footer-green:#77AF25; --footer-green-dark:#5F8F19; --footer-green-light:#99D04B; --footer-green-soft:#EDF5E3; --footer-dark:#181D22; --footer-deep:#090D10; --footer-dark-2:#10161A; --footer-dark-3:#161D21; --footer-white:#FFFFFF; --footer-muted:#929CA2; position:relative; width:100%; color:#fff; font-family:Arial,Helvetica,sans-serif; overflow:hidden; isolation:isolate; background:#090D10; } /* ========================================================= SHARED CONTAINER FALLBACK Bootstrap .container can still be used. ========================================================= */ .siteFooter .container{ position:relative; z-index:5; width:min(1400px,92%); margin-left:auto; margin-right:auto; } /* ========================================================= TOP CTA AREA ========================================================= */ .siteFooter__top{ position:relative; z-index:10; padding:0; } /* ========================================================= TOP CTA CARD ========================================================= */ .siteFooter__topWrap{ position:relative; min-height:112px; margin-bottom:-56px; padding:22px 25px; display:flex; align-items:center; justify-content:space-between; gap:28px; overflow:hidden; border-radius:22px; background: linear-gradient( 120deg, #6EA41F 0%, #79AF26 42%, #8AC63A 100% ); border: 1px solid rgba(255,255,255,.20); box-shadow: 0 25px 65px rgba(71,108,21,.28); transform-style:preserve-3d; } /* top card shine */ .siteFooter__topWrap::before{ content:""; position:absolute; width:280px; height:280px; right:12%; top:-190px; border-radius:50%; background: rgba(255,255,255,.12); animation: footerTopOrb 6s ease-in-out infinite alternate; } .siteFooter__topWrap::after{ content:""; position:absolute; width:60px; height:220px; top:-55px; left:-100px; background: rgba(255,255,255,.13); transform:rotate(28deg); animation: footerTopShine 6.5s ease-in-out infinite; } @keyframes footerTopOrb{ to{ transform: translate(-45px,35px) scale(1.15); } } @keyframes footerTopShine{ 0%, 55%{ left:-110px; } 80%, 100%{ left:115%; } } /* ========================================================= TOP CTA CONTENT ========================================================= */ .siteFooter__topContent{ position:relative; z-index:3; display:flex; align-items:center; gap:15px; } .siteFooter__topIcon{ width:52px; height:52px; flex:0 0 52px; display:grid; place-items:center; border-radius:14px; background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px rgba(255,255,255,.13); transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease; } .siteFooter__topWrap:hover .siteFooter__topIcon{ transform: translateY(-4px) rotate(-5deg) scale(1.04); background: rgba(255,255,255,.22); } .siteFooter__topIcon svg{ width:23px; height:23px; fill:none; stroke:#fff; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .siteFooter__topContent span{ display:block; margin-bottom:4px; color: rgba(255,255,255,.76); font-size:11px; font-weight:600; letter-spacing:.2px; } .siteFooter__topContent strong{ display:block; color:#fff; font-size: clamp(18px,1.6vw,23px); line-height:1.25; } /* ========================================================= TOP CTA BUTTON ========================================================= */ .siteFooter__topBtn{ position:relative; z-index:3; min-height:51px; padding: 0 8px 0 18px; display:inline-flex; align-items:center; justify-content:center; gap:11px; border-radius:11px; background: linear-gradient( 145deg, #171D22, #0D1215 ); border: 1px solid rgba(255,255,255,.10); color:#fff; text-decoration:none; font-size:12px; font-weight:700; white-space:nowrap; box-shadow: 0 15px 35px rgba(19,28,12,.22); transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s ease, background .35s ease; } .siteFooter__topBtn i{ width:35px; height:35px; display:grid; place-items:center; border-radius:9px; background: rgba(119,175,37,.16); color:var(--footer-green-light); font-style:normal; font-size:15px; transition: transform .35s ease, background .35s ease, color .35s ease; } .siteFooter__topBtn:hover{ color:#fff; transform: translateY(-4px) translateZ(20px); box-shadow: 0 20px 45px rgba(0,0,0,.27); } .siteFooter__topBtn:hover i{ transform:translateX(4px); color:#fff; background:var(--footer-green); } /* ========================================================= MAIN FOOTER ========================================================= */ .siteFooter__main{ position:relative; overflow:hidden; padding: 112px 0 26px; background: radial-gradient( circle at 86% 15%, rgba(119,175,37,.12), transparent 25% ), radial-gradient( circle at 5% 95%, rgba(119,175,37,.05), transparent 23% ), linear-gradient( 135deg, #090D10 0%, #11171B 50%, #0B1013 100% ); } /* green ambient orb */ .siteFooter__main::before{ content:""; position:absolute; width:520px; height:520px; right:-260px; top:-180px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.16), rgba(119,175,37,.045) 45%, transparent 72% ); animation: footerMainGlow 8s ease-in-out infinite alternate; } @keyframes footerMainGlow{ to{ transform: translate(-65px,45px) scale(1.1); } } /* subtle grid */ .siteFooter__main::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.23; 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:65px 65px; mask-image: linear-gradient( to bottom, #000, transparent 88% ); } /* ========================================================= PERSPECTIVE FLOOR ========================================================= */ .siteFooter__perspective{ position:absolute; left:-20%; right:-20%; bottom:-420px; height:700px; z-index:1; pointer-events:none; background-image: linear-gradient( rgba(119,175,37,.07) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.07) 1px, transparent 1px ); background-size:70px 70px; transform: perspective(700px) rotateX(67deg) scale(1.35); transform-origin:center top; mask-image: linear-gradient( to bottom, rgba(0,0,0,.65), transparent 78% ); animation: footerPerspectiveMove 14s linear infinite; } @keyframes footerPerspectiveMove{ to{ background-position: 0 70px; } } /* ========================================================= MAIN FOOTER GRID Bootstrap works, but this also improves spacing ========================================================= */ .siteFooter__main .row{ position:relative; z-index:4; } /* ========================================================= BRAND ========================================================= */ .siteFooter__brand, .siteFooter__column, .siteFooter__bottom{ position:relative; z-index:4; } .siteFooter__logo{ position:relative; display:inline-block; width:min(225px,100%); margin-bottom:19px; padding:12px 16px; overflow:hidden; border-radius:13px; background: linear-gradient( 145deg, rgba(255,255,255,.98), rgba(244,248,240,.96) ); border: 1px solid rgba(119,175,37,.16); box-shadow: 0 15px 35px rgba(0,0,0,.16); transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .35s ease; } .siteFooter__logo::before{ content:""; position:absolute; width:100px; height:100px; right:-55px; top:-55px; border-radius:50%; background: rgba(119,175,37,.09); transition: transform .4s ease; } .siteFooter__logo:hover{ transform: translateY(-5px) rotateX(3deg) rotateY(-3deg); box-shadow: 0 22px 45px rgba(0,0,0,.22); } .siteFooter__logo:hover::before{ transform:scale(1.4); } .siteFooter__logo img{ position:relative; z-index:2; display:block; width:100%; height:auto; padding:0; background:transparent; border-radius:0; } .siteFooter__brand p{ max-width:390px; margin: 0 0 22px; color: rgba(255,255,255,.55); font-size:13px; line-height:1.75; } /* ========================================================= SOCIAL ICONS ========================================================= */ .siteFooter__socials{ display:flex; flex-wrap:wrap; gap:9px; } .siteFooter__socials a{ position:relative; width:39px; height:39px; display:grid; place-items:center; overflow:hidden; border: 1px solid rgba(255,255,255,.09); border-radius:11px; background: rgba(255,255,255,.04); color: rgba(255,255,255,.70); text-decoration:none; font-size:10px; font-weight:700; transition: transform .35s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease, color .3s ease, box-shadow .3s ease; } .siteFooter__socials a::before{ content:""; position:absolute; inset:0; background: linear-gradient( 145deg, var(--footer-green), var(--footer-green-light) ); opacity:0; transform: translateY(100%); transition: opacity .3s ease, transform .35s cubic-bezier(.16,1,.3,1); } .siteFooter__socials a span{ position:relative; z-index:2; } .siteFooter__socials a:hover{ color:#fff; border-color: rgba(119,175,37,.45); transform: translateY(-5px) rotate(-3deg); box-shadow: 0 12px 28px rgba(119,175,37,.18); } .siteFooter__socials a:hover::before{ opacity:1; transform:translateY(0); } /* ========================================================= COLUMN HEADINGS ========================================================= */ .siteFooter__column h4{ position:relative; margin: 0 0 21px; padding-bottom:11px; color:#fff; font-size:16px; line-height:1.2; font-weight:700; } .siteFooter__column h4::before{ content:""; position:absolute; left:0; bottom:0; width:35px; height:2px; border-radius:20px; background: linear-gradient( 90deg, var(--footer-green), var(--footer-green-light) ); box-shadow: 0 0 12px rgba(119,175,37,.30); } .siteFooter__column h4::after{ content:""; position:absolute; left:39px; bottom:0; width:7px; height:2px; border-radius:20px; background: rgba(119,175,37,.30); } /* ========================================================= LINKS ========================================================= */ .siteFooter__column ul{ margin:0; padding:0; list-style:none; } .siteFooter__column li{ margin-bottom:10px; } .siteFooter__column li:last-child{ margin-bottom:0; } .siteFooter__column li a{ position:relative; display:inline-flex; align-items:center; gap:8px; color: rgba(255,255,255,.55); text-decoration:none; font-size:13px; line-height:1.4; transition: color .3s ease, transform .3s cubic-bezier(.16,1,.3,1); } .siteFooter__column li a::before{ content:""; width:5px; height:5px; flex:0 0 5px; border-radius:50%; background: rgba(119,175,37,.38); transition: transform .3s ease, background .3s ease, box-shadow .3s ease; } .siteFooter__column li a:hover{ color:#fff; transform:translateX(6px); } .siteFooter__column li a:hover::before{ transform:scale(1.25); background:var(--footer-green); box-shadow: 0 0 0 5px rgba(119,175,37,.08), 0 0 12px rgba(119,175,37,.30); } /* ========================================================= CONTACT COLUMN ========================================================= */ .siteFooter__contact{ display:grid; align-content:start; gap:0; } .siteFooter__contactItem{ position:relative; display:flex; align-items:center; gap:11px; margin-bottom:10px; padding:11px; overflow:hidden; border: 1px solid rgba(255,255,255,.07); border-radius:12px; background: rgba(255,255,255,.035); color:#fff; text-decoration:none; transition: transform .35s cubic-bezier(.16,1,.3,1), border-color .3s ease, background .3s ease, box-shadow .3s ease; } .siteFooter__contactItem::before{ content:""; position:absolute; width:90px; height:90px; right:-65px; top:-65px; border-radius:50%; background: rgba(119,175,37,.10); transition: transform .4s ease; } a.siteFooter__contactItem:hover{ color:#fff; transform: translateX(5px); border-color: rgba(119,175,37,.25); background: rgba(119,175,37,.055); box-shadow: 0 12px 30px rgba(0,0,0,.12); } a.siteFooter__contactItem:hover::before{ transform:scale(1.8); } .siteFooter__contactIcon{ position:relative; z-index:2; width:37px; height:37px; flex:0 0 37px; display:grid; place-items:center; border-radius:10px; background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.14); color:var(--footer-green); font-size:12px; transition: transform .3s ease, background .3s ease, color .3s ease; } a.siteFooter__contactItem:hover .siteFooter__contactIcon{ transform: rotate(-5deg) scale(1.06); color:#fff; background:var(--footer-green); } .siteFooter__contactItem > span:last-child{ position:relative; z-index:2; min-width:0; } .siteFooter__contactItem small{ display:block; margin-bottom:3px; color: rgba(255,255,255,.38); font-size:8px; letter-spacing:.3px; } .siteFooter__contactItem strong{ display:block; color: rgba(255,255,255,.84); font-size:11px; line-height:1.4; font-weight:600; overflow-wrap:anywhere; } /* availability status dot */ .siteFooter__statusDot{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--footer-green); box-shadow: 0 0 0 5px rgba(119,175,37,.09), 0 0 14px rgba(119,175,37,.40); animation: footerStatusPulse 1.8s ease-in-out infinite; } @keyframes footerStatusPulse{ 50%{ transform:scale(.75); opacity:.65; } } /* ========================================================= BOTTOM BAR ========================================================= */ .siteFooter__bottom{ position:relative; margin-top:48px; padding-top:22px; border-top: 1px solid rgba(255,255,255,.075); display:flex; align-items:center; justify-content:space-between; gap:20px; } .siteFooter__bottom::before{ content:""; position:absolute; left:0; top:-1px; width:90px; height:1px; background: linear-gradient( 90deg, var(--footer-green), transparent ); } .siteFooter__bottom p{ margin:0; color: rgba(255,255,255,.38); font-size:11px; } .siteFooter__legal{ display:flex; align-items:center; gap:11px; } .siteFooter__legal a{ color: rgba(255,255,255,.42); text-decoration:none; font-size:10px; transition: color .3s ease, transform .3s ease; } .siteFooter__legal a:hover{ color:var(--footer-green-light); transform:translateY(-2px); } .siteFooter__legal > span{ width:3px; height:3px; border-radius:50%; background: rgba(119,175,37,.45); } /* ========================================================= 3D SCROLL REVEAL ========================================================= */ .footerReveal{ opacity:0; transform: translateY(45px) translateZ(-60px) rotateX(10deg); transform-origin:center bottom; will-change: opacity, transform; transition: opacity .75s ease var(--footer-delay,0ms), transform .9s cubic-bezier(.16,1,.3,1) var(--footer-delay,0ms); } .footerReveal.footerShow{ opacity:1; transform: translateY(0) translateZ(0) rotateX(0); } /* special top CTA entrance */ .siteFooter__topWrap.footerReveal{ transform: translateY(80px) translateZ(-120px) rotateX(35deg) rotateY(-8deg) scale(.90); } .siteFooter__topWrap.footerReveal.footerShow{ transform: translateY(0) translateZ(0) rotateX(0) rotateY(0) scale(1); } /* brand enters from left */ .siteFooter__brand.footerReveal{ transform: translateX(-65px) translateY(25px) rotateY(-20deg) scale(.94); } .siteFooter__brand.footerReveal.footerShow{ transform: translateX(0) translateY(0) rotateY(0) scale(1); } /* contact enters from right */ .siteFooter__contact.footerReveal{ transform: translateX(65px) translateY(25px) rotateY(20deg) scale(.94); } .siteFooter__contact.footerReveal.footerShow{ transform: translateX(0) translateY(0) rotateY(0) scale(1); } /* ========================================================= LARGE TABLET ========================================================= */ @media(max-width:991.98px){ .siteFooter__topWrap{ min-height:100px; margin-bottom:-50px; } .siteFooter__main{ padding-top:100px; } .siteFooter__logo{ width:205px; } .siteFooter__brand{ margin-bottom:10px; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:767.98px){ .siteFooter__topWrap{ padding:20px; gap:18px; } .siteFooter__main{ padding-bottom:22px; } .siteFooter__brand p{ max-width:500px; } .siteFooter__bottom{ margin-top:38px; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:575.98px){ .siteFooter .container{ width:90%; } .siteFooter__topWrap{ min-height:auto; margin-bottom:-44px; padding:18px; align-items:stretch; flex-direction:column; border-radius:17px; } .siteFooter__topContent{ align-items:flex-start; } .siteFooter__topIcon{ width:46px; height:46px; flex-basis:46px; } .siteFooter__topContent span{ font-size:9px; } .siteFooter__topContent strong{ font-size:17px; } .siteFooter__topBtn{ width:100%; box-sizing:border-box; justify-content:space-between; } .siteFooter__main{ padding: 84px 0 20px; } .siteFooter__logo{ width:190px; } .siteFooter__brand p{ font-size:13px; line-height:1.7; } .siteFooter__column h4{ font-size:15px; margin-top:6px; } .siteFooter__column li a{ font-size:12px; } .siteFooter__contactItem{ padding:10px; } .siteFooter__bottom{ margin-top:32px; align-items:flex-start; flex-direction:column; gap:12px; } .siteFooter__legal{ flex-wrap:wrap; gap:8px; } .footerReveal{ transform: translateY(35px) scale(.96); } .footerReveal.footerShow{ transform:none; } .siteFooter__brand.footerReveal, .siteFooter__contact.footerReveal, .siteFooter__topWrap.footerReveal{ transform: translateY(40px) scale(.95); } .siteFooter__brand.footerReveal.footerShow, .siteFooter__contact.footerReveal.footerShow, .siteFooter__topWrap.footerReveal.footerShow{ transform:none; } } /* ========================================================= VERY SMALL ========================================================= */ @media(max-width:390px){ .siteFooter .container{ width:92%; } .siteFooter__topContent{ gap:10px; } .siteFooter__topIcon{ width:42px; height:42px; flex-basis:42px; } .siteFooter__topContent strong{ font-size:15px; } .siteFooter__logo{ width:175px; } .siteFooter__legal a{ font-size:9px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .siteFooter *, .siteFooter *::before, .siteFooter *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } .footerReveal{ opacity:1 !important; transform:none !important; } } /*----------------------------------about page-----------------------------------------------------*/ /* ========================================================= ABOUT HERO - PREMIUM 3D REFINED ========================================================= */ .csab3{ --green:#77AF25; --green-dark:#5F8F19; --green-light:#9AD04B; --deep:#090D10; --dark:#151B1F; --muted:#A2ABB0; --white:#FFFFFF; position:relative; width:100%; min-height:720px; overflow:hidden; isolation:isolate; display:flex; align-items:center; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 82% 18%, rgba(119,175,37,.15), transparent 26% ), radial-gradient( circle at 15% 90%, rgba(119,175,37,.05), transparent 25% ), linear-gradient( 118deg, #080C0F 0%, #12181C 48%, #0A0F12 100% ); } /* ========================================================= BACKGROUND IMAGE ========================================================= */ .csab3__bg{ position:absolute; inset:0; z-index:-12; background-size:cover; background-repeat:no-repeat; background-position:center; opacity:.19; filter: saturate(.75) contrast(1.08) brightness(.82); transform:scale(1.06); animation: csab3Bg 22s ease-in-out infinite alternate; } @keyframes csab3Bg{ to{ transform: scale(1.12) translateX(-16px) translateY(6px); } } /* ========================================================= DARK OVERLAY ========================================================= */ .csab3__overlay{ position:absolute; inset:0; z-index:-11; background: linear-gradient( 90deg, rgba(7,10,13,.995) 0%, rgba(9,13,16,.97) 34%, rgba(11,16,19,.83) 58%, rgba(8,12,15,.64) 100% ); } /* ========================================================= GREEN LIGHT BEAM ========================================================= */ .csab3__beam{ position:absolute; width:780px; height:780px; right:-300px; top:-320px; z-index:-10; transform:rotate(-18deg); background: linear-gradient( 145deg, rgba(119,175,37,.17), rgba(119,175,37,.04) 37%, transparent 68% ); filter:blur(18px); animation: csab3BeamMove 11s ease-in-out infinite alternate; } @keyframes csab3BeamMove{ to{ transform: translate(-60px,50px) rotate(-14deg) scale(1.08); } } /* ========================================================= SOFT GRID ========================================================= */ .csab3__grid{ position:absolute; inset:0; z-index:-9; opacity:.14; 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:72px 72px; mask-image: linear-gradient( to right, #000 0%, #000 55%, transparent 88% ); } /* ========================================================= GLOW ORB ========================================================= */ .csab3__orb{ position:absolute; width:500px; height:500px; right:6%; top:10%; z-index:-8; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.16), rgba(119,175,37,.04) 45%, transparent 72% ); filter:blur(8px); animation: csab3OrbMove 8s ease-in-out infinite alternate; } @keyframes csab3OrbMove{ to{ transform: translate(-30px,28px) scale(1.08); } } /* ========================================================= CONTAINER ========================================================= */ .csab3__container{ position:relative; z-index:4; width:min(1380px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(50px,6vw,90px); align-items:center; padding: clamp(78px,7vw,105px) 0; perspective:1800px; } /* ========================================================= LEFT CONTENT ========================================================= */ .csab3__content{ position:relative; z-index:8; max-width:650px; } /* LABEL */ .csab3__label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--green-light); font-size:9px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; opacity:0; transform: translateX(-40px); animation: csab3LeftIn 1.3s .12s cubic-bezier(.16,1,.3,1) forwards; } .csab3__label::before{ content:""; width:32px; height:2px; background:var(--green); } /* ========================================================= SMALLER TITLE ========================================================= */ .csab3__title{ margin:0; color:#fff; font-size: clamp(38px,4.1vw,58px); line-height:1.06; font-weight:800; letter-spacing: clamp(-2px,-.15vw,-.8px); } .csab3__titleRow{ display:block; overflow:hidden; padding-bottom:3px; } .csab3__titleRow > span{ display:block; opacity:0; transform: translateY(115%) rotateX(-22deg); transform-origin:left bottom; } .csab3__titleRow:nth-child(1) > span{ animation: csab3TitleIn 1.5s .32s cubic-bezier(.16,1,.3,1) forwards; } .csab3__titleRow:nth-child(2) > span{ animation: csab3TitleIn 1.5s .58s cubic-bezier(.16,1,.3,1) forwards; } .csab3__green{ color:var(--green); } @keyframes csab3TitleIn{ to{ opacity:1; transform:none; } } /* ========================================================= DESCRIPTION ========================================================= */ .csab3__desc{ max-width:580px; margin:20px 0 0; color:var(--muted); font-size:14px; line-height:1.8; opacity:0; transform:translateY(24px); animation: csab3FadeUp 1.35s .9s cubic-bezier(.16,1,.3,1) forwards; } /* ========================================================= POINTS ========================================================= */ .csab3__points{ display:grid; grid-template-columns: repeat(2,minmax(0,max-content)); gap:9px 18px; margin-top:24px; } .csab3__point{ display:flex; align-items:center; gap:8px; color:#DCE2E4; font-size:11px; font-weight:600; opacity:0; transform:translateY(18px); } .csab3__point:nth-child(1){ animation: csab3FadeUp 1.1s 1.12s ease forwards; } .csab3__point:nth-child(2){ animation: csab3FadeUp 1.1s 1.25s ease forwards; } .csab3__point:nth-child(3){ animation: csab3FadeUp 1.1s 1.38s ease forwards; } .csab3__point:nth-child(4){ animation: csab3FadeUp 1.1s 1.51s ease forwards; } .csab3__check{ width:24px; height:24px; flex:0 0 24px; display:grid; place-items:center; border-radius:7px; background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.18); color:var(--green); font-size:9px; } /* ========================================================= BUTTONS ========================================================= */ .csab3__actions{ display:flex; flex-wrap:wrap; gap:11px; margin-top:28px; opacity:0; transform:translateY(22px); animation: csab3FadeUp 1.25s 1.7s cubic-bezier(.16,1,.3,1) forwards; } .csab3__btn{ min-height:50px; padding:0 22px; display:inline-flex; align-items:center; justify-content:center; gap:9px; border-radius:8px; text-decoration:none; font-size:11px; font-weight:700; transition: transform .35s ease, border-color .35s ease, color .35s ease, box-shadow .35s ease; } .csab3__btnPrimary{ color:#fff; background: linear-gradient( 90deg, #6FA51F, #83BC2F ); box-shadow: 0 13px 32px rgba(119,175,37,.20); } .csab3__btnPrimary:hover{ transform:translateY(-3px); box-shadow: 0 18px 42px rgba(119,175,37,.32); } .csab3__btnSecondary{ color:#fff; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.11); } .csab3__btnSecondary:hover{ transform:translateY(-3px); color:var(--green-light); border-color: rgba(119,175,37,.44); } /* ========================================================= RIGHT VISUAL ========================================================= */ .csab3__visual{ position:relative; min-height:560px; perspective:1600px; transform-style:preserve-3d; } /* ========================================================= BACK CARD ========================================================= */ .csab3__backCard{ position:absolute; width:58%; height:395px; right:15%; top:70px; border-radius:24px; background: linear-gradient( 145deg, rgba(119,175,37,.10), rgba(255,255,255,.02) ); border: 1px solid rgba(119,175,37,.14); transform: translateZ(-60px) rotateY(-8deg) rotateZ(3deg); opacity:0; animation: csab3BackCardIn 1.7s 1.2s cubic-bezier(.16,1,.3,1) forwards; } @keyframes csab3BackCardIn{ from{ opacity:0; transform: translateX(70px) translateZ(-80px) rotateY(-25deg) rotateZ(7deg) scale(.9); } to{ opacity:1; transform: translateZ(-60px) rotateY(-8deg) rotateZ(3deg) scale(1); } } /* ========================================================= MAIN IMAGE ========================================================= */ .csab3__mainImage{ position:absolute; width:64%; height:445px; right:6%; top:40px; z-index:8; overflow:hidden; border-radius: 26px 8px 26px 8px; border: 1px solid rgba(255,255,255,.13); box-shadow: 0 38px 90px rgba(0,0,0,.45); opacity:0; transform: translateX(140px) translateZ(-150px) rotateY(48deg) scale(.8); animation: csab3MainImageIn 1.9s .52s cubic-bezier(.16,1,.3,1) forwards; transition: transform .4s ease-out; } @keyframes csab3MainImageIn{ 0%{ opacity:0; transform: translateX(140px) translateZ(-150px) rotateY(48deg) scale(.8); } 75%{ opacity:1; transform: translateX(-10px) translateZ(20px) rotateY(-4deg) scale(1.01); } 100%{ opacity:1; transform: translateX(0) translateZ(20px) rotateY(-2deg) scale(1); } } .csab3__mainImage img{ width:100%; height:100%; object-fit:cover; display:block; transform:scale(1.02); transition: transform .9s ease; } .csab3__mainImage:hover img{ transform:scale(1.07); } .csab3__mainImage::after{ content:""; position:absolute; inset:0; background: linear-gradient( 180deg, transparent 45%, rgba(6,9,11,.08) 65%, rgba(6,9,11,.74) 100% ); } /* ========================================================= IMAGE CAPTION ========================================================= */ .csab3__caption{ position:absolute; z-index:5; left:22px; right:22px; bottom:21px; } .csab3__caption span{ display:block; margin-bottom:6px; color:var(--green-light); font-size:8px; font-weight:800; letter-spacing:1.3px; text-transform:uppercase; } .csab3__caption strong{ display:block; max-width:320px; color:#fff; font-size:16px; line-height:1.4; } /* ========================================================= IMAGE LEFT TOP ========================================================= */ .csab3__imageA{ position:absolute; width:175px; height:200px; left:2%; top:35px; z-index:12; overflow:hidden; border-radius:17px; border: 4px solid #11171B; box-shadow: 0 25px 55px rgba(0,0,0,.34); opacity:0; transform: translateX(-85px) translateY(-20px) rotateY(-48deg) scale(.74); animation: csab3SmallIn 1.6s 1.3s cubic-bezier(.16,1,.3,1) forwards; } .csab3__imageA img{ width:100%; height:100%; object-fit:cover; display:block; } /* ========================================================= IMAGE BOTTOM LEFT ========================================================= */ .csab3__imageB{ position:absolute; width:205px; height:145px; left:0; bottom:30px; z-index:13; overflow:hidden; border-radius:17px; border: 4px solid #10161A; box-shadow: 0 25px 55px rgba(0,0,0,.34); opacity:0; transform: translateX(-90px) translateY(50px) rotateY(-45deg) scale(.74); animation: csab3SmallIn 1.6s 1.58s cubic-bezier(.16,1,.3,1) forwards; } .csab3__imageB img{ width:100%; height:100%; object-fit:cover; display:block; } @keyframes csab3SmallIn{ to{ opacity:1; transform: translateX(0) translateY(0) rotateY(0) scale(1); } } /* ========================================================= FLOATING GLASS INFO ========================================================= */ .csab3__float{ position:absolute; z-index:15; right:0; bottom:62px; width:180px; padding:13px; border-radius:13px; background: rgba(18,24,28,.88); border: 1px solid rgba(255,255,255,.09); backdrop-filter:blur(15px); box-shadow: 0 18px 42px rgba(0,0,0,.27); opacity:0; transform: translateX(70px) rotateY(38deg) scale(.85); animation: csab3FloatIn 1.5s 1.9s cubic-bezier(.16,1,.3,1) forwards, csab3FloatMove 5.5s 3.5s ease-in-out infinite; } @keyframes csab3FloatIn{ to{ opacity:1; transform:none; } } @keyframes csab3FloatMove{ 50%{ transform:translateY(-7px); } } .csab3__floatIcon{ width:34px; height:34px; display:grid; place-items:center; margin-bottom:9px; border-radius:9px; background: rgba(119,175,37,.11); color:var(--green); font-size:13px; } .csab3__float strong{ display:block; margin-bottom:5px; color:#fff; font-size:11px; } .csab3__float p{ margin:0; color:#879197; font-size:8.5px; line-height:1.6; } /* ========================================================= COMMON ========================================================= */ @keyframes csab3LeftIn{ to{ opacity:1; transform:none; } } @keyframes csab3FadeUp{ to{ opacity:1; transform:none; } } /* ========================================================= LAPTOP ========================================================= */ @media(max-width:1100px){ .csab3__container{ gap:40px; } .csab3__visual{ min-height:520px; } .csab3__mainImage{ height:410px; } .csab3__imageA{ width:150px; height:175px; } .csab3__imageB{ width:175px; height:130px; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ .csab3{ min-height:auto; } .csab3__container{ width:min(760px,90%); grid-template-columns:1fr; gap:50px; padding: 72px 0 62px; } .csab3__content{ max-width:670px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .csab3__label{ justify-content:center; } .csab3__title{ font-size: clamp(40px,7vw,52px); } .csab3__desc{ margin-left:auto; margin-right:auto; } .csab3__points{ justify-content:center; } .csab3__actions{ justify-content:center; } .csab3__visual{ width:min(650px,100%); min-height:550px; margin:auto; } .csab3__mainImage{ width:62%; right:8%; } .csab3__imageA{ left:5%; } .csab3__imageB{ left:4%; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .csab3__container{ width:90%; gap:38px; padding: 55px 0; } .csab3__label{ font-size:8px; letter-spacing:1.2px; } .csab3__title{ font-size: clamp(32px,9vw,40px); line-height:1.08; } .csab3__desc{ margin-top:17px; font-size:13px; line-height:1.7; } .csab3__points{ width:100%; grid-template-columns:1fr; gap:8px; text-align:left; } .csab3__actions{ width:100%; } .csab3__btn{ width:100%; box-sizing:border-box; } .csab3__visual{ min-height:440px; perspective:none; } .csab3__mainImage{ width:74%; height:350px; right:3%; top:32px; animation: csab3MobileMain 1.8s .5s cubic-bezier(.16,1,.3,1) forwards; } @keyframes csab3MobileMain{ from{ opacity:0; transform: translateY(60px) scale(.92); } to{ opacity:1; transform:none; } } .csab3__imageA{ width:110px; height:128px; left:0; top:38px; border-width:3px; } .csab3__imageB{ width:120px; height:90px; left:0; bottom:20px; border-width:3px; } .csab3__float{ width:140px; right:0; bottom:22px; padding:10px; } .csab3__floatIcon{ width:30px; height:30px; } .csab3__float strong{ font-size:9px; } .csab3__float p{ font-size:7.5px; } .csab3__caption{ left:17px; right:17px; bottom:17px; } .csab3__caption strong{ font-size:14px; } .csab3__backCard{ width:65%; height:330px; right:8%; top:55px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .csab3__container{ width:92%; } .csab3__title{ font-size:30px; } .csab3__visual{ min-height:395px; } .csab3__mainImage{ width:76%; height:315px; } .csab3__imageA{ width:98px; height:112px; } .csab3__imageB{ width:105px; height:80px; } .csab3__float{ width:125px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .csab3 *, .csab3 *::before, .csab3 *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ========================================================= WHO WE ARE - UNIQUE 3D DIGITAL VISUAL ========================================================= */ .csWhoUnique{ --green:#77AF25; --green-dark:#5F8F19; --green-light:#98CF48; --green-soft:#EDF5E3; --dark:#181D22; --text:#687178; position:relative; width:100%; overflow:hidden; isolation:isolate; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 12% 26%, rgba(119,175,37,.10), transparent 24% ), radial-gradient( circle at 90% 80%, rgba(119,175,37,.06), transparent 23% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAF6 52%, #F1F6EB 100% ); } /* ========================================================= BACKGROUND GRID ========================================================= */ .csWhoUnique__grid{ position:absolute; inset:0; z-index:-6; background-image: linear-gradient( rgba(119,175,37,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.04) 1px, transparent 1px ); background-size:72px 72px; mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent ); opacity:.55; } /* ========================================================= AMBIENT GLOW ========================================================= */ .csWhoUnique__glow{ position:absolute; width:560px; height:560px; left:-220px; bottom:-200px; border-radius:50%; z-index:-5; background: radial-gradient( circle, rgba(119,175,37,.15), rgba(119,175,37,.04) 46%, transparent 72% ); animation: csWhoUniqueGlow 9s ease-in-out infinite alternate; } @keyframes csWhoUniqueGlow{ to{ transform: translate(65px,-35px) scale(1.08); } } /* ========================================================= CONTAINER ========================================================= */ .csWhoUnique__container{ position:relative; z-index:4; width:min(1380px,92%); margin:auto; display:grid; grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(60px,7vw,110px); align-items:center; perspective:1800px; } /* ========================================================= LEFT 3D VISUAL ========================================================= */ .csWhoUnique__visual{ position:relative; min-height:590px; perspective:1700px; transform-style:preserve-3d; } /* ========================================================= BACK GLOW DISC ========================================================= */ .csWhoUnique__disc{ position:absolute; width:430px; height:430px; left:50%; top:50%; border-radius:50%; transform: translate(-50%,-50%) scale(.7); background: radial-gradient( circle, rgba(119,175,37,.18), rgba(119,175,37,.05) 45%, transparent 70% ); opacity:0; transition: opacity 1.4s .2s ease, transform 1.8s .2s cubic-bezier(.16,1,.3,1); } .csWhoUnique.active .csWhoUnique__disc{ opacity:1; transform: translate(-50%,-50%) scale(1); } /* ========================================================= MAIN 3D PANEL ========================================================= */ .csWhoUnique__panel{ position:absolute; width:72%; min-height:395px; left:12%; top:85px; z-index:6; padding:23px; box-sizing:border-box; border-radius:24px; background: linear-gradient( 145deg, rgba(25,31,35,.97), rgba(12,17,20,.98) ); border: 1px solid rgba(255,255,255,.09); box-shadow: 0 35px 80px rgba(28,39,23,.25); opacity:0; transform: translateX(-120px) translateZ(-180px) rotateY(-48deg) rotateX(8deg) scale(.78); transform-style:preserve-3d; transition: opacity 1.4s .25s ease, transform 1.8s .25s cubic-bezier(.16,1,.3,1); } .csWhoUnique.active .csWhoUnique__panel{ opacity:1; transform: translateX(0) translateZ(20px) rotateY(3deg) rotateX(1deg) scale(1); } /* ========================================================= PANEL TOP BAR ========================================================= */ .csWhoUnique__panelTop{ display:flex; align-items:center; justify-content:space-between; gap:15px; margin-bottom:22px; } .csWhoUnique__dots{ display:flex; gap:6px; } .csWhoUnique__dots span{ width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,.18); } .csWhoUnique__dots span:first-child{ background:var(--green); } .csWhoUnique__panelLabel{ color:#778188; font-size:8px; letter-spacing:1.1px; text-transform:uppercase; } /* ========================================================= MAIN DASHBOARD CONTENT ========================================================= */ .csWhoUnique__dashboard{ display:grid; grid-template-columns: .82fr 1.18fr; gap:15px; } /* LEFT MINI PANEL */ .csWhoUnique__side{ display:flex; flex-direction:column; gap:10px; } .csWhoUnique__sideBox{ min-height:70px; padding:13px; border-radius:12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); transform:translateZ(25px); } .csWhoUnique__sideBox small{ display:block; margin-bottom:7px; color:#768087; font-size:7px; text-transform:uppercase; letter-spacing:.8px; } .csWhoUnique__sideBox strong{ display:block; color:#fff; font-size:12px; } .csWhoUnique__sideLine{ width:100%; height:5px; margin-top:12px; border-radius:20px; overflow:hidden; background: rgba(255,255,255,.05); } .csWhoUnique__sideLine span{ display:block; height:100%; border-radius:20px; background: linear-gradient( 90deg, var(--green), var(--green-light) ); } .csWhoUnique__sideBox:nth-child(1) .csWhoUnique__sideLine span{ width:76%; } .csWhoUnique__sideBox:nth-child(2) .csWhoUnique__sideLine span{ width:61%; } .csWhoUnique__sideBox:nth-child(3) .csWhoUnique__sideLine span{ width:84%; } /* ========================================================= RIGHT MAIN CONTENT ========================================================= */ .csWhoUnique__mainArea{ display:flex; flex-direction:column; gap:12px; } .csWhoUnique__mainBox{ position:relative; min-height:165px; padding:18px; overflow:hidden; border-radius:15px; background: linear-gradient( 145deg, rgba(119,175,37,.10), rgba(255,255,255,.025) ); border: 1px solid rgba(119,175,37,.14); transform: translateZ(35px); } .csWhoUnique__mainBox::before{ content:""; position:absolute; width:180px; height:180px; right:-110px; top:-110px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.18), transparent 70% ); } .csWhoUnique__mainBox small{ position:relative; z-index:2; display:block; margin-bottom:9px; color:var(--green-light); font-size:7px; letter-spacing:1px; text-transform:uppercase; } .csWhoUnique__mainBox strong{ position:relative; z-index:2; display:block; max-width:250px; color:#fff; font-size:17px; line-height:1.35; } /* ========================================================= FAKE CHART ========================================================= */ .csWhoUnique__chart{ position:absolute; left:18px; right:18px; bottom:16px; height:55px; display:flex; align-items:flex-end; gap:7px; } .csWhoUnique__chart span{ flex:1; border-radius:5px 5px 2px 2px; background: linear-gradient( 180deg, var(--green-light), var(--green-dark) ); transform:scaleY(0); transform-origin:bottom; transition: transform 1.2s ease; } .csWhoUnique.active .csWhoUnique__chart span{ transform:scaleY(1); } .csWhoUnique__chart span:nth-child(1){ height:35%; transition-delay:1.1s; } .csWhoUnique__chart span:nth-child(2){ height:56%; transition-delay:1.2s; } .csWhoUnique__chart span:nth-child(3){ height:44%; transition-delay:1.3s; } .csWhoUnique__chart span:nth-child(4){ height:78%; transition-delay:1.4s; } .csWhoUnique__chart span:nth-child(5){ height:66%; transition-delay:1.5s; } .csWhoUnique__chart span:nth-child(6){ height:92%; transition-delay:1.6s; } /* ========================================================= BOTTOM DASHBOARD ITEMS ========================================================= */ .csWhoUnique__miniGrid{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; } .csWhoUnique__miniBox{ padding:13px; border-radius:12px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.055); transform: translateZ(22px); } .csWhoUnique__miniBox span{ display:block; margin-bottom:5px; color:#7D878C; font-size:7px; text-transform:uppercase; } .csWhoUnique__miniBox strong{ color:#fff; font-size:11px; } /* ========================================================= FLOATING CARD LEFT ========================================================= */ .csWhoUnique__floatOne{ position:absolute; z-index:10; width:165px; left:0; top:120px; padding:14px; border-radius:14px; background: rgba(255,255,255,.92); border: 1px solid rgba(119,175,37,.15); box-shadow: 0 18px 42px rgba(56,75,43,.12); backdrop-filter:blur(15px); opacity:0; transform: translateX(-85px) rotateY(-55deg) scale(.78); transition: opacity 1.1s .95s ease, transform 1.55s .95s cubic-bezier(.16,1,.3,1); } .csWhoUnique.active .csWhoUnique__floatOne{ opacity:1; transform:none; animation: csWhoUniqueFloatOne 5.5s 2.8s ease-in-out infinite; } @keyframes csWhoUniqueFloatOne{ 50%{ transform:translateY(-7px); } } .csWhoUnique__floatOne small{ display:block; margin-bottom:5px; color:#808981; font-size:8px; } .csWhoUnique__floatOne strong{ color:var(--dark); font-size:12px; } /* ========================================================= FLOATING CARD RIGHT ========================================================= */ .csWhoUnique__floatTwo{ position:absolute; z-index:11; width:170px; right:0; bottom:85px; padding:14px; border-radius:14px; /* background: linear-gradient( 145deg, #20272C, #12171B ); border: 1px solid rgba(119,175,37,.18); box-shadow: 0 20px 48px rgba(0,0,0,.23); */ opacity:0; transform: translateX(85px) rotateY(55deg) scale(.78); transition: opacity 1.1s 1.15s ease, transform 1.55s 1.15s cubic-bezier(.16,1,.3,1); } .csWhoUnique.active .csWhoUnique__floatTwo{ opacity:1; transform:none; animation: csWhoUniqueFloatTwo 6s 3s ease-in-out infinite; } @keyframes csWhoUniqueFloatTwo{ 50%{ transform:translateY(7px); } } .csWhoUnique__floatTwoIcon{ width:33px; height:33px; display:grid; place-items:center; margin-bottom:9px; border-radius:9px; background: rgba(119,175,37,.11); color:var(--green); font-size:12px; } .csWhoUnique__floatTwo strong{ display:block; color:#fff; font-size:11px; } .csWhoUnique__floatTwo small{ display:block; margin-top:4px; color:#818B90; font-size:7px; } /* ========================================================= RIGHT CONTENT ========================================================= */ .csWhoUnique__content{ max-width:650px; } /* LABEL */ .csWhoUnique__label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--green-dark); font-size:9px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; opacity:0; transform:translateX(40px); transition: opacity 1.1s .15s ease, transform 1.4s .15s cubic-bezier(.16,1,.3,1); } .csWhoUnique__label::before{ content:""; width:30px; height:2px; background:var(--green); } .csWhoUnique.active .csWhoUnique__label{ opacity:1; transform:none; } /* ========================================================= HEADING ========================================================= */ .csWhoUnique__title{ margin:0; color:var(--dark); font-size: clamp(34px,3.6vw,50px); line-height:1.07; font-weight:800; letter-spacing: clamp(-1.8px,-.13vw,-.7px); } .csWhoUnique__titleLine{ display:block; overflow:hidden; padding-bottom:3px; } .csWhoUnique__titleLine > span{ display:block; opacity:0; transform: translateY(110%) rotateX(-18deg); transform-origin:left bottom; transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.16,1,.3,1); } .csWhoUnique__titleLine:nth-child(1) > span{ transition-delay:.32s; } .csWhoUnique__titleLine:nth-child(2) > span{ transition-delay:.55s; } .csWhoUnique.active .csWhoUnique__titleLine > span{ opacity:1; transform:none; } .csWhoUnique__green{ color:var(--green); } /* ========================================================= TEXT ========================================================= */ .csWhoUnique__text{ margin:21px 0 0; color:#697278; font-size:14px; line-height:1.8; opacity:0; transform:translateY(22px); transition: opacity 1.2s .76s ease, transform 1.45s .76s cubic-bezier(.16,1,.3,1); } .csWhoUnique.active .csWhoUnique__text{ opacity:1; transform:none; } .csWhoUnique__text + .csWhoUnique__text{ margin-top:13px; transition-delay:.92s; } /* ========================================================= FEATURE ROWS ========================================================= */ .csWhoUnique__features{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:10px; margin-top:26px; } .csWhoUnique__feature{ padding:14px; border-radius:12px; background: rgba(255,255,255,.76); border: 1px solid rgba(55,72,44,.09); box-shadow: 0 11px 26px rgba(55,72,44,.045); opacity:0; transform: translateY(25px) rotateX(9deg); transition: opacity 1s ease, transform 1.3s cubic-bezier(.16,1,.3,1), border-color .3s ease, box-shadow .3s ease; } .csWhoUnique__feature:nth-child(1){ transition-delay:1.05s; } .csWhoUnique__feature:nth-child(2){ transition-delay:1.18s; } .csWhoUnique__feature:nth-child(3){ transition-delay:1.31s; } .csWhoUnique__feature:nth-child(4){ transition-delay:1.44s; } .csWhoUnique.active .csWhoUnique__feature{ opacity:1; transform:none; } .csWhoUnique__feature:hover{ transform:translateY(-4px); border-color: rgba(119,175,37,.22); box-shadow: 0 17px 38px rgba(55,77,39,.08); } .csWhoUnique__feature strong{ display:block; margin-bottom:5px; color:var(--dark); font-size:12px; } .csWhoUnique__feature span{ color:#78817D; font-size:9px; line-height:1.55; } /* ========================================================= LAPTOP ========================================================= */ @media(max-width:1100px){ .csWhoUnique__container{ gap:45px; } .csWhoUnique__visual{ min-height:540px; } .csWhoUnique__panel{ width:74%; } } /* ========================================================= TABLET ========================================================= */ @media(max-width:900px){ .csWhoUnique{ padding:78px 0; } .csWhoUnique__container{ width:min(760px,90%); grid-template-columns:1fr; gap:55px; } .csWhoUnique__visual{ width:min(650px,100%); min-height:560px; margin:auto; } .csWhoUnique__content{ max-width:670px; margin:auto; text-align:center; display:flex; flex-direction:column; align-items:center; } .csWhoUnique__label{ justify-content:center; } .csWhoUnique__text{ margin-left:auto; margin-right:auto; } .csWhoUnique__features{ width:100%; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:600px){ .csWhoUnique{ padding:62px 0; } .csWhoUnique__container{ width:90%; gap:38px; } .csWhoUnique__visual{ min-height:450px; perspective:none; } .csWhoUnique__disc{ width:340px; height:340px; } .csWhoUnique__panel{ width:82%; min-height:320px; left:9%; top:58px; padding:17px; transform: translateY(55px) scale(.92); } .csWhoUnique.active .csWhoUnique__panel{ transform:none; } .csWhoUnique__dashboard{ gap:9px; } .csWhoUnique__sideBox{ min-height:56px; padding:10px; } .csWhoUnique__sideBox strong{ font-size:9px; } .csWhoUnique__mainBox{ min-height:135px; padding:13px; } .csWhoUnique__mainBox strong{ font-size:13px; } .csWhoUnique__chart{ height:42px; left:13px; right:13px; bottom:12px; } .csWhoUnique__floatOne{ width:130px; left:0; top:32px; padding:10px; } .csWhoUnique__floatOne strong{ font-size:9px; } .csWhoUnique__floatTwo{ width:135px; right:0; bottom:25px; padding:10px; } .csWhoUnique__floatTwo strong{ font-size:9px; } .csWhoUnique__title{ font-size: clamp(29px,8.5vw,38px); } .csWhoUnique__text{ font-size:13px; line-height:1.7; } .csWhoUnique__features{ grid-template-columns:1fr; gap:8px; } .csWhoUnique__feature{ text-align:left; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .csWhoUnique__container{ width:92%; } .csWhoUnique__visual{ min-height:410px; } .csWhoUnique__panel{ width:86%; left:7%; } .csWhoUnique__floatOne{ width:115px; } .csWhoUnique__floatTwo{ width:120px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .csWhoUnique *, .csWhoUnique *::before, .csWhoUnique *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } .csMV{ --green:#77AF25; --green-dark:#5F8F19; --green-light:#98CF48; --deep:#090D10; --dark:#151B1F; --white:#FFFFFF; --muted:#9DA6AB; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:50px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 18% 20%, rgba(119,175,37,.11), transparent 24% ), radial-gradient( circle at 86% 78%, rgba(119,175,37,.08), transparent 24% ), linear-gradient( 120deg, #090D10 0%, #151B1F 50%, #0C1114 100% ); } /* BACKGROUND IMAGE */ .csMV__bg{ position:absolute; inset:0; z-index:-10; background-size:cover; background-repeat:no-repeat; background-position:center; opacity:.10; transform:scale(1.06); filter: saturate(.7) contrast(1.05); animation: csMVBgMove 22s ease-in-out infinite alternate; } @keyframes csMVBgMove{ to{ transform: scale(1.12) translateX(-15px); } } /* OVERLAY */ .csMV__overlay{ position:absolute; inset:0; z-index:-9; background: linear-gradient( 90deg, rgba(7,10,13,.98) 0%, rgba(10,14,17,.93) 47%, rgba(8,12,15,.89) 100% ); } /* GRID */ .csMV__grid{ position:absolute; inset:0; z-index:-8; opacity:.18; 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:72px 72px; mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent ); } /* GLOW */ .csMV__glow{ position:absolute; width:600px; height:600px; right:-230px; top:-120px; z-index:-7; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.20), rgba(119,175,37,.05) 44%, transparent 72% ); filter:blur(10px); animation: csMVGlowMove 9s ease-in-out infinite alternate; } @keyframes csMVGlowMove{ to{ transform: translate(-65px,50px) scale(1.1); } } /* CONTAINER */ .csMV__container{ position:relative; z-index:4; width:min(1380px,92%); margin:auto; } /* HEADER */ .csMV__header{ max-width:760px; margin: 0 auto clamp(45px,5vw,68px); text-align:center; } .csMV__label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--green-light); font-size:9px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; opacity:0; transform:translateY(24px); transition: opacity 1.1s .1s ease, transform 1.4s .1s cubic-bezier(.16,1,.3,1); } .csMV__label::before, .csMV__label::after{ content:""; width:28px; height:1px; background: rgba(119,175,37,.55); } .csMV.active .csMV__label{ opacity:1; transform:none; } /* TITLE */ .csMV__title{ margin:0; color:#fff; font-size: clamp(34px,3.8vw,52px); line-height:1.07; font-weight:800; letter-spacing: clamp(-1.8px,-.13vw,-.7px); } .csMV__titleLine{ display:block; overflow:hidden; } .csMV__titleLine > span{ display:block; opacity:0; transform: translateY(110%) rotateX(-18deg); transform-origin:center bottom; transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.16,1,.3,1); } .csMV__titleLine:nth-child(1) > span{ transition-delay:.28s; } .csMV__titleLine:nth-child(2) > span{ transition-delay:.50s; } .csMV.active .csMV__titleLine > span{ opacity:1; transform:none; } .csMV__green{ color:var(--green); } .csMV__intro{ max-width:660px; margin:20px auto 0; color:var(--muted); font-size:14px; line-height:1.8; opacity:0; transform:translateY(22px); transition: opacity 1.2s .72s ease, transform 1.4s .72s cubic-bezier(.16,1,.3,1); } .csMV.active .csMV__intro{ opacity:1; transform:none; } /* CARDS GRID */ .csMV__cards{ display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:clamp(20px,2.5vw,34px); perspective:1800px; } /* CARD */ .csMV__card{ position:relative; min-height:420px; padding:clamp(28px,3vw,42px); overflow:hidden; border-radius:24px; background: linear-gradient( 145deg, rgba(28,35,40,.95), rgba(14,19,23,.96) ); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 30px 70px rgba(0,0,0,.28); transform-style:preserve-3d; opacity:0; transition: opacity 1.3s ease, transform 1.8s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } /* MISSION ENTRY */ .csMV__card--mission{ transform: translateX(-120px) translateZ(-160px) rotateY(-48deg) rotateX(7deg) scale(.82); transition-delay:.75s; } /* VISION ENTRY */ .csMV__card--vision{ transform: translateX(120px) translateZ(-160px) rotateY(48deg) rotateX(7deg) scale(.82); transition-delay:.95s; } .csMV.active .csMV__card{ opacity:1; transform: translateX(0) translateZ(0) rotateY(0) rotateX(0) scale(1); } /* CARD GLOW */ .csMV__card::before{ content:""; position:absolute; width:260px; height:260px; right:-150px; top:-150px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.20), transparent 70% ); transition: transform .6s ease, opacity .6s ease; } .csMV__card:hover::before{ transform:scale(1.6); } /* BOTTOM LINE */ .csMV__card::after{ content:""; position:absolute; left:36px; right:36px; bottom:0; height:3px; border-radius:10px 10px 0 0; background: linear-gradient( 90deg, transparent, var(--green), var(--green-light), transparent ); transform:scaleX(0); transition: transform .5s ease; } .csMV__card:hover::after{ transform:scaleX(1); } /* HOVER */ .csMV__card:hover{ transform: translateY(-8px) scale(1.008); border-color: rgba(119,175,37,.30); background: linear-gradient( 145deg, rgba(33,41,46,.98), rgba(15,21,25,.98) ); box-shadow: 0 38px 85px rgba(0,0,0,.38); } /* CARD NUMBER */ .csMV__number{ position:absolute; right:28px; top:25px; color: rgba(255,255,255,.045); font-size:54px; font-weight:800; line-height:1; transition: color .35s ease, transform .35s ease; } .csMV__card:hover .csMV__number{ color: rgba(119,175,37,.14); transform:translateY(-3px); } /* ICON */ .csMV__iconWrap{ position:relative; width:72px; height:72px; margin-bottom:28px; } .csMV__iconBack{ position:absolute; inset:0; border-radius:20px; background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.18); transform:rotate(-7deg); transition: transform .45s ease; } .csMV__icon{ position:absolute; inset:7px; display:grid; place-items:center; border-radius:16px; background: rgba(255,255,255,.04); color:var(--green); font-size:22px; font-weight:800; transition: transform .45s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease; } .csMV__card:hover .csMV__iconBack{ transform: rotate(7deg) scale(1.05); } .csMV__card:hover .csMV__icon{ transform: translateY(-4px) scale(1.05); color:#fff; background:var(--green); } /* SMALL LABEL */ .csMV__cardLabel{ display:block; margin-bottom:9px; color:var(--green-light); font-size:8px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; } /* CARD TITLE */ .csMV__card h3{ margin:0; max-width:420px; color:#fff; font-size: clamp(25px,2.3vw,34px); line-height:1.15; transition: color .3s ease, transform .3s ease; } .csMV__card:hover h3{ color:var(--green-light); transform:translateX(3px); } /* CARD TEXT */ .csMV__cardText{ max-width:540px; margin:18px 0 0; color:#9FA8AD; font-size:13px; line-height:1.78; } /* POINTS */ .csMV__list{ display:grid; gap:10px; margin-top:24px; } .csMV__listItem{ display:flex; align-items:center; gap:10px; color:#D8DEE1; font-size:11px; font-weight:600; } .csMV__check{ width:25px; height:25px; flex:0 0 25px; display:grid; place-items:center; border-radius:8px; background: rgba(119,175,37,.10); border: 1px solid rgba(119,175,37,.18); color:var(--green); font-size:9px; } /* DECORATIVE CORNER */ .csMV__corner{ position:absolute; width:95px; height:95px; right:28px; bottom:27px; opacity:.12; border-right: 1px solid var(--green); border-bottom: 1px solid var(--green); border-radius:0 0 18px 0; pointer-events:none; } /* TABLET */ @media(max-width:850px){ .csMV{ padding:78px 0; } .csMV__container{ width:min(760px,90%); } .csMV__cards{ grid-template-columns:1fr; max-width:680px; margin:auto; } .csMV__card{ min-height:auto; } .csMV__card--mission, .csMV__card--vision{ transform: translateY(60px) rotateX(18deg) scale(.92); } .csMV.active .csMV__card{ transform:none; } } /* MOBILE */ @media(max-width:600px){ .csMV{ padding:62px 0; } .csMV__container{ width:90%; } .csMV__header{ margin-bottom:38px; } .csMV__label{ font-size:8px; letter-spacing:1.2px; } .csMV__label::before, .csMV__label::after{ width:20px; } .csMV__title{ font-size: clamp(29px,8.5vw,38px); } .csMV__intro{ font-size:13px; line-height:1.7; } .csMV__cards{ gap:14px; } .csMV__card{ min-height:auto; padding:24px 20px; border-radius:18px; } .csMV__number{ top:20px; right:18px; font-size:39px; } .csMV__iconWrap{ width:62px; height:62px; margin-bottom:22px; } .csMV__card h3{ font-size:23px; } .csMV__cardText{ font-size:12px; } .csMV__corner{ width:65px; height:65px; right:20px; bottom:20px; } } /* SMALL MOBILE */ @media(max-width:400px){ .csMV__container{ width:92%; } .csMV__title{ font-size:28px; } } /* REDUCED MOTION */ @media(prefers-reduced-motion:reduce){ .csMV *, .csMV *::before, .csMV *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /* ========================================================= WHAT MAKES US DIFFERENT ========================================================= */ .csDiff{ --green:#77AF25; --green-dark:#5F8F19; --green-light:#9AD04B; --green-soft:#EDF5E3; --dark:#181D22; --text:#687178; position:relative; width:100%; overflow:hidden; isolation:isolate; padding:50px 0; font-family:Arial,Helvetica,sans-serif; background: radial-gradient( circle at 10% 25%, rgba(119,175,37,.09), transparent 24% ), radial-gradient( circle at 92% 78%, rgba(119,175,37,.06), transparent 24% ), linear-gradient( 135deg, #FFFFFF 0%, #F8FAF6 52%, #F2F7ED 100% ); } /* ========================================================= BACKGROUND GRID ========================================================= */ .csDiff__grid{ position:absolute; inset:0; z-index:-7; background-image: linear-gradient( rgba(119,175,37,.04) 1px, transparent 1px ), linear-gradient( 90deg, rgba(119,175,37,.04) 1px, transparent 1px ); background-size:72px 72px; mask-image: linear-gradient( to bottom, transparent, #000 18%, #000 82%, transparent ); opacity:.50; } /* ========================================================= GLOW ========================================================= */ .csDiff__glow{ position:absolute; width:560px; height:560px; right:-220px; top:-170px; z-index:-6; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.14), rgba(119,175,37,.04) 46%, transparent 72% ); animation: csDiffGlow 9s ease-in-out infinite alternate; } @keyframes csDiffGlow{ to{ transform: translate(-55px,45px) scale(1.08); } } /* ========================================================= CONTAINER ========================================================= */ .csDiff__container{ position:relative; z-index:4; width:min(1380px,92%); margin:auto; } /* ========================================================= HEADER ========================================================= */ .csDiff__header{ max-width:820px; margin: 0 auto clamp(50px,5vw,72px); text-align:center; } .csDiff__label{ display:inline-flex; align-items:center; gap:10px; margin-bottom:17px; color:var(--green-dark); font-size:9px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; opacity:0; transform: translateY(24px); transition: opacity 1.1s .1s ease, transform 1.4s .1s cubic-bezier(.16,1,.3,1); } .csDiff__label::before, .csDiff__label::after{ content:""; width:28px; height:1px; background: rgba(119,175,37,.55); } .csDiff.active .csDiff__label{ opacity:1; transform:none; } /* ========================================================= TITLE ========================================================= */ .csDiff__title{ margin:0; color:var(--dark); font-size: clamp(34px,3.8vw,52px); line-height:1.07; font-weight:800; letter-spacing: clamp(-1.8px,-.13vw,-.7px); } .csDiff__titleLine{ display:block; overflow:hidden; } .csDiff__titleLine > span{ display:block; opacity:0; transform: translateY(110%) rotateX(-18deg); transform-origin:center bottom; transition: opacity 1.2s ease, transform 1.6s cubic-bezier(.16,1,.3,1); } .csDiff__titleLine:nth-child(1) > span{ transition-delay:.28s; } .csDiff__titleLine:nth-child(2) > span{ transition-delay:.50s; } .csDiff.active .csDiff__titleLine > span{ opacity:1; transform:none; } .csDiff__green{ color:var(--green); } .csDiff__intro{ max-width:690px; margin:20px auto 0; color:#697278; font-size:14px; line-height:1.8; opacity:0; transform:translateY(22px); transition: opacity 1.2s .72s ease, transform 1.4s .72s cubic-bezier(.16,1,.3,1); } .csDiff.active .csDiff__intro{ opacity:1; transform:none; } /* ========================================================= PATHWAY WRAPPER ========================================================= */ .csDiff__pathway{ position:relative; perspective:1800px; } /* ========================================================= CONNECTING LINE ========================================================= */ .csDiff__line{ position:absolute; left:8%; right:8%; top:73px; height:2px; z-index:1; background: rgba(119,175,37,.10); overflow:hidden; } .csDiff__line::after{ content:""; position:absolute; inset:0; background: linear-gradient( 90deg, var(--green), var(--green-light), var(--green) ); transform:scaleX(0); transform-origin:left; transition: transform 1.8s .85s cubic-bezier(.16,1,.3,1); } .csDiff.active .csDiff__line::after{ transform:scaleX(1); } /* ========================================================= GRID ========================================================= */ .csDiff__items{ position:relative; z-index:3; display:grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap:clamp(18px,2vw,26px); perspective:1700px; } /* ========================================================= ITEM ========================================================= */ .csDiff__item{ position:relative; min-height:380px; display:flex; flex-direction:column; align-items:center; text-align:center; opacity:0; transform-style:preserve-3d; transition: opacity 1.2s ease, transform 1.7s cubic-bezier(.16,1,.3,1); } .csDiff__item:nth-child(1){ transform: translateX(-90px) translateY(55px) rotateY(-38deg) scale(.86); transition-delay:.65s; } .csDiff__item:nth-child(2){ transform: translateY(95px) rotateX(34deg) scale(.86); transition-delay:.82s; } .csDiff__item:nth-child(3){ transform: translateY(95px) rotateX(-34deg) scale(.86); transition-delay:.99s; } .csDiff__item:nth-child(4){ transform: translateX(90px) translateY(55px) rotateY(38deg) scale(.86); transition-delay:1.16s; } .csDiff.active .csDiff__item{ opacity:1; transform: translateX(0) translateY(0) rotateX(0) rotateY(0) scale(1); } /* ========================================================= NODE ========================================================= */ .csDiff__node{ position:relative; z-index:5; width:72px; height:72px; margin-bottom:25px; display:grid; place-items:center; border-radius:50%; background:#fff; border: 1px solid rgba(119,175,37,.18); box-shadow: 0 14px 32px rgba(57,78,41,.09); transition: transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, box-shadow .35s ease; } .csDiff__node::before{ content:""; position:absolute; inset:-7px; border-radius:50%; border: 1px dashed rgba(119,175,37,.18); transition: transform .5s ease, border-color .35s ease; } .csDiff__item:hover .csDiff__node{ transform: translateY(-5px) scale(1.06); background:var(--green); box-shadow: 0 18px 42px rgba(119,175,37,.20); } .csDiff__item:hover .csDiff__node::before{ transform:rotate(35deg); border-color: rgba(119,175,37,.42); } .csDiff__node strong{ color:var(--green); font-size:16px; transition:.3s; } .csDiff__item:hover .csDiff__node strong{ color:#fff; } /* ========================================================= CARD ========================================================= */ .csDiff__card{ position:relative; width:100%; min-height:260px; padding:27px 22px; box-sizing:border-box; overflow:hidden; border-radius:19px; background: linear-gradient( 145deg, rgba(255,255,255,.92), rgba(248,250,246,.84) ); border: 1px solid rgba(55,72,44,.09); backdrop-filter:blur(14px); box-shadow: 0 17px 42px rgba(55,72,44,.06); transition: transform .4s cubic-bezier(.16,1,.3,1), border-color .35s ease, box-shadow .35s ease, background .35s ease; } .csDiff__card::before{ content:""; position:absolute; width:170px; height:170px; right:-100px; top:-100px; border-radius:50%; background: radial-gradient( circle, rgba(119,175,37,.16), transparent 70% ); transition: transform .5s ease; } .csDiff__item:hover .csDiff__card{ transform: translateY(-6px); border-color: rgba(119,175,37,.26); background: linear-gradient( 145deg, #fff, #f5f9f1 ); box-shadow: 0 26px 56px rgba(58,80,41,.10); } .csDiff__item:hover .csDiff__card::before{ transform:scale(1.55); } /* ========================================================= ICON ========================================================= */ .csDiff__icon{ width:50px; height:50px; margin: 0 auto 18px; display:grid; place-items:center; border-radius:14px; color:var(--green-dark); background: linear-gradient( 145deg, #EDF5E3, #DFEDCF ); border: 1px solid rgba(119,175,37,.14); font-size:16px; font-weight:800; transition: transform .4s cubic-bezier(.16,1,.3,1), background .35s ease, color .35s ease; } .csDiff__item:hover .csDiff__icon{ transform: translateY(-4px) rotate(5deg) scale(1.05); color:#fff; background:var(--green); } /* ========================================================= TEXT ========================================================= */ .csDiff__card h3{ margin:0 0 9px; color:var(--dark); font-size:18px; line-height:1.3; } .csDiff__card p{ margin:0; color:#727B80; font-size:11px; line-height:1.7; } .csDiff__small{ display:inline-block; margin-top:15px; color:var(--green-dark); font-size:8px; font-weight:800; letter-spacing:1px; text-transform:uppercase; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1050px){ .csDiff__items{ grid-template-columns: repeat(2,minmax(0,1fr)); gap:35px 20px; } .csDiff__line{ display:none; } .csDiff__item{ min-height:auto; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:700px){ .csDiff{ padding:65px 0; } .csDiff__container{ width:90%; } .csDiff__header{ margin-bottom:40px; } .csDiff__title{ font-size: clamp(29px,8.5vw,38px); } .csDiff__intro{ font-size:13px; line-height:1.7; } .csDiff__items{ grid-template-columns:1fr; max-width:580px; margin:auto; gap:22px; } .csDiff__item:nth-child(n){ transform: translateY(50px) rotateX(14deg) scale(.94); } .csDiff.active .csDiff__item:nth-child(n){ transform:none; } .csDiff__node{ width:64px; height:64px; margin-bottom:17px; } .csDiff__card{ min-height:auto; padding:23px 19px; border-radius:17px; } .csDiff__card h3{ font-size:17px; } .csDiff__card p{ font-size:10.5px; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media(max-width:400px){ .csDiff__container{ width:92%; } .csDiff__title{ font-size:28px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media(prefers-reduced-motion:reduce){ .csDiff *, .csDiff *::before, .csDiff *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } } /*---------------------contact page---------------------------------*/ .csxhero91-section { position: relative; overflow: hidden; isolation: isolate; min-height: 620px; display: flex; align-items: center; padding: 80px 0; font-family: Arial, Helvetica, sans-serif; background: radial-gradient( circle at 78% 35%, rgba(118, 184, 42, .11), transparent 29% ), linear-gradient( 118deg, #11181d 0%, #172128 50%, #11171c 100% ); } /* background subtle glow */ .csxhero91-section::before { content: ""; position: absolute; width: 460px; height: 460px; right: -170px; bottom: -250px; border-radius: 50%; background: rgba(118, 184, 42, .08); filter: blur(100px); pointer-events: none; } .csxhero91-section::after { content: ""; position: absolute; width: 420px; height: 420px; left: -240px; top: -260px; border-radius: 50%; background: rgba(118, 184, 42, .045); filter: blur(90px); pointer-events: none; } /* ========================== CONTAINER ========================== */ .csxhero91-section .csxhero91-container { position: relative; z-index: 2; width: min(1260px, calc(100% - 50px)); margin: 0 auto; display: grid; grid-template-columns: 1.35fr .75fr; gap: 80px; align-items: center; } /* ========================== LEFT CONTENT ========================== */ .csxhero91-section .csxhero91-content { position: relative; } /* breadcrumb */ .csxhero91-section .csxhero91-breadcrumb { margin-bottom: 24px; display: flex; align-items: center; gap: 9px; color: #7f898f; font-size: 12px; } .csxhero91-section .csxhero91-breadcrumb span { color: #7f898f; } .csxhero91-section .csxhero91-breadcrumb i { color: #59636a; font-style: normal; } .csxhero91-section .csxhero91-breadcrumb strong { color: #83c72d; font-weight: 700; } /* badge */ .csxhero91-section .csxhero91-badge { width: fit-content; margin-bottom: 22px; padding: 10px 16px; display: inline-flex; align-items: center; gap: 9px; border-radius: 30px; border: 1px solid rgba(118, 184, 42, .34); background: rgba(118, 184, 42, .065); color: #8bcb3b; font-size: 13px; font-weight: 700; } .csxhero91-section .csxhero91-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: #81c42e; box-shadow: 0 0 0 5px rgba(129, 196, 46, .08), 0 0 14px rgba(129, 196, 46, .5); animation: csxhero91DotPulse 2s ease-in-out infinite; } /* title */ .csxhero91-section .csxhero91-title { max-width: 760px; margin: 0; color: #ffffff; font-size: clamp(45px, 5vw, 44px); line-height: 1.02; letter-spacing: -3px; font-weight: 800; } .csxhero91-section .csxhero91-title span { display: block; margin-top: 8px; color: #7fbe29; } /* description */ .csxhero91-section .csxhero91-description { max-width: 670px; margin: 25px 0 0; color: #9fa8ad; font-size: 15px; line-height: 1.75; } /* ========================== FEATURES ========================== */ .csxhero91-section .csxhero91-features { margin-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 25px; } .csxhero91-section .csxhero91-feature { display: flex; align-items: center; gap: 8px; color: #b6bdc1; font-size: 12px; font-weight: 600; } .csxhero91-section .csxhero91-check { width: 23px; height: 23px; display: grid; place-items: center; border-radius: 50%; background: rgba(118, 184, 42, .10); color: #84c92f; font-size: 11px; font-weight: 700; } /* ========================== RIGHT WRAPPER ========================== */ .csxhero91-section .csxhero91-card-wrap { position: relative; perspective: 1200px; } /* ========================== CARD ========================== */ .csxhero91-section .csxhero91-contact-card { position: relative; overflow: hidden; padding: 26px; border-radius: 20px; background: linear-gradient( 145deg, #ffffff, #f6f8f9 ); border: 1px solid rgba(255,255,255,.75); box-shadow: 0 30px 60px rgba(0,0,0,.20); transform-style: preserve-3d; transition: transform .18s ease-out; } /* corner shape */ .csxhero91-section .csxhero91-corner-shape { position: absolute; width: 150px; height: 150px; top: -95px; right: -70px; border-radius: 50%; background: rgba(118, 184, 42, .08); } /* ========================== CARD HEAD ========================== */ .csxhero91-section .csxhero91-card-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .csxhero91-section .csxhero91-main-icon { flex: 0 0 48px; width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; background: #182127; } .csxhero91-section .csxhero91-main-icon svg { width: 21px; height: 21px; fill: none; stroke: #82c52d; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .csxhero91-section .csxhero91-card-head-text span { display: block; margin-bottom: 4px; color: #73ad26; font-size: 9px; font-weight: 800; letter-spacing: 1px; } .csxhero91-section .csxhero91-card-head-text h3 { margin: 0; color: #182127; font-size: 21px; line-height: 1.2; font-weight: 700; } /* ========================== CONTACT ROW ========================== */ .csxhero91-section .csxhero91-contact-row { position: relative; z-index: 2; min-height: 70px; margin-top: 10px; padding: 12px 13px; display: flex; align-items: center; gap: 12px; text-decoration: none; border-radius: 12px; border: 1px solid #dfe5e9; background: #fbfcfd; transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease; } .csxhero91-section .csxhero91-contact-row:hover { transform: translateX(4px); border-color: rgba(118, 184, 42, .38); box-shadow: 0 10px 25px rgba(23,31,38,.06); } .csxhero91-section .csxhero91-contact-row-static:hover { transform: none; } /* row icon */ .csxhero91-section .csxhero91-row-icon { flex: 0 0 43px; width: 43px; height: 43px; display: grid; place-items: center; border-radius: 11px; background: rgba(118, 184, 42, .09); } .csxhero91-section .csxhero91-row-icon svg { width: 18px; height: 18px; fill: none; stroke: #79b727; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* row text */ .csxhero91-section .csxhero91-row-text { min-width: 0; flex: 1; } .csxhero91-section .csxhero91-row-text span { display: block; margin-bottom: 4px; color: #89939a; font-size: 9px; } .csxhero91-section .csxhero91-row-text strong { display: block; color: #1b252c; font-size: 11px; font-weight: 700; overflow-wrap: anywhere; } /* arrow */ .csxhero91-section .csxhero91-row-arrow { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: #f0f3f4; color: #78b629; font-size: 15px; transition: background .3s ease, transform .3s ease; } .csxhero91-section .csxhero91-contact-row:hover .csxhero91-row-arrow { transform: translateX(2px); background: rgba(118, 184, 42, .10); } /* online */ .csxhero91-section .csxhero91-online { flex: 0 0 31px; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 50%; background: rgba(118, 184, 42, .07); } .csxhero91-section .csxhero91-online span { width: 9px; height: 9px; border-radius: 50%; background: #74bf26; box-shadow: 0 0 0 5px rgba(116, 191, 38, .10); animation: csxhero91OnlinePulse 2s ease-in-out infinite; } /* ========================== NOTE ========================== */ .csxhero91-section .csxhero91-card-note { position: relative; z-index: 2; margin-top: 15px; display: flex; align-items: center; gap: 8px; color: #7d878e; font-size: 9px; } .csxhero91-section .csxhero91-card-note > span { width: 6px; height: 6px; border-radius: 50%; background: #79b72a; } /* ========================== ANIMATIONS ========================== */ @keyframes csxhero91DotPulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(129,196,46,.08), 0 0 12px rgba(129,196,46,.45); } 50% { box-shadow: 0 0 0 8px rgba(129,196,46,0), 0 0 18px rgba(129,196,46,.7); } } @keyframes csxhero91OnlinePulse { 0%, 100% { box-shadow: 0 0 0 4px rgba(116,191,38,.10); } 50% { box-shadow: 0 0 0 8px rgba(116,191,38,0); } } /* ========================== TABLET ========================== */ @media (max-width: 1000px) { .csxhero91-section .csxhero91-container { grid-template-columns: 1fr; gap: 55px; } .csxhero91-section .csxhero91-content { text-align: center; } .csxhero91-section .csxhero91-breadcrumb, .csxhero91-section .csxhero91-features { justify-content: center; } .csxhero91-section .csxhero91-badge { margin-left: auto; margin-right: auto; } .csxhero91-section .csxhero91-title, .csxhero91-section .csxhero91-description { margin-left: auto; margin-right: auto; } .csxhero91-section .csxhero91-card-wrap { max-width: 520px; width: 100%; margin: 0 auto; } } /* ========================== MOBILE ========================== */ @media (max-width: 600px) { .csxhero91-section { padding: 65px 0; } .csxhero91-section .csxhero91-container { width: calc(100% - 28px); gap: 42px; } .csxhero91-section .csxhero91-title { font-size: 29px; letter-spacing: -2px; } .csxhero91-section .csxhero91-description { font-size: 14px; } .csxhero91-section .csxhero91-features { flex-direction: column; align-items: center; gap: 12px; } .csxhero91-section .csxhero91-contact-card { padding: 20px 16px; border-radius: 17px; } } .drscontactx-section { position: relative; overflow: hidden; padding: 90px 0 105px; font-family: Arial, Helvetica, sans-serif; background: radial-gradient( circle at 12% 52%, rgba(118, 184, 42, .055), transparent 25% ), radial-gradient( circle at 87% 25%, rgba(118, 184, 42, .04), transparent 25% ), #f6f8fa; } /* ============================== CONTAINER ============================== */ .drscontactx-section .drscontactx-container { width: min(1120px, calc(100% - 40px)); margin: 0 auto; } /* ============================== HEADING ============================== */ .drscontactx-section .drscontactx-heading { max-width: 680px; margin: 0 auto 42px; text-align: center; } .drscontactx-section .drscontactx-badge { width: fit-content; margin: 0 auto 16px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 30px; border: 1px solid rgba(118, 184, 42, .25); background: rgba(118, 184, 42, .09); color: #659f1d; font-size: 10px; font-weight: 700; } .drscontactx-section .drscontactx-badge-dot { width: 6px; height: 6px; display: block; border-radius: 50%; background: #76b82a; box-shadow: 0 0 0 4px rgba(118, 184, 42, .09); } .drscontactx-section .drscontactx-title { margin: 0; color: #171f25; font-size: clamp(35px, 4vw, 51px); line-height: 1.08; letter-spacing: -2px; font-weight: 700; } .drscontactx-section .drscontactx-title span { display: block; color: #76b82a; } .drscontactx-section .drscontactx-subtitle { max-width: 590px; margin: 14px auto 0; color: #7b858d; font-size: 12px; line-height: 1.7; } /* ============================== MAIN GRID ============================== */ .drscontactx-section .drscontactx-grid { display: grid; grid-template-columns: 1.43fr 1fr; gap: 25px; align-items: stretch; } /* ============================== FORM CARD ============================== */ .drscontactx-section .drscontactx-form-card { position: relative; padding: 26px; border-radius: 15px; border: 1px solid #dce3e9; background: #ffffff; box-shadow: 0 15px 45px rgba(20, 35, 50, .075); } /* ============================== FORM HEAD ============================== */ .drscontactx-section .drscontactx-form-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 19px; margin-bottom: 22px; border-bottom: 1px solid #e4e9ed; } .drscontactx-section .drscontactx-form-head-left { position: relative; } .drscontactx-section .drscontactx-small-label { display: block; margin-bottom: 7px; color: #72ad25; font-size: 8px; font-weight: 800; letter-spacing: .4px; } .drscontactx-section .drscontactx-form-title { margin: 0; color: #16212b; font-size: 19px; line-height: 1.2; font-weight: 600; } .drscontactx-section .drscontactx-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; white-space: nowrap; border-radius: 20px; border: 1px solid #cfeab9; background: #eff9e7; color: #579718; font-size: 8px; font-weight: 700; } .drscontactx-section .drscontactx-status-dot { width: 6px; height: 6px; display: block; border-radius: 50%; background: #71ba24; box-shadow: 0 0 0 4px rgba(113, 186, 36, .08); animation: drscontactxStatusPulse 2s ease-in-out infinite; } /* ============================== FORM ============================== */ .drscontactx-section .drscontactx-form { position: relative; } .drscontactx-section .drscontactx-form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 17px; } .drscontactx-section .drscontactx-field { position: relative; } .drscontactx-section .drscontactx-field-full { margin-bottom: 17px; } .drscontactx-section .drscontactx-field label { display: block; margin-bottom: 7px; color: #26333e; font-size: 9px; font-weight: 700; } /* ============================== INPUT WRAPPER ============================== */ .drscontactx-section .drscontactx-input-wrap { position: relative; width: 100%; display: flex; align-items: center; border: 1px solid #d7dfe6; border-radius: 7px; background: #fafbfd; transition: border-color .25s ease, box-shadow .25s ease, background .25s ease; } .drscontactx-section .drscontactx-input-wrap:focus-within { border-color: rgba(118, 184, 42, .7); background: #ffffff; box-shadow: 0 0 0 3px rgba(118, 184, 42, .08); } .drscontactx-section .drscontactx-input-wrap > svg { position: absolute; left: 13px; width: 14px; height: 14px; fill: none; stroke: #a0abb3; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; transition: stroke .25s ease; } .drscontactx-section .drscontactx-input-wrap:focus-within > svg { stroke: #76b82a; } /* ============================== INPUT ELEMENTS ============================== */ .drscontactx-section .drscontactx-input-wrap input, .drscontactx-section .drscontactx-input-wrap select, .drscontactx-section .drscontactx-input-wrap textarea { width: 100%; border: 0; outline: 0; background: transparent; color: #26313a; font-family: Arial, Helvetica, sans-serif; font-size: 10px; } .drscontactx-section .drscontactx-input-wrap input, .drscontactx-section .drscontactx-input-wrap select { height: 41px; padding: 0 13px 0 39px; } .drscontactx-section .drscontactx-input-wrap input::placeholder, .drscontactx-section .drscontactx-input-wrap textarea::placeholder { color: #a2abb2; } .drscontactx-section .drscontactx-input-wrap select { color: #7d878f; cursor: pointer; } .drscontactx-section .drscontactx-input-wrap select option { color: #26313a; background: #ffffff; } /* ============================== TEXTAREA ============================== */ .drscontactx-section .drscontactx-textarea-wrap { align-items: flex-start; } .drscontactx-section .drscontactx-textarea-wrap > svg { top: 14px; } .drscontactx-section .drscontactx-textarea-wrap textarea { min-height: 107px; padding: 13px 13px 13px 39px; line-height: 1.6; resize: vertical; } /* ============================== FORM FOOTER ============================== */ .drscontactx-section .drscontactx-form-footer { margin-top: 22px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } /* ============================== CONSENT ============================== */ .drscontactx-section .drscontactx-consent { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; } .drscontactx-section .drscontactx-consent input { position: absolute; opacity: 0; pointer-events: none; } .drscontactx-section .drscontactx-checkbox { position: relative; flex: 0 0 14px; width: 14px; height: 14px; border-radius: 3px; border: 1px solid #cbd4dc; background: #ffffff; transition: background .25s ease, border-color .25s ease; } .drscontactx-section .drscontactx-consent input:checked + .drscontactx-checkbox { border-color: #76b82a; background: #76b82a; } .drscontactx-section .drscontactx-consent input:checked + .drscontactx-checkbox::after { content: ""; position: absolute; width: 5px; height: 8px; left: 4px; top: 1px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate(45deg); } .drscontactx-section .drscontactx-consent-text { color: #707b84; font-size: 8px; line-height: 1.45; } /* ============================== SUBMIT BUTTON ============================== */ .drscontactx-section .drscontactx-submit { min-height: 43px; padding: 5px 6px 5px 17px; border: 0; display: inline-flex; align-items: center; gap: 15px; border-radius: 8px; cursor: pointer; background: linear-gradient( 135deg, #82c72f, #68a91c ); color: #ffffff; font-family: Arial, Helvetica, sans-serif; box-shadow: 0 10px 22px rgba(109, 172, 29, .23); transition: transform .3s ease, box-shadow .3s ease; } .drscontactx-section .drscontactx-submit:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(109, 172, 29, .31); } .drscontactx-section .drscontactx-submit-text { font-size: 9px; font-weight: 700; } .drscontactx-section .drscontactx-submit-icon { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 7px; background: rgba(255, 255, 255, .16); } .drscontactx-section .drscontactx-submit-icon svg { width: 14px; height: 14px; fill: none; stroke: #ffffff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .3s ease; } .drscontactx-section .drscontactx-submit:hover .drscontactx-submit-icon svg { transform: translateX(3px); } /* ============================== INFO CARD ============================== */ .drscontactx-section .drscontactx-info-card { position: relative; overflow: hidden; padding: 27px 25px; border-radius: 15px; background: radial-gradient( circle at 90% 0%, rgba(118, 184, 42, .09), transparent 36% ), linear-gradient( 145deg, #192127, #10161b ); box-shadow: 0 18px 42px rgba(18, 30, 40, .13); } .drscontactx-section .drscontactx-info-card::before { content: ""; position: absolute; width: 190px; height: 190px; top: -100px; right: -90px; border-radius: 50%; border: 1px solid rgba(118, 184, 42, .09); } /* ============================== INFO ICON ============================== */ .drscontactx-section .drscontactx-info-icon { position: relative; z-index: 2; width: 43px; height: 43px; margin-bottom: 16px; display: grid; place-items: center; border-radius: 9px; border: 1px solid rgba(118, 184, 42, .28); background: rgba(118, 184, 42, .065); } .drscontactx-section .drscontactx-info-icon svg { width: 19px; height: 19px; fill: none; stroke: #83c72d; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } /* ============================== INFO TEXT ============================== */ .drscontactx-section .drscontactx-info-label { position: relative; z-index: 2; display: block; margin-bottom: 4px; color: #82c52e; font-size: 8px; font-weight: 700; } .drscontactx-section .drscontactx-info-title { position: relative; z-index: 2; max-width: 340px; margin: 0; color: #ffffff; font-size: 22px; line-height: 1.2; letter-spacing: -.5px; font-weight: 700; } .drscontactx-section .drscontactx-info-text { position: relative; z-index: 2; margin: 12px 0 0; color: #a6afb5; font-size: 10px; line-height: 1.7; } /* ============================== STEPS ============================== */ .drscontactx-section .drscontactx-steps { position: relative; z-index: 2; margin-top: 27px; display: flex; flex-direction: column; gap: 9px; } .drscontactx-section .drscontactx-step { padding: 11px 12px; display: flex; align-items: center; gap: 12px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .035); transition: transform .3s ease, border-color .3s ease, background .3s ease; } .drscontactx-section .drscontactx-step:hover { transform: translateX(5px); border-color: rgba(118, 184, 42, .30); background: rgba(118, 184, 42, .055); } .drscontactx-section .drscontactx-step-number { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; color: #83c82d; background: rgba(118, 184, 42, .08); font-size: 8px; font-weight: 800; } .drscontactx-section .drscontactx-step-content { position: relative; } .drscontactx-section .drscontactx-step-content strong { display: block; margin-bottom: 3px; color: #f3f5f6; font-size: 9px; font-weight: 700; } .drscontactx-section .drscontactx-step-content p { margin: 0; color: #78848c; font-size: 7px; line-height: 1.45; } /* ============================== PRIVACY ============================== */ .drscontactx-section .drscontactx-privacy { position: relative; z-index: 2; margin-top: 23px; padding-top: 19px; display: flex; align-items: center; gap: 11px; border-top: 1px solid rgba(255, 255, 255, .08); } .drscontactx-section .drscontactx-privacy-icon { flex: 0 0 36px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 8px; background: rgba(118, 184, 42, .07); } .drscontactx-section .drscontactx-privacy-icon svg { width: 16px; height: 16px; fill: none; stroke: #7fc12b; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .drscontactx-section .drscontactx-privacy-content { position: relative; } .drscontactx-section .drscontactx-privacy-content strong { display: block; margin-bottom: 3px; color: #f0f3f4; font-size: 8px; } .drscontactx-section .drscontactx-privacy-content p { margin: 0; color: #727e85; font-size: 7px; line-height: 1.5; } /* ============================== ANIMATION ============================== */ @keyframes drscontactxStatusPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(113, 186, 36, .08); } 50% { box-shadow: 0 0 0 7px rgba(113, 186, 36, 0); } } /* ============================== TABLET ============================== */ @media (max-width: 900px) { .drscontactx-section .drscontactx-grid { grid-template-columns: 1fr; } } /* ============================== MOBILE ============================== */ @media (max-width: 600px) { .drscontactx-section { padding: 70px 0; } .drscontactx-section .drscontactx-container { width: calc(100% - 26px); } .drscontactx-section .drscontactx-heading { margin-bottom: 30px; } .drscontactx-section .drscontactx-title { font-size: 35px; letter-spacing: -1.5px; } .drscontactx-section .drscontactx-form-card { padding: 21px 17px; } .drscontactx-section .drscontactx-info-card { padding: 24px 20px; } .drscontactx-section .drscontactx-form-head { align-items: flex-start; } .drscontactx-section .drscontactx-form-row { grid-template-columns: 1fr; } .drscontactx-section .drscontactx-form-footer { flex-direction: column; align-items: stretch; } .drscontactx-section .drscontactx-submit { width: 100%; justify-content: space-between; } } /* ===================================================== PRIVACY ===================================================== */ .contactSupportPanel__privacy { position: relative; z-index: 2; display: flex; align-items: flex-start; gap: 10px; margin-top: 23px; padding-top: 19px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .contactSupportPanel__privacy > div { width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 121, 0, 0.08); } .contactSupportPanel__privacy svg { width: 17px; height: 17px; fill: none; stroke: var(--hero-orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .contactSupportPanel__privacy p { margin: 0; color: rgba(255, 255, 255, 0.48); font-size: 10px; line-height: 1.55; } .contactSupportPanel__privacy strong { display: block; margin-bottom: 2px; color: rgba(255, 255, 255, 0.82); font-size: 11px; } /* ===================================================== REVEAL ===================================================== */ .contactFormReveal { opacity: 0; transform: translateY(30px); will-change: opacity, transform; transition: opacity 0.7s ease var(--cf-delay, 0ms), transform 0.75s cubic-bezier(0.2, 0.75, 0.2, 1) var(--cf-delay, 0ms); } .contactFormReveal--right { transform: translateX(38px); } .contactFormReveal.contactFormShow { opacity: 1; transform: translate(0, 0); } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991.98px) { .contactFormSec { padding: 60px 0; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 575.98px) { .contactFormSec { padding: 45px 0; } .contactFormSec__tag { font-size: 16px; } .contactFormSec__head h2 { font-size: 31px; line-height: 1.13; } .contactFormSec__head p, .contactSupportPanel__hero p { font-size: 16px; } .contactFormBox { padding: 20px 15px; border-radius: 16px; } .contactFormBox__top { align-items: flex-start; flex-direction: column; } .contactPageForm__bottom { align-items: stretch; flex-direction: column; } .contactSubmitBtn { width: 100%; } .contactSupportPanel { padding: 22px 17px; border-radius: 16px; } .contactSupportPanel__hero h3 { font-size: 24px; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { .contactFormReveal { opacity: 1 !important; transform: none !important; transition: none !important; } .contactFormSec__glow, .contactFormSec__tag span, .contactFormBox__status i { animation: none !important; } } /*-------------------------privacy policy css-----------------------------------------*/ :root { --privacy2-navy: #071c43; --privacy2-dark: #04142f; --privacy2-light: #0c2b5c; --privacy2-orange: #7CB12D; --privacy2-orange-light: #ff9a35; --privacy2-white: #ffffff; --privacy2-text: #647184; --privacy2-border: #e7ebf1; } /* ===================================================== NEW PRIVACY HERO ===================================================== */ .privacyHeroNew { position: relative; width: 100%; overflow: hidden; padding: 72px 0; background: linear-gradient(125deg, #f5f8fc 0%, #ffffff 46%, #fff5eb 100%); } /* ===================================================== BACKGROUND SHAPES ===================================================== */ .privacyHeroNew__shape { position: absolute; border-radius: 50%; pointer-events: none; } .privacyHeroNew__shape--one { width: 430px; height: 430px; right: -210px; top: -230px; background: radial-gradient(circle, rgba(255, 121, 0, 0.14), transparent 68%); animation: privacyNewFloatOne 8s ease-in-out infinite; } .privacyHeroNew__shape--two { width: 320px; height: 320px; left: -170px; bottom: -210px; background: radial-gradient(circle, rgba(7, 28, 67, 0.07), transparent 70%); animation: privacyNewFloatTwo 10s ease-in-out infinite; } @keyframes privacyNewFloatOne { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } @keyframes privacyNewFloatTwo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(12px); } } /* ===================================================== LEFT CONTENT ===================================================== */ .privacyHeroNew__content { position: relative; z-index: 3; max-width: 720px; } /* BREADCRUMB */ .privacyHeroNew__breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 19px; font-size: 13px; } .privacyHeroNew__breadcrumb a { color: var(--privacy2-text); text-decoration: none; transition: color 0.25s ease; } .privacyHeroNew__breadcrumb a:hover { color: var(--privacy2-orange); } .privacyHeroNew__breadcrumb > span { color: #b8c0ca; } .privacyHeroNew__breadcrumb strong { color: var(--privacy2-orange); font-weight: 700; } /* LABEL */ .privacyHeroNew__label { width: fit-content; display: flex; align-items: center; gap: 9px; margin-bottom: 16px; padding: 8px 12px; border: 1px solid rgba(255, 121, 0, 0.16); border-radius: 100px; background: rgba(255, 121, 0, 0.07); color: var(--privacy2-orange); font-size: 16px; font-weight: 700; } .privacyHeroNew__label > span { width: 8px; height: 8px; border-radius: 50%; background: var(--privacy2-orange); } /* HEADING */ .privacyHeroNew h1 { margin: 0 0 19px; color: var(--privacy2-navy); font-size: clamp(42px, 4.1vw, 60px); line-height: 1.04; letter-spacing: -1.7px; font-weight: 700; } .privacyHeroNew h1 span { display: block; margin-top: 5px; color: var(--privacy2-orange); } /* DESCRIPTION */ .privacyHeroNew__content > p { max-width: 650px; margin: 0 0 25px; color: var(--privacy2-text); font-size: 16px; line-height: 1.72; } /* ===================================================== HIGHLIGHTS ===================================================== */ .privacyHeroNew__highlights { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; } .privacyHeroNew__highlights > div { display: flex; align-items: center; gap: 7px; color: var(--privacy2-navy); font-size: 13px; font-weight: 600; } .privacyHeroNew__highlights i { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; background: rgba(255, 121, 0, 0.09); color: var(--privacy2-orange); font-size: 9px; font-style: normal; } /* ===================================================== RIGHT CARD ===================================================== */ .privacyHeroNewCard { position: relative; z-index: 3; max-width: 450px; margin-left: auto; overflow: hidden; padding: 28px; border-radius: 22px; background: linear-gradient( 145deg, var(--privacy2-dark), var(--privacy2-light) ); box-shadow: 0 28px 65px rgba(7, 28, 67, 0.18); } .privacyHeroNewCard::before { content: ""; position: absolute; width: 230px; height: 230px; right: -135px; top: -145px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 121, 0, 0.28), transparent 70%); } /* SHIELD */ .privacyHeroNewCard__shield { position: relative; z-index: 2; width: 62px; height: 62px; display: grid; place-items: center; margin-bottom: 20px; border: 1px solid rgba(255, 121, 0, 0.18); border-radius: 16px; background: rgba(255, 121, 0, 0.1); } .privacyHeroNewCard__shield svg { width: 29px; height: 29px; fill: none; stroke: var(--privacy2-orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* SMALL LABEL */ .privacyHeroNewCard__small { position: relative; z-index: 2; display: block; margin-bottom: 6px; color: var(--privacy2-orange); font-size: 10px; font-weight: 700; } /* CARD HEADING */ .privacyHeroNewCard h2 { position: relative; z-index: 2; margin: 0 0 12px; color: var(--privacy2-white); font-size: 27px; line-height: 1.18; } /* CARD TEXT */ .privacyHeroNewCard > p { position: relative; z-index: 2; margin: 0 0 20px; color: rgba(255, 255, 255, 0.58); font-size: 16px; line-height: 1.65; } /* ===================================================== LIST ===================================================== */ .privacyHeroNewCard__list { position: relative; z-index: 2; display: grid; gap: 9px; } .privacyHeroNewCard__list > div { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 11px; background: rgba(255, 255, 255, 0.045); transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease; } .privacyHeroNewCard__list > div:hover { transform: translateX(4px); border-color: rgba(255, 121, 0, 0.18); background: rgba(255, 121, 0, 0.06); } .privacyHeroNewCard__list span { width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center; border-radius: 9px; background: rgba(255, 121, 0, 0.1); color: var(--privacy2-orange); font-size: 9px; font-weight: 700; } .privacyHeroNewCard__list strong { color: rgba(255, 255, 255, 0.82); font-size: 11px; font-weight: 600; } /* ===================================================== DATE ===================================================== */ .privacyHeroNewCard__date { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .privacyHeroNewCard__date span { color: rgba(255, 255, 255, 0.4); font-size: 9px; } .privacyHeroNewCard__date strong { color: var(--privacy2-orange); font-size: 11px; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991.98px) { .privacyHeroNew { padding: 58px 0; } .privacyHeroNewCard { max-width: 600px; margin: 10px auto 0; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 575.98px) { .privacyHeroNew { padding: 45px 0; } .privacyHeroNew__breadcrumb { font-size: 12px; } .privacyHeroNew__label { font-size: 16px; } .privacyHeroNew h1 { font-size: 35px; line-height: 1.08; letter-spacing: -1px; } .privacyHeroNew__content > p { font-size: 16px; } .privacyHeroNew__highlights { display: grid; gap: 9px; } .privacyHeroNewCard { padding: 21px 17px; border-radius: 17px; } .privacyHeroNewCard__shield { width: 53px; height: 53px; border-radius: 13px; } .privacyHeroNewCard h2 { font-size: 23px; } .privacyHeroNewCard > p { font-size: 16px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 390px) { .privacyHeroNew h1 { font-size: 31px; } } /* ===================================================== REDUCED MOTION ===================================================== */ @media (prefers-reduced-motion: reduce) { .privacyHeroNew__shape { animation: none !important; } } /*------------------------------------------------*/ /* ===================================================== PRIVACY BANNER ROOT ===================================================== */ :root { --privacy-navy: #071c43; --privacy-navy-dark: #04142f; --privacy-navy-light: #0c2b5c; --privacy-orange: #7CB12D; --privacy-orange-light: #ff9a35; --privacy-white: #ffffff; --privacy-text: #d3dbea; --privacy-muted: #9eabc0; --privacy-border: rgba(255, 255, 255, 0.11); } /* ===================================================== PRIVACY HERO ===================================================== */ .privacyHeroNew { position: relative; width: 100%; min-height: 500px; display: flex; align-items: center; overflow: hidden; padding: 68px 0; background: linear-gradient(135deg, #071c43 0%, #0a2552 55%, #103468 100%); opacity: 1 !important; visibility: visible !important; } /* ===================================================== CONTAINER ===================================================== */ .privacyHeroNew > .container { position: relative; z-index: 5; } /* ===================================================== BACKGROUND DECORATION ===================================================== */ .privacyHeroNew::before { content: ""; position: absolute; width: 420px; height: 420px; right: -180px; top: -220px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 121, 0, 0.18), transparent 70%); pointer-events: none; } .privacyHeroNew::after { content: ""; position: absolute; width: 320px; height: 320px; left: -180px; bottom: -200px; border-radius: 50%; background: radial-gradient( circle, rgba(255, 255, 255, 0.05), transparent 70% ); pointer-events: none; } /* ===================================================== OPTIONAL SHAPES ===================================================== */ .privacyHeroNew__shape { position: absolute; display: block !important; border-radius: 50%; opacity: 1 !important; visibility: visible !important; pointer-events: none; } .privacyHeroNew__shape--one { width: 300px; height: 300px; right: 5%; top: 40px; border: 1px solid rgba(255, 121, 0, 0.1); background: rgba(255, 121, 0, 0.025); } .privacyHeroNew__shape--two { width: 180px; height: 180px; right: 24%; bottom: -80px; border: 1px solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.018); } /* ===================================================== LEFT CONTENT ===================================================== */ .privacyHeroNew .privacyHeroNew__content { position: relative; z-index: 6; max-width: 720px; display: block !important; opacity: 1 !important; visibility: visible !important; transform: none !important; } /* ===================================================== BREADCRUMB ===================================================== */ .privacyHeroNew .privacyHeroNew__breadcrumb { display: flex !important; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 0; opacity: 1 !important; visibility: visible !important; font-size: 13px; } .privacyHeroNew .privacyHeroNew__breadcrumb a { color: rgba(255, 255, 255, 0.56); text-decoration: none; transition: color 0.25s ease; } .privacyHeroNew .privacyHeroNew__breadcrumb a:hover { color: var(--privacy-orange); } .privacyHeroNew .privacyHeroNew__breadcrumb > span { color: rgba(255, 255, 255, 0.3); } .privacyHeroNew .privacyHeroNew__breadcrumb strong { color: var(--privacy-orange); font-weight: 700; } /* ===================================================== LABEL ===================================================== */ .privacyHeroNew .privacyHeroNew__label { width: fit-content; display: flex !important; align-items: center; gap: 9px; margin-bottom: 15px; padding: 8px 12px; opacity: 1 !important; visibility: visible !important; border: 1px solid rgba(255, 121, 0, 0.25); border-radius: 100px; background: rgba(255, 121, 0, 0.08); color: var(--privacy-orange); font-size: 16px; font-weight: 700; } .privacyHeroNew .privacyHeroNew__label > span { width: 8px; height: 8px; display: block; flex: 0 0 8px; border-radius: 50%; background: var(--privacy-orange); } /* ===================================================== MAIN HEADING ===================================================== */ .privacyHeroNew .privacyHeroNew__content h1 { display: block !important; margin: 0 0 18px; padding: 0; opacity: 1 !important; visibility: visible !important; color: var(--privacy-white); font-size: clamp(42px, 4vw, 58px); line-height: 1.05; letter-spacing: -1.6px; font-weight: 700; transform: none !important; } .privacyHeroNew .privacyHeroNew__content h1 span { display: block; margin-top: 5px; color: var(--privacy-orange); } /* ===================================================== DESCRIPTION ===================================================== */ .privacyHeroNew .privacyHeroNew__content > p { display: block !important; max-width: 650px; margin: 0 0 24px; opacity: 1 !important; visibility: visible !important; color: var(--privacy-text); font-size: 16px; line-height: 1.72; } /* ===================================================== HIGHLIGHTS ===================================================== */ .privacyHeroNew .privacyHeroNew__highlights { display: flex !important; align-items: center; flex-wrap: wrap; gap: 10px 18px; opacity: 1 !important; visibility: visible !important; } .privacyHeroNew .privacyHeroNew__highlights > div { display: flex; align-items: center; gap: 7px; color: rgba(255, 255, 255, 0.78); font-size: 13px; font-weight: 600; } .privacyHeroNew .privacyHeroNew__highlights i { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border-radius: 50%; background: rgba(255, 121, 0, 0.12); color: var(--privacy-orange); font-size: 9px; font-style: normal; } /* ===================================================== RIGHT CARD ===================================================== */ .privacyHeroNew .privacyHeroNewCard { position: relative; z-index: 6; width: 100%; max-width: 450px; display: block !important; margin-left: auto; overflow: hidden; padding: 27px; opacity: 1 !important; visibility: visible !important; transform: none !important; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 21px; background: rgba(255, 255, 255, 0.97); box-shadow: 0 28px 60px rgba(0, 0, 0, 0.2); } /* ===================================================== CARD DECORATION ===================================================== */ .privacyHeroNew .privacyHeroNewCard::before { content: ""; position: absolute; width: 180px; height: 180px; right: -110px; top: -110px; border-radius: 50%; background: var(--privacy-orange); opacity: 0.06; } /* ===================================================== SHIELD ===================================================== */ .privacyHeroNew .privacyHeroNewCard__shield { position: relative; z-index: 2; width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 14px; background: var(--privacy-navy); box-shadow: 0 11px 25px rgba(7, 28, 67, 0.14); } .privacyHeroNew .privacyHeroNewCard__shield svg { width: 27px; height: 27px; fill: none; stroke: var(--privacy-orange); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } /* ===================================================== CARD SMALL LABEL ===================================================== */ .privacyHeroNew .privacyHeroNewCard__small { position: relative; z-index: 2; display: block; margin-bottom: 5px; color: var(--privacy-orange); font-size: 10px; font-weight: 700; } /* ===================================================== CARD HEADING ===================================================== */ .privacyHeroNew .privacyHeroNewCard h2 { position: relative; z-index: 2; display: block !important; margin: 0 0 11px; opacity: 1 !important; visibility: visible !important; color: var(--privacy-navy); font-size: 25px; line-height: 1.2; font-weight: 700; } /* ===================================================== CARD DESCRIPTION ===================================================== */ .privacyHeroNew .privacyHeroNewCard > p { position: relative; z-index: 2; display: block !important; margin: 0 0 18px; opacity: 1 !important; visibility: visible !important; color: #687587; font-size: 16px; line-height: 1.62; } /* ===================================================== CARD LIST ===================================================== */ .privacyHeroNew .privacyHeroNewCard__list { position: relative; z-index: 2; display: grid !important; gap: 8px; opacity: 1 !important; visibility: visible !important; } .privacyHeroNew .privacyHeroNewCard__list > div { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 9px 10px; border: 1px solid #e7ebf1; border-radius: 10px; background: #f8fafc; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; } .privacyHeroNew .privacyHeroNewCard__list > div:hover { transform: translateX(3px); border-color: rgba(255, 121, 0, 0.22); background: #ffffff; } .privacyHeroNew .privacyHeroNewCard__list span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 8px; background: rgba(255, 121, 0, 0.09); color: var(--privacy-orange); font-size: 9px; font-weight: 700; } .privacyHeroNew .privacyHeroNewCard__list strong { color: var(--privacy-navy); font-size: 11px; font-weight: 600; line-height: 1.4; } /* ===================================================== LAST UPDATED ===================================================== */ .privacyHeroNew .privacyHeroNewCard__date { position: relative; z-index: 2; display: flex !important; align-items: center; justify-content: space-between; gap: 12px; margin-top: 18px; padding-top: 14px; opacity: 1 !important; visibility: visible !important; border-top: 1px solid #e7ebf1; } .privacyHeroNew .privacyHeroNewCard__date span { color: #8792a1; font-size: 9px; } .privacyHeroNew .privacyHeroNewCard__date strong { color: var(--privacy-orange); font-size: 11px; } /* ===================================================== IMPORTANT VISIBILITY FIX ===================================================== */ .privacyHeroNew, .privacyHeroNew *, .privacyHeroNew .row, .privacyHeroNew [class*="col-"] { visibility: visible; } .privacyHeroNew .privacyHeroNew__content, .privacyHeroNew .privacyHeroNew__breadcrumb, .privacyHeroNew .privacyHeroNew__label, .privacyHeroNew .privacyHeroNew__highlights, .privacyHeroNew .privacyHeroNewCard, .privacyHeroNew .privacyHeroNewCard__list, .privacyHeroNew .privacyHeroNewCard__date { opacity: 1 !important; visibility: visible !important; } /* ===================================================== DISABLE OLD ANIMATION / REVEAL CONFLICT ===================================================== */ .privacyHeroNew [class*="Reveal"], .privacyHeroNew [class*="reveal"], .privacyHeroNew .fade, .privacyHeroNew .fade-in, .privacyHeroNew .hidden { opacity: 1 !important; visibility: visible !important; transform: none !important; animation: none !important; } /* ===================================================== LAPTOP ===================================================== */ @media (max-width: 1199.98px) { .privacyHeroNew .privacyHeroNew__content h1 { font-size: 49px; } .privacyHeroNew .privacyHeroNewCard { padding: 23px; } } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991.98px) { .privacyHeroNew { min-height: auto; padding: 58px 0; } .privacyHeroNew .privacyHeroNew__content { max-width: 800px; } .privacyHeroNew .privacyHeroNewCard { max-width: 610px; margin: 12px auto 0; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 575.98px) { .privacyHeroNew { padding: 44px 0; } .privacyHeroNew .privacyHeroNew__breadcrumb { margin-bottom: 14px; font-size: 12px; } .privacyHeroNew .privacyHeroNew__label { font-size: 16px; } .privacyHeroNew .privacyHeroNew__content h1 { font-size: 34px; line-height: 1.08; letter-spacing: -1px; } .privacyHeroNew .privacyHeroNew__content > p { font-size: 16px; } .privacyHeroNew .privacyHeroNew__highlights { display: grid !important; gap: 9px; } .privacyHeroNew .privacyHeroNewCard { padding: 19px 15px; border-radius: 16px; } .privacyHeroNew .privacyHeroNewCard__shield { width: 50px; height: 50px; } .privacyHeroNew .privacyHeroNewCard h2 { font-size: 22px; } .privacyHeroNew .privacyHeroNewCard > p { font-size: 16px; } } /* ===================================================== SMALL MOBILE ===================================================== */ @media (max-width: 390px) { .privacyHeroNew .privacyHeroNew__content h1 { font-size: 30px; } } /*-----------------------------------------------------second sec--------------------------------------*/ /* ===================================================== SIMPLE PRIVACY POLICY CONTENT ===================================================== */ .privacyPolicyContent { padding: 60px 0 80px; background: #ffffff; } .privacyPolicyContent__wrap { max-width: 980px; margin: 0 auto; } /* ===================================================== UPDATED DATE ===================================================== */ .privacyPolicyContent__updated { width: fit-content; margin-bottom: 8px; padding: 5px 9px; border-radius: 4px; background: #eef4ff; color: #1263d6; font-size: 11px; font-weight: 700; } /* ===================================================== MAIN HEADING ===================================================== */ .privacyPolicyContent h1 { margin: 0 0 10px; color: #071c43; font-size: 34px; line-height: 1.2; font-weight: 700; } /* ===================================================== INTRO ===================================================== */ .privacyPolicyContent__intro { margin: 0 0 28px; color: #5f6c7c; font-size: 16px; line-height: 1.75; } /* ===================================================== POLICY BLOCK ===================================================== */ .privacyPolicyBlock { padding: 0 0 24px; margin-bottom: 24px; border-bottom: 1px solid #dce3ec; } .privacyPolicyBlock h2 { margin: 0 0 10px; color: #071c43; font-size: 19px; line-height: 1.35; font-weight: 700; } .privacyPolicyBlock p { margin: 0 0 10px; color: #5f6c7c; font-size: 16px; line-height: 1.75; } .privacyPolicyBlock p:last-child { margin-bottom: 0; } /* ===================================================== LIST ===================================================== */ .privacyPolicyBlock ul { margin: 10px 0 0; padding-left: 20px; } .privacyPolicyBlock li { margin-bottom: 7px; padding-left: 4px; color: #5f6c7c; font-size: 15px; line-height: 1.65; } .privacyPolicyBlock li::marker { color: #7CB12D; } /* ===================================================== STRONG TEXT ===================================================== */ .privacyPolicyBlock strong { color: #071c43; font-weight: 700; } /* ===================================================== LAST BLOCK ===================================================== */ .privacyPolicyBlock--last { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; } /* ===================================================== TABLET ===================================================== */ @media (max-width: 991.98px) { .privacyPolicyContent { padding: 50px 0 65px; } } /* ===================================================== MOBILE ===================================================== */ @media (max-width: 575.98px) { .privacyPolicyContent { padding: 40px 0 55px; } .privacyPolicyContent h1 { font-size: 29px; } .privacyPolicyContent__intro, .privacyPolicyBlock p { font-size: 16px; } .privacyPolicyBlock h2 { font-size: 18px; } .privacyPolicyBlock { margin-bottom: 20px; padding-bottom: 20px; } .privacyPolicyBlock li { font-size: 15px; } } /* ===== Submenu auto-left (sirf tab jab right me cut ho) ===== */ @media (min-width: 1051px) { .site-header .submenu.submenu-left { left: auto; right: calc(100% + 9px); transform: translateX(-8px); } .site-header .has-submenu:hover > .submenu.submenu-left { transform: translateX(0); } /* hover bridge left side ki jagah right side me */ .site-header .submenu.submenu-left::before { left: auto; right: -12px; width: 12px; } }