*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:80px}body{margin:0;font-family:"DM Sans",sans-serif;color:#1b1d1f;background:#f7f6f2}h1,h2,h3,.navbar-brand{font-family:"Manrope",sans-serif}h2{font-size:clamp(2.2rem,4vw,4rem);font-weight:800;line-height:1.05;margin:12px 0 22px}h2 span,h1 em,.section-head em{color:#c9952e;font-style:normal}.navbar{background:rgba(13,15,17,.94);backdrop-filter:blur(10px);padding:16px 0;transition:.3s;z-index:1000}.navbar-brand{color:#fff;font-size:3.5rem;line-height:.8;font-weight:800;display:flex;flex-direction:column}.navbar-brand:hover{color:#fff}.navbar-brand small{font-family:"DM Sans";font-size:.76rem;letter-spacing:2px;color:#c9952e;margin-top:7px}.nav-link{color:#ddd!important;font-size:.92rem;font-weight:600}.nav-link:hover,.nav-link.active{color:#d6a54a!important}.navbar-toggler{border-color:#777}.navbar-toggler-icon{filter:invert(1)}.btn-brand{background:#c9952e;color:#fff;border:1px solid #c9952e;border-radius:3px;padding:11px 22px;font-weight:700}.btn-brand:hover{background:#aa7920;color:#fff;border-color:#aa7920}.hero{position:relative;min-height:100vh;background:linear-gradient(110deg,#111820 0%,#19242c 48%,#5a4327 100%);color:#fff;overflow:hidden}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.12)),radial-gradient(circle at 75% 35%,rgba(205,153,46,.25),transparent 32%)}.hero .container{position:relative;z-index:2}.hero h1{font-size:clamp(3.2rem,7vw,7rem);line-height:.95;letter-spacing:-3px;margin:18px 0}.hero-copy{font-size:1.2rem;max-width:600px;color:#ddd;margin-bottom:30px}.eyebrow{font-size:.75rem;letter-spacing:3px;font-weight:800;color:#d7a54a}.eyebrow.dark{color:#a97820}.hero-stats{max-width:650px;border-top:1px solid rgba(255,255,255,.25);padding-top:22px}.hero-stats strong{display:block;font-size:1.8rem;color:#fff}.hero-stats span{display:block;color:#bbb;font-size:.8rem}.section-pad{padding:100px 0}.about{background:#f7f6f2}.about p,.section-head p{color:#65686a;line-height:1.8}.about-card{min-height:420px;padding:50px;background:#1c2227;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}.about-card:before{content:"APCON";position:absolute;top:35px;right:-20px;font-size:5rem;font-weight:800;color:rgba(255,255,255,.035)}.about-number{font-size:9rem;line-height:.8;color:#c9952e;font-family:"Manrope";font-weight:800}.about-card small{letter-spacing:3px;color:#aaa}.about-card h3{font-size:2rem;margin:8px 0}.about-card .line{width:60px;height:3px;background:#c9952e;margin:18px 0}.about-card p{color:#bbb;margin:0}.light-section{background:#ebe9e3}.section-head{max-width:760px;margin-bottom:25px}.section-head.text-center{margin-left:auto;margin-right:auto}.person-card{background:#fff;padding:30px;height:100%;border:1px solid #dedbd2;transition:.3s}.person-card:hover{transform:translateY(-7px);box-shadow:0 15px 35px rgba(0,0,0,.08)}.person-initial{width:72px;height:72px;border-radius:50%;background:#20262b;color:#d2a044;display:grid;place-items:center;font-weight:800;font-size:1.3rem;margin-bottom:30px}.person-card h3{font-size:1.2rem;margin-bottom:8px}.person-card span{display:block;color:#a97820;font-weight:700}.person-card strong{font-size:.8rem;color:#777}.team-section,.residential,.partners{background:#f7f6f2}.team-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px}.team-grid b{color:#a97820;letter-spacing:1px}.team-grid p{line-height:2;color:#666;font-size:.92rem}.projects-section,.upcoming{background:#171c20;color:#fff}.projects-section .section-head p,.upcoming .section-head p{color:#aeb2b3}.project-card{border:1px solid #343a3f;padding:35px;height:100%;transition:.3s}.project-card:hover{border-color:#c9952e;transform:translateY(-5px)}.project-card>span{color:#d1a044;font-weight:800;letter-spacing:2px;font-size:.75rem}.project-card h3{margin:12px 0 20px}.project-card li{color:#bbb;line-height:1.7;margin-bottom:10px;font-size:.9rem}.feature-list>div{border-bottom:1px solid #ddd;padding:0 0 22px;margin-bottom:22px}.feature-list b{font-size:1.1rem}.feature-list p{color:#666;line-height:1.7;margin:7px 0 0}.upcoming{background:linear-gradient(135deg,#161b1f,#262018)}.up-card{border:1px solid #45403a;padding:30px;min-height:180px}.up-card small{color:#c9952e;font-weight:800}.up-card h3{margin:14px 0 8px}.up-card p{color:#bbb;margin:0;line-height:1.7}.partner{background:#fff;border:1px solid #e0ddd5;padding:25px;height:100%}.partner b,.partner span{display:block}.partner span{color:#a97820;font-size:.82rem;font-weight:700;margin-top:5px}.partner p{color:#777;font-size:.86rem;margin:10px 0 0}.contact{background:#c9952e;color:#fff;padding:100px 0}.contact .eyebrow{color:#fff}.contact h2 em{color:#171c20}.contact p{color:#fff;opacity:.9;line-height:1.8}.contact-box{background:#171c20;padding:38px;color:#fff}.contact-box h3{color:#d6a54a}.contact-box p{color:#bbb;margin:18px 0}.contact-box a{color:#d6a54a;text-decoration:none}.contact-box hr{border-color:#444}.contact-box small{color:#999}footer{background:#0d1012;color:#888;padding:25px 0;font-size:.8rem}@media(max-width:991px){.navbar-collapse{background:#101417;padding:20px;margin-top:12px}.navbar .btn-brand{display:inline-block;margin-top:10px}.hero h1{letter-spacing:-1px}.section-pad{padding:75px 0}}@media(max-width:767px){.hero{min-height:800px}.hero h1{font-size:3.1rem}.hero-stats strong{font-size:1.35rem}.about-card{min-height:360px;padding:30px}.about-number{font-size:6rem}.team-grid{grid-template-columns:1fr}.section-pad{padding:65px 0}.contact{padding:70px 0}}
/* =========================================
LEADERSHIP SECTION
========================================= */
.leadership-section {
padding: 100px 0;
background: #f5f4f0;
position: relative;
overflow: hidden;
}
/* Background Decoration */
.leadership-section::before {
content: "APCON";
position: absolute;
right: -80px;
top: 40px;
font-family: "Manrope", sans-serif;
font-size: 150px;
font-weight: 800;
color: rgba(20, 29, 38, 0.025);
pointer-events: none;
}
/* =========================================
SECTION HEADING
========================================= */
.leadership-heading {
max-width: 780px;
margin: 0 auto 45px;
}
.section-label {
display: inline-block;
font-size: 12px;
font-weight: 800;
letter-spacing: 3px;
color: #b27d21;
margin-bottom: 12px;
}
.leadership-heading h2 {
margin: 0 0 18px;
font-family: "Manrope", sans-serif;
font-size: clamp(38px, 5vw, 62px);
line-height: 1.05;
font-weight: 800;
color: #18232d;
}
.leadership-heading h2 span {
color: #c9952e;
}
.leadership-heading p {
max-width: 680px;
margin: auto;
color: #6d7072;
font-size: 16px;
line-height: 1.8;
}
/* =========================================
LEADER CARD
========================================= */
.leader-card {
background: #ffffff;
border: 1px solid #e2dfd7;
height: 100%;
position: relative;
overflow: hidden;
transition: all 0.35s ease;
}
.leader-card:hover {
transform: translateY(-8px);
box-shadow: 0 20px 45px rgba(15, 22, 29, 0.12);
}
/* =========================================
LEADER IMAGE / PROFILE AREA
========================================= */
.leader-image {
height: 300px;
background:
linear-gradient(
135deg,
#18242e 0%,
#263541 55%,
#9b712d 100%
);
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
/* Decorative circle */
.leader-image::before {
content: "";
width: 240px;
height: 240px;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 50%;
position: absolute;
}
.leader-image::after {
content: "";
width: 180px;
height: 180px;
border: 1px solid rgba(201, 149, 46, 0.4);
border-radius: 50%;
position: absolute;
}
/* Initials */
.leader-initials {
width: 135px;
height: 135px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.09);
border: 2px solid rgba(201, 149, 46, 0.75);
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 38px;
font-weight: 800;
position: relative;
z-index: 2;
}
/* =========================================
EXPERIENCE BADGE
========================================= */
.experience-badge {
position: absolute;
right: 18px;
top: 18px;
background: #c9952e;
color: #ffffff;
width: 65px;
height: 65px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-family: "Manrope", sans-serif;
font-size: 17px;
font-weight: 800;
z-index: 3;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}
.experience-badge small {
font-family: "DM Sans", sans-serif;
font-size: 9px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* =========================================
CARD CONTENT
========================================= */
.leader-content {
padding: 30px 28px 32px;
}
.leader-role {
font-size: 11px;
letter-spacing: 2px;
font-weight: 800;
color: #b27d21;
}
.leader-content h3 {
margin: 10px 0 14px;
font-family: "Manrope", sans-serif;
font-size: 21px;
font-weight: 800;
color: #18232d;
}
.leader-line {
width: 45px;
height: 3px;
background: #c9952e;
margin-bottom: 15px;
}
.leader-content p {
margin: 0;
color: #777;
font-size: 14px;
font-weight: 500;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 991px) {
.leadership-section {
padding: 80px 0;
}
.leader-image {
height: 270px;
}
.leadership-heading {
margin-bottom: 30px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 767px) {
.leadership-section {
padding: 65px 0;
}
.leadership-section::before {
font-size: 90px;
right: -40px;
}
.leadership-heading {
padding: 0 10px;
margin-bottom: 25px;
}
.leadership-heading h2 {
font-size: 38px;
}
.leadership-heading p {
font-size: 14px;
line-height: 1.7;
}
.leader-image {
height: 280px;
}
.leader-content {
padding: 25px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 480px) {
.leadership-section {
padding: 55px 0;
}
.section-label {
font-size: 10px;
letter-spacing: 2px;
}
.leadership-heading h2 {
font-size: 32px;
}
.leader-image {
height: 250px;
}
.leader-initials {
width: 115px;
height: 115px;
font-size: 32px;
}
}
/* ==========================================
APCON EXTENDED TEAM
PREMIUM CORPORATE DESIGN
========================================== */
.apcon-team {
position: relative;
overflow: hidden;
padding: 120px 0;
background: #f5f3ee;
color: #171c21;
}
/* ------------------------------------------
BACKGROUND
------------------------------------------ */
.apcon-team::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
top: -250px;
right: -150px;
border-radius: 50%;
background: rgba(201, 149, 46, 0.07);
}
.team-bg-number {
position: absolute;
right: -30px;
bottom: -90px;
font-family: "Manrope", sans-serif;
font-size: 300px;
font-weight: 800;
line-height: 1;
color: rgba(20, 29, 38, 0.035);
pointer-events: none;
}
/* ------------------------------------------
TOP INTRO
------------------------------------------ */
.team-top {
position: relative;
z-index: 2;
margin-bottom: 100px;
}
.team-eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 25px;
color: #b57d20;
font-size: 12px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
}
.team-eyebrow span {
width: 45px;
height: 2px;
display: inline-block;
background: #c9952e;
}
.team-main-title {
margin: 0;
max-width: 750px;
font-family: "Manrope", sans-serif;
font-size: clamp(55px, 6vw, 62px);
font-weight: 700;
line-height: 1.13;
letter-spacing: -4px;
color: #15191d;
}
.team-main-title strong {
font-weight: 800;
}
.team-main-title span {
display: block;
color: #c9952e;
font-weight: 800;
}
/* ------------------------------------------
DESCRIPTION
------------------------------------------ */
.team-description {
max-width: 420px;
margin-left: auto;
}
.description-line {
width: 55px;
height: 4px;
margin-bottom: 25px;
background: #c9952e;
}
.team-description p {
margin: 0;
color: #666c70;
font-size: 16px;
line-height: 1.9;
}
/* ------------------------------------------
GROUP
------------------------------------------ */
.team-group {
position: relative;
z-index: 2;
margin-bottom: 90px;
}
.group-title {
display: flex;
align-items: center;
gap: 18px;
margin-bottom: 35px;
}
.group-number {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background: #19242d;
color: #c9952e;
font-family: "Manrope", sans-serif;
font-size: 13px;
font-weight: 800;
}
.group-title span {
display: block;
margin-bottom: 3px;
color: #9a6d20;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
}
.group-title h3 {
margin: 0;
font-family: "Manrope", sans-serif;
font-size: 28px;
font-weight: 800;
color: #1b2228;
}
.group-line {
height: 1px;
flex: 1;
margin-left: 15px;
background: #d5d1c8;
}
/* ==========================================
CORE MEMBER CARD
========================================== */
.team-member-card {
position: relative;
height: 100%;
min-height: 230px;
padding: 27px;
background: #ffffff;
border: 1px solid #e1ded7;
overflow: hidden;
transition:
transform .45s cubic-bezier(.22,1,.36,1),
box-shadow .45s ease,
border-color .3s ease;
}
.team-member-card::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 3px;
background: #c9952e;
transition: width .45s ease;
}
.team-member-card:hover {
transform: translateY(-8px);
border-color: #c9952e;
box-shadow:
0 20px 45px rgba(25, 30, 35, .10);
}
.team-member-card:hover::after {
width: 100%;
}
/* ------------------------------------------
CARD TOP
------------------------------------------ */
.member-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 30px;
}
.member-index {
color: #b5b1a9;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
}
.member-icon {
width: 45px;
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #f3f0e8;
color: #b27d21;
font-size: 17px;
transition: all .3s ease;
}
.team-member-card:hover .member-icon {
background: #19242d;
color: #d3a348;
transform: rotate(8deg);
}
/* ------------------------------------------
MEMBER TEXT
------------------------------------------ */
.team-member-card h4 {
margin: 0 0 8px;
font-family: "Manrope", sans-serif;
font-size: 18px;
font-weight: 800;
color: #20262b;
}
.member-role {
color: #b17b20;
font-size: 12px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ------------------------------------------
EXPERIENCE
------------------------------------------ */
.member-bottom {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin-top: 35px;
padding-top: 15px;
border-top: 1px solid #ece9e2;
}
.member-bottom span {
color: #92969a;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 1px;
}
.member-bottom strong {
color: #19242d;
font-family: "Manrope", sans-serif;
font-size: 22px;
font-weight: 800;
}
.member-bottom small {
color: #888;
font-family: "DM Sans", sans-serif;
font-size: 10px;
font-weight: 500;
}
/* ==========================================
SPECIALIZED TEAM
========================================== */
.specialized-group {
margin-bottom: 0;
}
.specialist-card {
position: relative;
display: flex;
align-items: center;
gap: 22px;
height: 100%;
padding: 27px;
background: #19242d;
border: 1px solid #26333d;
transition:
transform .4s ease,
background .4s ease;
}
.specialist-card:hover {
transform: translateY(-6px);
background: #202e38;
}
.specialist-number {
width: 48px;
height: 48px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid rgba(201,149,46,.55);
color: #c9952e;
font-size: 11px;
font-weight: 800;
}
.specialist-card h4 {
margin: 0 0 5px;
color: #ffffff;
font-family: "Manrope", sans-serif;
font-size: 16px;
font-weight: 700;
}
.specialist-card p {
margin: 0 0 7px;
color: #c9952e;
font-size: 12px;
font-weight: 600;
}
.specialist-card span {
color: #89939a;
font-size: 11px;
}
/* ==========================================
SCROLL ANIMATION
========================================== */
.team-member-card,
.specialist-card,
.team-top {
/* opacity: 0; */
transform: translateY(35px);
/* background: url(../images/building.jpg) no-repeat; */
/* background-size:100% 100%; */
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1),
box-shadow .4s ease,
border-color .3s ease;
}
.team-member-card{
background: url(../images/building.jpg) no-repeat;
background-size:100% 100%;
/* position:relative; */
}
/* .team-member-card:after{ */
/* background:#000; */
/* position:absolute; */
/* content:''; */
/* } */
.team-member-card.active,
.specialist-card.active,
.team-top.active {
opacity: 1;
transform: translateY(0);
}
/* Stagger */
.team-member-card:nth-child(1) {
transition-delay: .05s;
}
.team-member-card:nth-child(2) {
transition-delay: .10s;
}
.team-member-card:nth-child(3) {
transition-delay: .15s;
}
.team-member-card:nth-child(4) {
transition-delay: .20s;
}
.team-member-card:nth-child(5) {
transition-delay: .25s;
}
.team-member-card:nth-child(6) {
transition-delay: .30s;
}
.team-member-card:nth-child(7) {
transition-delay: .35s;
}
.team-member-card:nth-child(8) {
transition-delay: .40s;
}
.team-member-card:nth-child(9) {
transition-delay: .45s;
}
.team-member-card:nth-child(10) {
transition-delay: .50s;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.apcon-team {
padding: 90px 0;
}
.team-top {
margin-bottom: 70px;
}
.team-description {
margin: 40px 0 0;
}
.team-main-title {
font-size: 65px;
}
.team-bg-number {
font-size: 200px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.apcon-team {
padding: 70px 0;
}
.team-top {
margin-bottom: 60px;
}
.team-main-title {
font-size: 48px;
letter-spacing: -2px;
}
.team-description {
margin-top: 30px;
}
.team-description p {
font-size: 14px;
}
.team-group {
margin-bottom: 65px;
}
.group-title {
margin-bottom: 25px;
}
.group-title h3 {
font-size: 22px;
}
.group-line {
display: none;
}
.team-member-card {
min-height: 210px;
}
.team-bg-number {
font-size: 130px;
right: -20px;
bottom: -20px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.apcon-team {
padding: 60px 0;
}
.team-eyebrow {
font-size: 10px;
letter-spacing: 3px;
}
.team-main-title {
font-size: 42px;
}
.group-number {
width: 42px;
height: 42px;
}
.team-member-card {
padding: 23px;
}
}
.projects-section{
background: url(../images/delivery.jpg) no-repeat;
background-size:100% 100%;
}
/* ==========================================
APCON RESIDENTIAL & COMMERCIAL
========================================== */
.apcon-projects {
position: relative;
overflow: hidden;
padding: 120px 0;
background: #f4f2ed;
color: #18222b;
}
/* ==========================================
BACKGROUND
========================================== */
.apcon-projects::before {
content: "";
position: absolute;
width: 550px;
height: 550px;
top: -280px;
right: -180px;
border-radius: 50%;
background: rgba(198, 148, 46, 0.07);
}
.projects-bg-text {
position: absolute;
right: -40px;
bottom: -90px;
font-family: "Manrope", sans-serif;
font-size: 210px;
font-weight: 800;
line-height: 1;
color: rgba(20, 28, 35, 0.035);
pointer-events: none;
}
/* ==========================================
HEADER
========================================== */
.projects-header {
position: relative;
z-index: 2;
margin-bottom: 70px;
}
.projects-eyebrow {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
color: #b57d20;
font-size: 12px;
font-weight: 800;
letter-spacing: 4px;
text-transform: uppercase;
}
.projects-eyebrow span {
display: inline-block;
width: 45px;
height: 2px;
background: #c9952e;
}
.projects-title {
max-width: 850px;
margin: 0;
font-family: "Manrope", sans-serif;
font-size: clamp(48px, 6vw, 86px);
line-height: .98;
letter-spacing: -4px;
font-weight: 700;
color: #171c20;
}
.projects-title em {
display: block;
color: #c9952e;
font-style: normal;
font-weight: 800;
}
.projects-intro {
max-width: 430px;
margin-left: auto;
padding-left: 35px;
border-left: 2px solid #c9952e;
}
.projects-intro p {
margin: 0;
color: #6c7175;
font-size: 15px;
line-height: 1.9;
}
/* ==========================================
PROJECT GRID
========================================== */
.project-grid {
position: relative;
z-index: 2;
}
/* ==========================================
PROJECT CARD
========================================== */
#residential-commercial .project-card-large{
background: #ffffff;
}
.project-card {
position: relative;
height: 100%;
min-height: 420px;
padding: 38px;
overflow: hidden;
border: 1px solid #dedbd4;
/* background: #ffffff; */
display: flex;
flex-direction: column;
transition:
transform .5s cubic-bezier(.22,1,.36,1),
box-shadow .5s ease,
border-color .3s ease;
}
.project-card:hover {
transform: translateY(-10px);
border-color: #c9952e;
box-shadow:
0 25px 60px rgba(20, 28, 35, .12);
}
/* ==========================================
CARD NUMBER
========================================== */
.project-card-number {
position: absolute;
top: 28px;
right: 32px;
color: #c9c5bd;
font-family: "Manrope", sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: 2px;
}
/* ==========================================
CARD TOP
========================================== */
.project-card-top {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 22px;
border-bottom: 1px solid #e8e5de;
}
.project-location {
color: #a8751e;
font-size: 10px;
font-weight: 800;
letter-spacing: 2px;
text-transform: uppercase;
}
.project-arrow {
width: 42px;
height: 42px;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid #ddd9d0;
color: #18222b;
transition:
background .3s ease,
color .3s ease,
transform .3s ease;
}
.project-card:hover .project-arrow {
background: #19242d;
color: #c9952e;
transform: rotate(45deg);
}
/* ==========================================
CARD CONTENT
========================================== */
.project-card-content {
flex: 1;
padding-top: 38px;
}
.project-card-content h3 {
max-width: 600px;
margin: 0 0 20px;
font-family: "Manrope", sans-serif;
font-size: clamp(28px, 3vw, 42px);
line-height: 1.05;
letter-spacing: -1.5px;
font-weight: 800;
color: #19232b;
}
.project-card-content h3 span {
color: #c9952e;
}
.project-card-content p {
max-width: 570px;
margin: 0;
color: #707579;
font-size: 14px;
line-height: 1.85;
}
/* ==========================================
PROJECT STATS
========================================== */
.project-stats {
display: flex;
gap: 50px;
padding-top: 25px;
margin-top: 30px;
border-top: 1px solid #e8e5de;
}
.project-stats div {
display: flex;
flex-direction: column;
gap: 3px;
}
.project-stats strong {
font-family: "Manrope", sans-serif;
font-size: 27px;
line-height: 1;
font-weight: 800;
color: #19242d;
}
.project-stats span {
color: #8a8d90;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
}
/* ==========================================
DARK CARD
========================================== */
.project-card-dark {
background: #19242d;
border-color: #19242d;
}
.project-card-dark .project-card-number {
color: #66717a;
}
.project-card-dark .project-card-top {
border-color: #354049;
}
.project-card-dark .project-arrow {
border-color: #45515a;
color: #ffffff;
}
.project-card-dark .project-card-content h3 {
color: #ffffff;
}
.project-card-dark .project-card-content p {
color: #aab1b5;
}
.project-card-dark .project-stats {
border-color: #354049;
}
.project-card-dark .project-stats strong {
color: #ffffff;
}
.project-card-dark .project-stats span {
color: #929da3;
}
/* ==========================================
FEATURED CARD
========================================== */
.project-card-featured {
min-height: 390px;
background:
linear-gradient(
135deg,
#202e38 0%,
#18232b 70%,
#24343e 100%
);
border-color: #24343d;
}
.project-card-featured .project-card-number {
color: #5f6c74;
}
.project-card-featured .project-card-top {
border-color: #39464f;
}
.project-card-featured .project-arrow {
color: #ffffff;
border-color: #536069;
}
.project-card-featured .project-card-content h3 {
color: #ffffff;
font-size: clamp(32px, 4vw, 50px);
}
.project-card-featured .project-card-content p {
color: #aeb5b9;
}
.project-card-featured .project-stats {
border-color: #39464f;
}
.project-card-featured .project-stats strong {
color: #ffffff;
}
.project-card-featured .project-stats span {
color: #8d999f;
}
/* ==========================================
COMPLETED BADGE
========================================== */
.completed-badge {
display: inline-flex;
align-items: center;
margin-bottom: 17px;
padding: 7px 12px;
border: 1px solid rgba(201,149,46,.4);
color: #c9952e;
font-size: 9px;
font-weight: 800;
letter-spacing: 1.5px;
}
/* ==========================================
COMMERCIAL CARD
========================================== */
.project-commercial {
min-height: 390px;
background: #c9952e;
border-color: #c9952e;
}
.project-commercial .project-card-number {
color: rgba(255,255,255,.5);
}
.project-commercial .project-card-top {
border-color: rgba(255,255,255,.25);
}
.project-commercial .project-location {
color: #ffffff;
}
.project-commercial .project-arrow {
border-color: rgba(255,255,255,.4);
color: #ffffff;
}
.project-commercial .project-card-content h3 {
color: #18232b;
}
.project-commercial .project-card-content h3 span {
color: #ffffff;
}
.project-commercial .project-card-content p {
color: rgba(24,35,43,.72);
}
/* ==========================================
COMMERCIAL LIST
========================================== */
.commercial-list {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 25px;
padding-top: 22px;
border-top: 1px solid rgba(255,255,255,.3);
}
.commercial-list span {
padding: 8px 11px;
background: rgba(255,255,255,.18);
color: #1b252c;
font-size: 10px;
font-weight: 700;
letter-spacing: .4px;
}
/* ==========================================
SCROLL ANIMATION
========================================== */
.project-card,
.projects-header {
opacity: 0;
transform: translateY(45px);
transition:
opacity .8s ease,
transform .8s cubic-bezier(.22,1,.36,1),
box-shadow .5s ease,
border-color .3s ease;
}
.project-card.show,
.projects-header.show {
opacity: 1;
transform: translateY(0);
}
/* Stagger */
.project-card:nth-child(1) {
transition-delay: .05s;
}
.project-card:nth-child(2) {
transition-delay: .15s;
}
.project-card:nth-child(3) {
transition-delay: .25s;
}
.project-card:nth-child(4) {
transition-delay: .35s;
}
/* ==========================================
TABLET
========================================== */
@media (max-width: 991px) {
.apcon-projects {
padding: 90px 0;
}
.projects-header {
margin-bottom: 55px;
}
.projects-intro {
margin: 35px 0 0;
max-width: 600px;
}
.projects-title {
font-size: 65px;
}
.project-card {
min-height: 390px;
}
.projects-bg-text {
font-size: 150px;
}
}
/* ==========================================
MOBILE
========================================== */
@media (max-width: 767px) {
.apcon-projects {
padding: 70px 0;
}
.projects-header {
margin-bottom: 45px;
}
.projects-title {
font-size: 46px;
letter-spacing: -2px;
}
.projects-intro {
padding-left: 20px;
margin-top: 28px;
}
.projects-intro p {
font-size: 14px;
}
.project-card {
min-height: 380px;
padding: 27px;
}
.project-card-content {
padding-top: 30px;
}
.project-card-content h3 {
font-size: 30px;
}
.project-stats {
gap: 30px;
}
.project-stats strong {
font-size: 23px;
}
.projects-bg-text {
font-size: 100px;
right: -20px;
bottom: -20px;
}
}
/* ==========================================
SMALL MOBILE
========================================== */
@media (max-width: 480px) {
.apcon-projects {
padding: 60px 0;
}
.projects-eyebrow {
font-size: 10px;
letter-spacing: 3px;
}
.projects-title {
font-size: 39px;
}
.project-card {
min-height: 360px;
padding: 23px;
}
.project-card-content h3 {
font-size: 27px;
}
.project-card-content p {
font-size: 13px;
}
.project-stats {
gap: 22px;
}
.project-stats strong {
font-size: 21px;
}
.project-arrow {
width: 38px;
height: 38px;
}
}