/* FontAwesome CDN for icons (add in if not already there) */ @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"); /* ==== GLOBAL STYLES ==== */ :root { --bg: #f9fafc; --primary: #1c4e80; --accent: #0099ff; --text: #222; --text-light: #555; --card-bg: #fff; --border: #e0e6ee; --radius: 14px; --shadow: 0 6px 20px #7392ad; } body { margin: 0; font-family: "Poppins"; width: 100%; padding-top: 4.5rem; } html { scroll-behavior: smooth; } nav { top: 0; width: 100%; display: flex; position: fixed; z-index: 100; background-color: rgba(255, 255, 255, 0.2); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding: 0 1.25rem; box-shadow: 0 2px 0.63rem rgba(0, 0, 0, 0.2); } .nav-links { display: flex; width: 77%; justify-content: end; align-items: center; } .hamburger { display: none; font-size: 1.5rem; cursor: pointer; z-index: 1001; } nav a, .dropbtn { color: black; padding: 0.4rem 1rem; text-decoration: none; text-align: center; background: none; border: none; cursor: pointer; font-size: 1rem; display: inline-flex; } nav a.active { background-color: #004b8d; color: white; border-radius: 6px; } nav a:hover, .dropdown:hover .dropbtn { background-color: #004b8d; color: white; border-radius: 6px; } .dropdown { position: relative; display: inline-block; } .dropdown-content { display: none; position: absolute; top: 100%; left: 0; background: white; padding: 0.5rem 1rem; min-width: 10rem; box-shadow: 0 8px 1.5rem rgba(0, 0, 0, 0.12); border-radius: 6px; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; z-index: 999; } .dropdown-content a { color: black; padding: 0.5rem 1rem; text-decoration: none; display: flex; text-align: center; } .dropdown-content a:hover { background-color: #004b8d; } .dropdown:hover .dropdown-content { display: grid; } .dropdown:hover { display: grid; } .logo-title { width: 20%; display: flex; align-items: center; gap: 0.5vw; } .logo-title img { height: 4rem; } .logo-title h3 { font-size: large; align-content: center; margin: 0; } .logo-title p { font-size: smaller; color: #666; margin: 0; } section { width: 100%; } .root-sec, .root-bot, .root-api, .root-cloud, .root-ddos, .root-ent-sec { width: 91.6%; text-align: center; /*background: linear-gradient(160deg, #d0e8ff 10%, #eaf3fe 30%, #ffffff 60%);*/ padding: 4rem; background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), /* black tint */ url(Images/ddos.png); background-size: cover; background-repeat: no-repeat; background-position: center; } .root-sec svg, .root-bot svg, .root-api svg, .root-cloud svg, .root-ddos svg, .root-ent-sec svg { height: 6rem; width: 6rem; border-radius: var(--radius); background-color: var(--card-bg); color: #004b8d; } .root-sec_title, .root-bot_title, .root-api_title, .root-cloud_title, .root-ddos_title, .root-ent-sec_title { justify-items: center; } .root-sec_title p, .root-bot_title p, .root-api_title p, .root-cloud_title p, .root-ddos_title p, .root-ent-sec_title p { color: white; padding-top: none; font-size: x-large; padding-left: 30px; padding-right: 30px; padding-bottom: 2rem; width: 70%; } .root-sec_title h1, .root-bot_title h1, .root-api_title h1, .root-cloud_title h1, .root-ddos_title h1, .root-ent-sec_title h1 { color: White; font-size: 2.8rem; } .request { width: fit-content; border: none; border-radius: 6px; color: white; background-color: #004b8d; text-align-last: center; text-decoration: none; padding: 6px; font-size: smaller; } .request svg { vertical-align: middle; height: 1rem; } .request:hover { background-color: #1e6cb1; } .download { width: fit-content; border-radius: 6px; border: none; background-color: white; text-align: center; text-decoration: none; padding: 6px; font-size: smaller; } .download:hover { background-color: #004b8d; color: white; } .start { width: 100%; text-align: center; padding-top: 3rem; padding-bottom: 3rem; background-image: url(Images/palo%20alto.png); background-position: center; justify-items: center; } .start_title p { color: white; padding-top: none; font-size: large; padding-left: 10rem; padding-right: 10rem; } .start h1 { color: white; font-size: 2rem; } .start_btns { display: flex; padding: 2rem; justify-content: center; gap: 2vw; } .start_btn a { width: fit-content; height: 2.5rem; border: none; border-radius: 6px; font-size: 1rem; background-color: white; color: #004b8d; text-align: center; text-decoration: none; padding: 5px; } .start_btn a:hover { background-color: #95d4ff; } .start svg { width: 1rem; height: 1rem; vertical-align: middle; } .start_btn2 a { width: fit-content; height: 2.5rem; border: none; border-radius: 6px; font-size: 1rem; background-color: #004b8d; color: white; text-decoration: none; padding: 5px; } .start_btn2 a:hover { background-color: white; color: #004b8d; } .solution-custom { width: 100%; text-align-last: center; padding-top: 3.13rem; padding-bottom: 3.13rem; justify-items: center; background: url("Images/themes/Theme 2.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; } .deliverable { width: 100%; text-align-last: center; padding-top: 3.13rem; padding-bottom: 3.13rem; justify-items: center; background: linear-gradient( to bottom, transparent 0%, /* left transparent */ #f2f6fa 9%, /* start color */ #cce2f8 70%, /* end color */ transparent 100% /* right transparent */ ); } .multi-custom { width: 100%; text-align-last: center; padding-top: 3.13rem; padding-bottom: 3.13rem; justify-items: center; } .solution-custom_title h1 { font-size: 2rem; color: #38bdf8; } .deliverable_title h1 { font-size: 2rem; color: var(--primary); } .multi-custom_title h1 { font-size: 2rem; color: var(--primary); } .solution-custom_title p { font-size: large; color: #c5edff; margin-bottom: 0; } .deliverable_title p { font-size: large; color: #666; } .multi-custom_title p { font-size: large; color: #666; margin-bottom: 0; } .service, .multi { width: 70%; display: flex; padding: 2rem; justify-content: space-between; gap: 1vw; } .service-card, .multi-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; text-align: center; } .service-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem #004b8d; } .deliverable-report { width: 70%; display: flex; padding: 2rem; justify-content: space-between; gap: 1vw; } .report-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; text-align: center; } .report-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem #eef7ff; } .service-card h2 { font-size: medium; } .report-card h2 { font-size: medium; } .multi-card h2 { font-size: medium; margin-top: 0 } .service-card p, .multi-card p { font-size: small; color: #666; } .report-card p { font-size: smaller; } .service-card svg, .report-card svg { vertical-align: middle; border-radius: 6px; padding: 1rem; background-color: #c5edff; color: #004b8d; } .multi-card svg { vertical-align: middle; border-radius: var(--radius); color: #004b8d; height: 7rem; width: 7rem; padding-bottom: 0; } .cloud-service { width: 70%; display: flex; padding: 2rem; justify-content: space-between; gap: 1vw; } .cloud-service-card { border: 2px solid #e2e8f0; border-radius: 6px; padding: 1.25rem; text-align: center; } .cloud-service-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .cloud-service-card h2 { font-size: medium; } .cloud-service-card p { font-size: small; color: #666; } .cloud-service-card svg { vertical-align: middle; border-radius: 6px; color: #004b8d; height: 3rem; width: 3rem; } /*ENT-SEC*/ .ent-platform-container { padding: 50px 8%; text-align-last: center; background: linear-gradient( to bottom, transparent 0%, /* left transparent */ #f2f6fa 9%, /* start color */ #cce2f8 70%, /* end color */ transparent 100% /* right transparent */ ); } .ent-platform-container h1 { font-size: 2rem; color: var(--primary); } .ent-platform-container p { color: #666; font-size: large; width: 55%; justify-self: center; } .ent-platform-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; } .ent-platform-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; } .ent-platform-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .ent-platform-card p { font-size: smaller; width: 100%; } .ent-platform-title { display: grid; gap: 1vw; } .ent-platform-title h2 { margin: 0; font-size: larger; } .ent-platform-title svg { height: 7rem; width: 7rem; vertical-align: middle; border-radius: 6px; color: #004b8d; justify-self: center; } .solution ul { padding-left: 0; } .solution li { list-style: none; color: #3e3c3c; display: flex; font-size: smaller; } .solution span { color: #0088ff; padding-right: 0.5rem; font-size: large; } .solution svg { color: #004b8d; padding-right: 0.3rem; height: 1rem; } .secure { display: flex; gap: 2vw; padding: 2rem; padding-left: 4rem; padding-right: 4rem; } .w-sec { width: 50%; } .w-sec h2 { font-size: 2rem; color: var(--primary); } .w-sec p { font-size: larger; color: #666; } .w-sec ul { padding-left: 0; margin-top: 3rem; } .w-sec li { display: flex; gap: 0.5rem; margin-bottom: 1.2rem; } .w-sec svg { height: 1.5rem; color: #0088ff; } .w-sec span { font-size: medium; } .p-f { background: #38bdf8; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); } .palo { background-color: #d2eaff; margin-bottom: 1rem; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .palo h2 { font-size: larger; } .palo p { font-size: medium; color: #666; } .palo ul { padding-left: 0; } .palo li { list-style: none; font-size: small; } .palo span { font-size: medium; color: #0088ff; } .forti { background-color: #fffff0; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .forti h2 { font-size: larger; } .forti p { font-size: medium; color: #666; } .forti ul { padding-left: 0; } .forti li { list-style: none; font-size: small; } .forti span { font-size: medium; color: #0088ff; } /*API-SEC & DDOS*/ .api-platform-container, .ddos-platform-container { padding: 50px 8%; text-align-last: center; } .api-platform-container h1, .ddos-platform-container h1 { font-size: 2rem; color: var(--primary); } .api-platform-container p, .ddos-platform-container p { color: #666; font-size: large; width: 55%; justify-self: center; } .api-platform-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .ddos-platform-cards { display: grid; grid-template-columns: repeat(2, 1fr); width: 83%; padding-left: 8rem; padding-right: 8rem; text-align-last: left; gap: 1vw; } .ddos-platform-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; } .api-platform-card { border-radius: var(--radius); padding: 1.25rem; clip-path: polygon(0 0, 100% 0, 100% calc(100% - 30px), 50% 100%, 0 calc(100% - 30px)); background: #c8e4ff; transition: all 0.3s ease; border: 2px solid #cecece; } .api-platform-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem #0068c3; transform: translateY(-5px); } .hybrid { justify-items: center; } .hybrid-platform-card { width: 80%; text-align-last: center; justify-self: center; margin-top: 2rem; margin-bottom: 3rem; padding-left: 3rem; background: #38bdf8; border-radius: var(--radius); padding: 42px; box-shadow: var(--shadow); transition: all 0.3s ease; } .api-platform-card:hover, .ddos-platform-card:hover, .hybrid-platform-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .api-platform-card p, .ddos-platform-card p, .hybrid-platform-card p { font-size: smaller; width: 100%; } .hybrid-platform-card p { font-size: medium; width: 60%; justify-self: center; } .api-platform-title h2, .ddos-platform-title h2, .hybrid-platform-title h2 { margin: 0; color: var(--primary); font-size: 1.1rem; } .ddos-platform-title svg { height: 2.5rem; width: 2.5rem; border-radius: 6px; color: #004b8d; background-color: #c5edff; padding: 0.7rem; } .hybrid-platform-title { gap: 0.5rem; justify-self: center; } .hybrid-platform-title svg { height: 8rem; width: 8rem; border-radius: 6px; color: #004b8d; } .hybrid-platform-title span { font-size: smaller; color: white; font-weight: normal; } .s-feature-cont { display: flex; gap: 0.5rem; justify-content: left; } .s-feature { font-size: small; border-radius: 6px; background-color: #4b7eaa; width: fit-content; padding-left: 0.5rem; padding-right: 0.5rem; color: white; } .solution-ddos { display: flex; justify-self: center; gap: 1rem } .solution-ddos ul { padding-left: 0; } .solution-ddos li { list-style: none; color: #3e3c3c; display: flex; font-size: smaller; } .hybrid-benefit { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; } .hybrid-benefit ul { padding-left: 0; } .hybrid-benefit li { list-style: none; color: #3e3c3c; display: flex; font-size: smaller; margin-bottom: 0.5rem; } .hybrid-benefit svg { color: #004b8d; height: 1rem; } .solution ul { padding-left: 0; } .solution li { list-style: none; color: #3e3c3c; display: flex; font-size: smaller; } /* ==== THREATS SECTION ==== */ .api-solution-custom { padding: 80px 8%; text-align: center; background: linear-gradient( to bottom, transparent 0%, /* left transparent */ #f2f6fa 9%, /* start color */ #cce2f8 70%, /* end color */ transparent 100% /* right transparent */ ); } .api-solution-custom_title h1 { font-size: 2rem; color: var(--primary); } .api-solution-custom_title p { font-size: large; color: #666; } .api-service { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .api-service-card { background: var(--card-bg); padding: 31px; border-radius: var(--radius); box-shadow: var(--shadow); } .api-service-card svg { color: var(--accent); margin-bottom: 12px; height: 2.5rem; width: 2.5rem; } .api-service-card h2 { color: var(--primary); font-size: 1.1rem; } .api-service-card p { color: #666; font-size: smaller; } /* ==== CAPABILITIES ==== */ .cap-platform-container { padding: 80px 8%; text-align: center; } .cap-platform-container h1 { font-size: 2rem; color: var(--primary); } .cap-platform-container p { font-size: large; color: #666; } .cap-platform-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; margin-top: 40px; } .cap-platform-card { background: var(--card-bg); border-radius: var(--radius); padding: 43px; box-shadow: var(--shadow); transition: all 0.3s ease; } .cap-platform-card:hover { transform: translateY(-5px); } .cap-platform-title img { height: 3rem; } .cap-platform-title svg { color: var(--accent); margin-bottom: 12px; height: 2.5rem; width: 2.5rem; } .cap-platform-card h2 { color: var(--primary); font-size: 1.1rem; } .cap-platform-card p { color: #666; font-size: small; } /*CLOUD-SEC*/ .cloud-platform-container { width: 100%; justify-items: center; padding-top: 2rem; padding-bottom: 4rem; text-align-last: center; } .cloud-platform-container h1 { font-size: 2rem; color: var(--primary); } .cloud-platform-container p { color: #666; font-size: larger; width: 50%; } .cloud-platform-cards { display: grid; grid-template-columns: repeat(2, 1fr); width: 96%; text-align-last: left; gap: 1vw; } .f-cloud-platform-cards { text-align-last: left; } .r-cloud { width: 100%; } .p-cloud { width: 100%; } .f-cloud { width: 100%; } .sol-cont { width: 100%; display: flex; gap: 1rem; } .cloud-title { width: 100%; text-align-last: center; } .cloud-title svg { border: none; height: 2rem; width: 2rem; vertical-align: middle; border-radius: 6px; padding: 0.5rem; background-color: #c5edff; color: #004b8d; } .cloud-platform-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; width: 50%; } .cloud-platform-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .cloud-platform-card p { font-size: smaller; width: 100%; } .cloud-platform-title { display: grid; gap: 1vw; } .cloud-platform-title h2 { margin: 0; font-size: larger; } .cloud-platform-title svg { border: none; height: 3rem; width: 3rem; vertical-align: middle; border-radius: 6px; padding: 0.5rem; background-color: #c5edff; color: #004b8d; } .c-feature-cont { display: flex; gap: 0.5rem; justify-content: center; } .c-feature { font-size: small; border-radius: 6px; background-color: #4b7eaa; width: fit-content; padding-left: 0.5rem; padding-right: 0.5rem; color: white; } .sec-matter { width: 90%; text-align-last: center; justify-self: center; margin-top: 2rem; margin-bottom: 3rem; padding-left: 3rem; background: #38bdf8; border-radius: var(--radius); padding: 42px; box-shadow: var(--shadow); transition: all 0.3s ease; } .sec-matter h2 { font-size: 2rem; color: var(--primary) } .sec-matter-cont { display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; text-align-last: left; } .matter { display: flex; gap: 1rem; background: var(--card-bg); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); transition: all 0.3s ease; } .matter svg { color: #004b8d; height: 4rem; width: 3.8rem } .matter h2 { font-size: large; margin-bottom: 0; } .matter p { font-size: small; margin-top: 0; color: #666; } /*PEN-TEST*/ .pen-platform-container { width: 100%; justify-items: center; padding-top: 2rem; padding-bottom: 2rem; text-align-last: center; background: linear-gradient( to bottom, transparent 0%, /* left transparent */ #f2f6fa 9%, /* start color */ #cce2f8 70%, /* end color */ transparent 100% /* right transparent */ ); } .pen-platform-container h1 { font-size: 2rem; color: var(--primary) } .pen-platform-container p { color: #666; font-size: larger; width: 50%; } .pen-platform-cards { display: grid; grid-template-columns: repeat(4, 1fr); width: 96%; text-align-last: left; gap: 1vw; } .pen-platform-title { width: 100%; text-align-last: left; } .pen-platform-title h2 { font-size: larger; } .pen-platform-title svg { border: none; height: 2rem; width: 2rem; vertical-align: middle; border-radius: 6px; padding: 0.5rem; background-color: #c5edff; color: #004b8d; } .pen-platform-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; min-height: 47vh; } .pen-platform-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .pen-platform-card h3 { font-size: medium; } .pen-platform-card p { font-size: smaller; width: 100%; } .test-scope ul { padding-left: 0; } .test-scope li { list-style: none; color: #3e3c3c; display: flex; font-size: smaller; } .test-scope span { color: #0088ff; padding-right: 0.5rem; font-size: large; } .test-scope svg { color: #004b8d; padding-right: 0.3rem; height: 1rem; } .method-cont { width: 85%; justify-items: center; padding-top: 2rem; padding-bottom: 2rem; text-align-last: center; background: var(--card-bg); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); justify-self: center; margin-bottom: 3rem; margin-top: 3rem; background: #0d1a2d; /* same dark navy tone as site */ } .method-cont h1 { font-size: 2rem; color: #38bdf8; /* cyan/blue highlight */ } .method-cont p { color: #94a3b8; /* muted gray-blue */ font-size: larger; width: 50%; } .methodology { width: 85%; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .method-steps { background: #112240; /* slightly lighter navy for contrast */ border-radius: var(--radius); padding: 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: transform 0.3s, box-shadow 0.3s; } .method-steps:hover { transform: translateY(-6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } .method-steps h2 { font-size: large; color: #38bdf8; } .method-steps p { font-size: medium; width: 100%; } .method-steps-cont { display: grid; grid-template-columns: repeat(2, 1fr); text-align-last: left; } .method-matter { display: flex; gap: 0.3rem; width: max-content; } .method-matter svg { color: #4eacff; height: 1.2rem; } .method-matter p { font-size: small; margin-top: 0; color: white; } .pentest-cont { width: 96%; padding: 2rem; justify-items: center; } .wps { width: 80%; text-align-last: center; background: #004b8d; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .wps h2 { font-size: xx-large; } .wps p { font-size: medium; } .why-pentest { width: 80%; text-align-last: center; background: #004b8d; border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 2rem; } .why-pentest h2 { font-size: 2rem; color: #38bdf8; margin-bottom: 0; } .why-pentest p { font-size: large; color: #c5edff; } .wps-matter-cont { display: grid; grid-template-columns: repeat(2, 1fr); text-align-last: left; justify-self: center; width: 98%; padding: 1rem; gap: 0.5rem; } .pentest { display: grid; grid-template-columns: repeat(2, 1fr); text-align-last: left; justify-self: center; width: 85%; padding: 1rem; gap: 0.5rem; } .wps-matter, .pt { display: flex; gap: 0.3rem; background: var(--card-bg); border-radius: var(--radius); padding: 5px; box-shadow: var(--shadow); } .point p { margin-bottom: 0; } .wps-matter svg, .pt svg { color: #004b8d; height: 1rem; } .wps-matter h2, .pt h2 { font-size: large; margin-bottom: 0; } .wps-matter p, .pt p{ font-size: small; margin-top: 0; color: #666; } /*LB*/ .lb-platform-container { padding: 50px 8%; text-align-last: center; background: linear-gradient( to bottom, transparent 0%, /* left transparent */ #f2f6fa 9%, /* start color */ #cce2f8 70%, /* end color */ transparent 100% /* right transparent */ ); } .lb-platform-container h1 { font-size: 2rem; color: var(--primary) } .lb-platform-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 24px; } .lb-platform-title { width: 100%; text-align-last: left; } .lb-platform-title h2 { font-size: larger; } .lb-platform-title svg { border: none; height: 5rem; width: 4rem; vertical-align: middle; border-radius: 6px; color: #004b8d; } .lb-platform-card { background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); transition: all 0.3s ease; min-height: 23vh; } .lb-platform-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .lb-platform-card p { font-size: smaller; width: 100%; color: #666; } .adv-cap-container { width: 90%; justify-items: center; text-align-last: center; background: #38bdf8; border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); justify-self: center; margin-bottom: 2rem; margin-top: 2rem, } .adv-cap-container h1 { font-size: 2rem; color: var(--primary); } .adv-caps { display: grid; grid-template-columns: repeat(2, 1fr); width: 80%; padding: 1rem; gap: 1rem; } .capability { background: var(--card-bg); border-radius: var(--radius); box-shadow: var(--shadow); } .capability h2 { font-size: larger; } .cap-ben { text-align-last: left; } .cap-ben ul { list-style: none; } .cap-ben li { color: #666; font-size: smaller; } .cap-ben span { color: #004b8d; font-size: large; margin-right: 0.5rem; } .benefit-container { width: 100%; justify-items: center; padding-top: 2rem; padding-bottom: 2rem; text-align-last: center; } .benefit-container h1 { font-size: xx-large; } .benefit-cont { width: 90%; display: flex; gap: 1rem; } .radware-lb { width: 100%; text-align-last: left; background: var(--card-bg); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); } .radware-lb-title h2 { font-size: larger; color: var(--primary); margin-bottom: 0; } .radware-lb-title p { color: #666; margin-top: 0; } .radware-lb h3 { font-size: medium; } .radware-lb p { color: #666; font-size: small; } .wps h3 { font-size: x-large; padding-top: 1rem; color: #38bdf8; } /*BOT*/ .bot-solution-container { padding: 60px 0%; justify-items: center; text-align-last: center; } .bot-solution-container h1 { font-size: 2rem; color: var(--primary) } .bot-solution-container p { color: #666; font-size: larger; width: 50%; } .bot-solution-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 20px; width: 90%; } .bot-solution-title { width: 100%; text-align-last: left; } .bot-solution-title h2 { font-size: larger; } .bot-solution-card { background: var(--card-bg); border-radius: var(--radius); padding: 43px; box-shadow: var(--shadow); transition: all 0.3s ease; } .bot-solution-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); } .bot-solution-card p { font-size: smaller; width: 100%; } .bot-solution ul { padding-left: 0; } .bot-solution li { list-style: none; color: #3e3c3c; display: flex; font-size: smaller; } bot-solution span { color: #0088ff; padding-right: 0.5rem; font-size: large; } .bot-solution svg { color: #004b8d; padding-right: 0.3rem; height: 1rem; } .bot-threats-container { padding: 60px 5%; text-align: center; background: linear-gradient( to bottom, transparent 0%, /* left transparent */ #0d1a2d 0%, /* start color */ #0d1a2d 5%, /* end color */ transparent 100% /* right transparent */ ); color: #f1f5f9; } .bot-threats-container h1 { font-size: 2rem; color: #38bdf8; } .bot-threats-container p { color: #94a3b8; font-size: larger; } .bot-threats-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .bot-threats-card { background: #112240; /* slightly lighter navy for contrast */ border-radius: 14px; padding: 30px 20px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4); transition: transform 0.3s, box-shadow 0.3s; } .bot-threats-card:hover { transform: translateY(-6px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } .bot-threats-card p { font-size: medium; } .bot-threats-title { display: grid; gap: 1vw; } .bot-threats-title h2 { margin: 0; font-size: larger; } .bot-threats-title svg { height: 3rem; width: 3rem; vertical-align: middle; color: #ff1111; justify-self: center; } .impact { display: flex; gap: 0.5rem; align-items: center; } .impact svg { color: darkcyan; width: 2rem; height: 2rem; } .impact p { font-size: small; text-align-last: left; } .detect-container { padding: 35px 14%; text-align: center; background: url("Images/themes/Theme 2.jpg"); background-position: center; background-size: cover; background-repeat: no-repeat; } .detect-container h1 { font-size: 2rem; color: #38bdf8; } .detect-container p { color: #c5edff; font-size: large; } .detect-cards { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } .detect-title { width: 100%; text-align-last: left; } .detect-title h2 { font-size: larger; } .detect-title svg { border: none; height: 2rem; width: 2rem; vertical-align: middle; border-radius: 6px; padding: 0.5rem; background-color: #c5edff; color: #004b8d; } .detect-card { background: var(--card-bg); border-radius: var(--radius); padding: 43px; box-shadow: var(--shadow); transition: all 0.3s ease; } .detect-card:hover { box-shadow: 1px 0.63rem 0.63rem 0.63rem rgba(0, 0, 0, 0.05); transform: translateY(-5px); } .detect-card p { font-size: smaller; width: 100%; color: #666; } .key-benefits-cont { padding: 60px 0%; } .key-benefits { width: 63%; text-align-last: center; border: 2px solid #e2e8f0; justify-self: center; padding-bottom: 1rem; background: var(--card-bg); border-radius: var(--radius); padding: 43px; box-shadow: var(--shadow); transition: all 0.3s ease; } .key-benefits h2 { font-size: xx-large; color: var(--primary) } .key-benefits p { font-size: medium; } .key-benefits-matter-cont { display: grid; grid-template-columns: repeat(2, 1fr); text-align-last: left; justify-self: center; width: 86%; padding: 1rem; } .key-benefits-matter { display: flex; gap: 0.3rem; } .key-benefits-matter svg { color: #004b8d; height: 1rem; } .key-benefits-matter h2 { font-size: large; margin-bottom: 0; } .key-benefits-matter p { font-size: small; margin-top: 0; color: #666; } /* FOOTER */ footer { width: 96%; background-color: #f9fafb; color: #333; padding: 2rem; padding-bottom: 0; font-family: "Poppins", sans-serif; } .footer-content { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2.5rem; } .footer-section { flex: 1 1 12.5rem; } .footer-section company { padding-bottom: 0; padding-top: 0; } footer .logo-name { display: flex; align-items: center; gap: 0.63rem; padding-top: 1rem; } .logo-name h3 { margin: 0; } .footer-logo img { color: white; width: 3.8rem; height: 3.8rem; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .footer-section h4 { margin-bottom: 0.75rem; font-weight: 600; } .footer-section ul { list-style: none; padding: 0; } .footer-section ul li { margin-bottom: 8px; } .footer-section ul li a { text-decoration: none; color: #555; } .footer-section ul li a:hover { color: #004b8d; } footer .tagline { font-size: 0.9rem; color: #777; margin: 0; } footer .description { margin: 0.75rem 0; font-size: 0.9rem; color: #555; } .social-icons a { margin-right: 0.63rem; font-size: 1rem; color: #555; } .social-icons a:hover { color: #004b8d; } .contact-info li { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; color: #555; } .newsletter { display: flex; margin-top: 0.63rem; gap: 0.5vw; } .newsletter input[type="email"] { padding: 8px 0.63rem; border: 1px solid #ccc; border-radius: 6px; flex: 1; } .newsletter button { padding: 0.5rem 1rem; border: none; background-color: #004b8d; color: white; border-radius: 6px; cursor: pointer; } .newsletter button:hover { background-color: #0361b0; } .footer-bottom { text-align: center; border-top: 1px solid #eee; margin-top: 2rem; padding-top: 0.63rem; font-size: 0.9rem; color: #777; } .footer-bottom a { color: #004b8d; text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } .newsletter button:hover { background-color: #0361b0; } .footer-bottom { text-align: center; border-top: 1px solid #eee; margin-top: 2rem; padding-top: 0.63rem; font-size: 0.9rem; color: #777; } .footer-bottom a { color: #004b8d; text-decoration: none; } .footer-bottom a:hover { text-decoration: underline; } /* Overlay background */ .privacy-overlay, .terms-overlay { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.7); display: none; /* hidden by default */ justify-content: center; align-items: center; z-index: 9999; backdrop-filter: blur(4px); } /* The card that holds the content */ .privacy-card, .terms-card { background: #ffffff; color: #333; max-width: 700px; width: 90%; padding: 2rem; border-radius: 12px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.3); position: relative; overflow-y: auto; max-height: 85vh; } /* Close button inside the loaded content */ .privacy-card .close-btn, .terms-card .close-btn { position: absolute; top: 10px; right: 15px; background: transparent; border: none; font-size: 1.6rem; cursor: pointer; color: #555; transition: transform 0.2s ease; } .privacy-card .terms-card .close-btn:hover { transform: scale(1.2); } /* Trigger link style */ #privacyLink, #termsLink { display: inline-block; color: #004b8d; cursor: pointer; } #privacyLink:hover, #termsLink:hover { color: #003d80; } /* Loading message */ .loading-message { text-align: center; font-size: 1.1rem; color: #555; } /* ==== RESPONSIVE ==== */ @media (max-width: 768px) { body { padding-top: 4rem; } nav { flex-direction: column; align-items: flex-start; width: 90%; } .nav-links { display: none; flex-direction: column; align-items: center; position: absolute; top: 65px; right: 0; background-color: #fff; width: 40%; padding: 15px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); z-index: 1000; } .nav-links.show { display: flex; width: 40%; background-color: rgba(255, 255, 255, 0.9); /* Light translucent */ backdrop-filter: blur(0.63rem); -webkit-backdrop-filter: blur(0.63rem); /* For Safari */ } .nav-links a, .dropbtn { padding: 5px 0; width: 60%; justify-content: center; } .dropdown-content a { font-size: small; } .dropdown { width: 100%; padding: 5px; } .dropdown-content { display: none; background-color: transparent; box-shadow: none; position: static; padding: 1px; justify-items: center; } .dropdown:hover .dropdown-content, .dropdown:hover { display: block; } .dropbtn { width: 100%; justify-content: center; } .logo-title { align-items: flex-start; width: 55%; } .logo-title img { width: 50px; height: 50px; padding-top: 5px; } .logo-title h3 { font-size: medium; padding-top: 12px; } .logo-title p { font-size: x-small; margin: 0; } .hamburger { display: block; position: absolute; right: 30px; top: 15px; z-index: 9999; color: #333; } }