3219 lines
51 KiB
CSS
3219 lines
51 KiB
CSS
/* ================================
|
|
GOOGLE FONT (Parkinsans)
|
|
================================ */
|
|
@import url('https://fonts.googleapis.com/css2?family=Parkinsans:wght@300;400;500;600;700&display=swap');
|
|
/* ================================
|
|
ROOT VARIABLES
|
|
================================ */
|
|
:root {
|
|
--primary-color: #D06A1E;
|
|
--secondary-color: #111111;
|
|
--text-color: #ffffff;
|
|
--light-text: #aaaaaa;
|
|
--bg-color: #0d0d0d;
|
|
--font-family: 'Parkinsans', sans-serif;
|
|
}
|
|
/* ================================
|
|
RESET
|
|
================================ */
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
/* ================================
|
|
GLOBAL BODY
|
|
================================ */
|
|
body {
|
|
font-family: var(--font-family);
|
|
color: var(--text-color);
|
|
line-height: 1.6;
|
|
}
|
|
/* ================================
|
|
TYPOGRAPHY
|
|
================================ */
|
|
h1 {
|
|
font-size: 40px;
|
|
font-weight: 700;
|
|
margin-bottom: 20px;
|
|
}
|
|
h2 span {
|
|
color: #7C7C7C;
|
|
}
|
|
h2 {font-size: 26px;font-weight: 500;margin-bottom: 15px;line-height: 36px;}
|
|
p {font-size: 16px;color: #000000;margin: 0;}
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
li {/* margin-bottom: 10px; */}
|
|
span {display: inline-block;color: #ffffff;}
|
|
label {
|
|
margin-bottom: 6px;
|
|
display: inline-block;
|
|
font-size: 14px;
|
|
}
|
|
/* ================================
|
|
LINKS
|
|
================================ */
|
|
a {
|
|
text-decoration: none;
|
|
color: var(--text-color);
|
|
transition: 0.3s;
|
|
}
|
|
a:hover {
|
|
color: var(--primary-color);
|
|
}
|
|
/* ================= HERO ================= */
|
|
.hero {
|
|
position: relative;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
}
|
|
/* VIDEO */
|
|
.hero-video {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
/* OVERLAY */
|
|
.hero-overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background: linear-gradient(270deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.56) 63.2%, rgba(0, 0, 0, 0.69) 101.12%);
|
|
}
|
|
/* ================= HEADER ================= */
|
|
.header {
|
|
position: fixed;
|
|
width: 100%;
|
|
top: 0;
|
|
z-index: 10;
|
|
padding: 20px 0;
|
|
background: rgba(0, 0, 0, 0.15);
|
|
backdrop-filter: blur(42px);
|
|
}
|
|
.logo {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
.logo span {
|
|
color: var(--primary-color);
|
|
}
|
|
/* NAV */
|
|
.nav ul {
|
|
display: flex;
|
|
gap: 30px;
|
|
}
|
|
.headerwrap .nav a {
|
|
color: black !important;
|
|
}
|
|
.nav a {color: #fff !important;font-size: 14px;position: relative;display: inline-block;padding: 8px 0;text-decoration: none;font-weight: 500;overflow: hidden;text-transform: capitalize;}
|
|
/* ================= HERO CONTENT ================= */
|
|
.hero-content {
|
|
position: relative;
|
|
z-index: 5;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.hero-left {
|
|
max-width: 600px;
|
|
}
|
|
.hero-left h1 {
|
|
color: #fff;
|
|
}
|
|
.hero-left p {margin-top: 15px;margin-bottom: 25px;border-left: 6px solid #E5AC35;padding: 7px 0 7px 14px;color: white;}
|
|
/* BUTTONS */
|
|
.hero-buttons {
|
|
display: flex;
|
|
gap: 15px;
|
|
}
|
|
.btn-outline {
|
|
border: 1px solid #fff;
|
|
padding: 10px 24px;
|
|
color: #fff;
|
|
}
|
|
.btn-outline:hover {
|
|
background: #fff;
|
|
color: #000;
|
|
}
|
|
/* ================= SOCIAL ================= */
|
|
.hero-social {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
z-index: 5;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 15px;
|
|
}
|
|
.hero-social a:hover {
|
|
|
|
background: var(--primary-color);
|
|
}
|
|
.hero-social a {
|
|
width: 40px;
|
|
height: 40px;
|
|
background: rgba(255,255,255,0.2);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
color: #fff;
|
|
}
|
|
.btn-primary-custom {
|
|
position: relative;
|
|
background: var(--primary-color);
|
|
padding: 13px 25px;
|
|
color: #fff !important;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
transition: 0.3s ease;
|
|
z-index: 1;
|
|
}
|
|
.btn-primary-custom::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #000; /* hover color */
|
|
transition: 0.4s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.btn-primary-custom:hover::before {
|
|
left: 0;
|
|
}
|
|
|
|
.btn-primary-custom:hover {
|
|
color: #fff;
|
|
}
|
|
/* ================= HERO BOTTOM ================= */
|
|
.hero-bottom {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
z-index: 5;
|
|
border-top: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
/* ITEMS */
|
|
.hb-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 20px 10px;
|
|
color: #fff;
|
|
background: rgba(0,0,0,0.5);
|
|
border-right: 1px solid rgba(255,255,255,0.2);
|
|
transition: 0.3s;
|
|
}
|
|
/* ICON */
|
|
.hb-item .icon {
|
|
font-size: 22px;
|
|
margin-bottom: 8px;
|
|
color: var(--primary-color);
|
|
}
|
|
/* TEXT */
|
|
.hb-item p {font-size: 14px;margin: 0;color: white;}
|
|
/* HOVER EFFECT */
|
|
.hb-item:hover {
|
|
background: rgba(255,255,255,0.1);
|
|
}
|
|
/* CENTER ACTIVE BOX */
|
|
.hb-item.active {
|
|
background: rgba(80, 70, 60, 0.8);
|
|
/* transform: translateY(-20px); */
|
|
border: none;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
|
|
z-index: 2;
|
|
}
|
|
/* REMOVE BORDER LAST */
|
|
.hb-item:last-child {
|
|
border-right: none;
|
|
}
|
|
/* ================= PARTNERS ================= */
|
|
.partners-section {background: #fff9f4;padding: 60px 0 20px;}
|
|
.trustedpatnerqrap h6 {
|
|
color: black;
|
|
margin: 0 0 20px;
|
|
}
|
|
/* WRAPPER */
|
|
.partners-wrapper {
|
|
display: grid;
|
|
grid-template-columns: repeat(6, 1fr);
|
|
border: 1px solid #dddddd6e;
|
|
}
|
|
/* ITEM */
|
|
.partner-item {
|
|
height: 100px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 1px solid #dddddd6e;
|
|
border-bottom: 1px solid #dddddd6e;
|
|
background: #fff;
|
|
transition: 0.3s;
|
|
}
|
|
/* REMOVE LAST BORDER */
|
|
.partner-item:last-child {
|
|
border-right: none;
|
|
}
|
|
/* IMAGE */
|
|
.partner-item img {
|
|
max-width: 120px;
|
|
opacity: 0.6;
|
|
transition: 0.3s;
|
|
}
|
|
/* HOVER */
|
|
.partner-item:hover img {
|
|
opacity: 1;
|
|
transform: scale(1.05);
|
|
}
|
|
/* ================= SERVICES ================= */
|
|
services-sectionwrap {
|
|
background: #f5f2ef;
|
|
padding-top: 80px;
|
|
}
|
|
/* TOP */
|
|
.services-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
gap: 20px;
|
|
}
|
|
.headprice {
|
|
color: white !important;
|
|
}
|
|
/* TAG */
|
|
.tag {
|
|
color: var(--primary-color);
|
|
font-weight: 600;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
}
|
|
/* GRID */
|
|
.services-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
/* CARD */
|
|
.services-sectionwrap {
|
|
|
|
padding: 80px 0;
|
|
|
|
background: #FFF9F4;
|
|
}
|
|
.services-sectionwrap .service-card {position: relative;height: 420px;overflow: hidden;cursor: pointer;padding: 0;}
|
|
/* IMAGE */
|
|
.service-card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: 0.6s ease;
|
|
}
|
|
/* DARK OVERLAY */
|
|
.service-card .overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
|
}
|
|
/* TITLE */
|
|
.service-card h3 {position: absolute;bottom: 20px;left: 20px;color: #fff;font-size: 20px;z-index: 2;text-align: center;}
|
|
/* HOVER EFFECT */
|
|
.service-card:hover img {transform: scale(1.1);}
|
|
.service-card:hover .overlay {
|
|
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
|
}
|
|
.service-card:hover::after {
|
|
border-color: #ffffff33;
|
|
border: 1px solid #d06a1e99;
|
|
}
|
|
/* ================= SECTION ================= */
|
|
.projects-section {
|
|
background: #f5f2ef;
|
|
padding: 80px 0;
|
|
}
|
|
/* TOP */
|
|
.projects-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
/* ================= SLIDER LAYOUT ================= */
|
|
.projects-slider {
|
|
padding-left: calc((100% - 1140px) / 2); /* container align */
|
|
}
|
|
/* ================= CARD ================= */
|
|
.project-card {
|
|
position: relative;
|
|
height: 400px;
|
|
overflow: hidden;
|
|
display: flex;
|
|
}
|
|
/* BEFORE / AFTER */
|
|
.project-card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.before, .after {
|
|
width: 50%;
|
|
}
|
|
/* DIVIDER LINE */
|
|
.project-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 0;
|
|
width: 2px;
|
|
height: 100%;
|
|
background: #fff;
|
|
}
|
|
/* ================= ARROWS ================= */
|
|
|
|
|
|
/* ================= INFO ================= */
|
|
.project-info {
|
|
margin-top: 15px;
|
|
}
|
|
.project-info span img {
|
|
width: 16px !important;
|
|
height: 16px !important;
|
|
transform: unset !important;
|
|
/* repeat band karega */
|
|
background-position: top center; /* image top pe align hogi */
|
|
background-size: cover;
|
|
}
|
|
.project-info span {color: var(--primary-color);font-size: 14px;gap: 2px;display: flex;align-items: center;}
|
|
/* SECTION BACKGROUND */
|
|
.pricing-section {
|
|
background: url('../images/Transparency.png') center/cover no-repeat;
|
|
padding: 80px 0;
|
|
position: relative;
|
|
}
|
|
.pricing-section::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: rgba(0,0,0,0.55);
|
|
}
|
|
.pricing-section .container,
|
|
.pricing-grid {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
/* TOP */
|
|
.sunroom-card .icon-box {
|
|
margin-bottom: 80px;
|
|
}
|
|
.services-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #fff;
|
|
margin-bottom: 30px;
|
|
}
|
|
.services-top h2 {
|
|
color: black;
|
|
}
|
|
|
|
/* GRID */
|
|
.pricing-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 40px;
|
|
}
|
|
/* CARD */
|
|
.pricing-card {
|
|
background: #f3efe9;
|
|
border: 11px solid white;
|
|
padding: 50px;
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
|
|
text-align: center;
|
|
}
|
|
.pricing-card h3 {
|
|
font-size: 28px;
|
|
margin-bottom: 20px;
|
|
color: #3A3A3A;
|
|
}
|
|
/* SCRIPT STYLE TEXT */
|
|
.starting {
|
|
font-family: 'Ruthligos' !important;
|
|
color: #f97316;
|
|
font-size: 28px;
|
|
margin: 10px 0;
|
|
}
|
|
/* PRICE */
|
|
.price {
|
|
font-size: 32px;
|
|
font-weight: 700;
|
|
margin-bottom: 15px;
|
|
color: black;
|
|
}
|
|
/* DESC */
|
|
.desc {
|
|
font-size: 15px;
|
|
color: #555;
|
|
margin-bottom: 25px !important;
|
|
max-width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
.gallery-section {
|
|
background: #ffffff;
|
|
padding: 80px 0;
|
|
}
|
|
/* GRID */
|
|
.gallery-grid {display: grid;grid-template-columns: 1fr 1.2fr 1fr;gap: 25px;margin-top: 0px;}
|
|
/* ITEMS */
|
|
.gallery-item {
|
|
overflow: hidden;
|
|
}
|
|
.gallery-item img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
display: block;
|
|
transition: 0.4s;
|
|
}
|
|
/* SIZES */
|
|
.gallery-item.big {
|
|
height: 500px;
|
|
}
|
|
.gallery-center {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20px;
|
|
}
|
|
.gallery-item.wide {
|
|
height: 240px;
|
|
}
|
|
.gallery-bottom {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 20px;
|
|
}
|
|
.gallery-bottom .gallery-item {
|
|
height: 240px;
|
|
}
|
|
/* HOVER */
|
|
.gallery-item:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
.trades-section {
|
|
background: #FFF5EC;
|
|
padding: 80px 0;
|
|
}
|
|
/* TOP */
|
|
.trades-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
.trades-top h2 {max-width: 650px;color: black;}
|
|
/* SLIDER */
|
|
.tradesSwiper {
|
|
padding-bottom: 50px;
|
|
}
|
|
.info h4 {
|
|
margin: 0;
|
|
}
|
|
.info span {
|
|
color: #f97316;
|
|
font-size: 13px;
|
|
}
|
|
.info p {font-weight: 300;font-size: 16px;margin-top: 18px;color: white;}
|
|
/* CARD */
|
|
.trade-card {position: relative;height: 480px;overflow: hidden;}
|
|
/* IMAGE */
|
|
.trade-card img {width: 100%;height: 480px;object-fit: cover;}
|
|
/* OVERLAY */
|
|
.trade-card .overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 1;
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0.58) 0%, rgba(0, 0, 0, 0) 100%);
|
|
transition: 0.4s;
|
|
}
|
|
/* CONTENT CENTER */
|
|
.trade-card:hover .content {
|
|
background: rgba(0, 0, 0, 0.4);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
.trade-card .content {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
color: #fff;
|
|
padding: 20px;
|
|
padding: 18px;
|
|
width: 90%;
|
|
margin: 0 auto;
|
|
height: 90%;
|
|
margin: auto;
|
|
}
|
|
/* TITLE */
|
|
.trade-card h3 {font-size: 28px;transition: 0.4s;padding-top: 30px;}
|
|
/* INFO HIDDEN */
|
|
.trade-card .info {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
transition: 0.4s;
|
|
margin-top: 10px;
|
|
}
|
|
/* HOVER */
|
|
.trade-card:hover .overlay {
|
|
opacity: 1;
|
|
}
|
|
.trade-card:hover .info {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
.trade-card:hover h3 {
|
|
transform: translateY(-10px);
|
|
}
|
|
/* OPTIONAL GLASS */
|
|
.info {
|
|
}
|
|
.trade-card:hover img {
|
|
transform: scale(1.05);
|
|
transition: 0.4s;
|
|
}
|
|
/* SWIPER DOTS */
|
|
.swiper-pagination-bullet {
|
|
background: #fff;
|
|
opacity: 0.5;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
background: #f97316;
|
|
opacity: 1;
|
|
}
|
|
.testimonial-section {
|
|
padding: 80px 0;
|
|
background: #f5f2ef;
|
|
}
|
|
/* CARD */
|
|
.testimonial-card {
|
|
background: #fff;
|
|
padding: 25px;
|
|
border-radius: 6px;
|
|
border: 1px solid #EBEBEB;
|
|
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.01);
|
|
border-radius: 0px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
/* SHORT (ODD) */
|
|
.testimonial-card.short {
|
|
height: 220px;
|
|
}
|
|
/* LONG (EVEN) */
|
|
.testimonial-card.long {
|
|
height: 340px;
|
|
}
|
|
/* TEXT */
|
|
.testimonial-card p {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: #444;
|
|
}
|
|
/* USER */
|
|
.user {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 15px;
|
|
}
|
|
.user img {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
margin-right: 10px;
|
|
}
|
|
.user h6 {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
color: #D06A1E;
|
|
}
|
|
.user span {
|
|
font-size: 12px;
|
|
color: #777;
|
|
}
|
|
/* LINK */
|
|
.testimonial-card a {
|
|
margin-top: 10px;
|
|
font-size: 13px;
|
|
color: #1768FF;
|
|
text-decoration: none;
|
|
}
|
|
/* SWIPER */
|
|
.swiper {
|
|
padding-bottom: 50px;
|
|
}
|
|
.swiper-slide {
|
|
width: 300px;
|
|
}
|
|
/* DOTS */
|
|
.swiper-pagination-bullet {
|
|
background: #D06A1E;
|
|
opacity: 0.4;
|
|
}
|
|
.swiper-pagination-bullet-active {
|
|
opacity: 1;
|
|
}
|
|
.contact-section{
|
|
position:relative;
|
|
padding:100px 20px;
|
|
background:url('../images/contactback.png') center/cover no-repeat;
|
|
}
|
|
.contact-overlay{
|
|
background:rgba(0,0,0,0.4);
|
|
padding:60px 0;
|
|
}
|
|
/* TOP TEXT */
|
|
.contact-header{
|
|
text-align:center;
|
|
color:#fff;
|
|
margin-bottom:40px;
|
|
}
|
|
.contact-header span{
|
|
color:#ff7a1a;
|
|
font-size:14px;
|
|
}
|
|
.contact-header h2{
|
|
font-size:32px;
|
|
margin-top:10px;
|
|
}
|
|
/* MAIN BOX */
|
|
.contact-box{
|
|
display:flex;
|
|
margin:auto;
|
|
gap: 30px;
|
|
}
|
|
/* LEFT PANEL */
|
|
.contact-left{
|
|
background:#cc641c;
|
|
color:#fff;
|
|
padding:40px;
|
|
width:35%;
|
|
}
|
|
.contact-left h3{
|
|
font-size:28px;
|
|
margin-bottom:15px;
|
|
}
|
|
.contact-left p{
|
|
font-size:14px;
|
|
margin-bottom:30px;
|
|
line-height:1.6;
|
|
color: white;
|
|
}
|
|
.contact-item{display:flex;align-items: center;margin-bottom:20px;}
|
|
|
|
.contact-item img{
|
|
background:#fff2;
|
|
padding:10px;
|
|
border-radius:6px;
|
|
margin-right:12px;
|
|
}
|
|
.contact-item span{
|
|
font-size:14px;
|
|
display:block;
|
|
}
|
|
/* RIGHT FORM */
|
|
.contact-right{
|
|
padding:40px;
|
|
width:65%;
|
|
background: #FFF5EC;
|
|
}
|
|
.contact-right h3{
|
|
margin-bottom:20px;
|
|
color: black;
|
|
}
|
|
/* FORM GRID */
|
|
.form-row{
|
|
display:flex;
|
|
gap:15px;
|
|
margin-bottom:15px;
|
|
}
|
|
.form-row input{
|
|
flex:1;
|
|
}
|
|
/* INPUT */
|
|
input, textarea{
|
|
width:100%;
|
|
padding:14px;
|
|
border:1px solid #ccc;
|
|
outline:none;
|
|
background:#fff;
|
|
}
|
|
textarea{
|
|
height:120px;
|
|
resize:none;
|
|
}
|
|
.content-area button {
|
|
float: none;
|
|
width: 270px;
|
|
margin-bottom: 30px;
|
|
}
|
|
/* BUTTON */
|
|
button{background:#cc641c;color:#fff;border:none;padding:15px 25px;margin-top:15px;cursor:pointer;float:right;}
|
|
|
|
.footer-section {
|
|
background: #FFF5EC;
|
|
color: #333;
|
|
}
|
|
|
|
/* TOP BAR */
|
|
.footer-top {
|
|
padding-bottom: 40px;
|
|
padding-top: 40px;
|
|
margin-bottom: 0px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.social-icons i {
|
|
margin-right: 15px;
|
|
color: #c46b2c;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.go-top {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* MAIN */
|
|
.footer-main {
|
|
background: white;
|
|
padding: 48px 20px;
|
|
}
|
|
.footer-main h5 {
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.footer-main ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
.footer-main ul li a {
|
|
color: black;
|
|
}
|
|
.footer-main ul li {
|
|
margin-bottom: 8px;
|
|
position: relative;
|
|
padding-left: 12px;
|
|
font-size: 15px;
|
|
}
|
|
|
|
.footer-main ul li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #c46b2c;
|
|
}
|
|
|
|
.logo {
|
|
font-weight: 700;
|
|
font-size: 20px;
|
|
color: #c46b2c;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.footer-title {
|
|
font-weight: 700;
|
|
font-size: 28px;
|
|
margin-bottom: 15px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.footer-desc {
|
|
font-size: 14px;
|
|
color: #666;
|
|
}
|
|
|
|
/* CONTACT BAR */
|
|
.contact-bar {
|
|
margin: 0px 0;
|
|
padding: 30px 0;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-bar p {
|
|
margin: 0;
|
|
font-size: 14px;
|
|
margin-bottom: 4px;
|
|
color: #888;
|
|
}
|
|
|
|
.contact-bar strong {
|
|
font-size: 16px;
|
|
color: black;
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* BOTTOM */
|
|
.footer-bottom p {
|
|
font-size: 14px;
|
|
color: #000000;
|
|
padding: 26px 0;
|
|
}
|
|
.footer-bottom a {
|
|
font-size: 14px;
|
|
color: #000000;
|
|
padding: 26px 0;
|
|
}
|
|
|
|
.social-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.social-icons span:hover img {
|
|
filter: brightness(0) invert(1);
|
|
|
|
}
|
|
.social-icons span:hover {
|
|
background: var(--primary-color);
|
|
fill: white;
|
|
}
|
|
.social-icons span {
|
|
width: 38px;
|
|
height: 39px;
|
|
background: white;
|
|
border-radius: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.footerbottom {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
.footerbottom img {
|
|
padding: 18px 18px;
|
|
background: white;
|
|
border: 1px solid #d06a1e6b;
|
|
}
|
|
.footerbottom span {
|
|
text-align: left;
|
|
}
|
|
.footer--linewrap {
|
|
border-bottom: 1px solid #d06a1e40;
|
|
}
|
|
.borderbottom {
|
|
border-bottom: none;
|
|
}
|
|
.linefooterwrap {}
|
|
.leftline {
|
|
border-left: 1px solid #d06a1e21;
|
|
border-right: 1px solid #d06a1e21;
|
|
}
|
|
|
|
.swipetop {
|
|
width: 22px; /* adjust size */
|
|
animation: bounceSmooth 2s infinite;
|
|
z-index: 9;
|
|
position: absolute;
|
|
bottom: 140px; /* niche se distance */
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
@keyframes bounceSmooth {
|
|
0%, 100% {
|
|
transform: translateY(0);
|
|
opacity: 1;
|
|
}
|
|
50% {
|
|
transform: translateY(10px);
|
|
opacity: 0.7;
|
|
}
|
|
}
|
|
.trustedpatnerqrap {
|
|
|
|
background: white;
|
|
|
|
padding: 30px 30px;
|
|
}
|
|
.img-comp-container {
|
|
position: relative;
|
|
/*should be the same height as the images*/
|
|
height: 470px;
|
|
}
|
|
|
|
.img-comp-img {
|
|
position: absolute;
|
|
width: auto;
|
|
height: auto;
|
|
overflow:hidden;
|
|
border-right: 3px solid #ffffff;
|
|
}
|
|
|
|
.img-comp-img img {
|
|
display:block;
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.img-comp-slider {
|
|
background: url(../images/icons/arrowhouse.svg) !important;
|
|
position: absolute;
|
|
z-index:9;
|
|
cursor: ew-resize;
|
|
/*set the appearance of the slider:*/
|
|
width: 52px;
|
|
height: 52px;
|
|
}
|
|
.housearrow h5 {
|
|
color: black;
|
|
}
|
|
.housearrow p {
|
|
color: var(--primary-color);
|
|
}
|
|
|
|
|
|
/* Sliding background */
|
|
.nav ul li a::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
width: 0%;
|
|
height: 100%;
|
|
border-bottom: 2px solid var(--primary-color);
|
|
/* background: var(--primary-color); */
|
|
z-index: -1;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
/* Text color transition */
|
|
.nav ul li a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
/* Animate Right → Left */
|
|
.nav ul li a:hover::before {
|
|
left: 0;
|
|
right: auto;
|
|
width: 100%;
|
|
}
|
|
|
|
.nav ul li {
|
|
position: relative;
|
|
}
|
|
|
|
/* MEGA MENU */
|
|
.mega-menu {
|
|
justify-content: space-between;
|
|
position: absolute;
|
|
top: 120%;
|
|
transform: translateX(-42%) translateY(20px) !important;
|
|
width: 1020px;
|
|
background: #f5f2ee;
|
|
display: flex;
|
|
padding: 30px;
|
|
gap: 0px;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
transform: translateY(20px);
|
|
transition: 0.4s ease;
|
|
}
|
|
|
|
/* SHOW ON HOVER */
|
|
.services-menu:hover .mega-menu {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
/* LEFT */
|
|
.menu-left ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0px !important;
|
|
width: 130%;
|
|
}
|
|
|
|
.menu-left li {
|
|
padding: 0px 0;
|
|
cursor: pointer;
|
|
color: #555;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.menu-left li:hover,
|
|
.menu-left li.active {
|
|
color: #000;
|
|
/* transform: translateX(5px); */
|
|
}
|
|
|
|
/* RIGHT IMAGE */
|
|
.menu-right img {
|
|
width: 380px;
|
|
height: 282px;
|
|
object-fit: cover;
|
|
border-radius: 0px;
|
|
transition: 0.4s ease;
|
|
}
|
|
.menu-left h2 {
|
|
color: black;
|
|
}
|
|
.services-menu a {
|
|
/* display: flex; */
|
|
/* align-items: center; */
|
|
gap: 6px;
|
|
}
|
|
.services-menu ul li a img {
|
|
padding: 0 0px 0 5px;
|
|
}
|
|
.services-menu ul li a {
|
|
color: black !important;
|
|
padding: 6px 0px 11px;
|
|
}
|
|
|
|
/* ARROW ICON */
|
|
.arrow {
|
|
width: 8px;
|
|
height: 8px;
|
|
border-right: 2px solid #d06a1e;
|
|
border-bottom: 2px solid #d06a1e;
|
|
transform: rotate(45deg); /* DOWN ARROW */
|
|
transition: 0.3s ease;
|
|
margin-top: 2px;
|
|
margin-left: 4px;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/* HOVER → ARROW UP */
|
|
.services-menu:hover .arrow {
|
|
transform: rotate(-135deg); /* UP ARROW */
|
|
right: 0;
|
|
}
|
|
|
|
/* VERTICAL LINE */
|
|
.mega-menu::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: 70px;
|
|
bottom: 20px;
|
|
height: 210px;
|
|
width: 1px;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
transparent,
|
|
rgba(0,0,0,0.15),
|
|
transparent
|
|
);
|
|
left: 25%;
|
|
}
|
|
|
|
|
|
|
|
.hero-remodel-section {
|
|
background-image: url(../images/interiorbreadcamp.png);
|
|
position: relative;
|
|
height: 70vh;
|
|
display: flex;
|
|
align-items: end;
|
|
overflow: hidden;
|
|
padding-bottom: 90px;
|
|
background-repeat: round;
|
|
}
|
|
|
|
/* Dark Overlay */
|
|
.hero-remodel-section::before {
|
|
/* content: ""; */
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0.75) 30%,
|
|
rgba(0, 0, 0, 0.3) 60%,
|
|
transparent 100%
|
|
);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Content */
|
|
.hero-remodel-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #fff;
|
|
}
|
|
|
|
.hero-remodel-subtitle {
|
|
color: #ff7a00;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
display: inline-block;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.hero-remodel-title {
|
|
font-size: 38px;
|
|
font-weight: 700;
|
|
line-height: 1.2;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.hero-remodel-text {
|
|
font-size: 16px;
|
|
color: #ddd;
|
|
max-width: 500px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Big Background Text */
|
|
.hero-remodel-bg-text {
|
|
position: absolute;
|
|
right: 50px;
|
|
bottom: 80px;
|
|
font-size: 120px;
|
|
font-weight: 700;
|
|
color: transparent;
|
|
-webkit-text-stroke: 1px rgba(255, 122, 0, 0.2);
|
|
line-height: 1;
|
|
z-index: 1;
|
|
text-align: right;
|
|
}
|
|
/* Heading */
|
|
.kitchen-subtitle {
|
|
color: #c46a2c;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.kitchen-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin-bottom: 50px;
|
|
color: #333;
|
|
}
|
|
|
|
|
|
/* Card Box */
|
|
.kitchen-card-box {
|
|
background: #fff;
|
|
padding: 15px;
|
|
border: 1px solid #E8E8E8;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
.kitchen-card-box img {
|
|
width: 100%;
|
|
height: 330px;
|
|
object-fit: cover;
|
|
}
|
|
.blog-card .overlay {
|
|
display: block;
|
|
align-items: center;
|
|
justify-content: unset;
|
|
bottom: 13px;
|
|
top: auto;
|
|
background: white;
|
|
width: 90%;
|
|
left: 5%;
|
|
right: auto;
|
|
}
|
|
|
|
.kitchen-card-box h5 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-top: 15px;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Active Cards (Center ones) */
|
|
.active-card {
|
|
}
|
|
|
|
/* Fade Side Cards */
|
|
.fade-card {
|
|
/* transform: scale(0.95); */
|
|
position: relative;
|
|
top: 50px;
|
|
}
|
|
|
|
/* Hover Effect */
|
|
.kitchen-card-box:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.bathroom-sanctuary-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
/* Heading */
|
|
.bathroom-subtitle {
|
|
color: #c46a2c;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.bathroom-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin-bottom: 50px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Cards */
|
|
.bathroom-card-wrapper {
|
|
/* gap: 30px; */
|
|
}
|
|
|
|
/* Card Box */
|
|
.bathroom-card-box {
|
|
padding: 15px;
|
|
transition: all 0.4s ease;
|
|
background: linear-gradient(180deg, #FFFFFF 0%, #FFF9F4 100%);
|
|
border: 1px solid #E8E8E8;
|
|
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.01);
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.bathroom-card-box img {
|
|
width: 100%;
|
|
height: 260px;
|
|
object-fit: cover;
|
|
}
|
|
.kitchen-transform-section {
|
|
background: #FFF9F4;
|
|
padding: 70px 0 120px;
|
|
}
|
|
.bathroom-card-box h5 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-top: 15px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Center Highlight */
|
|
.center-card {
|
|
}
|
|
|
|
/* Side Cards */
|
|
.side-card {position: relative;top: 60px;}
|
|
|
|
/* Hover Effect */
|
|
.bathroom-card-box:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgb(0 0 0 / 4%);
|
|
}
|
|
|
|
.kitchen-grid-section {
|
|
padding: 80px 0;
|
|
background: white;
|
|
}
|
|
|
|
/* Heading */
|
|
.kitchen-grid-subtitle {
|
|
color: #c46a2c;
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.kitchen-grid-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin-bottom: 50px;
|
|
color: #333;
|
|
}
|
|
|
|
/* Card */
|
|
.kitchen-grid-card {
|
|
background: #fff;
|
|
padding: 15px;
|
|
border: 1px solid #E8E8E8;
|
|
transition: all 0.4s ease;
|
|
height: 100%;
|
|
}
|
|
|
|
.kitchen-grid-card img {
|
|
width: 100%;
|
|
height: 330px;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.kitchen-grid-card h5 {
|
|
width: 70%;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-top: 15px;
|
|
color: #000000;
|
|
}
|
|
|
|
/* Hover */
|
|
.kitchen-grid-card:hover {
|
|
transform: translateY(-8px);
|
|
box-shadow: 0 15px 30px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
.cta-transform-section {
|
|
padding: 0px 0 80px;
|
|
background: white;
|
|
}
|
|
|
|
/* Box */
|
|
.cta-box {
|
|
background: #FFF9F5;
|
|
padding: 60px 40px;
|
|
border: 1px solid #F8F3E1;
|
|
position: relative;
|
|
}
|
|
|
|
/* Inner subtle border effect */
|
|
.cta-box::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 10px;
|
|
border: 1px solid #F8F0EB;
|
|
}
|
|
|
|
/* Title */
|
|
.cta-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
color: #333;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
/* Text */
|
|
.cta-text {
|
|
font-size: 16px;
|
|
color: #555;
|
|
max-width: 600px;
|
|
margin: 0 auto 30px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.pillars-section {
|
|
background: #FFF9F4;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
/* Card */
|
|
.pillar-card h5 {
|
|
color: black;
|
|
margin: 20px 0 16px;
|
|
}
|
|
.pillar-card {
|
|
position: relative;
|
|
background: #fff;
|
|
padding: 35px 30px;
|
|
border: 1px solid #eee;
|
|
border-radius: 4px;
|
|
text-align: left;
|
|
height: 100%;
|
|
transition: 0.3s ease;
|
|
}
|
|
|
|
.pillar-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
|
|
}
|
|
|
|
|
|
/* Text */
|
|
.pillar-card p {
|
|
font-size: 16px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
.connected-home-section {
|
|
background: #FCFCFC;
|
|
padding: 80px 0;
|
|
text-align: center;
|
|
}
|
|
|
|
|
|
/* Image box */
|
|
.home-image-wrapper {}
|
|
|
|
.home-image-wrapper img {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Bottom list */
|
|
.home-features {
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.home-features ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: 20px 40px;
|
|
}
|
|
|
|
.home-features ul li {
|
|
font-size: 14px;
|
|
color: #555;
|
|
position: relative;
|
|
padding-left: 15px;
|
|
}
|
|
|
|
/* Dot */
|
|
.home-features ul li::before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #000;
|
|
}
|
|
.design-gallery-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
/* Orange Tag */
|
|
.design-gallery-section .sub-tag {
|
|
color: #d57c3c;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
/* Gallery Row spacing */
|
|
.gallery-row {
|
|
row-gap: 25px;
|
|
}
|
|
|
|
/* Card */
|
|
.gallery-card {
|
|
overflow: hidden;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* Image */
|
|
.gallery-card img {
|
|
width: 100%;
|
|
height: 220px;
|
|
object-fit: cover;
|
|
border-radius: 0px;
|
|
transition: 0.4s ease;
|
|
}
|
|
|
|
/* Hover effect */
|
|
.gallery-card:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
.sunroom-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
/* Tag */
|
|
.sunroom-section .sub-tag {
|
|
color: #d57c3c;
|
|
font-size: 14px;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Card */
|
|
.sunroom-card {
|
|
border: 1px solid #EDBE9C;
|
|
padding: 5px;
|
|
gap: 20px;
|
|
background: transparent;
|
|
}
|
|
|
|
/* Reverse layout */
|
|
.sunroom-card.reverse {
|
|
flex-direction: row-reverse;
|
|
}
|
|
|
|
/* Content */
|
|
.card-content {
|
|
flex: 1;
|
|
padding: 0 30px;
|
|
}
|
|
|
|
.card-content h5 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin: 15px 0 10px;
|
|
color: black;
|
|
}
|
|
|
|
.card-content p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
/* Image */
|
|
.card-image {
|
|
flex: 1;
|
|
}
|
|
|
|
.card-image img {
|
|
width: 100%;
|
|
height: 310px;
|
|
object-fit: cover;
|
|
}
|
|
.tech-item .icon-box {
|
|
width: 66px;
|
|
height: 66px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 1px solid #d06a1e63;
|
|
background: white;
|
|
border-radius: 60px;
|
|
margin: 0 0 20px;
|
|
}
|
|
/* Icon */
|
|
.icon-box {
|
|
width: 66px;
|
|
height: 66px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #FFFFFF 23.58%, #FFF5EC 80.86%);
|
|
border: 1px solid #d06a1e17;
|
|
}
|
|
|
|
.icon-box img {
|
|
width: 30px;
|
|
height: 30px;
|
|
object-fit: fill;
|
|
}
|
|
.custom-accordion .accordion-item {
|
|
border: none;
|
|
/* border-bottom: 1px solid #ddd; */
|
|
margin-bottom: 20px;
|
|
overflow: hidden;
|
|
border-radius: 12px;
|
|
background: #fff;
|
|
}
|
|
|
|
.custom-accordion .accordion-button {
|
|
background: #fff;
|
|
color: #000000d4;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
padding: 20px 24px;
|
|
box-shadow: none !important;
|
|
border: none;
|
|
}
|
|
|
|
.custom-accordion .accordion-button:not(.collapsed) {
|
|
background: #fff;
|
|
color: #000;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.custom-accordion .accordion-button:focus {
|
|
box-shadow: none;
|
|
border-color: transparent;
|
|
}
|
|
|
|
/* Smooth collapse area */
|
|
.custom-accordion .accordion-collapse {
|
|
overflow: hidden;
|
|
transition: height 0.4s ease;
|
|
}
|
|
|
|
.custom-accordion .accordion-body {
|
|
padding: 0 24px 20px 24px;
|
|
color: #555;
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.sunroom-sectionback {
|
|
background: url(../images/faqbread.png);
|
|
padding: 80px 0;
|
|
position: relative;
|
|
}
|
|
.menu-left ul li {
|
|
}
|
|
|
|
|
|
|
|
.custom-accordion .accordion-button {
|
|
font-size: 20px;
|
|
padding: 23px 20px;
|
|
box-shadow: none;
|
|
border-radius: 10px !important;
|
|
margin-top: 0;
|
|
FLOAT: unset;
|
|
}
|
|
|
|
/* Remove default icon */
|
|
.custom-accordion .accordion-button::after {
|
|
content: "";
|
|
background-image: url(../images/icons/plusarrow.svg);
|
|
transform: rotate(0deg);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
/* Rotate arrow */
|
|
.custom-accordion .accordion-button:not(.collapsed)::after {
|
|
content: "";
|
|
background-image: url(../images/icons/minus.svg);
|
|
transform: rotate(0deg);
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.custom-accordion .accordion-body {
|
|
background: #fff;
|
|
}
|
|
.endbreadcamp {
|
|
text-align: end;
|
|
}
|
|
|
|
|
|
.services-section {
|
|
background: #0f1720;
|
|
padding: 80px 0;
|
|
color: #fff;
|
|
}
|
|
|
|
/* CARD STYLE */
|
|
.service-card {
|
|
padding: 40px 30px;
|
|
background: #0b1118;
|
|
height: 100%;
|
|
transition: 0.3s ease;
|
|
}
|
|
.services-grid .service-card::before {
|
|
content: "";
|
|
background-image: url(../images/kitchenseprater.png);
|
|
width: 1px;
|
|
position: absolute;
|
|
top: 0;
|
|
height: 100%;
|
|
}
|
|
|
|
.service-card h4 {
|
|
margin-top: 27px;
|
|
font-size: 19px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.service-card p {
|
|
color: #dcdcdc;
|
|
font-size: 17px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* ICON BOX */
|
|
.service-card .icon-box {
|
|
width: 60px;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
background: rgba(208, 106, 30, 0.21);
|
|
border: 1px solid #D06A1E;
|
|
}
|
|
.services-sectionwrap .service-card:hover {
|
|
transform: unset;
|
|
}
|
|
/* HOVER EFFECT 🔥 */
|
|
.service-card:hover {
|
|
transform: translateY(-10px);
|
|
background: #0F1317;
|
|
box-shadow: 0 10px 30px rgba(255, 122, 0, 0.2);
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.process-section {
|
|
padding: 80px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
|
|
/* PROCESS FLOW */
|
|
.process-flow {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 22px;
|
|
flex-wrap: wrap;
|
|
position: relative;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.process-item {
|
|
position: relative;
|
|
width: 220px;
|
|
flex: 0 0 233px;
|
|
}
|
|
|
|
.process-item.down {
|
|
margin-top: 45px;
|
|
}
|
|
|
|
|
|
|
|
|
|
.process-card h4 {
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
margin-bottom: 8px;
|
|
color: #000000;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.process-card p {
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
color: #000000;
|
|
margin: 0;
|
|
}
|
|
|
|
/* connector arrows */
|
|
.connector {
|
|
position: absolute;
|
|
top: -2px;
|
|
right: -63px;
|
|
font-size: 28px;
|
|
color: #d97a2b;
|
|
font-weight: 500;
|
|
z-index: 2;
|
|
}
|
|
|
|
.process-item.down .connector {
|
|
top: auto;
|
|
bottom: -8px;
|
|
}
|
|
|
|
.process-item:last-child .connector {
|
|
display: none;
|
|
}
|
|
.copntactwrappadd {
|
|
padding-top: 170px;
|
|
}
|
|
.locationflex {
|
|
display: flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
}
|
|
.locationflex p {
|
|
color: #3A3A3A;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
}
|
|
.custom-accordion {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.luxury-section {
|
|
position: relative;
|
|
background: url('../images/woodmarkback.png') center/cover no-repeat;
|
|
padding: 80px 0 0;
|
|
color: #fff;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.overlay-hero {
|
|
position: relative;
|
|
background: url('../images/your-bg.jpg') center/cover no-repeat;
|
|
padding: 120px 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Dark + orange overlay */
|
|
.overlay-hero::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(
|
|
to bottom,
|
|
rgba(0, 0, 0, 0.85),
|
|
rgba(0, 0, 0, 0.6),
|
|
rgba(214, 106, 31, 0.75)
|
|
);
|
|
z-index: 1;
|
|
}
|
|
|
|
/* Content above overlay */
|
|
.overlay-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
color: #fff;
|
|
}
|
|
|
|
.overlay-content h2 {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.overlay-content p {
|
|
font-size: 16px;
|
|
color: #eee;
|
|
line-height: 1.6;
|
|
}
|
|
.luxury-section h2 span {
|
|
color: #ffffff9c;
|
|
}
|
|
.luxury-section h2 {
|
|
color: white;
|
|
}
|
|
|
|
|
|
/* Content */
|
|
.luxury-content {
|
|
position: relative;
|
|
z-index: 2;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
/* Stats Section */
|
|
.luxury-stats {
|
|
position: relative;
|
|
z-index: 2;
|
|
border-top: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.stat-box {
|
|
padding: 50px 20px;
|
|
border-right: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.stat-box:last-child {
|
|
border-right: none;
|
|
}
|
|
|
|
.stat-box h3 {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.stat-box p {
|
|
font-size: 14px;
|
|
color: #ddd;
|
|
margin: 0;
|
|
}
|
|
|
|
/* Mobile Fix */
|
|
@media (max-width: 767px) {
|
|
.luxury-content h2 {
|
|
font-size: 22px;
|
|
}
|
|
|
|
.stat-box {
|
|
border-right: none;
|
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
|
|
.stat-box:nth-child(2n) {
|
|
border-bottom: 1px solid rgba(255,255,255,0.2);
|
|
}
|
|
}
|
|
|
|
.expertise-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
/* Slider */
|
|
.expertise-slider {
|
|
padding-bottom: 50px;
|
|
}
|
|
|
|
/* Card */
|
|
.card-box {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.card-box img {
|
|
width: 100%;
|
|
height: 320px;
|
|
object-fit: cover;
|
|
transition: 0.5s ease;
|
|
}
|
|
|
|
/* Overlay gradient */
|
|
.card-box .overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
transition: 0.4s;
|
|
background: unset;
|
|
transform: translate(0%, 0%);
|
|
width: 100%;
|
|
}
|
|
|
|
/* Content */
|
|
.card-box .content {
|
|
position: absolute;
|
|
bottom: 25px;
|
|
left: 25px;
|
|
color: #fff;
|
|
z-index: 2;
|
|
}
|
|
|
|
.card-box h4 {
|
|
font-size: 24px;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.card-box p {
|
|
font-size: 14px;
|
|
color: #ddd;
|
|
}
|
|
|
|
/* Hover Effects 🔥 */
|
|
.card-box:hover img {
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
.card-box:hover .overlay {
|
|
background: linear-gradient(to top, rgb(0 0 0 / 80%), transparent);
|
|
}
|
|
|
|
/* Pagination */
|
|
.swiper-pagination-bullet {
|
|
background: #ddd;
|
|
opacity: 1;
|
|
}
|
|
|
|
.swiper-pagination-bullet-active {
|
|
background: #c8641c;
|
|
width: 20px;
|
|
border-radius: 10px;
|
|
}
|
|
.services-sectionwrapfull h2 {
|
|
color: white;
|
|
}
|
|
|
|
.process-section {
|
|
padding: 0px 0 0;
|
|
position: relative;
|
|
}
|
|
|
|
/* Row line */
|
|
.process-row {
|
|
/* position: relative; */
|
|
margin-top: 60px;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Dotted connecting line */
|
|
.lineprocess::before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 180px;
|
|
background: url(../images/icons/processway.png);
|
|
z-index: 0;
|
|
}
|
|
|
|
|
|
.process-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.08);
|
|
}
|
|
|
|
/* Number circle */
|
|
.step-number {
|
|
position: absolute;
|
|
top: -25px;
|
|
left: -10px;
|
|
width: 50px;
|
|
height: 50px;
|
|
background: #c8641c;
|
|
color: #fff;
|
|
font-size: 22px;
|
|
font-weight: 600;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 5px solid #fff;
|
|
box-shadow: 0 5px 10px rgba(0,0,0,0.1);
|
|
}
|
|
|
|
/* Text */
|
|
.process-card h4 {
|
|
margin-top: 20px;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #111;
|
|
}
|
|
|
|
.process-card p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin-top: 10px;
|
|
}
|
|
.woodmarksection {
|
|
background: #FFFFFF;
|
|
border: 1px solid #EDBE9C;
|
|
box-shadow: 0px 0px 60px rgba(0, 0, 0, 0.01);
|
|
border-radius: 0px;
|
|
padding: 25px 15px;
|
|
}
|
|
.woodwork-img {
|
|
width: 63%;
|
|
}
|
|
.woodwork-img img {
|
|
width: 100%;
|
|
height: 400px;
|
|
object-fit: cover;
|
|
}
|
|
.woodwork-content:before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
color: #c46b2c;
|
|
width: 4px;
|
|
left: -100px;
|
|
height: 100%;
|
|
background: linear-gradient(180deg, rgba(255, 255, 255, 0.3) 0%, rgba(208, 106, 30, 0.3) 49.04%, rgba(255, 255, 255, 0.3) 100%);
|
|
}
|
|
.woodwork-content {
|
|
position: relative;
|
|
}
|
|
.woodwork-content h2 {
|
|
color: black;
|
|
}
|
|
.woodwork-content h5 {
|
|
color: var(--primary-color);
|
|
}
|
|
.woodwork-content p {
|
|
padding: 18px 0;
|
|
width: 70%;
|
|
font-weight: 400;
|
|
}
|
|
.woodwork-content ul {
|
|
margin-bottom: 30px;
|
|
}
|
|
.woodwork-content ul li:before {
|
|
content: "";
|
|
top: 12px;
|
|
width: 8px;
|
|
position: absolute;
|
|
left: 0;
|
|
color: #c46b2c;
|
|
border-radius: 22px;
|
|
height: 8px;
|
|
background: var(--primary-color);
|
|
}
|
|
.woodwork-content ul li {
|
|
position: relative;
|
|
color: black;
|
|
font-weight: 400;
|
|
padding: 3px 20px;
|
|
}
|
|
|
|
.services-sectionwrapfull {
|
|
background-color: #1A1D20;
|
|
padding: 80px 0;
|
|
color: #fff;
|
|
}
|
|
|
|
|
|
.services-row {
|
|
row-gap: 25px;
|
|
}
|
|
|
|
.service-box {
|
|
padding: 31px;
|
|
height: 100%;
|
|
transition: 0.3s ease;
|
|
background: #1B2025;
|
|
border: 1px solid #2A2F36;
|
|
}
|
|
|
|
.service-box h5 {
|
|
font-size: 20px;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.service-box p {
|
|
color: #ffffff;
|
|
font-size: 15px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.service-box:hover {
|
|
border-color: #f97316;
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.viz-section {
|
|
background-color: #1A1D20;
|
|
padding: 10px 0;
|
|
color: #fff;
|
|
}
|
|
|
|
.viz-header {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
|
|
.viz-card {
|
|
background-color: #ffffff;
|
|
padding: 32px 20px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.viz-card img {
|
|
width: 100%;
|
|
height: auto;
|
|
display: block;
|
|
}
|
|
|
|
.viz-content {
|
|
padding: 10px 20px;
|
|
}
|
|
|
|
.viz-content h4 {
|
|
font-size: 23px;
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: #1e293b;
|
|
}
|
|
|
|
.viz-content p {
|
|
color: #272727;
|
|
width: 68%;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.viz-content ul {
|
|
padding-left: 18px;
|
|
}
|
|
.visualmatterwrap {
|
|
background: #1B2025;
|
|
border: 1px solid #2A2F36;
|
|
height: 380px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0 40px;
|
|
}
|
|
.viz-content ul li:before {
|
|
content:"";
|
|
left: -17px;
|
|
top: 11px;
|
|
position: absolute;
|
|
height: 5px;
|
|
width: 5px;
|
|
border-radius: 22px;
|
|
background: #303336;
|
|
}
|
|
.viz-content ul li {
|
|
position: relative;
|
|
color: #303336;
|
|
margin-bottom: 7px;
|
|
font-size: 17px;
|
|
}
|
|
|
|
.design-section {
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.design-header {
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.design-header .tag {
|
|
color: #c2410c;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
margin-bottom: 10px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.design-header h2 {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
color: #1e293b;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.design-header h2 span {
|
|
color: #64748b;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.design-images {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.img-box {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-box img {
|
|
width: 100%;
|
|
height: 300px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.design-text p {
|
|
font-size: 16px;
|
|
color: #475569;
|
|
max-width: 900px;
|
|
line-height: 1.7;
|
|
}
|
|
|
|
.outdoorkitchen {
|
|
padding: 0 0 120px;
|
|
}
|
|
.small-title {
|
|
letter-spacing: 1px;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.services-sectionwrapfull .img-box {border: 1px solid var(--primary-color);}
|
|
|
|
.services-sectionwrapfull .img-box img {
|
|
width: 100%;
|
|
height: 376px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
.visualmatter {
|
|
|
|
}
|
|
.visualmatterwrap .services-top {
|
|
margin: 0;
|
|
}
|
|
.visualmatterwrap p {
|
|
color: #dbdbdb !important;
|
|
font-size: 18px;
|
|
}
|
|
|
|
p.text-muted {}
|
|
|
|
|
|
|
|
.tech-section {
|
|
background-color: #FFF9F4;
|
|
padding: 80px 0;
|
|
}
|
|
|
|
.description {
|
|
color: #666;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.tech-item {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.pillar-card.icon-box {
|
|
width: 70px;
|
|
height: 70px;
|
|
border: 1px solid #e2cfc1;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin: 0 auto 15px;
|
|
font-size: 22px;
|
|
color: #c86b1f;
|
|
background: #fff;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
|
|
.tech-item h5 {
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
color: black;
|
|
}
|
|
|
|
.tech-item p {
|
|
font-size: 15px;
|
|
color: #666;
|
|
}
|
|
.outdoorwrap {
|
|
padding: 60px 0 60px;
|
|
}
|
|
.numberline {
|
|
background: #1B2025;
|
|
border: 3.20502px solid #282F36;
|
|
border-radius: 50px;
|
|
width: 48px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 20px;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tab-box{
|
|
color: black;
|
|
border: 1px solid #F6DFCB;
|
|
padding:15px;
|
|
margin-bottom:10px;
|
|
cursor:pointer;
|
|
background: #ffffff;
|
|
transition:0.3s;
|
|
}
|
|
|
|
.tab-box.active{
|
|
background:#c86b1f;
|
|
color:#fff;
|
|
}
|
|
|
|
.tab-box:hover{
|
|
background: var(--primary-color);
|
|
color: white;
|
|
}
|
|
|
|
.content-area{
|
|
padding-left:30px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.content-area h4{
|
|
font-weight: 500;
|
|
font-size: 20px;
|
|
color: black;
|
|
line-height: 31px;
|
|
margin-bottom: 30px;
|
|
}
|
|
.tabsapproval {background: #FFF9F4;padding: 70px 0 0;}
|
|
#mainImage {
|
|
width: 100%;
|
|
height: 540px;
|
|
object-fit: cover;
|
|
border: 0px;
|
|
border-radius: 0px !important;
|
|
}
|
|
.wraptask {
|
|
margin-top: 30px;
|
|
}
|
|
.tabsapproval .tag {
|
|
width: 60%;
|
|
}
|
|
.tabsapproval h2 {
|
|
color: black;
|
|
width: 70%;
|
|
}
|
|
.process-section {
|
|
padding: 70px 0 70px;
|
|
}
|
|
|
|
|
|
.process-card {
|
|
|
|
border: 1px solid #e8a57d;
|
|
|
|
padding: 28px 26px;
|
|
|
|
min-height: 172px;
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
justify-content: center;
|
|
|
|
margin-bottom: 14px;
|
|
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.process-card:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.process-card h3 {
|
|
font-size: 17px;
|
|
line-height: 1.3;
|
|
font-weight: 600;
|
|
color: #1f1f1f;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.process-card p {
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
color: #555;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.process-image img {
|
|
width: 100%;
|
|
height: 359px;
|
|
object-fit: cover;
|
|
display: block;
|
|
}
|
|
|
|
.sectionwrapfullwrap {
|
|
padding: 0 0 70px;
|
|
}
|
|
|
|
.design-images h5 {
|
|
color: black;
|
|
margin: 20px 0 0;
|
|
}
|
|
.processswrap {
|
|
|
|
}
|
|
.process-flow .process-item .step-number {
|
|
position: absolute;
|
|
top: 5px;
|
|
justify-content: flex-end;
|
|
background: unset;
|
|
box-shadow: unset;
|
|
right: 14px;
|
|
left: 0;
|
|
-webkit-text-stroke: 1px #bdbdbd; /* outline */
|
|
font-size: 23px;
|
|
width: auto;
|
|
height: auto;
|
|
border: unset;
|
|
}
|
|
.processwoodmark {
|
|
|
|
padding: 0 0 70px;
|
|
}
|
|
.lineprocess .process-card .step-number {}
|
|
.process-row .process-card {
|
|
position: relative;
|
|
max-width: 270px;
|
|
border-radius: 12px;
|
|
background: white;
|
|
}
|
|
.process-item .process-card h4 {
|
|
margin: 20px 0 0px;
|
|
}
|
|
.process-item .process-card p {
|
|
margin: 5px 0 0px;
|
|
}
|
|
|
|
/* */
|
|
|
|
|
|
|
|
.blog-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 25px;
|
|
}
|
|
/* CARD */
|
|
.blog-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
/* IMAGE */
|
|
.blog-card img {
|
|
width: 100%;
|
|
height: 440px;
|
|
object-fit: cover;
|
|
transition: transform 0.4s ease;
|
|
}
|
|
.blog-card .overlay img {
|
|
width: 17px;
|
|
height: 17px;
|
|
}
|
|
|
|
/* OVERLAY DEFAULT (only 20% visible) */
|
|
.overlay {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 0;
|
|
/* transform: translate(-50%, -25%); */ /* mostly hidden */
|
|
width: 100%;
|
|
padding: 20px;
|
|
background: white;
|
|
border-radius: 1px;
|
|
transition: all 0.4s ease;
|
|
}
|
|
|
|
|
|
/* IMAGE ZOOM */
|
|
.blog-card:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
.blog-title {
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
margin-bottom: 15px;
|
|
color: black;
|
|
}
|
|
|
|
.blog-meta {
|
|
color: #777;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.blog-content p {
|
|
color: #555;
|
|
line-height: 1.7;
|
|
}
|
|
.blog-card span {
|
|
color: black;
|
|
font-size: 14px;
|
|
opacity: 0.6;
|
|
}
|
|
.blog-card h3 {
|
|
color: black;
|
|
margin: 10px 0 3px;
|
|
font-size: 21px;
|
|
width: 90%;
|
|
line-height: 32px;
|
|
}
|
|
/* SIDEBAR */
|
|
.sidebar-sticky {
|
|
position: sticky;
|
|
top: 100px;
|
|
}
|
|
|
|
.sidebar-box {
|
|
padding: 30px 0 0;
|
|
border-radius: 10px;
|
|
background: rgb(255 255 255);
|
|
}
|
|
|
|
.sidebar-title {
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
color: black;
|
|
padding: 0 29px;
|
|
}
|
|
|
|
.sidebar-box::before {
|
|
content: "";
|
|
width: 2px;
|
|
position: absolute;
|
|
height: 28px;
|
|
left: 0px;
|
|
background: #d06a1e;
|
|
display: inline-block;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.post-item img {
|
|
width: 150px;
|
|
min-width: 160px;
|
|
height: 120px;
|
|
object-fit: cover;
|
|
border-radius: 0px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.post-item p {
|
|
font-size: 19px;
|
|
margin: 0;
|
|
font-weight: 500;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 3;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.post-item .date {
|
|
font-size: 12px;
|
|
color: #888;
|
|
}
|
|
.blog-content h4 {
|
|
color: black;
|
|
margin: 0 0 20px;
|
|
}
|
|
.blog-content ul {
|
|
margin: 0 0 30px;
|
|
position: relative;
|
|
}
|
|
.blog-content img {
|
|
width: 100%;
|
|
height: 400px;
|
|
object-fit: cover;
|
|
border-radius: 0 !important;
|
|
}
|
|
.blog-content ul li:before {
|
|
content: "•";
|
|
position: absolute;
|
|
left: 0px;
|
|
color: rgb(196, 107, 44);
|
|
}
|
|
.blog-content ul li {
|
|
color: black;
|
|
margin: 0 10px 10px;
|
|
}
|
|
.blog-details-section {
|
|
padding: 50px 0;
|
|
background: #fff9f4;
|
|
}
|
|
.post-item {
|
|
margin: 0 !important;
|
|
border-bottom: 1px solid #80808024;
|
|
padding: 27px 30px;
|
|
gap: 10px;
|
|
}
|
|
.feature-box {
|
|
margin-bottom: 34px !important;
|
|
}
|
|
.processwrap-section {
|
|
background: #FFF9F4;
|
|
padding: 70px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.processwrap-title {
|
|
font-size: 32px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.processwrap-title span {
|
|
color: #888;
|
|
}
|
|
|
|
.processwrap-subtitle {
|
|
color: #666;
|
|
max-width: 600px;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Timeline */
|
|
.processwrap-timeline:after {
|
|
content:"";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 50%;
|
|
top: 0;
|
|
width: 42px;
|
|
height: 2px;
|
|
background: #e2d6cc;
|
|
transform: translateX(-50%);
|
|
}
|
|
.processwrap-timeline {
|
|
position: relative;
|
|
padding: 0px 0;
|
|
}
|
|
|
|
.processwrap-timeline::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: #2f281d42;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.process-cardwrap::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0px;
|
|
top: 0;
|
|
width: 1px;
|
|
height: 100%;
|
|
background: #2f281d12;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* Dots */
|
|
.processwrap-item {
|
|
position: relative;
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.processwrap-item::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 70px;
|
|
width: 48px;
|
|
height: 48px;
|
|
background: #fff;
|
|
border: 2px solid #e2d6cc;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
.processwrap-item::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 91px;
|
|
width: 6px;
|
|
height: 6px;
|
|
background: #d86f2d;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
z-index: 3;
|
|
}
|
|
|
|
/* Card */
|
|
.right .processwrap-card {
|
|
float: unset;
|
|
}
|
|
.processwrap-card span img {
|
|
width: 15px;
|
|
}
|
|
.processwrap-card span {
|
|
width: 54px;
|
|
height: 51px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, rgb(255, 255, 255) 23.58%, rgb(255, 245, 236) 80.86%);
|
|
border: 1px solid rgba(208, 106, 30, 0.09);
|
|
}
|
|
.processwrap-card {
|
|
background: #fff;
|
|
padding: 25px;
|
|
border: 1px solid #FFDEC0;
|
|
border-radius: 0px;
|
|
position: relative;
|
|
max-width: 390px;
|
|
float: inline-end;
|
|
margin: 0px 30px 0px;
|
|
}
|
|
|
|
.processwrap-card h5 {
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
color: black;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 20px;
|
|
}
|
|
|
|
.processwrap-card p {
|
|
color: #666;
|
|
font-size: 14px;
|
|
width: 70%;
|
|
margin: 30px 0 0;
|
|
}
|
|
|
|
/* Number */
|
|
.processwrap-card .number {
|
|
-webkit-text-stroke: 1px #d2d2d296;
|
|
position: absolute;
|
|
right: 39px;
|
|
top: 50px;
|
|
font-size: 40px;
|
|
color: unset;
|
|
font-weight: 700;
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
.post-item:last-child {
|
|
border-bottom: none;
|
|
}
|
|
.process-sectionbottom {
|
|
padding: 70px 0;
|
|
}
|
|
.process-cardwrap {
|
|
border-left: 1px solid #e0e0e0;
|
|
padding-left: 20px;
|
|
height: 100%;
|
|
position: relative;
|
|
padding: 40px 0px 0 20px;
|
|
}
|
|
.process-cardwrap .number {
|
|
font-size: 18px;
|
|
color: #999;
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.process-cardwrap h5 {
|
|
font-weight: 600;
|
|
margin-bottom: 25px;
|
|
color: black;
|
|
}
|
|
|
|
.process-cardwrap img {
|
|
width: 100%;
|
|
height: 160px;
|
|
object-fit: cover;
|
|
margin-bottom: 15px;
|
|
}
|
|
|
|
.process-cardwrap p {
|
|
color: #666;
|
|
font-size: 16px;
|
|
width: 73%;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Remove border from first */
|
|
.process-cardwrap:first-child {
|
|
border-left: none;
|
|
}
|
|
|
|
.paddprocesswith .processwrap-card {margin-top: 24px;}
|
|
.ourprocesswraptop {
|
|
height: 70vh;
|
|
}
|
|
|
|
.featured-projects {padding: 70px 0;}
|
|
|
|
|
|
|
|
.filters .form-select {
|
|
font-size: 15px;
|
|
border-radius: 0px;
|
|
height: 50px;
|
|
}
|
|
|
|
/* Card */
|
|
.project-cardwrapper {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.project-cardwrapper img {
|
|
width: 100%;
|
|
height: 310px;
|
|
object-fit: cover;
|
|
transition: 0.4s;
|
|
}
|
|
.content-box span{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
/* Hover Zoom */
|
|
.project-cardwrapper:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Info Box */
|
|
.project-info {
|
|
position: absolute;
|
|
bottom: 15px;
|
|
left: 15px;
|
|
right: 15px;
|
|
background: #fff;
|
|
padding: 15px;
|
|
border-radius: 0px;
|
|
}
|
|
|
|
.project-info h5 {
|
|
font-size: 16px;
|
|
font-weight: 600;
|
|
color: black;
|
|
}
|
|
.headerwrap {
|
|
position: relative;
|
|
background: white;
|
|
color: black;
|
|
}
|
|
.featured-projects h2 {
|
|
margin: 0 0 7px !important;
|
|
}
|
|
.projectgridwwrap {
|
|
margin-top: 0px;
|
|
}
|
|
.meta {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: 19px;
|
|
}
|
|
|
|
.highlight-section {
|
|
background: linear-gradient(90deg, #2b2118, #3a2a1d);
|
|
padding: 80px 0 0;
|
|
color: #fff;
|
|
}
|
|
|
|
/* Images */
|
|
.img-box {
|
|
border-radius: 0px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.img-box img {
|
|
width: 100%;
|
|
height: 420px;
|
|
object-fit: cover;
|
|
transition: 0.4s ease;
|
|
}
|
|
|
|
.img-box:hover img {
|
|
transform: scale(1.05);
|
|
}
|
|
|
|
/* Content */
|
|
.content-box {
|
|
padding-left: 40px;
|
|
}
|
|
|
|
.content-box h2 {
|
|
font-weight: 600;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.content-box p {
|
|
color: #e5e5e5;
|
|
line-height: 1.6;
|
|
font-size: 15px;
|
|
margin-bottom: 20px;
|
|
width: 80%;
|
|
}
|
|
|
|
/* Meta */
|
|
.meta {
|
|
display: flex;
|
|
gap: 20px;
|
|
font-size: 14px;
|
|
color: #f0a35c;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* Button */
|
|
.btn-custom {
|
|
display: inline-block;
|
|
background: #e67e22;
|
|
color: #fff;
|
|
padding: 12px 28px;
|
|
border-radius: 6px;
|
|
text-decoration: none;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.btn-custom:hover {
|
|
background: #cf6d17;
|
|
color: #fff;
|
|
}
|
|
.agreebox img {
|
|
height: 350px;
|
|
}
|
|
.blog-meta span {
|
|
color: black;
|
|
}
|
|
|
|
|
|
|
|
|
|
.section-title {
|
|
font-size: 30px;
|
|
font-weight: 600;
|
|
color: #2c2c2c;
|
|
}
|
|
|
|
.section-desc {
|
|
color: #666;
|
|
font-size: 15px;
|
|
line-height: 1.7;
|
|
width: 87%;
|
|
}
|
|
|
|
.feature-box h6 {
|
|
font-weight: 600;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.feature-box p {
|
|
font-size: 14px;
|
|
color: #666;
|
|
margin: 0;
|
|
}
|
|
|
|
.smart-img {
|
|
width: 100%;
|
|
object-fit: cover;
|
|
}
|
|
.smart-home {
|
|
padding: 60px 0;
|
|
}
|
|
.feature-box h6 {
|
|
color: black;
|
|
margin: 0 0 8px;
|
|
}
|
|
.wraptrack {
|
|
padding: 0 40px;
|
|
}
|
|
.value-box h5 {
|
|
color: black;
|
|
margin: 20px 0 10px;
|
|
}
|
|
.rightside {
|
|
text-align: right;
|
|
flex-direction: column;
|
|
display: flex;
|
|
align-items: end;
|
|
}
|
|
.rightleft {
|
|
text-align: left;
|
|
}
|
|
.stepnumber {
|
|
-webkit-text-stroke: 1px #d06a1e29;
|
|
color: unset;
|
|
font-size: 53px;
|
|
font-weight: 600;
|
|
letter-spacing: 1px;
|
|
position: absolute;
|
|
left: 120px;
|
|
top: 30px;
|
|
}
|
|
.marginabout {
|
|
margin: 10px 0 40px;
|
|
}
|
|
.feature-item {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
color: black;
|
|
font-size: 16px;
|
|
}
|
|
.custom-img {
|
|
border-radius: unset !important;
|
|
width: 100%;
|
|
height: 390px;
|
|
object-fit: cover;
|
|
}
|
|
.small-img {
|
|
height: 310px;
|
|
}
|
|
.bottonarrow:before{
|
|
content: "";
|
|
background: url(../images/icons/arrowdown.svg);
|
|
position: absolute;
|
|
width: 30px;
|
|
height: 18px;
|
|
bottom: 0;
|
|
left: 49%;
|
|
}
|
|
.privacycontent h2 {
|
|
color: #000;
|
|
}
|
|
.privacycontent h5 {
|
|
color: #000;
|
|
}
|
|
|
|
|
|
.gallery-card {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.gallery-card img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
transition: 0.5s;
|
|
}
|
|
|
|
.gallery-card.big {
|
|
height: 100%;
|
|
}
|
|
|
|
.gallery-card:hover img {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
/* OVERLAY */
|
|
.overlay {
|
|
position: absolute;
|
|
inset: 0;
|
|
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
|
display: flex;
|
|
align-items: flex-end;
|
|
padding: 20px;
|
|
color: #fff;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* FILTER BUTTON */
|
|
.filter-btn {
|
|
border: 1px solid #ddd;
|
|
padding: 8px 18px;
|
|
margin: 5px;
|
|
border-radius: 25px;
|
|
background: transparent;
|
|
color: #404040;
|
|
cursor: pointer;
|
|
float: unset;
|
|
}
|
|
|
|
.filter-btn.active {
|
|
background: #d46a1f;
|
|
color: #fff;
|
|
border-color: #d46a1f;
|
|
}
|
|
|
|
/* FILTER ANIMATION */
|
|
.gallery-item {
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.gallery-item.hide {
|
|
display: none;
|
|
}
|
|
.gallery-card .overlay {
|
|
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.83) 100%);
|
|
height: 210px;
|
|
bottom: 0;
|
|
top: auto;
|
|
}
|
|
|
|
.gallery-section {
|
|
padding: 70px 0;
|
|
}
|
|
.pricacy_flex a {
|
|
color: #000;
|
|
}
|
|
.gridservice {
|
|
gap: 20px;
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|