* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Inter", sans-serif;
background: #fafaf8;
color: #111111;
line-height: 1.6; margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: inherit;
}
button,
input,
textarea,
select {
font: inherit;
}
/* =========================
VARIABLES
========================= */
:root {
--black: #111111;
--dark: #181818;
--orange: #f97316;
--amber: #f59e0b;
--white: #fafaf8;
--grey: #666666;
--light-grey: #e8e8e3;
--radius: 18px;
--shadow:
0 15px 40px rgba(0, 0, 0, 0.08);
}
/* =========================
HEADER
========================= */
.header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(250, 250, 248, 0.92);
backdrop-filter: blur(15px);
border-bottom: 1px solid rgba(0,0,0,0.06);
}
.navbar {
max-width: 1200px;
margin: auto;
height: 78px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 25px;
}
.logo {
font-size: 24px;
font-weight: 800;
letter-spacing: -1px;
}
.logo span {
color: var(--orange);
}
.image_card{width: 100%;}
.nav-links {
list-style: none;
display: flex;
align-items: center;
gap: 30px;
}
.nav-links a {
font-size: 14px;
font-weight: 600;
transition: 0.3s;
}
.nav-links a:hover {
color: var(--orange);
}
.nav-button {
background: var(--black);
color: white !important;
padding: 12px 18px;
border-radius: 50px;
}
.nav-button:hover {
background: var(--orange);
}
/* =========================
HAMBURGER
========================= */
.hamburger {
display: none;
border: none;
background: transparent;
cursor: pointer;
}
.hamburger span {
display: block;
width: 27px;
height: 3px;
margin: 5px;
background: var(--black);
border-radius: 5px;
transition: 0.3s;
}
/* =========================
HERO
========================= */
.hero {
max-width: 100%;
min-height: 850px;
margin: auto;
padding: 150px 25px 100px;
display: grid;
grid-template-columns: 1fr 1fr;
align-items: center;
gap: 70px;
}
.hero{
background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)), url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1600&q=80);
background-size: cover;
background-position: center;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 20px;}
.eyebrow {
color: var(--orange);
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
margin-bottom: 18px;
}
/* .image_card{max-width: 100%;} */
.hero h1 {
font-size: clamp(45px, 6vw, 76px);
line-height: 1.02;
letter-spacing: -4px;
max-width: 700px;
}
.hero h1 span {
color: var(--orange);
}
.hero-text {
margin-top: 25px;
color: var(--grey);
max-width: 580px;
font-size: 17px;
}
.hero-buttons {
margin-top: 35px;
display: flex;
gap: 15px;
flex-wrap: wrap;
}
/* =========================
BUTTONS
========================= */
.btn {
display: inline-block;
padding: 14px 23px;
border-radius: 50px;
font-weight: 700;
border: 2px solid transparent;
cursor: pointer;
transition: 0.3s;
}
.primary {
background: var(--orange);
color: white;
}
.primary:hover {
background: var(--black);
transform: translateY(-3px);
}
.secondary {
border-color: var(--black);
}
.secondary:hover {
background: var(--black);
color: white;
}
/* =========================
BROWSER
========================= */
.browser {
border-radius: 18px;
background: var(--dark);
overflow: hidden;
box-shadow: 0 30px 70px rgba(0,0,0,0.18);
transform: rotate(2deg);
transition: 0.5s;
}
.browser:hover {
transform: rotate(0deg) translateY(-10px);
}
.browser-top {
height: 45px;
background: #252525;
display: flex;
align-items: center;
gap: 25px;
padding: 0 18px;
}
.browser-dots {
display: flex;
gap: 6px;
}
.browser-dots span {
width: 9px;
height: 9px;
background: #777;
border-radius: 50%;
}
.browser-address {
background: #191919;
color: #aaa;
border-radius: 5px;
padding: 4px 20px;
font-size: 11px;
flex: 1;
}
.browser-screen {
min-height: 400px;
padding: 50px 35px;
background:
linear-gradient(
135deg,
#171717,
#292929
);
color: white;
}
.screen-title small {
color: var(--orange);
font-weight: 700;
}
.screen-title h2 {
font-size: 45px;
margin: 10px 0;
}
.screen-title p {
color: #bbb;
}
.screen-cards {
margin-top: 50px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.screen-cards div {
height: 90px;
border-radius: 10px;
background:
linear-gradient(
135deg,
var(--orange),
var(--amber)
);
}
/* =========================
TECH STRIP
========================= */
.tech-strip {
background: var(--black);
color: white;
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 45px;
padding: 25px;
font-weight: 700;
font-size: 14px;
}
/* =========================
SECTION
========================= */
.section {
max-width: 1200px;
margin: auto;
padding: 110px 25px;
}
.section-heading {
max-width: 650px;
margin-bottom: 55px;
}
.section-heading h2 {
font-size: clamp(35px, 5vw, 55px);
line-height: 1.1;
letter-spacing: -2px;
margin-bottom: 18px;
}
.section-heading p:last-child {
color: var(--grey);
}
/* =========================
PROJECT GRID
========================= */
.project-grid {
display: grid;
grid-template-columns:
repeat(2, 1fr);
gap: 30px;
}
.project-card {
background: white;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow);
transition: 0.4s;
}
.project-card:hover {
transform: translateY(-10px);
box-shadow:
0 25px 55px rgba(0,0,0,0.12);
}
.project-card.featured {
grid-column: span 2;
display: grid;
grid-template-columns: 1.2fr 1fr;
}
/* =========================
PROJECT IMAGE
========================= */
.project-image {
min-height: 300px;
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.nail-image {
background:
linear-gradient(
135deg,
#f97316,
#f59e0b
);
}
.clock-image {
background:
linear-gradient(
135deg,
#202020,
#444
);
}
.calculator-image {
background:
linear-gradient(
135deg,
#333,
#111
);
}
.audio-image {
background:
linear-gradient(
135deg,
#f59e0b,
#d97706
);
}
.booking-image {
background:
linear-gradient(
135deg,
#222,
#555
);
}
.image-placeholder {
text-align: center;
color: white;
padding: 30px;
}
.image-placeholder span {
display: block;
font-size: 20px;
font-weight: 800;
}
.image-placeholder small {
display: block;
margin-top: 8px;
opacity: 0.8;
}
.project-number {
position: absolute;
top: 20px;
right: 20px;
background: rgba(255,255,255,0.15);
color: white;
padding: 8px 12px;
border-radius: 30px;
font-weight: 700;
}
/* =========================
PROJECT INFO
========================= */
.project-info {
padding: 35px;
}
.project-type {
font-size: 11px;
color: var(--orange);
font-weight: 800;
letter-spacing: 1.5px;
}
.project-info h3 {
font-size: 28px;
margin: 8px 0 12px;
}
.project-info > p:not(.project-type) {
color: var(--grey);
}
.tags {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 20px 0;
}
.tags span {
background: #f0f0ec;
padding: 6px 10px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
}
.project-button {
border: none;
background: transparent;
color: var(--orange);
font-weight: 800;
cursor: pointer;
}
/* =========================
SERVICES
========================= */
.services {
max-width: none;
background: var(--black);
color: white;
padding-left: max(25px, calc((100vw - 1150px) / 2));
padding-right: max(25px, calc((100vw - 1150px) / 2));
}
.service-grid {
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 20px;
}
.service-card {
border: 1px solid #333;
border-radius: 18px;
padding: 30px;
transition: 0.3s;
}
.service-card:hover {
transform: translateY(-8px);
border-color: var(--orange);
}
.service-icon {
width: 55px;
height: 55px;
display: flex;
align-items: center;
justify-content: center;
background: var(--orange);
color: white;
border-radius: 12px;
font-weight: 800;
margin-bottom: 25px;
}
.service-card h3 {
margin-bottom: 12px;
}
.service-card p {
color: #aaa;
font-size: 14px;
}
/* =========================
ABOUT
========================= */
.about {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
align-items: center;
}
.about-image {
min-height: 500px;
background:
linear-gradient(
135deg,
#f97316,
#f59e0b
);
border-radius: 25px;
display: flex;
align-items: center;
justify-content: center;
}
.about-placeholder {
text-align: center;
color: white;
}
.about-placeholder span {
font-size: 28px;
font-weight: 800;
}
.about-placeholder small {
display: block;
margin-top: 8px;
}
.about-content h2 {
font-size: clamp(35px, 5vw, 55px);
line-height: 1.1;
letter-spacing: -2px;
margin-bottom: 25px;
}
.about-content p {
color: var(--grey);
margin-bottom: 18px;
}
.skills {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 30px;
}
.skills span {
border: 1px solid #ddd;
padding: 8px 12px;
border-radius: 30px;
font-size: 12px;
font-weight: 700;
}
/* =========================
CTA
========================= */
.cta {
background:
linear-gradient(
135deg,
var(--orange),
var(--amber)
);
color: white;
text-align: center;
padding: 110px 25px;
}
.cta h2 {
font-size: clamp(40px, 6vw, 70px);
letter-spacing: -3px;
line-height: 1;
margin-bottom: 20px;
}
.cta p:not(.eyebrow) {
margin-bottom: 30px;
}
/* =========================
CONTACT
========================= */
.contact-container {
display: grid;
grid-template-columns: 0.8fr 1.2fr;
gap: 70px;
}
.contact-info h3 {
font-size: 30px;
margin-bottom: 15px;
}
.contact-info > p {
color: var(--grey);
margin-bottom: 35px;
}
.contact-details {
display: grid;
gap: 25px;
}
.contact-details div {
display: grid;
gap: 5px;
}
.contact-details strong {
font-size: 13px;
}
.contact-details a {
color: var(--orange);
}
.contact-details span {
color: var(--grey);
}
/* =========================
FORM
========================= */
.contact-form {
background: white;
padding: 35px;
border-radius: 20px;
box-shadow: var(--shadow);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
font-size: 13px;
font-weight: 700;
margin-bottom: 7px;
}
.form-group input,
.form-group textarea,
.form-group select {
width: 100%;
border: 1px solid #ddd;
background: #fafaf8;
padding: 13px;
border-radius: 10px;
outline: none;
transition: 0.3s;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
border-color: var(--orange);
box-shadow:
0 0 0 3px rgba(249,115,22,0.12);
}
.form-message {
margin-top: 15px;
font-size: 14px;
font-weight: 600;
}
/* =========================
FOOTER
========================= */
footer {
background: var(--black);
color: white;
padding: 50px 25px;
text-align: center;
}
.footer-content {
max-width: 1000px;
margin: auto;
}
.footer-content > p {
color: #999;
margin: 10px 0;
}
.copyright {
font-size: 12px;
}
/* =========================
MODAL
========================= */
.modal {
position: fixed;
inset: 0;
background: rgba(0,0,0,0.75);
display: none;
align-items: center;
justify-content: center;
padding: 25px;
z-index: 2000;
}
.modal.active {
display: flex;
}
.modal-content {
background: white;
max-width: 600px;
width: 100%;
padding: 45px;
border-radius: 20px;
position: relative;
animation: modalIn 0.3s ease;
}
.modal-close {
position: absolute;
top: 15px;
right: 20px;
border: none;
background: transparent;
font-size: 32px;
cursor: pointer;
}
.modal-content h2 {
font-size: 40px;
margin-bottom: 15px;
}
.myprofile{width: 100%;
min-height: 500px;
}
.modal-content > p {
color: var(--grey);
}
.modal-tech {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 25px 0;
}
.modal-tech span {
background: #eee;
padding: 7px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 700;
}
@keyframes modalIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* =========================
SCROLL ANIMATION
========================= */
.reveal {
opacity: 0;
transform: translateY(35px);
transition:
opacity 0.8s ease,
transform 0.8s ease;
}
.reveal.show {
opacity: 1;
transform: translateY(0);
}
/* =========================
RESPONSIVE
========================= */
@media (max-width: 900px) {
.hamburger {
display: block;
z-index: 1001;
}
.hero {
background: linear-gradient(rgba(0, 0, 0, .65), rgba(0, 0, 0, .65)), url(https://images.unsplash.com/photo-1517048676732-d65bc937f952?auto=format&fit=crop&w=1600&q=80);
background-size: cover;
background-position: center;
display: block;
justify-content: center;
align-items: center;
text-align: center;
color: white;
padding: 20px;
}
.nav-links {
position: fixed;
top: 78px;
left: 0;
width: 100%;
background: var(--white);
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 20px 25px;
transform: translateY(-130%);
transition: 0.4s;
box-shadow: var(--shadow);
}
.nav-links.active {
transform: translateY(0);
}
.nav-links li {
padding: 14px 0;
border-bottom: 1px solid #eee;
}
.nav-button {
display: inline-block;
text-align: center;
}
.hero {
grid-template-columns: 1fr;
padding-top: 130px;
}
.browser {
transform: none;
}
.project-card.featured {
grid-column: span 1;
grid-template-columns: 1fr;
}
.service-grid {
grid-template-columns:
repeat(2, 1fr);
}
.about {
grid-template-columns: 1fr;
}
.contact-container {
grid-template-columns: 1fr;
}
}
@media (max-width: 600px) {
.hero {
min-height: auto;
display: block;
padding-bottom: 70px;
}
.hero h1 {
letter-spacing: -2px;
}
.browser-screen {
padding: 30px 20px;
}
.screen-title h2 {
font-size: 35px;
}
.screen-cards {
margin-top: 30px;
}
.project-grid {
grid-template-columns: 1fr;
}
.service-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.contact-form {
padding: 25px;
}
.modal-content {
padding: 30px 25px;
}
}
/* Contact form submission feedback */
.form-message {
margin-top: 1rem;
min-height: 1.5em;
font-weight: 600;
}
.form-message.success {
color: #237a45;
}
.form-message.error {
color: #b42318;
}
.contact-form button[disabled] {
opacity: 0.7;
cursor: wait;
}
/* FEATURE GALLERY */
.featured-demos {
padding: 90px 20px;
background: #f8f8f7;
color: #171717;
text-align: center;
}
.featured-container {
max-width: 1150px;
margin: auto;
}
.featured-label {
color: #ea580c;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.featured-demos h2 {
font-size: clamp(32px, 4vw, 48px);
margin: 15px 0;
}
.featured-intro {
max-width: 650px;
margin: 0 auto 45px;
color: #666;
line-height: 1.7;
}
.featured-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
text-align: left;
}
.featured-card {
background: #fff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0,0,0,.07);
transition: transform .3s;
}
.featured-card:hover {
transform: translateY(-7px);
}
.featured-preview {
min-height: 210px;
padding: 30px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.featured-preview span {
font-size: 12px;
letter-spacing: 2px;
font-weight: bold;
}
.featured-preview strong {
font-size: 32px;
line-height: 1.2;
}
.handyman {
background: #243b31;
color: #f6e7d4;
}
.beauty {
background: #e9cfc9;
color: #654448;
font-family: Georgia, serif;
}
.builder {
background: #262626;
color: #f59e0b;
}
.featured-info {
padding: 25px;
}
.featured-info span {
font-size: 10px;
color: #ea580c;
font-weight: 700;
}
.featured-info h3 {
margin: 12px 0;
font-size: 22px;
}
.featured-info p {
color: #666;
font-size: 14px;
line-height: 1.7;
}
.featured-info a {
display: inline-block;
margin-top: 15px;
color: #ea580c;
font-weight: bold;
text-decoration: none;
}
.featured-all {
display: inline-block;
margin-top: 45px;
padding: 16px 28px;
background: #ea580c;
color: white;
border-radius: 9px;
font-weight: bold;
text-decoration: none;
}
.featured-all:hover {
background: #c2410c;
}
@media (max-width: 800px) {
.featured-grid {
grid-template-columns: 1fr;
}
.featured-demos {
padding: 60px 20px;
}
}
/* SENGAMHUB WEBSITE QUOTE SECTION */
.website-quote {
padding: 100px 20px;
background: linear-gradient(
135deg,
#111827,
#1f2937
);
color: #fff;
}
.quote-container {
max-width: 1150px;
margin: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 65px;
align-items: center;
}
.quote-label {
color: #fb923c;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
.quote-intro h2 {
font-size: clamp(34px, 4vw, 54px);
line-height: 1.15;
margin: 20px 0;
}
.quote-intro h2 span {
color: #f97316;
}
.quote-intro p {
color: #d1d5db;
font-size: 16px;
line-height: 1.8;
}
.quote-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin: 30px 0;
}
.quote-whatsapp,
.quote-demos {
padding: 15px 22px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
transition: 0.3s;
}
.quote-whatsapp {
background: #22c55e;
color: #fff;
}
.quote-whatsapp:hover {
background: #16a34a;
}
.quote-demos {
border: 1px solid #f97316;
color: #fff;
}
.quote-demos:hover {
background: #f97316;
}
.quote-benefits {
display: flex;
flex-direction: column;
gap: 12px;
font-size: 14px;
color: #d1d5db;
}
.quote-form-box {
background: #fff;
color: #111827;
padding: 35px;
border-radius: 18px;
box-shadow: 0 20px 50px rgba(0,0,0,.2);
}
.quote-form-box h3 {
font-size: 25px;
margin: 0 0 10px;
}
.quote-form-box > p {
color: #6b7280;
margin-bottom: 25px;
}
.quote-form-box form {
display: flex;
flex-direction: column;
gap: 12px;
}
.quote-form-box label {
font-size: 13px;
font-weight: 700;
}
.quote-form-box input,
.quote-form-box select,
.quote-form-box textarea {
width: 100%;
padding: 13px;
border: 1px solid #d1d5db;
border-radius: 7px;
font: inherit;
background: #fff;
color: #111827;
}
.quote-form-box input:focus,
.quote-form-box select:focus,
.quote-form-box textarea:focus {
outline: 2px solid #f97316;
border-color: #f97316;
}
.quote-form-box button {
margin-top: 10px;
padding: 16px;
border: none;
border-radius: 8px;
background: #f97316;
color: #fff;
font-size: 16px;
font-weight: 700;
cursor: pointer;
}
.quote-form-box button:hover {
background: #ea580c;
}
.quote-form-box small {
color: #6b7280;
font-size: 11px;
line-height: 1.6;
}
@media (max-width: 800px) {
.quote-container {
grid-template-columns: 1fr;
gap: 40px;
}
.website-quote {
padding: 65px 20px;
}
.quote-form-box {
padding: 25px;
}
}