:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #f2eae4; }
#sertechs-site {
--sr-ink: #111111;
--sr-ink-soft: #242321;
--sr-page: #f2eae4;
--sr-surface: #fffdf9;
--sr-surface-2: #e9dfd7;
--sr-orange: #ff6a00;
--sr-orange-dark: #d95300;
--sr-muted: #6d6762;
--sr-line: rgba(17,17,17,.14);
--sr-line-light: rgba(255,255,255,.18);
--sr-radius: 24px;
--sr-radius-lg: 36px;
--sr-shadow: 0 28px 90px rgba(48,35,27,.14);
--sr-container: min(1280px, calc(100vw - 64px));
--sr-ease: cubic-bezier(.22,.75,.18,1);
overflow: hidden;
background: var(--sr-page);
color: var(--sr-ink);
font-family: "Inter", sans-serif;
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
body,
#sertechs-site,
.ser-about-page{
font-family:"Inter", sans-serif;
}
/* =================================
Sertechs About Us Page
================================= */
.ser-about-page{
background:#f8f2ec;
color:#111;
overflow:hidden;
}
.ser-about-container{
max-width:1300px;
margin:auto;
padding:0 20px;
}
/* =================================
Typography
================================= */
.ser-about-page h1{
font-size:64px;
line-height:1.05;
letter-spacing:-2px;
margin:20px 0;
font-weight:500;
font-family: "Inter", sans-serif !important;
}
.ser-about-page h2{
font-size:42px;
line-height:1.15;
font-family: "Inter", sans-serif !important;
letter-spacing:-1px;
margin:20px 0;
font-weight:500;
}
.ser-about-page h3{
font-size:18px;
margin-bottom:10px;
}
.ser-about-page strong{
color:#ff6a00;
font-weight:800;
}
.ser-about-page p{
font-size:16px;
line-height:1.7;
color:#555;
}
/* =================================
Label
================================= */
.ser-label{
/* color:#ff6a00; */
color:black;
font-size:12px;
font-weight:700;
letter-spacing:.5px;
}
.ser-label::before {
width: 8px;
height: 8px;
margin-right:10px;
border-radius: 50%;
background: #ff6a00;
box-sizing: border-box;
content: "";
display: inline-block;
box-shadow: 0 0 0 5px rgba(255, 106, 0, .12);
}
/* =================================
Button
================================= */
.ser-btn{
display: inline-flex;
align-items: center;
justify-content: space-between;
min-height: 60px;
gap: 26px;
padding: 8px 9px 8px 26px;
border: 1px solid #ff6a00;
border-radius: 999px;
background: #ff6a00;
color: #fff;
font-size: 14px;
font-weight: 800;
transition: transform .32s cubic-bezier(.22, .75, .18, 1);, background .32s cubic-bezier(.22, .75, .18, 1);, border-color .32s cubic-bezier(.22, .75, .18, 1);;
}
.ser-btn:hover{
transform: translateY(-3px);
border-color:#d95300 !important;
color:white !important;
background-color: #D95300 !important;
color: #ffffff !important;
}
a:hover{
color:white !important;
}
.ser-btn b{
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 50%;
background: #fff;
color:#111111 !important;
font-size: 18px;
font-weight: 500;
transition: transform .32s cubic-bezier(.22, .75, .18, 1);
}
/* =================================
Hero Section
================================= */
.ser-about-hero {
padding:100px 0px !important;
}
.ser-about-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
}
.ser-about-image img{
width:100%;
height:430px;
object-fit:cover;
border-radius:30px;
}
/* =================================
Stats Section
================================= */
.ser-stats{
display:grid;
grid-template-columns:repeat(4,1fr);
background:#fff;
border-radius:28px;
padding:35px 40px;
margin:40px 0;
box-shadow:0 15px 40px rgba(0,0,0,.06);
}
.ser-stats div{
font-size:40px;
font-weight:700;
text-align:center;
}
.ser-stats small{
display:block;
font-size:14px;
font-weight:400;
margin-top:5px;
color:#555;
}
/* =================================
Story Section
================================= */
.ser-story{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
padding:80px 0;
}
.ser-story img{
width:100%;
border-radius:30px;
}
/* =================================
Values Cards
================================= */
.ser-values-section{
padding:60px 0;
}
.ser-cards{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:40px;
}
.ser-card,
.ser-cards > div{
background:#fff;
padding:35px 25px;
border-radius:22px;
box-shadow:
0 10px 35px rgba(0,0,0,.05);
transition:.3s ease;
}
.ser-card:hover,
.ser-cards > div:hover{
transform:translateY(-8px);
}
/* =================================
Team Section
================================= */
.ser-team{
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
padding:80px 0;
}
.ser-team img{
width:100%;
border-radius:30px;
}
/* =================================
Process Section
================================= */
.ser-process-section{
padding:70px 0;
}
.ser-process{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:20px;
margin-top:50px;
}
.ser-process div{
background:#fff;
padding:30px 20px;
border-radius:20px;
text-align:center;
}
.ser-process span{
color:#ff6a00;
font-weight:700;
}
/* =================================
CTA Section
================================= */
.ser-cta-section{
padding:50px 0 80px;
}
.ser-cta{
background:#111;
color:#fff;
border-radius:35px;
padding:70px 40px;
text-align:center;
}
.ser-cta h2{
color:#fff;
}
.ser-cta p{
color:#ddd;
}
/* =================================
Animation
================================= */
.ser-reveal{
opacity:0;
transform:translateY(40px);
transition:.8s ease;
}
.ser-show{
opacity:1;
transform:translateY(0);
}
/* =================================
Responsive
================================= */
@media(max-width:992px){
.ser-about-grid,
.ser-story,
.ser-team{
grid-template-columns:1fr;
}
.ser-stats{
grid-template-columns:repeat(2,1fr);
}
.ser-cards{
grid-template-columns:repeat(2,1fr);
}
.ser-process{
grid-template-columns:repeat(2,1fr);
}
.ser-about-page h1{
font-size:46px;
}
}
@media(max-width:600px){
.ser-stats,
.ser-cards,
.ser-process{
grid-template-columns:1fr;
}
.ser-about-page h1{
font-size:36px;
}
.ser-about-page h2{
font-size:30px;
}
.ser-about-image img{
height:300px;
}
}