* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
body {
padding-top: 90px;
}
main, section:first-of-type {
margin-top: 90px;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 90px;
background: #fff;
z-index: 1000;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.logo {
position: absolute;
top: 15px;
left: 20px;
z-index: 1001;
}
.logo img {
height: 60px;
display: block;
}
.nav-container {
max-width: 1000px;
margin: 0 auto;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding-left: 80px;
}
nav ul {
list-style: none;
display: flex;
gap: 30px;
margin: 0;
padding: 0;
flex-wrap: nowrap;
}
nav ul li {
font-size: 14px;
white-space: nowrap;
}
nav ul li a {
text-decoration: none;
color: #000;
font-weight: 600;
transition: color 0.3s;
}
nav ul li a:hover {
color: #1e90ff;
}
.menu-toggle {
display: none;
}
@media (max-width: 768px) {
nav ul {
flex-direction: column;
gap: 15px;
background: #fff;
position: absolute;
top: 70px;
right: 0;
padding: 20px;
display: none;
}
nav ul.show {
display: flex;
}
.menu-toggle {
display: block;
cursor: pointer;
font-size: 24px;
}
}
nav ul#nav-links li.dropdown {
position: relative;
}
nav ul#nav-links li.dropdown .dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 220px;
background: #fff;
border-radius: 2px;
margin-left: -50px;
z-index: 1000;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
nav ul#nav-links li.dropdown:hover .dropdown-menu {
display: block;
}
/* Dropdown inner items */
.line {
opacity: 0.5;
}
.new {
margin-top: 20px;
}
.text {
padding: 10px;
opacity: 0.9;
}
/* --- Mobile Responsive Dropdown --- */
@media (max-width: 768px) {
nav ul#nav-links li.dropdown {
width: 100%;
position: relative;
}
nav ul#nav-links li.dropdown .dropdown-menu {
position: static; /* stacked with menu */
width: 100%;
margin: 5px 0 0 0;
display: none;
box-shadow: none;
border: 1px solid #eee;
}
/* Show dropdown on click (when class 'open' is added via JS) */
nav ul#nav-links li.dropdown.open .dropdown-menu {
display: block;
}
/* Adjust inner links for mobile */
.text {
padding: 12px 15px;
font-size: 14px;
display: block;
}
}
/* Home Section Video Styling */
/* Home Section Video Styling */
.home-video-container {
position: relative;
width: 100%;
height: 87vh;
overflow: hidden;
max-height: 100vh;
}
.home-video-container video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Responsive height for smaller screens */
@media (max-width: 768px) {
.home-video-container {
height: 60vh;
}
}
@media (max-width: 480px) {
.home-video-container {
height: 50vh;
}
}
.home-video-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.5);
}
.home-video-overlay h1 {
color: #fff;
font-size: 3rem;
text-align: center;
font-family: 'Segoe UI', sans-serif;
text-shadow: 2px 2px 10px rgba(0,0,0,0.7);
}
/* Card Grid Layout */
.home-card-container {
padding: 60px 20px;
background-color: #f4f4f4;
font-family: 'Segoe UI', sans-serif;
}
.home-card-row {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 40px;
gap: 30px;
}
/* Flip Card Styles */
.home-flip-card {
background-color: transparent;
width: 320px;
height: 400px;
perspective: 1000px;
}
.home-flip-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.home-flip-card:hover .home-flip-inner {
transform: rotateY(180deg);
}
/* Front & Back Card Faces */
.home-card-front, .home-card-back {
position: absolute;
width: 100%;
height: 100%;
border-radius: 15px;
backface-visibility: hidden;
background-size: cover;
background-position: center;
color: white;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.home-card-front {
background-color: #333;
}
.home-card-back {
background-color: #444;
transform: rotateY(180deg);
}
/* Overlay & Text Content */
.home-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.8));
border-radius: 15px;
}
.home-content {
padding: 20px;
z-index: 1;
color: white;
}
.home-content h3 {
font-size: 1.5rem;
font-weight: 600;
text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.5);
}
.home-content ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 0.95rem;
line-height: 1.6;
}
.home-content ul li {
margin-bottom: 10px;
}
/* Optional: Responsive Design */
@media (max-width: 768px) {
.home-flip-card {
width: 90%;
height: 400px;
}
.home-video-overlay h1 {
font-size: 2rem;
padding: 0 20px;
}
}
.client-feedback-section {
padding: 80px 50px;
text-align: center;
background-color: #f8f9fb;
position: relative;
overflow: hidden;
}
.feedback-carousel {
max-width: 1200px;
width: 100%;
margin: auto;
position: relative;
overflow: hidden;
min-height: 300px; /* Ensures height doesn't collapse */
}
.feedback-wrapper {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
.feedback-card {
flex: 0 0 100%;
box-sizing: border-box;
padding: 0 20px;
padding-top : 20px;
animation: fadein 0.6s;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.feedback-icon {
width: 80px;
margin-bottom: 20px;
}
.feedback-title {
color: #000;
font-size: 14px;
font-weight: 600;
margin-bottom: 15px;
text-align: center;
}
.feedback-text {
color: #6c7580;
max-width: 800px;
margin: auto;
line-height: 1.6;
font-size: 14px;
text-align: center;
}
/* Arrows */
.feedback-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #000;
background: rgba(0, 0, 0, 0.1);
border: none;
padding: 8px 12px;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease;
border-radius: 4px;
}
.feedback-arrow:hover {
background: rgba(19, 18, 18, 0.6);
}
.feedback-arrow.left {
left: 20px;
}
.feedback-arrow.right {
right: 20px;
}
/* Animation for entry */
@keyframes fadein {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.global-presence {
padding: 60px 20px;
background: #fff;
text-align: center;
margin-bottom : 40px;
}
.section-titlo {
display : flex;
justify-content: center;
font-size : 32px;
font-weight: 700;
color: #0a0a0a;
margin-bottom: 40px;
}
.location-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.location-card {
background: #ffffff;
padding: 30px 20px;
width: 220px;
box-shadow: 0.1px 0 10px 20px rgba(0, 0, 0, 0.025);
transition: transform 0.3s ease;
}
.location-card:hover {
transform: translateY(-5px);
}
.flag-icon {
width: 70px;
height: 70px;
border-radius: 50%;
margin-bottom: 15px;
object-fit: cover;
}
.location-card h3 {
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 10px;
color: #111;
}
.location-card p {
font-size: 13px;
color: #687188;
line-height: 1.7;
}
/* ABOUT SECTION SLIDER */
.about-section {
position: relative;
width: 100%;
height: 90vh;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0;
transition: 0.6s ease-in-out;
z-index: 0;
}
.slide.active {
opacity: 1;
z-index: 1;
}
.about-section::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.slide-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #000;
background: rgba(255, 255, 255, 0.6);
border: none;
padding: 10px 16px;
cursor: pointer;
z-index: 3;
transition: background 0.3s ease;
border-radius: 4px;
display: inline-block; /* prevents full-width stretch */
width: auto; /* ensures background fits content */
height: auto;
}
.slide-arrow.about-left-arrow {
left: 20px;
}
.slide-arrow.about-right-arrow {
right: 20px;
}
.slide-arrow:hover {
background: rgba(0, 0, 0, 0.1);
}
/* Tablet Fix */
@media (max-width: 768px) {
.slide-arrow {
top: 45%; /* slightly above the center */
font-size: 1.5rem;
padding: 8px 12px;
}
}
/* Mobile Fix */
@media (max-width: 480px) {
.slide-arrow {
top: 40%;
font-size: 1.2rem;
padding: 6px 10px;
}
.slide-arrow.about-left-arrow {
left: 10px;
}
.slide-arrow.about-right-arrow {
right: 10px;
}
}
@media (max-width: 768px) {
.slide {
background-size: contain;
background-repeat: no-repeat;
}
}
/* Base */
.quick-tour-section {
padding: 60px 10%;
margin-bottom: 0;
background-color: #fff;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 40px;
}
.qt-left {
flex: 1 1 500px;
min-width: 280px;
}
.qt-right {
flex: 1 1 400px;
min-width: 250px;
text-align: center;
}
.qt-title {
font-size: 2rem;
font-weight: 700;
color: #000;
margin-bottom: 20px;
margin-top: -90px; /* kept from your original */
}
.qt-text {
color: #687188;
font-size: 14px;
line-height: 1.7;
margin-bottom: 15px;
}
.qt-list {
list-style: none;
padding-left: 0;
color: #687188;
font-size: 14px;
line-height: 1.6;
}
.qt-list li {
margin-bottom: 10px;
}
.qt-image {
width: 100%;
max-width: 410px;
border-radius: 12px;
height: 500px;
}
/* --- Responsive --- */
/* Large tablets */
@media (max-width: 1200px) {
.quick-tour-section {
padding: 60px 8%;
}
}
/* Tablets */
@media (max-width: 991px) {
.quick-tour-section {
padding: 50px 6%;
gap: 32px;
}
.qt-title {
margin-top: -40px; /* soften the lift */
font-size: 1.9rem;
}
}
/* Small tablets / large phones */
@media (max-width: 768px) {
.quick-tour-section {
flex-direction: column;
text-align: center;
padding: 45px 6%;
}
.qt-left, .qt-right {
min-width: 100%;
}
.qt-title {
margin-top: 0; /* reset the negative margin on small screens */
font-size: 1.8rem;
}
.qt-text,
.qt-list {
font-size: 13.5px;
}
.qt-list {
text-align: left; /* keep bullets aligned nicely */
margin: 0 auto;
max-width: 620px;
}
}
/* Phones */
@media (max-width: 576px) {
.quick-tour-section {
padding: 40px 5%;
}
.qt-title {
font-size: 1.6rem;
}
.qt-text,
.qt-list {
font-size: 13px;
}
}
.vision-mission-section {
display: flex;
justify-content: center;
gap: 30px;
padding: 60px 10%;
background: #fff;
flex-wrap: wrap;
}
.vision-mission-section .card {
background: #fff;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
overflow: hidden;
width: 100%;
max-width: 480px;
flex: 1 1 400px;
transition: transform 0.3s ease;
height : 400px;
}
.vision-mission-section .card:hover {
transform: translateY(-5px);
}
.vision-mission-section img {
width: 100%;
}
.card-content {
padding: 20px 25px;
text-align: center;
}
.card-content h3 {
font-size: 1.3rem;
margin-bottom: 12px;
font-weight: 700;
color: #000;
}
.card-content p {
font-size: 14px;
color: #687188;
line-height: 1.6;
}
.vissmiss {
display: block;
max-height: 250px;
width: 100%;
object-fit: cover;
}
.vision-mission-section .card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.awards-section {
padding: 1%;
text-align: center;
}
.awards-section p {
display: flex;
justify-content: center;
font-size: 25px;
font-weight: 500;
margin-bottom: 10px;
}
/* Carousel Container */
.carousel-container {
position: relative;
overflow: hidden;
max-width: 1300px;
margin: 0 auto;
}
/* Track for slides */
.carousel-track {
display: flex;
transition: transform 0.7s ease-in-out;
}
/* Individual slides */
.award-slide {
flex: 0 0 33.3333%;
padding: 15px;
}
.award-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s;
}
.award-card:hover {
transform: translateY(-5px);
}
.award-card img {
width: 100%;
height: auto;
object-fit: cover;
}
.award-card p {
padding: 15px;
font-weight: 600;
font-size: 15px;
color: #222;
}
/* Arrows */
.awards-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #000;
background: rgba(255, 255, 255, 0.7);
border: none;
padding: 8px 14px;
cursor: pointer;
z-index: 2;
border-radius: 4px;
transition: background 0.3s;
display: inline-block; /* Prevents background stretch */
width: auto;
}
.awards-arrow:hover {
background: rgba(0, 0, 0, 0.1);
}
.awards-arrow.left {
left: 10px;
}
.awards-arrow.right {
right: 10px;
}
/* Tablet View */
@media (max-width: 768px) {
.award-slide {
flex: 0 0 50%;
}
.awards-arrow.left {
left: 5px !important;
}
.awards-arrow.right {
right: 5px !important;
}
}
/* Mobile View */
@media (max-width: 480px) {
.award-slide {
flex: 0 0 100%;
}
.awards-arrow {
font-size: 1.5rem;
padding: 6px 10px;
}
}
.core-values-section {
background: #fff;
padding: 30px 80px;
text-align: center;
}
.core-values-section h2 {
font-size: 24px;
font-weight: 700;
margin-bottom: 50px;
color: #111;
}
.core-value {
max-width: 800px;
margin: 0 auto 20px auto;
}
.core-value h3 {
font-size: 1.3rem;
font-weight: 600;
color: #111;
margin-bottom: 10px;
}
.core-value p {
font-size: 14px;
line-height: 1.8;
color: #687188;
text-align: justify;
}
/* Tablet */
@media (max-width: 768px) {
.core-values-section {
padding: 20px 40px;
}
.core-values-section h2 {
font-size: 20px;
margin-bottom: 40px;
}
.core-value h3 {
font-size: 1.2rem;
}
.core-value p {
font-size: 13px;
line-height: 1.6;
}
}
/* Mobile */
@media (max-width: 480px) {
.core-values-section {
padding: 20px 15px;
}
.core-values-section h2 {
font-size: 18px;
margin-bottom: 30px;
}
.core-value h3 {
font-size: 1.1rem;
}
.core-value p {
font-size: 12px;
line-height: 1.5;
text-align: left; /* Better readability on small screens */
}
}
.licensing-banner {
background: linear-gradient(90deg, #0f2d59, #155cd7);
color: white;
padding: 60px 140px;
}
.licensing-content {
max-width: 1400px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.text-block {
flex: 1 1 65%;
}
.text-block h2 {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 16px;
}
.text-block p {
display: flex;
font-size: 14px;
margin-top: 28px;
margin-left: 2px;
line-height: 1.6;
color: #dbe6f3;
}
.cta-button button {
display: flex;
align-items: center;
color: #000;
border: none;
height: 50px;
border-radius: 40px;
padding: 12px 24px;
font-size: 14px;
font-weight: 500;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
transition: all 0.3s ease;
}
.contact-divider {
width: 1.11px;
height: 50px;
margin-left: 10px;
background-color: #dcdcdc;
}
.cta-button button:hover {
background-color: #f0f0f0;
}
.cta-button .plus {
display: inline-block;
font-size: 20px;
font-weight: bold;
padding-left: 16px;
padding-right: 10px;
}
/* Tablet (below 1024px) */
@media (max-width: 1024px) {
.licensing-banner {
padding: 50px 80px;
}
.text-block p {
font-size: 13px;
}
.text-block h2 {
font-size: 1rem;
}
}
/* Mobile & Tablet (below 768px) */
@media (max-width: 768px) {
.licensing-banner {
padding: 40px 40px;
text-align: center;
}
.licensing-content {
flex-direction: column;
align-items: center;
text-align: center;
}
.text-block {
flex: 1 1 100%;
}
.cta-button {
width: 100%;
margin-top: 20px;
}
.cta-button button {
width: 100%;
justify-content: center;
}
}
/* Small Mobile (below 480px) */
@media (max-width: 480px) {
.licensing-banner {
padding: 30px 20px;
}
.text-block h2 {
font-size: 0.95rem;
}
.text-block p {
font-size: 12px;
margin-top: 20px;
}
.cta-button button {
font-size: 13px;
height: 45px;
padding: 10px 20px;
}
}
.footer {
background: #f7f9fd;
color: #48515d;
padding-bottom: 40px;
padding-left: 160px; /* Large left space as in the image */
}
.footer-main {
display: flex;
gap: 64px;
align-items: flex-start;
max-width: 1720px;
margin: 0 auto;
padding: 20px 0 0 0;
}
.footer-about {
flex: 1 1 540px;
max-width: 350px;
display: flex;
flex-direction: column;
gap: 0;
}
.footer-logo {
width: 140px;
margin-bottom: 30px;
margin-top: 18px;
}
.footer-about p {
margin: -5px 0 30px 0;
text-align: justify;
line-height: 1.7;
font-size: 13px;
font-weight: 400;
color: #687188;
}
.footer-social {
margin-top: 0;
}
.footer-social a {
color: #48515d;
font-size: 1rem;
margin-right: 10px;
transition: color .2s;
vertical-align: middle;
}
.footer-social a:hover {
color: #1da1f2;
}
.footer-social a:nth-child(2):hover { color: #0077b5; }
.footer-social a:nth-child(3):hover { color: #ff0000; }
.footer-cols {
flex: 2 1 0;
display: flex;
align-items: flex-start;
gap: 70px;
width: 100%;
margin-top: 68px; /* Align the cols with the first line of about p */
}
.footer-col {
flex: 1 1 220px;
min-width: 280px;
display: flex;
flex-direction: column;
}
.footer-col h2 {
font-weight: 700;
font-size: 1.2rem;
margin-left : -2px;
margin-bottom: 18px;
margin-top: 0;
color: #151921;
}
.footer-contact {
font-size: 13px;
line-height: 2;
color: #687188;
}
.footer-contact a {
color: #2596e2;
text-decoration: none;
transition: text-decoration .2s;
font-size: inherit;
}
.footer-contact a:hover {
margin-bottom : 10px;
text-decoration: underline;
}
.footer-contact strong {
font-weight: 700;
color: #23272d;
}
.footer-col ul {
padding: 0;
margin: 0;
list-style: none;
cursor : pointer;
}
.footer-col ul li {
margin-bottom: 16px;
font-size: 13px;
color: #687188;
}
.footer-col ul li:last-child { margin-bottom: 0; }
.footer-col ul li a {
color: #687188;
text-decoration: none;
transition: color .2s;
font-size: 13px;
}
.footer-col ul li :hover {
color: #2596e2;
text-decoration: underline;
}
.footer-bottom {
text-align: center;
margin-top: 48px;
position: relative;
}
.footer-bottom hr {
border: none;
border-top: 2px solid #e3e7ed;
width: 96%;
margin: 48px auto 36px -25px;
}
.to-top {
position: absolute;
left: 48%;
transform: translateX(-50%);
top: -20px;
width: 35px;
height: 35px;
background: #a1a5ad;
color: #fff;
border: none;
border-radius: 50%;
font-size: 1.3rem;
cursor: pointer;
border : 0.5px 0.5 #6b6d71 ;
box-shadow: 0 2px 8px rgba(80,80,80,.08);
transition: background .2s;
z-index: 2;
}
.to-top:hover {
background: #2596e2;
}
.copyright {
color: #48515d;
font-size: 0.81rem;
margin-top : -5px;
margin-left : -30px;
letter-spacing: .02em;
}
/* Responsive */
@media (max-width: 1500px) {
.footer {
padding-left: 48px;
}
.footer-main {
gap: 38px;
max-width: 98vw;
}
.footer-cols {
gap: 24px;
}
}
@media (max-width: 1100px) {
.footer-main {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 30px 20px 0 20px;
}
.footer-about {
min-width: 0;
}
.footer-cols {
flex-direction: column;
gap: 0;
width: 100%;
margin-top: 34px;
}
.footer-col {
margin-bottom: 28px;
min-width: 0;
}
.footer-col h2 {
margin-top: 18px;
}
.footer-logo {
margin-top: 0;
}
.footer {
padding-left: 12px;
}
}
/* For tablets and mobiles */
@media (max-width: 768px) {
.footer {
padding: 30px 20px;
text-align: center;
}
.footer-main {
align-items: center;
text-align: center;
}
.footer-about {
align-items: center;
text-align: center;
}
.footer-cols {
align-items: center;
text-align: center;
}
.footer-col {
align-items: center;
text-align: center;
}
.footer-social {
text-align: center;
}
.footer-bottom hr {
width: 100%;
margin: 24px auto;
}
.copyright {
margin-left: 0;
font-size: 0.75rem;
}
}
/* For small mobiles */
@media (max-width: 480px) {
.footer {
padding: 20px 15px;
}
.footer-logo {
width: 120px;
margin-bottom: 20px;
}
.footer-about p {
font-size: 13px;
line-height: 1.6;
}
.footer-col h2 {
font-size: 1rem;
}
.footer-contact,
.footer-col ul li {
font-size: 13px;
}
.to-top {
width: 30px;
height: 30px;
font-size: 1.1rem;
}
}
@media (max-width: 768px) {
.footer-cols {
margin-top: 10px;
}
}
.sleaf-service-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.sleaf-service-bg {
width: 100%;
height: 45vh; /* Smaller height */
min-height: 160px;
background: url("images/services.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.sleaf-service-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small tablet */
@media (max-width: 768px) {
.sleaf-service-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.sleaf-service-bg {
height: 28vh;
min-height: 120px;
}
}
/* ---------- Base (kept) ---------- */
.services-main-section {
background: #f8fafd;
padding: 32px 16px;
}
.services-title {
text-align: center;
font-size: 2rem;
font-weight: 700;
color: #111;
margin-bottom: 32px;
}
/* Desktop grid (kept 2 columns) */
.services-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 1200px;
margin: auto;
}
.service-card {
display: flex;
flex-direction: row;
background: #fff;
border-radius: 13px;
box-shadow: 0 8px 18px rgba(100, 120, 140, 0.07);
padding: 24px;
gap: 20px;
padding-top: 70px;
padding-bottom: 30px;
align-items: flex-start;
transition: box-shadow 0.2s, transform 0.2s;
height: 300px;
}
.service-card:hover {
box-shadow: 0 18px 38px rgba(60, 80, 100, 0.13);
transform: translateY(-4px);
}
.service-details { flex: 1; }
.service-link {
font-size: 1.2rem;
font-weight: 700;
color: #191f26;
text-decoration: none;
margin-bottom: 12px;
display: inline-block;
}
.licensing-link:hover { color: #1e90ff; }
.managed-sam-link:hover { color: #27ae60; }
.technology-link:hover { color: #9b59b6; }
.procurement-link:hover { color: #f39c12; }
.cybersecurity-link:hover { color: #e74c3c; }
.service-card ul {
margin: 0;
padding-left: 20px;
font-size: 14px;
color: #555;
line-height: 1.6;
}
/* Cybersecurity full-width desktop */
.fullwidth {
grid-column: span 2;
height: 350px;
padding-top: 85px !important;
}
.fullwidth .service-details ul.multi-column {
columns: 2;
column-gap: 40px;
padding-left: 15%;
}
.service-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
}
.service-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
/* This was breaking layout β keep it desktop-only, fix on smaller screens below */
.fullwidth .service-icon img{
display: flex !important;
justify-content: center;
margin-top: -30px;
margin-left: 900% !important;
}
.fullwidth .service-details a{
margin-top: 30px;
display: flex;
justify-content: center;
margin-left: -5%;
}
.service-section{
background-color: #fff;
}
/* ---------- Medium screens (<= 1024px) ---------- */
@media (max-width: 1024px) {
.services-title {
font-size: 1.8rem;
margin-bottom: 28px;
}
.services-list {
gap: 24px;
}
.service-card {
height: auto; /* let it grow */
padding-top: 50px;
}
.fullwidth {
height: auto; /* let it grow */
padding-top: 60px !important;
}
.fullwidth .service-details ul.multi-column {
padding-left: 5%;
}
/* undo the huge offset */
.fullwidth .service-icon img{
margin-left: 0 !important;
}
}
/* ---------- Tablets (<= 900px) ---------- */
@media (max-width: 900px) {
.services-list {
grid-template-columns: 1fr; /* stack */
gap: 20px;
}
.fullwidth {
grid-column: span 1;
}
.service-card,
.fullwidth-card {
width: 100%;
max-width: 100%;
margin: 0 auto;
padding: 28px 20px;
flex-direction: column;
height: auto; /* no fixed height */
}
.service-icon {
width: 56px;
height: 56px;
}
.service-card h3 {
font-size: 1.1rem;
}
.service-card ul,
.fullwidth-card ul {
font-size: 13.5px;
}
.fullwidth .service-details ul.multi-column {
columns: 1;
padding-left: 0;
}
.fullwidth .service-icon img{
margin-top: 0;
}
.fullwidth .service-details a{
margin-left: 0;
justify-content: flex-start;
}
}
/* ---------- Mobile (<= 600px) ---------- */
@media (max-width: 600px) {
.services-title {
font-size: 1.5rem;
}
.service-card {
padding: 22px 16px;
}
.service-card h3 {
font-size: 1rem;
}
.service-card ul,
.fullwidth-card ul {
font-size: 13px;
padding-left: 12px;
}
.service-icon {
width: 50px;
height: 50px;
}
.fullwidth-card h3 {
font-size: 1.05rem;
}
.fullwidth-card ul {
padding: 0;
}
}
.service-section{
background-color: #fff;
display: flex;
justify-content: center;
}
.container {
display: flex;
max-width: 1750px;
margin: 0 auto;
min-height: 100vh;
justify-content: center;
}
.sidebar {
margin-top : -60px;
width: 390px;
background: #fff;
padding: 32px 0 0 0;
display: flex;
flex-direction: column;
align-items: center;
}
.service-list {
list-style: none;
padding: 0;
margin: 0 0 32px 0;
width: 88%;
}
.service-all {
width: 280px;
height : 55px;
background: #e9f1fb;
border: none;
border-radius: 0;
text-align: center;
padding: 16px 0 10px 0;
font-size: 0.8rem;
color: #49516a;
font-weight: 600;
margin: 10px 0 0 110px;
border-bottom : 1px solid white;
cursor : pointer;
}
.service-all:hover{
border-left: 5px solid #0e4fc6;
}
.service-btn {
width: 280px;
height : 55px;
background: #e9f1fb;
border: none;
border-radius: 0;
text-align: center;
padding: 19px 0 19px 0;
font-size: 0.8rem;
color: #49516a;
font-weight : 600;
cursor: pointer;
border-left: 5px solid transparent;
margin-left: 110px;
transition: background 0.14s, color 0.14s, border-color 0.14s;
outline: none;
border-bottom : 1px solid white;
}
.service-btn.active, .service-btn:focus {
background: #e9f1fb;
color: #222;
font-weight: 700;
border-left: 5px solid #0e4fc6;
}
.service-btn:hover:not(.active) {
background: #e9f1fb;
color: #222;
border-left: 5px solid #0e4fc6;
font-weight : bold;
}
.company-profile-btn {
width: 280px;
padding: 25px 0;
background: #6493e9;
color: #fff;
border: none;
border-radius: 0;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
margin-top: 34px;
display: flex;
margin-left : 155px;
margin-top : -10px;
align-items: center;
justify-content: center;
gap: 14px;
letter-spacing: 0.01em;
transition: background .18s;
}
.company-profile-link {
text-decoration: none;
display: inline-block; /* optional: makes wrapping cleaner */
}
.company-profile-btn:hover {
background: #1250a2;
}
.main-content{
background-color: #fff;
position : relative;
}
.service-content {
max-width: 1200px;
margin-left : -50px;
animation: fadein 0.22s;
}
@keyframes fadein {
from { opacity: 0; transform: translateY(24px);}
to { opacity: 1; transform: none;}
}
.conceptad{
margin-left : 20px !important;
margin-top : -100px !important;
background-color: #fff;
}
.advocacy-row {
display: flex;
align-items: flex-start;
margin-top: -80px !important;
justify-content: flex-start;
}
.advocacy-list {
display : fixed;
font-size: 0.77rem;
line-height : 0.7rem;
padding-left : 70px;
margin-top : 20px;
min-width: 570px;
}
.advocacy-list li {
margin-bottom: 20px;
display: flex;
align-items: center;
color: #35405a;
font-weight: 500;
}
.advocacy-list i {
color: #0e4fc6;
font-size: 1rem;
min-width: 30px;
display: inline-block;
}
.advocacy-img {
min-width: 300px;
max-width: 360px;
height: 450px ;
margin-top: 20px;
box-shadow: 0 2px 18px rgba(14,79,198,0.08);
overflow: hidden;
}
.advocacy-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1600px) {
.service-content { max-width: 1100px; }
.advocacy-row { gap: 20px; }
.advocacy-img { width: 260px; height: 260px; }
}
@media (max-width: 1200px) {
.container { flex-direction: column; }
.sidebar { width: 100vw; flex-direction: row; justify-content: flex-start; border-right: none; border-bottom: 1px solid #e0e6ed; padding: 0; }
.service-list, .company-profile-btn { width: 98vw; }
.service-list { padding: 0 12px; }
.main-content { padding: 10px; }
.service-content { max-width: 99vw; }
}
@media (max-width: 900px) {
.advocacy-row { flex-direction: column; gap: 18px; }
.advocacy-img { width: 100%; height: 200px; }
h1 { font-size: 1.4rem; }
}
.advocacy-experts {
display: flex;
flex-wrap: wrap;
margin-top : 30px;
padding: 60px 10%;
background: #fff;
}
.advocacy-left {
color: #fff;
padding: 40px 20px;
text-align: center;
width : 280px;
margin-left : 154px;
margin-top : 18px;
background-color: #6493e9;
}
.advocacy-left h3 {
margin: 0;
font-size: 0.8rem;
}
.advocacy-left h2 {
font-size: 1.5rem;
margin: 20px 0;
}
.contact-button {
background: #fff;
color: #0b57e3;
padding: 12px 20px;
font-weight: 600;
border: none;
border-radius: 5px;
cursor: pointer;
}
.advocacy-right {
flex: 2 1 600px;
}
.advocacy-right h2 {
font-size: 22px !important;
font-weight: 600;
margin-bottom: 30px;
margin-top : -60px;
margin-left : -30px !important;
color: #111;
}
.advocacy-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
margin-left : -30px;
gap: 20px;
margin-right : 100px;
}
.advocacy-card {
display: flex;
align-items: flex-start;
gap: 15px; /* space between image and text */
}
.advocacy-card img {
width: 60px; /* adjust size as needed */
height: 80px;
object-fit: contain;
}
.advocacy-card h3 {
margin: 0 0 8px 0;
font-size: 1rem;
font-weight : 600;
color: #111;
}
.advocacy-card p {
margin: 0;
color: #687188;
font-size: 13px;
font-weight : 400;
}
.advisory-section {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
padding: 40px;
background-color: #fff;
color: #333;
text-align: center;
margin-top : 70px;
margin-left : -550px;
}
.advisory-section h2 {
font-size: 25px;
font-weight: 600;
margin-bottom: 30px;
margin-left : 330px !important;
}
.advisory-content {
display: flex;
align-items: flex-start;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.advisory-image img {
max-width: 300px;
margin-top : -50px;
margin-left : -80px;
}
.advisory-lists {
display: flex;
gap: 40px;
flex-wrap: wrap;
justify-content: center;
margin-left : 30px;
}
.advisory-lists ul {
list-style: none;
padding: 0;
text-align: left;
}
.advisory-lists li {
margin-bottom: 12px;
position: relative;
padding-left: 24px;
color: #687188; /* blue like in the screenshot */
font-size: 13px;
font-weight : 500;
}
.advisory-lists li i {
margin-right : 10px;
color: #2b4eff;
}
.advisory-section .cards-grid {
display: grid;
width : 200%;
margin-top : -30px;
grid-template-columns: repeat(2, 1fr);
justify-content: center;
margin-left : 10%;
gap: 50px;
padding: 40px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.card {
border-radius: 10px;
overflow: hidden;
box-shadow: 5px 10px 24px rgba(0.2,0.2,0.2,0.2);
background: #fff;
height : 350px;
}
.card-header {
background: linear-gradient(161deg, #448422, #f2f27e);
color: #000;
font-weight: 600;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 18px;
height : 100px;
}
.card-icon {
font-size: 24px;
}
.card ul {
list-style: none;
margin-top: 5px;
padding: 20px;
}
.card ul i{
margin-right : 5px;
color: #2b4eff;
}
.card li {
margin-bottom: 5px;
position: relative;
padding-left: 24px;
color: #35405a;
font-size: 15px;
font-weight : 500;
text-align : left;
margin-left : -30px;
}
.gridhead {
margin-top : 40px;
margin-bottom : -100px !important;
margin-left : -15%;
}
.cards-grid {
display : flex;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 50px;
padding: 40px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}
.card {
border-radius: 10px;
overflow: hidden;
box-shadow: 5px 10px 24px rgba(0,0,0,0.2);
background: #fff;
height: 340px;
}
.card-header {
background: linear-gradient(161deg, #448422, #f2f27e);
color: #000;
font-weight: 600;
padding: 16px 20px;
display: flex;
align-items: center;
gap: 10px;
font-size: 17px;
height: 80px;
}
.card-icon {
font-size: 28px;
}
.card ul {
list-style: none;
margin-top: 5px;
padding: 20px;
}
.card ul i {
margin-right: 5px;
color: #2b4eff;
}
.card li {
margin-bottom: 5px;
position: relative;
padding-left: 24px;
color: #35405a;
font-size: 14px;
font-weight: 500;
text-align: left;
margin-left: -30px;
}
.engagement-methodology {
width: 90%;
margin: 0 auto;
padding: 40px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-align: center;
margin-left : 16%;
}
.engagement-methodology h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;
margin-left : -5% !important;
}
.methodology-step {
display: flex;
gap: 20px;
margin-bottom: 30px;
text-align: left;
margin-left : -70px;
gap : 30px;
}
.step-icon {
width: 70px;
height: 70px;
object-fit: contain;
}
.step-content h3 {
margin: 0;
font-size: 17px;
color : black;
font-weight: 600;
}
.step-content p {
margin: 5px 0 0;
font-size: 13px;
color: #35405a;
font-weight: 500;
max-width: 1000px;
}
.stay-away {
width: 90%;
margin: 0 auto;
margin-top : -50px;
padding: 40px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
margin-left : 16%;
}
.stay-away h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;
margin-left : -5% !important;
}
.stay-item {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 30px;
text-align: left;
margin-left : -70px;
}
.stay-icon {
width: 70px;
height: 70px;
object-fit: contain;
}
.stay-content h3 {
margin: 0;
font-size: 17px;
color : black;
font-weight: 600;
}
.stay-content p {
margin: 5px 0 0;
font-size: 13px;
color: #35405a;
font-weight: 500;
max-width: 1000px;
}
.offer-table {
width: 90%;
margin: 0 auto;
margin-top : -40px;
padding: 40px;
color : black;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
text-align: center;
margin-left : 6.5%;
}
.offer-table h2 {
font-size: 24px;
font-weight: 600;
color : black;
margin-bottom: 40px;
margin-left : -5% !important;
}
.offer-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px;
column-gap: 100px;
margin-left : 50px;
}
.offer-item {
display: flex;
align-items: flex-start;
gap: 20px;
text-align: left;
}
.offer-icon {
width: 70px;
height: 70px;
object-fit: contain;
}
.offer-text h3 {
margin: 0;
font-size: 17px;
font-weight: 600;
}
.offer-text p {
margin: 5px 0 0;
font-size: 13px;
color: #35405a;
font-weight: 500;
}
.market-difference {
text-align: center;
padding: -10px 100px;
padding-left : 250px;
background-color: #fff; /* Optional light background */
}
.market-difference h2 {
font-size: 32px !important;
font-weight: 500 !important;
margin-bottom: 10px;
margin-left : 10px !important;
}
.market-difference h3 {
font-size: 24px;
font-weight: 500;
color : black;
margin-bottom: 40px;
}
.market-content {
display: flex;
justify-content: center;
}
.market-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 200px;
max-width: 1200px;
width: 100%;
flex-wrap: wrap;
}
.market-list-container {
flex: 1;
min-width: 350px;
text-align: left;
}
.market-list {
list-style: none;
padding: 0;
margin: 0;
}
.market-list li {
font-size: 13px;
margin-bottom: 10px;
font-weight: 500;
display: flex;
align-items: center;
color: #35405a;
}
.market-list li i {
margin-right: 10px;
color: #0056d2;
margin-top : 5px;
font-size: 13px;
}
.market-image {
flex: 1;
min-width: 220px;
display: flex;
align-items: center;
justify-content: center;
}
.market-image img {
max-width: 100%;
height: auto;
}
/* Tablet */
@media (max-width: 1024px) {
.market-difference {
padding: 40px 40px;
}
.market-row {
flex-direction: column;
gap: 40px;
align-items: center;
}
.market-list-container,
.market-image {
width: 100%;
min-width: 0;
text-align: center;
}
.market-list-container {
padding: 0 20px;
}
.market-difference h2,
.market-difference h3 {
text-align: center;
}
}
/* Mobile */
@media (max-width: 768px) {
.market-difference {
padding: 30px 20px;
}
.market-difference h2 {
font-size: 24px !important;
}
.market-difference h3 {
font-size: 18px;
}
.market-list li {
font-size: 12px;
}
.market-image img {
width: 100%;
max-width: 300px;
}
}
/* Tablet Devices */
@media (max-width: 1024px) {
.container {
flex-direction: column;
align-items: center;
padding: 30px 16px;
}
.sidebar {
display: none;
}
.main-content,
.service-content,
.advocacy-row,
.advisory-section,
.advocacy-experts {
width: 100% !important;
margin: 50px auto;
padding: 20px;
}
.advocacy-row {
flex-direction: column;
align-items: center;
}
.advocacy-img {
width: 100%;
max-width: 300px;
height: auto;
}
.advisory-section {
margin-left: 0;
text-align: center;
padding: 20px;
}
.advisory-section h2 {
margin-left: 0 !important;
}
.advisory-content {
flex-direction: column;
align-items: center;
}
.advisory-lists {
flex-direction: column;
align-items: center;
margin-left: 0;
}
.advisory-section .cards-grid {
width: 100%;
grid-template-columns: 1fr;
padding: 20px;
margin-left: 0;
}
}
/* Mobile Devices */
@media (max-width: 768px) {
.container {
flex-direction: column;
padding: 30px 10px;
}
.sidebar {
display: none;
}
.main-content,
.service-content,
.advocacy-row,
.advisory-section,
.advocacy-experts {
width: 100% !important;
padding: 15px;
}
.advocacy-row {
flex-direction: column;
align-items: center;
}
.advocacy-img {
width: 100%;
height: auto;
}
.advocacy-left,
.advocacy-right {
width: 100%;
margin: 0;
padding: 20px;
}
.advisory-content {
flex-direction: column;
align-items: center;
gap: 20px;
}
.advisory-section h2 {
font-size: 20px;
margin-left: 0 !important;
}
.advisory-image img {
width: 100%;
max-width: 250px;
margin-left: 0;
}
.advisory-lists {
flex-direction: column;
gap: 20px;
align-items: center;
margin-left: 0;
}
.advisory-section .cards-grid {
grid-template-columns: 1fr;
width: 100%;
padding: 20px;
margin-left: 0;
}
}
.cyber-secu-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.cyber-secu-bg {
width: 100%;
height: 45vh;
min-height: 160px;
background: url("images/cybersec.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.cyber-secu-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.cyber-secu-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.cyber-secu-bg {
height: 28vh;
min-height: 120px;
}
}
.container {
display: flex;
max-width: 1750px;
margin: 50px auto;
min-height: 100vh;
justify-content: center;
}
/* Main Content */
.main-content {
flex: 1;
margin-left : 40px;
}
.main-content h1 {
font-size: 22px;
margin-left : 200px;
margin-bottom: 10px;
}
.cybersic{
margin-top : -105px;
}
.cyber-intro {
max-width: 850px;
margin-top : 20px;
margin-bottom: 40px;
line-height: 1.6;
font-size: 13px;
font-weight : 500;
text-align : center;
color: #687188;
line-height : 22px;
}
.cyber-row {
display: flex;
gap: 30px;
align-items: flex-start;
margin-bottom: 40px;
}
.cyber-text {
flex: 1;
}
.cyber-text h2 {
margin-bottom: 10px;
font-size : 20px;
line-height : 15px;
display : block;
}
.cyber-text p {
line-height: 1.6;
font-size : 13px;
color: #687188;
font-weight : 500;
}
.cyber-text ul {
list-style: none;
padding-left: 0;
margin-top: 10px;
}
.cyber-text li {
margin-bottom: 8px;
font-size : 13px;
color: #687188;
font-weight : 600;
}
.cyber-text li i {
color: #0066ff;
margin-right: 8px;
}
.cyber-img {
margin-top : 70px;
margin-right : 180px;
}
.cyber-img img {
border-radius: 1px;
height : 250px;
width : 400px;
}
.main-content h2 {
font-size: 18px;
margin-bottom: 15px;
}
.cyber-tip{
margin-top : -140px;
}
.cyber-types {
list-style: none;
padding-left: 0;
columns: 1;
max-width: 700px;
font-size : 20px;
line-height : 15px;
}
.cyber-types li {
text-align : left;
left : 0;
margin-bottom: 8px;
font-size: 13px;
font-weight : 600;
color: #687188;
line-height : 22px;
}
.cyber-types li i {
color: #0066ff;
margin-right: 8px;
}
.ngfw-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
}
.ngfw-section h1 {
margin-top : 80px;
text-align : center;
font-size: 22px;
margin-left : -40px;
margin-bottom: 20px;
}
.ngfw-section p {
font-size: 13px;
max-width: 1100px;
margin: auto;
color: #687188;
font-weight : 500;
line-height: 1.6;
}
.ngfw-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
gap: 40px;
flex-wrap: wrap;
}
.features-box {
flex: 1;
text-align: left;
margin-left : 50px;
}
.features-box h2 {
margin-top : -100px !important;
margin-left : 130px;
margin-bottom: 15px;
font-size : 16px;
}
.features-box img {
width: 80px;
height: 80px;
margin-left : 10px;
margin-top : 0px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.features-box ul {
margin-left : 130px;
font-size : 13px;
list-style: none;
padding-left: 0;
}
.features-box li {
margin-bottom: 10px;
font-weight: 500;
color: #687188;
font-weight : 500;
}
.features-box li i {
color: #0066ff;
margin-right: 8px;
}
.ngfw-diagram {
flex: 1.5;
text-align: center;
}
.ngfw-diagram img {
width: 100%;
max-width: 600px;
margin-right : 100px;
}
.dlpngfw-diagram{
margin-right : 200px;
}
.dlpngfw-diagram img{
height : 450px;
}
.waap-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
margin-top: -70px !important;
}
.waap-section h1 {
margin-top: 30px;
text-align: center;
font-size: 22px;
margin-left : -45px;
margin-bottom: 20px;
}
.waap-section p {
font-size: 13px;
max-width: 1100px;
margin: auto;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.waap-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
flex-wrap: wrap;
}
.features-box {
flex: 1;
text-align: left;
margin-left: 50px;
}
.features-box h2 {
margin-top: -50px;
margin-left: 130px;
margin-bottom: 15px;
font-size: 16px;
}
.features-box img {
width: 80px;
height: 80px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.features-box ul {
margin-left: 130px;
font-size: 13px;
list-style: none;
padding-left: 0;
}
.features-box li {
margin-bottom: 10px;
font-weight: 600;
color: #687188;
}
.features-box li i {
color: #0066ff;
margin-right: 8px;
}
.waap-diagram {
flex: 1.5;
text-align: center;
}
.waap-diagram img {
margin-top : -20px;
margin-right : 70px;
width: 700px;
}
.edr-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
margin-top: -70px !important;
}
.edr-section h1 {
margin-top: 30px;
text-align: center;
font-size: 22px;
margin-left : -45px;
margin-bottom: 20px;
}
.edr-section p {
font-size: 13px;
max-width: 1100px;
margin: auto;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.edr-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
gap: 40px;
flex-wrap: wrap;
}
.edr-content .features-box {
flex: 1;
text-align: left;
margin-left: 50px;
}
.edr-content .features-box h2 {
margin-top: -50px;
margin-left: 130px;
margin-bottom: 15px;
font-size: 16px;
}
.edr-content .features-box img {
width: 80px;
height: 80px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.edr-content .features-box ul {
margin-left: 130px;
font-size: 13px;
list-style: none;
padding-left: 0;
}
.edr-content .features-box li {
margin-bottom: 10px;
font-weight: 600;
color: #687188;
}
.edr-content .features-box li i {
color: #0066ff;
margin-right: 8px;
}
.edr-diagram {
flex: 1.5;
text-align: center;
}
.edr-diagram img {
margin-left : -100px;
max-width: 650px;
margin-top : -10px;
}
.mfa-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
margin-top: -70px !important;
}
.mfa-section h1 {
margin-top: 30px;
text-align: center;
margin-left : -45px;
font-size: 22px;
margin-bottom: 20px;
}
.mfa-section p {
font-size: 13px;
max-width: 1100px;
margin: auto;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.mfa-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
gap: 40px;
flex-wrap: wrap;
}
.mfa-content .features-box {
flex: 1;
text-align: left;
margin-left: 50px;
}
.mfa-content .features-box h2 {
margin-top: -50px;
margin-left: 130px;
margin-bottom: 15px;
font-size: 16px;
}
.mfa-content .features-box img {
width: 80px;
height: 80px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.mfa-content .features-box ul {
margin-left: 130px;
font-size: 13px;
list-style: none;
padding-left: 0;
}
.mfa-content .features-box li {
margin-bottom: 10px;
font-weight: 600;
color: #687188;
}
.mfa-content .features-box li i {
color: #0066ff;
margin-right: 8px;
}
.mfa-diagram {
flex: 1.5;
text-align: center;
}
.mfa-diagram img {
width: 100%;
max-width: 650px;
margin-left : -150px;
}
.remote-access-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
margin-top: -70px !important;
}
.remote-access-section h1 {
margin-top: 30px;
text-align: center;
margin-left : -45px;
font-size: 22px;
margin-bottom: 20px;
}
.remote-access-section p {
font-size: 13px;
max-width: 1100px;
margin: auto;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.remote-access-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
gap: 40px;
flex-wrap: wrap;
}
.remote-access-content .features-box {
flex: 1;
text-align: left;
margin-left: 50px;
}
.remote-access-content .features-box h2 {
margin-top: -50px;
margin-left: 130px;
margin-bottom: 15px;
font-size: 16px;
}
.remote-access-content .features-box img {
width: 80px;
height: 80px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.remote-access-content .features-box ul {
margin-left: 130px;
font-size: 13px;
list-style: none;
padding-left: 0;
}
.remote-access-content .features-box li {
margin-bottom: 10px;
font-weight: 600;
color: #687188;
}
.remote-access-content .features-box li i {
color: #0066ff;
margin-right: 8px;
}
.remote-access-diagram {
flex: 1.5;
text-align: center;
}
.remote-access-diagram img {
width: 100%;
max-width: 650px;
margin-left : -150px;
}
@media (max-width: 768px) {
.remote-access-content {
flex-direction: column;
align-items: center;
}
.remote-access-content .features-box,
.remote-access-diagram {
width: 100%;
text-align: center;
}
.remote-access-content .features-box ul {
text-align: left;
display: inline-block;
}
.remote-access-content .features-box h2 {
margin-left: 0;
text-align: center;
}
.remote-access-content .features-box ul {
margin-left: 0;
}
}
@media (max-width: 991px) {
.cyber-row,
.ngfw-content,
.waap-content,
.edr-content,
.mfa-content,
.remote-access-content {
flex-direction: column !important;
align-items: center !important;
gap: 30px !important;
margin: 0 auto;
padding: 0 15px;
}
.features-box,
.cyber-text,
.cyber-img,
.ngfw-diagram,
.waap-diagram,
.edr-diagram,
.mfa-diagram,
.remote-access-diagram {
width: 100% !important;
margin: 10px !important;
text-align: center !important;
}
.features-box h2{
margin-top : 30px !important;
}
.features-box h2,
.features-box ul {
margin-left: 0 !important;
text-align: center !important;
}
.features-box ul {
display: inline-block;
text-align: left;
}
.cyber-img img,
.ngfw-diagram img,
.waap-diagram img,
.edr-diagram img,
.mfa-diagram img,
.remote-access-diagram img {
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
}
.main-content h1,
.ngfw-section h1,
.waap-section h1,
.edr-section h1,
.mfa-section h1,
.remote-access-section h1 {
margin-left: 0 !important;
text-align: center !important;
}
.ngfw-section,
.waap-section,
.edr-section,
.mfa-section,
.remote-access-section {
margin-left: 0 !important;
padding: 0 10px;
}
.cybersic,
.cyber-tip {
margin-top: 0 !important;
}
.features-box img {
margin-left: 0 !important;
}
}
/* Responsive Banner */
.sleaf-service-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.sleaf-service-bg {
width: 100%;
height: 45vh;
min-height: 160px;
background: url('images/licenseadv.png') center / cover no-repeat;
}
@media (max-width: 991px) {
.sleaf-service-bg {
height: 35vh;
min-height: 140px;
}
}
@media (max-width: 768px) {
.sleaf-service-bg {
height: 30vh;
min-height: 130px;
}
}
@media (max-width: 480px) {
.sleaf-service-bg {
height: 28vh;
min-height: 120px;
}
}
.load-balancing-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
margin-top: -80px !important;
}
.load-balancing-section h1 {
margin-top: 30px;
text-align : center;
margin-left : -45px;
font-size: 22px;
margin-bottom: 20px;
}
.load-balancing-section p {
font-size: 13px;
max-width: 1100px;
margin: auto;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.load-balancing-content {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-top: 40px;
gap: 40px;
flex-wrap: wrap;
}
.load-balancing-content .features-box {
flex: 1;
text-align: left;
margin-left: 50px;
}
.load-balancing-content .features-box h2 {
margin-top: -50px;
margin-left: 130px;
margin-bottom: 15px;
font-size: 16px;
}
.load-balancing-content .features-box img {
width: 80px;
height: 80px;
margin-left: 10px;
margin-top: 0px;
margin-bottom: 15px;
border: 1px solid #ccc;
}
.load-balancing-content .features-box ul {
margin-left: 130px;
font-size: 13px;
list-style: none;
padding-left: 0;
}
.load-balancing-content .features-box li {
margin-bottom: 10px;
font-weight: 600;
color: #687188;
}
.load-balancing-content .features-box li i {
color: #0066ff;
margin-right: 8px;
}
.load-balancing-diagram {
flex: 1.5;
text-align: center;
}
.load-balancing-diagram img {
width: 100%;
max-width: 350px;
}
.vapt-section {
max-width: 1200px;
margin-left : -270px;
text-align: center;
padding: 40px 20px;
margin-top : -70px !important;
}
.vapt-section h1 {
text-align : center;
margin-left : -45px;
font-size: 24px;
margin-bottom: 20px;
}
.vapt-section p {
font-size: 13px;
color: #687188;
font-weight: 500;
line-height: 1.6;
max-width: 1000px;
margin: 0 auto 40px;
}
.vapt-graphic img {
width: 100%;
margin-left : 20px;
max-width: 1000px;
border-radius: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.vapt-method {
max-width: 1200px;
margin-left : -270px;
text-align: center;
padding: 40px 20px;
}
.vapt-method h1{
margin-top : -80px;
text-align : center;
margin-left : -45px;
font-size: 24px;
margin-bottom: 20px;
}
.vapt-methodology img {
width: 100%;
margin-left : 20px;
margin-top : -6px;
max-width: 1000px;
height : 450px;
border-radius: 1px;
box-shadow: 0 0 10px rgba(0,0,0,0.05);
}
.casb-section {
width : 100%;
max-width: 1200px;
margin-left : -220px;
padding: 40px 20px;
text-align: center;
margin-top : -70px !important;
}
.casb-section h2{
margin-bottom : 30px;
margin-left : -45px;
}
.casb-section p{
font-size : 13px;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.casb-section h3{
margin-bottom : 10px;
margin-left : -250px;
margin-top : 50px;
}
.casb-grid {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: 40px;
flex-wrap: wrap;
margin-left : 200px;
margin-right : -200px;
}
.casb-features {
flex: 1 1 55%;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px 40px;
}
.casb-feature {
display: flex;
align-items: flex-start;
gap: 10px;
}
.casb-feature span {
font-size: 20px;
color: #0070f3;
flex-shrink: 0;
line-height: 1.6;
}
.casb-feature p {
font-size: 13px;
color: #687188;
line-height: 1.6;
font-weight: 600;
margin: 0;
text-align: left;
}
.casb-diagram {
flex: 1 1 40%;
display: flex;
justify-content: flex-end;
}
.casb-diagram img {
margin-top : -50px;
max-width: 100%;
height: 350px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.nac-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
padding: 40px 20px;
margin-top: -70px !important;
}
.nac-section h1 {
text-align: center;
font-size: 24px;
margin-left : -45px;
margin-bottom: 20px;
}
.nac-section p {
font-size: 13px;
color: #687188;
font-weight: 500;
line-height: 1.6;
max-width: 1100px;
margin: 0 auto 40px;
}
.nac-content {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
}
.nac-features {
text-align: left;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
flex: 1;
min-width: 250px;
max-width: 300px;
}
.features-icon {
margin-left : -50px;
height: 100px !important;
width : 100px !important;
margin-bottom: 10px;
}
.nac-features h2 {
margin-top : -100px;
margin-left : 50px;
font-size: 18px;
margin-bottom: 15px;
color: #333;
}
.nac-features ul {
list-style: none;
padding: 0;
margin: 0;
color: #687188;
}
.nac-features ul li {
display: flex;
margin-left : 50px;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 13px;
font-weight: 500;
}
.nac-features ul li i {
color: #0066ff;
font-size: 14px;
}
.nac-features ul li a {
text-decoration: none;
color: #33475b;
transition: color 0.3s ease;
}
.nac-features ul li a:hover {
color: #0066ff;
}
.nac-diagram {
flex: 2;
min-width: 500px;
max-width: 700px;
text-align: center;
}
.nac-diagram img {
width: 100%;
height: auto;
border-radius: 1px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.siem-section {
max-width: 1200px;
margin-left : -250px;
text-align: center;
padding: 40px 20px;
margin-top: -50px !important;
}
.siem-section h1 {
text-align: center;
font-size: 24px;
margin-left : -45px;
margin-bottom: 20px;
}
.siem-section p {
font-size: 13px;
color: #687188;
font-weight: 500;
line-height: 1.6;
max-width: 1100px;
margin: 0 auto 40px;
}
.siem-content {
display: flex;
justify-content: center;
align-items: flex-start;
gap: 20px;
flex-wrap: wrap;
}
.siem-features {
text-align: left;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
flex: 1;
min-width: 250px;
max-width: 300px;
}
.features-icon {
width: 30px;
height: auto;
margin-bottom: 10px;
}
.siem-features h2 {
font-size: 18px;
margin-bottom: 15px;
color: #333;
margin-top : -100px;
margin-left : 35px;
}
.siem-features ul {
list-style: none;
padding: 0;
margin: 0;
color: #687188;
margin-left : 35px;
}
.siem-features ul li {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 10px;
font-size: 13px;
font-weight: 500;
}
.siem-features ul li i {
color: #0066ff;
font-size: 14px;
}
.siem-diagram {
flex: 2;
min-width: 500px;
max-width: 700px;
text-align: center;
}
.siem-diagram img {
width: 70%;
height: auto;
border-radius: 1px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
/* Responsive CSS for mobile and tablet screens */
@media (max-width: 1024px) {
.load-balancing-section,
.vapt-section,
.vapt-method,
.casb-section,
.nac-section,
.siem-section {
margin-left: 0;
padding: 20px 10px;
}
.load-balancing-section h1,
.vapt-section h1,
.vapt-method h1,
.nac-section h1,
.siem-section h1,
.casb-section h2,
.casb-section h3 {
margin-left: 0;
text-align: center;
}
.load-balancing-content,
.casb-grid,
.nac-content,
.siem-content {
flex-direction: column;
align-items: center;
gap: 20px;
}
.load-balancing-content .features-box,
.load-balancing-diagram,
.casb-diagram,
.nac-diagram,
.siem-diagram {
margin: 0;
width: 100%;
max-width: 100%;
}
.load-balancing-content .features-box h2,
.load-balancing-content .features-box ul,
.casb-section h3 {
margin-left: 0;
}
.casb-grid {
margin-left: 0;
margin-right: 0;
}
.casb-features {
grid-template-columns: 1fr;
}
.nac-features,
.siem-features {
max-width: 100%;
}
.nac-features h2{
margin-top : 30px !important;
}
.nac-features h2,
.nac-features ul li,
.siem-features h2,
.siem-features ul {
margin-left: 0;
text-align: center;
}
.siem-features h2{
margin-top : 30px !important;
}
.features-icon {
margin: 0 auto 10px;
display: block;
}
.vapt-graphic img,
.vapt-methodology img,
.casb-diagram img,
.nac-diagram img,
.siem-diagram img {
max-width: 100%;
margin-left: 0;
height: auto;
margin-top : 30px !important;
margin-bottom : 30px !important;
}
}
.soft-sami-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.soft-sami-bg {
width: 100%;
height: 45vh; /* Default height */
min-height: 160px;
background: url("images/managed-sam.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.soft-sami-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.soft-sami-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.soft-sami-bg {
height: 28vh;
min-height: 120px;
}
}
.sam-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
gap: 20px;
margin-right : 70px;
margin-top: 20px;
}
.sam-item {
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease;
}
.sam-item:hover {
transform: translateY(-5px);
}
.sam-icon-text {
display: flex;
align-items: flex-start;
gap: 20px;
}
.sam-icon-text img {
width: 60px;
height: 60px;
flex-shrink: 0;
margin-top: 4px;
}
.sam-icon-text h2 {
font-size: 18px;
margin-bottom: 10px;
color: black;
}
.sam-icon-text ul {
list-style: none;
padding-left: 0;
font-size: 13px;
color: #687188;
font-weight : 500;
}
.sam-icon-text li {
margin-bottom: 10px;
display: flex;
align-items: flex-start;
}
.sam-icon-text li i {
color: #0066ff;
margin-right: 8px;
font-size: 14px;
margin-top : 5px;
}
.how-we-do-section {
max-width: 600px;
margin-top: 30px !important;
justify-content: center;
margin-left : 60px;
padding: 0 20px 0 20px;
}
.how-we-do-section h2 {
font-size: 24px;
font-weight: 600;
text-align: center;
margin-left : -50px;
margin-bottom: 20px;
}
.how-intro {
font-size: 13px;
color: #687188;
font-weight: 500;
text-align: left;
margin-bottom: 10px;
line-height: 1.4;
}
.phases-block p {
font-size: 13px;
margin-bottom: 10px;
line-height : 1.6;
color: #687188;
font-weight: 500;
}
.methodology-list {
list-style: none;
padding-left: 0;
margin: 30px 0 30px;
}
.methodology-list li {
display: flex;
align-items: flex-start;
font-size: 13px;
color: #687188;
font-weight : 500;
line-height : 1.2;
margin-bottom: 6px;
}
.methodology-list li i {
color: #0066ff;
margin-right: 10px;
margin-top : 4px;
font-size: 14px;
}
/* Key Deliverables */
.deliverables-heading {
font-size: 22px;
font-weight: 700;
text-align: center;
margin: 40px 0 20px;
}
.deliverables-list {
list-style: none;
padding-left: 0;
margin: 0 auto 60px;
}
.deliverables-list li {
display: flex;
align-items: flex-start;
font-size: 13px;
font-weight : 500;
color: #687188;
margin-bottom: 6px;
}
.deliverables-list li i {
color: #0066ff;
margin-right: 10px;
margin-top : 5px;
font-size: 14px;
}
.sls-section {
max-width: 600px;
margin: 40px !important;
margin-left : 60px;
padding: 0 20px;
}
.sls-section h2 {
font-size: 24px;
font-weight: 600;
text-align: center;
margin-bottom: 30px;
}
.sls-list {
list-style: none;
padding-left: 0;
}
.sls-list li {
display: flex;
align-items: flex-start;
font-size: 13px;
color: #687188;
font-weight : 500;
margin-bottom: 10px;
line-height: 1.4;
}
.sls-list li i {
color: #0066ff;
font-size: 13px;
margin-right: 10px;
margin-top: 4px;
}
.outcomes-section {
max-width: 1200px;
margin: 70px !important;
margin-left : -250px !important;
padding: 0 20px;
text-align: center;
}
.outcomes-section h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;
margin-left : -70px !important;
}
.outcomes-grid {
display: flex;
justify-content: center;
gap: 200px;
flex-wrap: wrap;
text-align: left;
}
.outcomes-column {
display: flex;
flex-direction: column;
gap: 30px;
flex: 1;
min-width: 400px;
max-width: 500px;
}
.outcomes-item {
display: flex;
gap: 15px;
align-items: flex-start;
}
.outcomes-item img {
width: 70px;
height: 70px;
object-fit: contain;
border: 1px solid #ccc;
}
.outcomes-item h3 {
font-size: 16px;
font-weight: 600;
margin-bottom: 6px;
color: #1d1d1f;
}
.outcomes-item p {
font-size: 13px;
color: #687188;
font-weight: 500;
margin: 0;
line-height: 1.5;
}
.sam-services-section {
max-width: 1200px;
margin: 40px !important;
margin-left : -250px !important;
padding: 0 20px;
text-align: center;
}
.sam-services-section h2 {
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;
}
.sam-services-grid {
display: flex;
gap: 30px;
justify-content: center;
flex-wrap: wrap;
}
.sam-service-card {
background-color: #fff;
border-radius: 10px;
padding: 10px 10px;
width: 320px;
height: 500px;
box-shadow: 4px 6px 20px rgba(0, 0.05, 0.05, 0.1);
display: flex;
flex-direction: column;
align-items: center;
transition: all 0.3s ease;
text-align: center;
}
.sam-service-card:hover {
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.sam-service-card img {
width: 300px;
height: 250px;
object-fit: cover;
margin-bottom: 20px;
}
.sam-service-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.sam-service-title {
font-size: 18px;
font-weight: 600;
margin-bottom: 10px;
color: #1d1d1f;
}
.sam-service-desc {
font-size: 13px;
color: #687188;
font-weight: 600;
line-height: 1.6;
padding: 0 10px;
}
/* ================== RESPONSIVE MEDIA QUERIES ================== */
@media (max-width: 1200px) {
.sam-grid {
margin-right: 40px;
}
.outcomes-section,
.sam-services-section {
margin-left: 0 !important;
}
}
@media (max-width: 991px) {
.sam-grid {
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
margin-right: 20px;
}
.how-we-do-section,
.sls-section {
margin-left: 30px;
max-width: 100%;
}
.outcomes-section h2,
.outcomes-section {
margin-left: 0 !important;
text-align: center;
}
.outcomes-grid,
.sam-services-grid {
gap: 40px;
}
}
@media (max-width: 768px) {
.sam-grid {
grid-template-columns: 1fr;
margin-right: 0;
}
.sam-service-card {
width: 100%;
height: auto;
padding: 20px;
}
.sam-service-card img {
width: 100%;
height: auto;
}
.outcomes-column {
min-width: 100%;
max-width: 100%;
}
.how-we-do-section,
.sls-section {
margin-left: 15px;
padding: 0 10px;
}
.outcomes-section {
padding: 0 10px;
margin: 40px 10px;
}
}
@media (max-width: 576px) {
.how-we-do-section h2,
.sls-section h2,
.outcomes-section h2,
.sam-services-section h2 {
font-size: 20px;
}
.sam-service-title {
font-size: 16px;
}
.sam-service-desc,
.how-intro,
.phases-block p,
.methodology-list li,
.deliverables-list li,
.sls-list li,
.outcomes-item p {
font-size: 12px;
}
.outcomes-grid {
flex-direction: column;
gap: 30px;
}
.outcomes-item img {
width: 50px;
height: 50px;
}
}
.soft-ecangi-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.soft-ecangi-bg {
width: 100%;
height: 45vh; /* Default height */
min-height: 160px;
background: url("images/tech-evangaalization.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.soft-ecangi-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.soft-ecangi-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.soft-ecangi-bg {
height: 28vh;
min-height: 120px;
}
}
.tech-support-section {
padding: 40px 20px;
max-width: 900px;
margin: 0 auto;
margin-left : 30px;
}
.tech-heading {
text-align: center;
margin-top : -60px;
font-size: 22px;
font-weight: 600;
margin-bottom: 20px;
}
.tech-heading.sub {
margin-top: 50px;
}
.tech-description {
font-size: 13px;
color: #687188;
font-weight : 600;
line-height: 1.7;
margin-bottom: 20px;
}
.tech-description.center {
text-align: center;
max-width: 900px;
margin: 0 auto 30px;
}
.tech-list {
list-style: none;
padding-left: 0;
margin: 20px 0 30px;
}
.tech-list li {
display: flex;
align-items: flex-start;
font-size: 13px;
color: #687188;
font-weight: 600;
margin-bottom: 16px;
line-height: 1.5;
}
.tech-list li i {
color: #0066ff;
font-size: 13px;
margin-right: 10px;
margin-top: 4px;
}
.tech-highlight-box {
border: 2px solid #00b300;
color: #687188;
background-color: #f9fdf9;
font-size: 13px;
line-height: 1.6;
font-weight: 600;
padding: 15px 20px;
border-radius: 6px;
margin: 30px 0 40px;
text-align: center;
}
.tech-subheading {
text-align: left;
font-size: 20px;
font-weight: 600;
margin-bottom: 30px;
}
.evaluation-criteria-section {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 40px;
margin-top: 40px;
flex-wrap: wrap;
}
.evaluation-text {
flex: 1;
min-width: 300px;
}
.evaluation-image-box {
flex: 1;
margin-top : -15px;
margin-left : -70px;
min-width: 300px;
max-width: 400px;
height : 320px;
border: 1px solid #ccc;
padding: 20px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.evaluation-image-box img {
display: flex;
min-width: 400px;
height : 320px;
}
.tech-steps-section {
width: 1300px;
margin: -40px;
margin-left : -260px !important;
padding: 0 20px;
text-align: center;
}
.tech-steps-section h2 {
font-size: 26px;
font-weight: 600;
margin-bottom: 40px;
margin-top : -70px;
margin-left : -10px;
}
.tech-steps-grid {
display: flex;
justify-content: center;
gap: 120px;
flex-wrap: wrap;
}
.tech-steps-column {
display: flex;
flex-direction: column;
gap: 40px;
width: 500px;
}
.tech-step-item {
display: flex;
align-items: flex-start;
gap: 20px;
text-align: left;
}
.tech-step-item img {
width: 70px;
height: 70px;
object-fit: contain;
flex-shrink: 0;
}
.tech-step-item p {
font-size: 13px;
color: #687188;
font-weight: 500;
line-height: 1.5;
}
.announcement-section {
max-width: 1400px;
margin: 60px ;
margin-left : -240px !important;
margin-right : -100px !important;
padding: 0 20px;
}
.announcement-grid {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.announcement-card {
background-color: #fff;
border-radius: 10px;
padding: 30px 20px;
width: 320px;
height: 450px;
box-shadow: 4px 4px 20px rgba(0.08, 0.08, 0.08, 0.1);
text-align: center;
transition: 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.announcement-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.announcement-card img {
display : flex;
min-width: 250px;
height: 320px;
object-fit: contain;
margin-bottom: 20px;
}
.announcement-text {
margin-top: auto;
}
.announcement-text h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 10px;
color: #000;
}
.announcement-text p {
font-size: 14px;
font-weight: 500;
color: #687188;
margin: 0;
}
@media (max-width: 991px) {
/* General Padding */
.tech-support-section,
.tech-description.center,
.tech-steps-section,
.announcement-section {
padding: 20px 15px !important;
margin: 0 auto !important;
width: 100% !important;
}
.tech-heading {
font-size: 18px;
margin-top: 0;
}
.tech-heading.sub {
margin-top: 20px;
}
.tech-description,
.tech-list li,
.tech-highlight-box,
.tech-step-item p,
.announcement-text p {
font-size: 13px;
line-height: 1.6;
}
.tech-list li {
flex-direction: row;
align-items: flex-start;
}
/* Tech Highlight Box */
.tech-highlight-box {
padding: 12px 15px;
}
/* Evaluation Criteria Section */
.evaluation-criteria-section {
flex-direction: column;
gap: 30px;
align-items: center;
padding: 0 10px;
}
.evaluation-text,
.evaluation-image-box {
width: 100% !important;
margin: 0 !important;
}
.evaluation-image-box {
height: auto;
padding: 10px;
}
.evaluation-image-box img {
width: 100%;
min-width: unset;
height: auto;
}
/* Tech Steps Section */
.tech-steps-section {
text-align: center;
margin: 0 auto !important;
}
.tech-steps-section h2 {
font-size: 20px;
margin-top: 10px;
margin-bottom: 30px;
}
.tech-steps-grid {
flex-direction: column;
gap: 40px;
}
.tech-steps-column {
width: 100%;
gap: 30px;
}
.tech-step-item {
flex-direction: row;
align-items: flex-start;
gap: 15px;
}
.tech-step-item img {
width: 50px;
height: 50px;
}
/* Announcement Section */
.announcement-section {
padding: 20px 10px;
margin: 0 auto !important;
}
.announcement-grid {
flex-direction: column;
gap: 30px;
align-items: center;
}
.announcement-card {
width: 90%;
height: auto;
padding: 20px;
}
.announcement-card img {
width: 100%;
height: auto;
min-width: unset;
}
.announcement-text h3 {
font-size: 18px;
}
.announcement-text p {
font-size: 13px;
}
}
.soft-procri-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.soft-procri-bg {
width: 100%;
height: 45vh; /* Default height */
min-height: 160px;
background: url("images/procurement-optimization.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.soft-procri-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.soft-procri-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.soft-procri-bg {
height: 28vh;
min-height: 120px;
}
}
.procurement-section {
max-width: 1200px;
margin: -30px auto;
padding: 0 20px;
color: #1d1d1f;
}
.section-title {
font-size: 24px;
font-weight: 600;
text-align: center;
margin-bottom: 10px;
margin-top : -105px;
}
.tech-list {
list-style: none;
padding-left: 0;
margin-bottom: 50px;
display: flex;
flex-direction: column;
gap: 16px;
margin-left : 30px;
margin-right : 30px;
}
.tech-list li {
display: flex;
align-items: flex-start;
font-size: 13px;
margin-bottom : -10px;
color: #687188;
font-weight: 500;
line-height: 1.6;
}
.tech-list li i {
color: #0066ff;
margin-right: 10px;
font-size: 16px;
margin-top: 3px;
}
.centered-para {
text-align: center;
font-size: 13px;
color: #687188;
font-weight: 500;
margin: 20px 30px 50px 30px;
}
.value-added-section {
display: flex;
gap: 40px;
flex-wrap: wrap;
align-items: flex-start;
margin-top : 150px;
}
.value-added-text {
flex: 2;
}
.value-added-image {
flex: 1;
display: flex;
margin-top : -60px;
justify-content: center;
align-items: center;
margin-right : 30px;
}
.value-added-image img {
max-width: 80%;
border: 1px solid #ccc;
}
.portfolio-section {
max-width: 1400px;
margin: 0px;
margin-left : -250px !important;
margin-right : 130px;
padding: 0 20px;
text-align: center;
}
.portfolio-heading {
font-size: 24px;
font-weight: 600;
margin-bottom: 40px;
margin-top : -30px;
}
.portfolio-grid {
display: flex;
justify-content: center;
gap: 60px;
flex-wrap: wrap;
}
.portfolio-card {
background-color: #fff;
border-radius: 10px;
padding: 30px 20px;
width: 320px;
height: 350px;
box-shadow: 4px 4px 22px rgba(0.08, 0.08, 0.08, 0.1);
text-align: center;
transition: 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
}
.portfolio-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.portfolio-card img {
width: 250px;
height: 250px;
object-fit: contain;
margin-bottom: 20px;
}
.portfolio-text {
margin-top: auto;
}
.portfolio-text h3 {
font-size: 18px;
font-weight: 600;
color: #000;
}
.software-section {
padding: 60px 0 0 200px;
background-color: #fff;
color: #2e2e2e;
margin-left : -200px !important;
}
.software-container {
max-width: 1500px;
margin: 0;
margin-left : -250px !important;
margin-right : 50px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
}
.software-content {
flex: 1;
min-width: 800px;
}
.software-content h2 {
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
text-align: center;
}
.software-content p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 30px;
text-align: justify;
color: #687188;
font-weight : 600;
}
.software-list {
list-style: none;
padding: 0;
margin: 0;
}
.software-list li {
font-size: 14px;
line-height: 1.8;
margin-bottom: 16px;
display: flex;
align-items: flex-start;
color: #687188;
font-weight : 600;
}
.software-list .icon {
color: #0078d4;
font-size: 16px;
margin-right: 12px;
margin-top: 7px;
flex-shrink: 0;
}
.software-image {
flex: 1;
min-width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin-right : 30px;
margin-top : 100px !important;
}
.software-image img {
max-width: 80%;
height: auto;
object-fit: contain;
}
.order-process-section {
max-width: 1400px;
margin: 60px;
margin-left : -300px !important;
padding: 0 20px;
font-family: 'Segoe UI', sans-serif;
color: #2e2e2e;
text-align: center;
}
.order-process-heading {
font-size: 24px;
font-weight: 700;
margin-bottom: 40px;
}
.order-process-grid {
display: flex;
justify-content: center;
gap: 120px;
flex-wrap: wrap;
}
.order-card {
background-color: #fff;
border-radius: 10px;
width: 320px;
height: 520px; /* same height */
box-shadow: 4px 4px 20px rgba(0.08, 0.08, 0.08, 0.1);
display: flex;
flex-direction: column;
align-items: center;
padding: 30px 20px;
text-align: center;
}
.order-card img {
width: 300px !important;
height: 200px;
object-fit: contain;
margin-bottom: 20px;
}
.order-card-text {
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-grow: 1;
width: 100%;
}
/* Set fixed height for headings and paragraphs */
.order-card-text h3 {
font-size: 18px;
font-weight: 600;
color: #000;
height: 50px; /* force all titles to be same height */
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 12px;
line-height: 1.3;
}
.order-card-text p {
font-size: 13px;
color: #687188;
line-height: 1.6;
margin: 0;
font-weight : 500;
height: 220px; /* force all paragraphs to be same height */
overflow: hidden; /* prevent layout break if too long */
text-align: justify;
}
.assessment-section {
max-width: 1100px;
margin: 60px ;
margin-left : -250px !important;
margin-right : 130px;
padding: 0 20px;
}
.assessment-heading {
text-align: center;
font-size: 26px;
font-weight: 600;
margin-bottom: 40px;
}
.assessment-phase {
margin-bottom: 60px;
}
.assessment-content {
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
}
.assessment-text {
flex: 1 1 60%;
}
.assessment-image {
flex: 1 1 35%;
text-align: right;
}
.assessment-image img {
width: 100%;
max-width: 300px;
height: auto;
object-fit: contain;
}
.assessment-title {
font-size: 20px;
font-weight: 600;
color: black;
margin-bottom: 15px;
}
.assessment-text p {
font-size: 14px;
color: #687188;
font-weight : 500;
line-height: 1.6;
margin-bottom: 20px;
text-align: justify;
}
.assessment-list {
list-style: none;
padding-left: 0;
font-size: 14px;
line-height: 1.7;
color: #687188;
font-weight : 500;
}
.assessment-list li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 12px;
}
.assessment-list i {
color: #004aad;
font-size: 16px;
margin-top: 4px;
}
@media (max-width: 991px) {
/* GENERAL RESET */
.procurement-section,
.portfolio-section,
.software-section,
.order-process-section,
.assessment-section {
margin: 0 auto !important;
padding: 20px;
max-width: 100%;
}
.section-title,
.portfolio-heading,
.order-process-heading,
.assessment-heading,
.software-content h2 {
font-size: 20px;
margin-top: 0;
}
/* FLEX TO COLUMN */
.value-added-section,
.software-container,
.order-process-grid,
.assessment-content,
.portfolio-grid {
flex-direction: column;
align-items: center;
gap: 30px;
}
/* IMAGE-TEXT SECTIONS */
.value-added-image,
.software-image,
.assessment-image,
.value-added-text,
.software-content,
.assessment-text {
flex: 1 1 100%;
max-width: 100%;
margin: 0 auto;
text-align: center;
}
.value-added-image img,
.software-image img,
.assessment-image img {
max-width: 90%;
height: auto;
}
/* TEXT CONTENT */
.tech-list,
.software-list,
.assessment-list,
.centered-para {
font-size: 13px;
margin-left: 10px;
margin-right: 10px;
text-align: justify;
}
/* GRID CARDS FULL WIDTH */
.portfolio-card,
.order-card {
width: 100%;
max-width: 340px;
height: auto;
}
.portfolio-card img,
.order-card img {
width: 90% !important;
height: auto;
}
.order-card-text h3,
.order-card-text p {
height: auto;
text-align: center;
}
/* LIST ICONS ALIGNMENT */
.tech-list li,
.software-list li,
.assessment-list li {
align-items: flex-start;
gap: 10px;
}
.software-section {
display: none;
}
/* Prevent any overflow due to large margins */
body {
overflow-x: hidden;
}
}
.partneris-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.partneris-bg {
width: 100%;
height: 45vh; /* Default height */
min-height: 160px;
background: url("images/partner-with-us.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.partneris-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.partneris-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.partneris-bg {
height: 28vh;
min-height: 120px;
}
}
body, html {
overflow-x: hidden;
margin: 0;
padding: 0;
}
.team-section {
width: 100%;
background: #fff;
}
/* Carousel Styles */
.carousel {
position: relative;
width: 100%;
overflow: hidden;
height: 700px; /* Prevent layout shift on load */
}
.carousel-inner {
display: flex;
width: 400vw;
transition: transform 0.8s ease;
}
.carousel-item {
flex: 0 0 100vw;
height: auto;
}
.carousel-item img {
width: 100%;
height: auto;
display: block;
}
/* Carousel Arrows */
.arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 2rem;
color: #000;
background: rgba(255, 255, 255, 0.6);
border: none;
padding: 8px 12px;
cursor: pointer;
z-index: 10;
transition: background 0.3s ease;
border-radius: 4px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.arrow:hover {
background: rgba(0, 0, 0, 0.1);
}
/* Tablet Fix */
@media (max-width: 768px) {
.carousel {
padding: 0 20px;
overflow: hidden;
}
.carousel-item img {
width: 100%;
max-width: 400px;
height: auto;
object-fit: contain;
margin: 0 auto;
display: block;
}
.arrow {
display:none;
}
}
/* Mobile Fix */
@media (max-width: 480px) {
.carousel {
padding: 0 10px;
}
.carousel-item img {
width: 100%;
max-width: 320px;
}
.arrow {
display:none;
}
}
/* Leadership Section */
.leadership-section {
padding: 40px 20px;
text-align: center;
background: #fff;
visibility: hidden; /* Hidden until carousel is ready */
opacity: 0;
transition: opacity 0.4s ease-in;
}
.leadership-section h1 {
margin-top: 20px;
font-size: 2.1rem;
font-weight: 700;
color: #151221;
text-align: center;
margin-bottom: 20px;
}
.leadership-section h1 span {
color: #151221;
}
.team-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 130px;
margin-top: 20px;
margin-bottom : 50px;
}
.member {
max-width: 250px;
text-align: center;
margin-top: 20px;
}
.img-container {
position: relative;
width: 100%;
overflow: hidden;
}
.img-container img {
width: 100%;
height: auto;
display: block;
}
/* LinkedIn Button */
.linkedin-btn {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
background: #0077b5;
color: white;
border-radius: 50%;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
text-decoration: none;
font-size: 1rem;
}
.img-container:hover .linkedin-btn {
opacity: 1;
pointer-events: auto;
}
.member h3 {
margin: 10px 0 0;
font-size: 1.1rem;
color: #111;
}
.member p {
margin: 5px 0 0;
font-size: 13px;
font-weight: 600;
opacity: 0.95;
color: #687188;
}
@media screen and (max-width: 1024px) {
.team-grid {
display: flex;
flex-direction: column;
align-items: center;
gap: 30px !important;
margin-top: 0 !important; /* Remove top space */
margin-bottom: 50px;
}
.member {
width: 100%;
max-width: 400px;
margin-top: 0 !important;
}
}
.partners-section {
padding: 60px 20px;
background-color: #f9f9f9;
text-align: center;
}
.partner-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 60px;
max-width: 1200px;
margin: auto;
margin-bottom : 100px;
}
.partner-card {
background: white;
border-radius: 7px;
margin-top : 50px;
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
padding: 30px 50px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
height: 130px;
width: 360px;
text-decoration: none;
}
.partner-card img {
max-height: 50px;
max-width: 100%;
object-fit: contain;
}
.partner-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
}
.partner-section select {
border: none;
border-bottom: 1px solid var(--c-line);
background: transparent;
padding: 10px 0;
font-size: 16px;
width: 100%;
color: var(--c-text);
outline: none;
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0.5rem center;
background-size: 14px;
padding-right: 24px;
}
.partner-section select:focus {
border-bottom: 1px solid var(--c-primary);
}
.partner-section select option {
color: var(--c-text);
background: white;
}
/* Optional: style placeholder option */
.partner-section select option[disabled] {
color: rgba(12, 37, 77, 0.5); /* lighter version of --c-text */
}
/* Responsive Adjustments */
@media (max-width: 768px) {
.partner-card {
width: 45%;
padding: 25px 30px;
}
}
@media (max-width: 480px) {
.partner-card {
width: 100%;
}
}
.form-wrapper {
max-width: 1000px;
margin: auto;
margin-bottom : 50px;
}
form {
background-color: #f7f8fc;
padding: 60px 50px 70px;
border-radius: 14px;
justify-content : center;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 35px 70px; /* row-gap / column-gap */
}
/* ---------- Inputs & Select ---------- */
input,
select {
border: none;
border-bottom: 1px solid #ccc; /* π Clear light gray visible line */
background: transparent;
padding: 10px 0;
font-size: 16px;
width: 100%;
outline: none;
transition: border-color 0.3s ease;
}
input:hover,select:hover{
border-bottom :1px solid #0056ff;
}
select {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 0 top 50%;
color : #777;
background-size: 14px;
padding-right: 24px;
}
/* ---------- Submit Button ---------- */
/* ---------- Submit button β partner form only ---------- */
.form-wrapper button{
grid-column:1 / -1; /* span full grid width */
align-self:center; /* vertical centring */
justify-self:center; /* horizontal centring */
width : 200px;
display:inline-flex;
align-items:center;
padding-left : 20px; /* top / bottom padding */
border:none;
border-radius:60px; /* full pill-shape */
overflow:hidden; /* hide divider overlap */
height : 60px;
background:#0056ff; /* primary blue */
color:#fff;
font:600 18px/1 'Inter',sans-serif;
cursor:pointer;
transition:background .25s ease;
}
/* change shade on hover */
.form-wrapper button:hover{
background:#003fcc;
}
/* text part */
.form-wrapper button span{
padding:18px 46px 18px 60px; /* room for text */
}
/* plus box */
.form-wrapper button::after{
content:'+';
display:flex;
align-items:center;
justify-content:center;
width:40px; /* width of the right box */
height:60px;
font-size:24px;
border-left:1px solid rgba(255, 255, 255, 0.2); /* vertical divider */
margin-left : 30px;
}
/* ---------- Responsive ---------- */
@media (max-width: 768px) {
form {
grid-template-columns: 1fr;
}
button {
width: 100%;
}
}
/* ---------- Country selector wrapper ---------- */
.country-select{
position:relative;
}
/* input inherits your underline styles */
/* suggestion list */
.country-list{
position:absolute;
left:0; right:0; top:100%;
margin:4px 0 0;
max-height:220px;
background:#fff;
border:1px solid var(--c-line);
border-radius:6px;
box-shadow:0 4px 16px rgba(0,0,0,.08);
list-style:none;
overflow:auto;
z-index:20;
display:none; /* hidden until user types */
}
.country-list li{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
font:15px/1 'Inter',sans-serif;
color:var(--c-text);
cursor:pointer;
}
.country-list li:hover{
background:var(--c-primary);
color:#fff;
}
.country-list img{
width:20px; height:14px; object-fit:cover;
flex-shrink:0;
}
/* flag inside the closed field */
.country-select .selected-flag{
position:absolute;
left:0;
top:50%;
transform:translateY(-50%);
width:20px;
height:14px;
object-fit:cover;
border:1px solid #aaa;
display:none; /* hidden until a country is chosen */
}
/* push text to the right so it never overlaps flag */
/* in your existing stylesheet, override just for this input */
.country-select input{
padding-left: 40px; /* was 32px β now enough room for flag + gap */
/* keep any other styles (border-bottom etc.) */
}
/* base row in the list */
.country-list li{
display:flex;
align-items:center;
gap:10px;
padding:8px 12px;
font:15px 'Inter',sans-serif;
color:#0c254d; /* dark text on white list */
cursor:pointer;
}
/* hover / arrowβkey highlight */
.country-list li:hover,
.country-list li.active{
background:#0056ff; /* blue bar */
color:#fff; /* white text */
}
/* keep flag exactly as it is βΒ NO special filter */
.country-list li img{
width:20px;height:14px;
object-fit:cover;
border:1px solid #aaa;
}
section {
transition: opacity 0.4s ease;
}
.case-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
padding: 30px 150px;
position: relative;
}
.case-card {
position: relative;
overflow: hidden;
border-radius: 5px;
height: 480px;
width: 100%;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: transform 0.2s ease, z-index 0.2s ease;
z-index: 1;
}
/* π¦ On hover: slightly expand both sides into the gap */
.case-card:hover {
transform: scaleX(1.05); /* widen horizontally */
z-index: 10;
}
.case-card img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: opacity 0.4s ease;
}
@media screen and (max-width: 1024px) {
.case-grid {
grid-template-columns: repeat(2, 1fr);
padding: 30px 50px; /* reduce side padding for smaller screens */
gap: 40px;
}
}
.case-card:hover img {
opacity: 0.1;
}
.case-card .overlay {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
background-color: #2c5ea5;
color: white;
opacity: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 20px;
transition: opacity 0.4s ease;
}
.case-card:hover .overlay {
opacity: 1;
}
.overlay h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 8px;
width: 70%; /* π or use 80%, 100%, etc. */
text-align: center;
word-wrap: break-word; /* ensures long titles wrap */
}
.overlay p {
font-size: 14px;
font-style: italic;
}
.case-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-top: 30px;
margin-bottom : 70px;
}
.case-pagination button {
background: none;
border: none;
font-size: 20px;
color: #222;
cursor: pointer;
padding: 4px 10px;
transition: transform 0.2s ease;
}
#caseStudyIndicators {
display: flex;
gap: 10px;
}
#caseStudyIndicators span {
width: 30px;
height: 30px;
background-color: #eee;
color: #222;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
}
#caseStudyIndicators span:hover {
background-color: #dce6f5;
}
#caseStudyIndicators .active {
background-color: #2c5ea5;
color: white;
}
#case-detail-1 {
color: #495a6c;
}
.case-detail-us div {
width: 100%;
background-position: center;
background-repeat: no-repeat;
}
.case1 {
text-align: center;
margin-top: 0 !important;
margin-bottom : 30px;
}
.case1 img{
height : 400px;
width : 350px;
}
.project-section {
display: flex;
justify-content: space-between;
gap: 40px;
flex-wrap: wrap;
margin-bottom: 40px;
margin-left : 150px;
margin-right : 150px;
}
.project-content {
width: 65%;
}
.project-content h2 {
font-size: 20px;
display: flex;
justify-content: center;
font-weight: bold;
margin-bottom: 15px;
color: #000;
}
.project-content p {
font-size: 14px;
line-height: 1.6;
font-weight: 400;
color: #687188;
}
.project-info-box {
width: 30%;
padding: 30px;
border: 5px solid #e4effc;
background-color: #f9fcff;
padding-left : 50px;
}
.project-info-box h3 {
font-size: 20px;
font-weight: 600;
color: #000;
margin-bottom: 25px;
}
.info-row {
display: flex;
margin: 10px 0;
}
.info-label {
width: 90px;
font-weight: bold;
color: #2d2d2d;
font-size : 14px;
}
.info-value {
color: #687188;;
line-height: 1.4;
font-size : 14px;
}
.tab-section {
margin-top: 20px;
}
.tabs {
display: flex;
justify-content: left;
gap: 60px; /* β
spacing between tabs */
}
.tab {
position: relative;
font-weight: 500;
color: #a0a9b9;
cursor: pointer;
font-size: 14px;
text-transform: uppercase;
}
.tab.active {
color: #1c2e5a;
}
.tab.active::after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 100px; /* width of underline */
height: 2px;
background-color: blue;
border-radius: 2px;
}
.tab-content {
width: 100%;
width: 1200px; /* You can adjust this to control width */
height: 300px; /* Fixed height */
overflow-y: auto; /* Scroll only if content overflows */
padding: 20px;
background-color: #fff;
border: 1px solid #1c2e5a;
box-sizing: border-box;
margin-top: 10px;
transition: all 0.3s ease;
margin-bottom : 50px;
}
.tab-content p {
font-weight: bold;
font-size: 14px;
margin-bottom: 15px;
color: #2d2d2d;
}
.tab-content ul {
list-style-type: disc;
padding-left: 20px;
}
.tab-content ul li {
margin-bottom: 10px;
color: #55606e;
font-size: 14px;
}
@media (max-width: 1024px) {
.project-section {
flex-direction: column;
margin: 0 30px;
gap: 20px;
}
.project-content, .project-info-box {
width: 100%;
}
.project-info-box {
padding: 20px;
padding-left: 20px;
}
.tab-content {
width: 100%;
height: auto;
}
}
@media (max-width: 768px) {
.case1 img {
width: 100%;
height: auto;
}
.tabs {
flex-direction: column;
gap: 10px;
}
.tab {
font-size: 14px;
text-align: left;
}
.tab.active::after {
left: 0;
transform: none;
}
.tab-content {
padding: 15px;
width: 100%;
height: auto;
}
.project-content h2 {
font-size: 18px;
}
.project-content p,
.info-label,
.info-value {
font-size: 13px;
}
}
@media (max-width: 480px) {
.tabs {
gap: 8px;
}
.tab {
font-size: 13px;
}
.project-content h2 {
font-size: 16px;
}
.tab-content ul li {
font-size: 14px;
}
.tab-content {
padding: 10px;
}
}
.gallery-section {
display: flex;
flex-direction: column;
align-items: center; /* center h2 and grid horizontally */
padding: 2rem 1rem;
}
.gallery-title {
text-align: center;
font-size: 2rem;
margin-bottom: 1.5rem;
}
.gallery-grid {
display: grid;
grid-template-columns: 1fr; /* one column only */
gap: 20px;
width: 80%;
max-width: 1000px;
justify-items: center; /* center image cards inside grid */
}
.gallery-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
gap: 20px;
width: 90%;
max-width: 1200px;
justify-items: center;
}
.gallery-card {
background-color: #f8f8f8;
padding: 10px;
border-radius: 8px;
width: 100%;
}
.gallery-card img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.lightbox {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.85);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
padding: 20px;
}
.lightbox.open {
display: flex;
}
.lightbox img {
max-width: 95vw;
max-height: 95vh;
border-radius: 6px;
box-shadow: 0 10px 30px rgba(0,0,0,0.4);
}
.lightbox__close {
position: absolute;
top: 15px;
right: 20px;
font-size: 2rem;
line-height: 1;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
}
@media (max-width: 600px) {
.gallery-grid {
grid-template-columns: 1fr; /* stack items vertically */
width: 90%;
}
}
.connectimg {
position: relative;
width: 100%;
max-width: 100%;
}
.connectimg img {
height: 350px;
width: 100%;
object-fit: cover;
display: block;
}
.connectimg .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 7); /* Slight dark overlay */
z-index: 1;
}
.connectimg h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 45px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
margin: 0;
}
.careersimg {
position: relative;
width: 100%;
max-width: 100%;
}
.careersimg img {
height: 350px;
width: 100%;
object-fit: cover;
display: block;
}
.careersimg h2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 50px;
font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
margin: 0;
}
.careersimg .overlay {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: rgba(0, 0, 0, 7); /* Slight dark overlay */
z-index: 1;
}
.recruitment-section {
padding: 60px 20px;
background-color: #fff;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.recruitment-container {
max-width: 675px;
margin: 0 auto;
margin-top : -30px;
text-align: left;
color: #222;
line-height: 1.7;
padding: 0 15px;
box-sizing: border-box;
font-family: "Asap", "Poppins", sans-serif;
}
.recruitment-container h2 {
text-align: center;
font-size: 26px;
font-weight: 700;
margin-bottom: 30px;
color: #111;
font-family: "Inter", "sans-serif";
}
.recruitment-container p {
font-size: 14px;
margin-bottom: 10px;
color : #687188;
}
/* Responsive Typography */
@media (max-width: 768px) {
.recruitment-container h2 {
font-size: 26px;
}
.recruitment-container p {
font-size: 15px;
}
}
@media (max-width: 480px) {
.recruitment-container h2 {
font-size: 22px;
}
.recruitment-container p {
font-size: 14px;
}
}
/* Apply Process Guide Section */
.apply-process-guide {
background-color: #fff;
padding: 20px 20px;
text-align: center;
margin-top : -50px !important;
font-family: "Asap", "Poppins", sans-serif;
}
.apply-process-guide h2 {
font-size: 26px;
color: #151221;
margin-bottom: 10px;
font-family: "Inter", sans-serif;
}
.apply-process-guide ul {
list-style: none;
padding: 0;
max-width: 700px;
margin: 0 auto;
text-align: left;
line-height: 1.7;
}
.apply-process-guide li {
font-size: 14px;
margin-bottom : 5px;
color: #687188;
font-weight: 500;
}
.apply-process-guide li i {
color: #3498db;
margin-right: 10px;
}
.button-group {
display: flex;
justify-content: space-around;
margin-top : 50px !important;
margin-bottom : 10px !important;
flex-wrap: wrap; /* In case screen is too narrow */
}
.job-desc-btn {
margin-top: 15px;
background-color: #3498db;
color: white !important;
padding: 15px 16px !important;
border: none;
border-radius: 8px;
width : 150px;
height : 50px;
cursor: pointer;
font-size: 13px;
font-family: inherit;
}
.job-desc-btn:hover {
background-color: #1976d2;
}
.application-popup-box textarea {
width: 100%;
border: 1px solid #ccc;
padding: 10px;
border-radius: 4px;
resize: vertical;
margin-top: 12px;
}
.apply-action-btn {
margin-top: 15px;
background-color: #3498db;
color: white;
padding: 10px 16px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: background-color 0.3s ease;
}
#applicationPopup {
display: none;
transition: opacity 0.3s ease;
opacity: 0;
}
#applicationPopup.show {
display: block;
opacity: 1;
}
.apply-action-btn:hover {
background-color: #2c80b4;
}
/* Application Popup Form */
.application-popup-section {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.6);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
}
/* Popup Box */
.application-popup-box {
background-color: white;
padding: 30px;
border-radius: 12px;
width: 95%;
max-width: 500px;
max-height: 100vh; /* π limits height */
overflow-y: auto;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
position: relative;
margin: auto; /* helps ensure center even without flex sometimes */
}
.application-popup-box h3 {
margin-bottom: 20px;
font-size: 1.5rem;
color: #2c3e50;
}
.application-popup-box form {
display: flex;
flex-direction: column;
gap: 12px;
}
.application-popup-box input,
.application-popup-box textarea {
padding: 10px;
font-size: 1rem;
border-radius: 6px;
border: 1px solid #ccc;
}
.application-popup-box input[type="file"] {
padding: 6px;
}
.application-popup-box button[type="submit"] {
background-color: #3498db;
color: white;
padding: 10px;
border: none;
border-radius: 6px;
font-size: 1rem;
cursor: pointer;
}
.application-popup-box button[type="submit"]:hover {
background-color: #2c80b4;
}
.application-popup-box button[type="button"] {
background-color: #ccc;
color: #333;
padding: 8px;
border: none;
border-radius: 6px;
font-size: 0.95rem;
cursor: pointer;
}
.application-popup-box button[type="button"]:hover {
background-color: #999;
}
.jobapp-form-section {
margin-top: 40px;
padding: 20px;
background: #f4f4f4;
border-radius: 8px;
}
.jobapp-form input,
.jobapp-form textarea {
display: block;
width: 100%;
margin: 10px 0;
padding: 10px;
}
@media (max-width: 768px) {
.job-card-box {
width: 90%;
}
.jobs-card-deck {
max-width: 100%;
flex-direction: column;
align-items: center;
}
}
.contact-info-section {
display: flex;
justify-content: center;
gap: 2rem;
padding: 40px 20px;
background: #fff;
margin-top : -80px;
box-shadow: 0 1px 18px 9px rgba(0, 0, 0, 0.03);
}
.contact-card {
background: white;
box-shadow: 0px 1px 18px 10px rgba(0, 0, 0.05, 0.05);
padding: 40px 30px;
text-align: center;
flex: 1;
max-width: 300px;
transition: transform 0.3s;
}
.contact-card:hover {
transform: translateY(-5px);
}
.icon-circle {
width: 80px;
height: 80px;
background: white;
color : #155cd7;
border-radius: 50%;
margin: 0 auto 20px;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.07);
}
.contact-card h3 {
font-family: 'Inter', sans-serif;
font-size: 20px;
font-weight : 500px;
color: #000;
margin-bottom: 15px;
}
.contact-card a,
.contact-card p {
color: #687188;
font-weight : 500;
font-size: 14px;
font-family: 'Inter', sans-serif;
text-decoration: none;
line-height: 1.5;
}
/* Tablet & below (β€ 768px) */
@media (max-width: 768px) {
.contact-info-section {
flex-direction: column;
align-items: center;
padding: 30px 15px;
gap: 30px;
margin-top: -40px; /* less negative margin for smaller screens */
}
.contact-card {
max-width: 90%;
padding: 30px 20px;
}
.contact-card h3 {
font-size: 18px;
}
.contact-card a,
.contact-card p {
font-size: 13px;
}
.icon-circle {
width: 70px;
height: 70px;
font-size: 22px;
}
}
/* Mobile (β€ 480px) */
@media (max-width: 480px) {
.contact-info-section {
padding: 20px 10px;
gap: 25px;
margin-top: -30px;
}
.contact-card {
padding: 25px 15px;
box-shadow: 0px 1px 12px 6px rgba(0, 0, 0, 0.03);
}
.contact-card h3 {
font-size: 16px;
margin-bottom: 10px;
}
.contact-card a,
.contact-card p {
font-size: 12.5px;
}
.icon-circle {
width: 60px;
height: 60px;
font-size: 20px;
margin-bottom: 15px;
}
}
/* === Apply form-container styles to .contact-box === */
.contact-box {
max-width: 1000px;
margin: 60px auto;
padding: 40px;
text-align: center;
}
.contact-box h1 {
color: #111827;
font-size: 38px;
margin-left: 200px;
margin-bottom: 10px;
}
.contact-box form {
display: flex;
flex-direction: column;
gap: 70px;
}
.contact-box .input-row {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: space-between;
}
.contact-box .input-field {
flex: 1;
display: flex;
flex-direction: column;
min-width: 300px;
position: relative;
overflow: visible;
}
.contact-box label {
font-weight: 200;
font-size: 14px;
color: rgb(85, 85, 85);
margin-bottom: -38px;
text-align: left;
}
.contact-box textarea,
.contact-box input[type="text"],
.contact-box input[type="email"],
.contact-box input[type="tel"],
.contact-box select {
padding: 12px 4px;
font-size: 14px;
font-weight: 200;
font-family: 'Inter', sans-serif;
color: rgb(85, 85, 85);
border: none;
border-bottom: 1px solid #cbd5e1;
background: transparent;
outline: none;
transition: border-color 0.3s ease;
}
.contact-box input:focus,
.contact-box textarea:focus,
.contact-box select:focus {
border-bottom: 2px solid #0061ff;
}
.contact-box input:hover,
.contact-box textarea:hover {
border-bottom: 1px solid #0061ff;
}
.contact-box .full-width {
width: 100%;
margin-top: -20px;
}
.contact-box .full-width textarea {
height: 100px;
resize: vertical;
}
.contact-box .dropdown-style {
position: relative;
}
.contact-box .form-button {
margin-top: -45px;
align-self: center;
background: #0061ff;
color: white;
border: none;
padding: 0 32px;
border-radius: 30px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: stretch;
gap: 16px;
height: 50px;
}
.contact-box .button-label,
.contact-box .button-icon {
display: flex;
align-items: center;
}
.contact-box .button-line {
width: 0.5px;
background-color: #ebebeb;
opacity: 0.2;
align-self: stretch;
}
.contact-box .iti__flag-container,
.contact-box .iti--separate-dial-code .iti__selected-flag {
background: transparent !important;
box-shadow: none !important;
border: none !important;
font-size : 14px;
}
.contact-box .iti {
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Already present, just improve heading alignment */
.contact-box h1 {
color: #111827;
font-size: 38px;
margin-bottom: 10px;
text-align: center; /* Replace margin-left */
}
/* Ensure input fields stretch full width below 768px */
@media (max-width: 768px) {
.contact-box {
padding: 30px 20px;
}
.contact-box h1 {
font-size: 28px;
margin-left: 0;
}
.contact-box .input-row {
flex-direction: column;
gap: 50px; /* reduce spacing between inputs */
}
.contact-box .input-field {
width: 100%;
min-width: unset;
}
.contact-box .form-button {
width: 100%;
font-size: 16px;
height: 45px;
margin-top: -30px;
}
.contact-box .full-width textarea {
height: 100px;
}
.contact-box label {
margin-bottom: -30px;
}
.contact-box input,
.contact-box textarea,
.contact-box select {
font-size: 15px;
}
}
/* Even smaller devices */
@media (max-width: 480px) {
.contact-box h1 {
font-size: 24px;
}
.contact-box .form-button {
height: 44px;
}
}
/* Outer section wrapper */
#privacy-policy.content-section {
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Banner Image */
.pripolicy-banner {
background-image: url('images/privacyploicy.png');
height: 300px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Privacy Policy Text Content */
.privacy-content {
max-width: 700px;
margin: 0px auto 0;
padding: 40px 20px;
font-family: 'Inter', sans-serif;
color: #555;
}
.privacy-content h2 {
font-size: 24px;
color: #222;
margin-bottom: 20px;
text-align: center;
}
.privacy-content p {
font-size: 14px;
line-height: 1.7;
margin-bottom: 20px;
color: #687188;
text-align: left;
}
/* Info Collection Section */
.info-collection {
max-width: 700px;
margin: -20px auto 60px;
padding: 0 20px 40px;
font-family: 'Inter', sans-serif;
color: #4b5563;
}
.info-collection h2 {
text-align: center;
font-size: 24px;
color: #222;
margin-bottom: 10px;
}
.info-collection h3 {
text-align: center;
font-size: 15px;
font-weight: 600;
color: #333;
margin-bottom: 30px;
}
.info-collection ul {
list-style: none;
padding-left: 0;
}
.info-collection li {
margin-bottom: 16px;
padding-left: 20px;
position: relative;
line-height: 1.6;
font-size : 14px;
color : #687188;
}
.info-collection li::before {
font-family: "Font Awesome 6 Free";
content: "\f35a"; /* fa-regular fa-circle-right */
position: absolute;
left: 0;
top: 2px;
font-weight: 400; /* Regular weight */
color: #687188;
font-size: 14px;
}
.info-section {
max-width: 700px;
margin: -50px auto;
margin-top : -70px !important;
padding: 0 20px 40px;
font-family: 'Inter', sans-serif;
color: #4b5563;
}
.info-section h3 {
font-size: 15px;
font-weight: 600;
color: #374151;
margin-bottom: 20px;
text-align: center;
}
.info-section .subheading {
margin-top: 40px;
}
.info-list {
list-style: none;
padding-left: 20px;
}
.info-list li {
position: relative;
padding-left: 28px;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.6;
color: #687188;
}
.info-list li::before {
content: "\f35a"; /* fa-circle-right */
font-family: "Font Awesome 6 Free";
font-weight: 400; /* fa-regular */
position: absolute;
left: 0;
top: 2px;
color: #687188;
font-size: 14px;
}
.data-collection-usage-section {
max-width: 700px;
margin: 0px auto;
padding: 0 20px 40px;
font-family: 'Inter', sans-serif;
color: #4b5563;
}
/* Headings */
.data-collection-title,
.data-usage-title {
text-align: center;
font-size: 20px;
font-weight: 700;
color: #374151;
margin-top: 40px;
margin-bottom: 10px;
}
.data-collection-subtitle {
text-align: center;
font-size: 15px;
font-weight: 600;
color: #374151;
margin-bottom: 30px;
}
/* Lists */
.data-collection-list,
.data-usage-list {
list-style: none;
padding-left: 20px;
margin-bottom: 40px;
}
.data-collection-list li,
.data-usage-list li {
position: relative;
padding-left: 28px;
margin-bottom: 16px;
font-size: 14px;
line-height: 1.6;
color: #687188;
}
.data-collection-list li::before,
.data-usage-list li::before {
content: "\f35a"; /* fa-regular fa-circle-right */
font-family: "Font Awesome 6 Free";
font-weight: 400;
position: absolute;
left: 0;
top: 2px;
color: #687188;
font-size: 14px;
}
.data-legal-basis-section {
max-width: 700px;
margin: 0px auto;
padding: 0 20px 40px;
padding-left : 30px;
font-family: 'Inter', sans-serif;
color: #4b5563;
line-height: 1.7;
}
.data-legal-basis-section p {
font-size: 14px;
color: #687188;
margin-bottom: 20px;
text-align: left;
}
.privacy-details-section {
max-width: 700px;
margin: -20px auto;
padding: 0 30px;
font-family: 'Inter', sans-serif;
color: #4b5563;
line-height: 1.7;
}
.privacy-block {
margin-bottom: 30px;
}
.privacy-heading {
font-weight: 600;
color: #1f2937;
font-size: 15px;
margin-bottom: 10px;
text-align: center;
}
.privacy-block p{
font-size: 14px;
color: #687188;
margin-bottom: 20px;
text-align: left;
}
.disclosure-section {
max-width: 700px;
margin: -20px auto;
padding: 0 20px;
font-family: 'Inter', sans-serif;
color: #4b5563;
line-height: 1.7;
}
.disclosure-block {
margin-bottom: 30px;
}
.disclosure-title {
font-weight: 600;
color: #1f2937;
font-size: 15px;
margin-bottom: 10px;
text-align: center;
}
.disclosure-block p{
font-size: 14px;
color: #687188;
margin-bottom: 20px;
text-align: left;
}
.security-section {
max-width: 700px;
margin: 0px auto;
padding: 0 20px;
font-family: 'Inter', sans-serif;
color: #4b5563;
line-height: 1.7;
}
.security-content {
margin-bottom: 30px;
}
.security-title {
font-weight: 600;
color: #1f2937;
font-size: 15px;
margin-bottom: 10px;
text-align: center;
}
.security-content p{
font-size: 14px;
color: #687188;
margin-bottom: 20px;
text-align: left;
}
.sls-privacy-section {
max-width: 700px;
margin: 0px auto;
padding: 0 20px;
font-family: 'Inter', sans-serif;
color: #4b5563;
line-height: 1.7;
}
.sls-privacy-container {
margin-bottom: 30px;
}
.sls-privacy-heading {
font-weight: 600;
color: #1f2937;
font-size: 15px;
margin: 30px 0 10px;
text-align: center;
}
.sls-privacy-container p{
font-size: 14px;
color: #687188;
margin-bottom: 20px;
text-align: left;
}
.sls-rights-section {
max-width: 700px;
margin: 0px auto;
padding: 0 20px;
font-family: 'Inter', sans-serif;
color: #4b5563;
line-height: 1.7;
}
.sls-rights-container {
margin-bottom: 30px;
}
.sls-rights-heading {
font-weight: 600;
color: #1f2937;
font-size: 19px;
text-align: center;
margin-bottom: 10px;
}
.sls-rights-subheading {
font-weight: 600;
text-align: center;
font-size : 15px;
margin-bottom: 20px;
}
.sls-rights-list {
list-style: none;
padding-left: 0;
margin-bottom: 20px;
}
.sls-rights-list li {
margin-bottom: 15px;
position: relative;
font-size : 14px;
color : #687188;
padding-left: 24px;
}
.sls-rights-list li i {
position: absolute;
left: 0;
top: 7px;
color: #6b7280;
}
.sls-rights-sublist {
list-style: none;
margin-top: 10px;
margin-left: 10px;
padding-left: 15px;
}
.sls-rights-sublist li {
margin-bottom: 10px;
font-size : 14px;
color : #687188;
position: relative;
padding-left: 24px;
}
.sls-rights-sublist li i {
position: absolute;
left: 0;
top: 7px;
color: #9ca3af;
}
.sls-rights-note {
margin: 15px 0;
font-size : 14px;
color : #687188;
}
.sls-rights-link {
color: #3b82f6;
text-decoration: underline;
}
.sls-rights-email {
font-weight: 600;
font-size : 14px;
color : #687188;
margin-top: 20px;
}
.privacyx-container {
max-width: 700px;
margin: 0px auto;
padding: 25px;
color: #3b3b3b;
line-height: 1.7;
font-size: 16px;
}
.privacyx-heading-main,
.privacyx-heading-sub {
color: #2c2c2c;
font-weight: 700;
text-align: center;
margin-bottom: 18px;
}
.privacyx-heading-main {
font-size: 20px;
}
.privacyx-heading-sub {
font-size: 18px;
margin-top: 36px;
}
.privacyx-paragraph {
margin-bottom: 18px;
text-align: justify;
font-size : 14px;
color : #687188;
}
/* Current Jobs Display Section */
.current-jobs-display {
padding: 50px 20px;
background-color: #fff;
text-align: center;
margin-top : -50px !important;
}
.openings-title {
font-size: 2rem;
margin-bottom: 17px;
color: #151221;
}
/* Job Cards */
.jobs-card-deck {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
max-width: 1100px; /* 3 cards max */
margin: 0 auto;
}
.job-card-box {
background-color: #f4f6f9;
padding: 25px;
width: 350px;
height : 270px;
justify-content: center;
padding : 20px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
transition: transform 0.2s ease;
text-align: center;
}
.job-card-box:hover {
transform: translateY(-5px);
}
.job-card-box h4 {
color: #151221;
margin-bottom: 20px;
}
.job-card-box p {
color: #3b414f;
font-size: 0.95rem;
margin-bottom: 20px;
}
.job-card-box a {
color: #3498db;
text-decoration: none;
font-size: 0.9rem;
}
/* Wrap each set of 6 job cards in a slide */
.jobs-card-deck {
overflow: hidden;
position: relative;
}
.jobs-slide-group {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
flex: 0 0 100%;
transition: transform 0.5s ease-in-out;
}
#jobOpeningsDeck {
display: flex;
transition: transform 0.5s ease-in-out;
width: 100%;
}
/* Arrow Buttons */
.sls-nav-controls {
width: 100%;
text-align: center;
margin-top: 15px;
}
.sls-nav-arrow {
font-size: 18px;
padding: 7px 14px;
border: none;
background-color: #3498db;
color: #fff;
border-radius: 50%;
cursor: pointer;
margin: 0 10px;
}
.sls-nav-arrow:hover {
background-color: #fff;
border : 0.5px solid #ddd;
padding: 6px 13px;
color : #222;
}
.g-recaptcha {
transform: scale(1);
transform-origin: 0 0;
margin-top: 10px;
}
.sleaf-partnership-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.sleaf-partnership-bg {
width: 100%;
height: 45vh; /* Smaller height */
min-height: 160px;
background: url("images/partnership.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.sleaf-partnership-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small tablet */
@media (max-width: 768px) {
.sleaf-partnership-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.sleaf-partnership-bg {
height: 28vh;
min-height: 120px;
}
}
.sleaf-careers-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.sleaf-careers-bg {
width: 100%;
height: 45vh; /* Smaller height */
min-height: 160px;
background: url("images/careereisi.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.sleaf-careers-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small tablet */
@media (max-width: 768px) {
.sleaf-careers-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.sleaf-careers-bg {
height: 28vh;
min-height: 120px;
}
}
.soft-license-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.soft-license-bg {
width: 100%;
height: 45vh;
min-height: 160px;
background: url("images/licenseadv.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.soft-license-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.soft-license-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.soft-license-bg {
height: 28vh;
min-height: 120px;
}
}
.gallery-nav {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
gap: 10px;
}
.gallery-nav button {
background: #ffffff;
border: 1px solid #ddd;
padding: 10px 16px;
cursor: pointer;
border-radius: 4px;
font-size: 1.4rem;
transition: background 0.3s;
}
.gallery-nav button:hover {
background: #f0f0f0;
}
.gallery-grid{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* <-- auto-fit */
gap: 16px;
justify-items: center; /* centers the last row items */
}
.blogis-banner {
position: relative;
width: 100%;
overflow: hidden;
}
.blogis-bg {
width: 100%;
height: 45vh;
min-height: 160px;
background: url("images/blogis.png") center / cover no-repeat;
}
/* Tablet */
@media (max-width: 991px) {
.blogis-bg {
height: 35vh;
min-height: 140px;
}
}
/* Small Tablet */
@media (max-width: 768px) {
.blogis-bg {
height: 30vh;
min-height: 130px;
}
}
/* Mobile */
@media (max-width: 480px) {
.blogis-bg {
height: 28vh;
min-height: 120px;
}
}
.custom-popup {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
min-width: 200px;
max-width: 90%;
padding: 12px 24px;
border-radius: 8px;
font-size: 15px;
z-index: 9999;
color: white;
display: none;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.custom-popup.success { background-color: #22c55e; } /* Green */
.custom-popup.error { background-color: #ef4444; } /* Red */
.custom-popup.info { background-color: #22c55e; } /* Blue */
@keyframes fadeInOut {
0% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
10% { opacity: 1; transform: translateX(-50%) translateY(0); }
90% { opacity: 1; }
100% { opacity: 0; transform: translateX(-50%) translateY(-10px); }
}
.popup-message {
position: fixed;
top: 20px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 12px 24px;
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0,0,0,0.2);
z-index: 9999;
display: none;
opacity: 0;
transition: opacity 0.3s ease;
}
.popup-message.show {
display: block;
opacity: 1;
}
.form-container {
max-width: 1000px;
margin: 60px auto;
padding: 40px;
text-align: center;
}
.form-container h1 {
color: #111827;
font-size: 38px;
margin-left: 200px;
margin-bottom: 10px;
}
.form-container form {
display: flex;
flex-direction: column;
gap: 70px;
}
.form-container .row {
display: flex;
gap: 20px;
flex-wrap: wrap;
justify-content: space-between;
}
.form-group {
flex: 1;
display: flex;
flex-direction: column;
min-width: 300px;
}
.form-container label {
font-weight: 200;
font-size: 14px;
color: rgb(85, 85, 85);
margin-bottom: -38px;
text-align: left;
}
.form-container .custom-select-wrapper {
position: relative;
}
.form-container textarea {
padding: 12px 4px;
font-size: 14px;
font-weight: 200;
font-family: 'Inter', sans-serif;
color: rgb(85, 85, 85);
border: none;
border-bottom: 1px solid #cbd5e1;
background: transparent;
outline: none;
resize: vertical;
height: 100px;
transition: border-color 0.3s ease;
}
.form-container .custom-select-wrapper select {
width: 100%;
padding: 12px 40px 12px 12px;
font-size: 10px;
font-weight: 200;
border: none;
border-bottom: 1px solid #ccc;
background-color: transparent;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
cursor: pointer;
}
.form-container .select-icon {
position: absolute;
padding-bottom: 37px;
right: 14px;
top: 50%;
transform: translateY(-50%);
color: rgb(98, 98, 98);
font-size: 14px;
pointer-events: none;
}
.form-container input[type="text"],
.form-container input[type="email"],
.form-container input[type="tel"],
.form-container select,
.form-container textarea {
padding: 12px 4px;
font-size: 14px;
border: none;
border-bottom: 1px solid #cbd5e1;
background: transparent;
outline: none;
transition: border-color 0.3s ease;
}
.form-container input[type="text"]:focus,
.form-container input[type="email"]:focus,
.form-container input[type="tel"]:focus,
.form-container select:focus,
.form-container textarea:focus {
border-bottom: 2px solid #0061ff;
/* blue underline on focus */
}
.form-container input:hover,
.forms-containers textarea:hover {
border-bottom: 1px solid #0061ff;
/* blue underline on focus */
}
.form-container textarea {
resize: vertical;
height: 100px;
}
.form-container .full {
margin-top: -20px;
width: 100%;
}
.form-container .full textarea {
height: 100px;
}
.form-container .g-recaptcha {
margin-top: -50px;
}
.form-container .submit-btn {
margin-top: -45px;
align-self: center;
background: #0061ff;
color: white;
border: none;
padding: 0 32px;
border-radius: 30px;
font-size: 18px;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: stretch;
/* β
Key fix */
gap: 16px;
height: 50px;
}
.form-container .btn-text,
.form-container .btn-plus {
display: flex;
align-items: center;
}
.form-container .btn-separator {
width: 0.5px;
background-color: #ebebeb;
opacity: 0.2;
align-self: stretch;
/* β
Ensures it fills full height */
}
.form-container .iti {
width: 100% !important;
}
.form-container .iti__selected-dial-code {
font-size: 14px !important;
color: #666;
}
.form-container .iti__flag-container {
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
z-index: 2;
background-color: transparent !important;
}
.form-container .iti__selected-flag {
background-color: transparent !important;
}
.form-container ::placeholder {
color: #94a3b8;
opacity: 1;
}
.form-group .iti {
width: 100% !important;
position: relative;
}
/* Reset any form-group issues */
.form-container .form-group {
position: relative;
overflow: visible;
}
/* Optional: spacing for select icon alignment */
.form-container .custom-select-wrapper {
position: relative;
overflow: visible;
}
::placeholder {
color: rgb(85, 85, 85) !important;
}
@media (max-width: 768px) {
.form-container h1 {
margin-left: 0;
font-size: 28px;
text-align: center;
}
.form-container {
padding: 20px;
margin-bottom: 30px;
}
.form-container form {
gap: 30px;
margin-bottom: 30px;
}
.form-container .row {
flex-direction: column;
gap: 30px;
margin-bottom: 30px;
}
.form-group {
min-width: 100%;
margin-bottom: 30px;
}
.form-container .submit-btn {
width: 100%;
justify-content: center;
margin-top: 30px;
}
}
.blog-wrapper {
max-width: 1100px;
margin: 0 auto;
/* Centers the blog container */
padding: 40px 20px;
display: flex;
flex-direction: column;
align-items: center;
box-sizing: border-box;
}
.blog-post {
width: 100%;
/* Make each blog full width */
background: #fff;
margin-bottom: 40px;
border-radius: 12px;
box-shadow: 0.05px 0 4px 5px rgba(0, 0, 0.01, 0.03);
box-sizing: border-box;
}
.blog-post h3 {
margin-bottom: 15px;
font-size: 24px;
color: #222;
text-align: left;
}
.blog-post iframe {
width: 100% !important;
/* Forces full width */
max-width: 100%;
height: 500px;
border: none;
border-radius: 8px;
display: block;
}
@media screen and (max-width: 768px) {
.blog-post iframe {
height: 400px;
}
}