/* Start custom CSS for html, class: .elementor-element-ab9b0bc *//* =========================================
SATYAM PROPERTY — HERO SECTION
========================================= */
.sp-hero {
position: relative;
width: 100%;
min-height: 690px;
display: flex;
align-items: center;
box-sizing: border-box;
background-image:
linear-gradient(
rgba(20, 28, 30, 0.30),
rgba(20, 28, 30, 0.30)
),
url("https://satyamproperty.org/wp-content/uploads/2026/08/ChatGPT-Image-Aug-16-2026-06_18_47-PM.png");
background-size: cover;
background-position: center center;
}
/* =========================================
HERO CONTENT
========================================= */
.sp-hero-content {
width: 90%;
max-width: 1200px;
margin: 0 auto;
padding: 75px 0 65px;
box-sizing: border-box;
}
/* =========================================
HERO TEXT
========================================= */
.sp-hero-text {
max-width: 600px;
color: #FFFFFF;
margin-bottom: 42px;
}
.sp-hero-label {
margin: 0 0 14px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.5px;
color: #FFFFFF;
}
.sp-hero-text h1 {
margin: 0;
font-family: Georgia, serif;
font-size: clamp(42px, 5vw, 62px);
font-weight: 500;
line-height: 1.08;
letter-spacing: -0.5px;
color: #FFFFFF;
}
.sp-hero-description {
max-width: 470px;
margin: 18px 0 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.6;
color: rgba(255,255,255,0.90);
}
/* =========================================
SEARCH BOX
========================================= */
.sp-search-box {
width: 100%;
background: #FFFFFF;
border: 1px solid #E5E0D7;
box-shadow: 0 10px 30px rgba(0,0,0,0.14);
box-sizing: border-box;
}
/* =========================================
BUY / RENT / SELL
========================================= */
.sp-search-tabs {
display: flex;
align-items: center;
gap: 5px;
padding: 0 24px;
border-bottom: 1px solid #E7E3DB;
}
.sp-search-tab {
position: relative;
padding: 15px 18px;
border: 0;
background: transparent;
color: #777777;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
}
.sp-search-tab:first-child {
padding-left: 0;
}
.sp-search-tab.active {
color: #8F6F3F;
}
.sp-search-tab.active::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
background: #C9A86A;
}
/* =========================================
SEARCH FIELDS
========================================= */
.sp-search-fields {
display: grid;
grid-template-columns:
1.5fr
1.25fr
1.2fr
1fr
130px;
align-items: stretch;
}
/* =========================================
INDIVIDUAL FIELD
========================================= */
.sp-search-field {
min-height: 78px;
padding: 17px 20px;
border-right: 1px solid #E7E3DB;
box-sizing: border-box;
}
.sp-search-field label {
display: block;
margin-bottom: 9px;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.7px;
text-transform: uppercase;
color: #777777;
}
.sp-search-field input,
.sp-search-field select {
width: 100%;
padding: 0;
margin: 0;
border: 0;
outline: none;
background: transparent;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 400;
color: #263238;
box-sizing: border-box;
}
.sp-search-field input::placeholder {
color: #999999;
}
.sp-search-field select {
cursor: pointer;
}
/* =========================================
SEARCH BUTTON
========================================= */
.sp-search-button {
width: 100%;
min-height: 78px;
padding: 0;
border: 0;
background: #C9A86A;
color: #263238;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.sp-search-button:hover {
background: #A9844D;
color: #FFFFFF;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 1000px) {
.sp-hero {
min-height: 760px;
}
.sp-search-fields {
grid-template-columns: 1fr 1fr;
}
.sp-search-button {
min-height: 58px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 650px) {
.sp-hero {
min-height: 900px;
background-position: 60% center;
}
.sp-hero-content {
width: 90%;
padding: 65px 0 45px;
}
.sp-hero-text {
margin-bottom: 35px;
}
.sp-hero-text h1 {
font-size: 40px;
}
.sp-hero-description {
font-size: 14px;
}
.sp-search-box {
width: 100%;
}
.sp-search-tabs {
padding: 0 18px;
}
.sp-search-tab {
padding: 14px 13px;
}
.sp-search-fields {
display: block;
}
.sp-search-field {
min-height: auto;
padding: 16px 18px;
border-right: 0;
border-bottom: 1px solid #E7E3DB;
}
.sp-search-button {
min-height: 58px;
}
}
/* =========================================
SMALL MOBILE
========================================= */
@media (max-width: 400px) {
.sp-hero-text h1 {
font-size: 35px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-738abea *//* =========================================================
SATYAM PROPERTY
PREMIUM PROPERTY CAROUSEL
========================================================= */
.sp-plot-carousel {
position: relative;
width: 100%;
padding: 115px 0 85px;
overflow: hidden;
background:
radial-gradient(
circle at 85% 15%,
rgba(38, 82, 108, 0.45),
transparent 28%
),
radial-gradient(
circle at 5% 90%,
rgba(24, 55, 75, 0.55),
transparent 30%
),
linear-gradient(
135deg,
#061923 0%,
#0A2130 48%,
#102F43 100%
);
box-sizing: border-box;
}
/* =========================================================
GOLD TOP LINE
========================================================= */
.sp-plot-carousel:before {
content: "";
position: absolute;
top: 0;
left: 6%;
right: 6%;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(196,164,106,0.25),
#C4A46A,
rgba(196,164,106,0.25),
transparent
);
z-index: 5;
}
/* =========================================================
DECORATIVE RINGS
========================================================= */
.sp-ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
/* BIG RIGHT RING */
.sp-ring-one {
width: 580px;
height: 580px;
right: -330px;
top: 40px;
border:
1px solid
rgba(196,164,106,0.22);
box-shadow:
0 0 0 35px
rgba(196,164,106,0.035),
0 0 0 75px
rgba(196,164,106,0.025),
0 0 0 115px
rgba(196,164,106,0.015);
}
/* SMALL LEFT RING */
.sp-ring-two {
width: 300px;
height: 300px;
left: -210px;
bottom: -160px;
border:
1px solid
rgba(100,145,170,0.20);
}
/* =========================================================
CONTAINER
========================================================= */
.sp-carousel-container {
position: relative;
z-index: 3;
width: 90%;
max-width: 1280px;
margin: auto;
}
/* =========================================================
HEADING
========================================================= */
.sp-carousel-heading {
position: relative;
max-width: 720px;
margin-bottom: 58px;
}
.sp-heading-line {
width: 55px;
height: 2px;
margin-bottom: 22px;
background: #C4A46A;
box-shadow:
0 0 12px
rgba(196,164,106,0.25);
}
.sp-carousel-heading span {
display: block;
margin-bottom: 17px;
font-family:
Arial,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
color: #C4A46A;
}
.sp-carousel-heading h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(48px, 6vw, 72px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -2px;
color: #FFFFFF;
}
.sp-carousel-heading h2 em {
color: #C4A46A;
font-style: italic;
}
.sp-carousel-heading p {
max-width: 520px;
margin: 23px 0 0;
font-family:
Arial,
sans-serif;
font-size: 15px;
line-height: 1.7;
color:
rgba(255,255,255,0.65);
}
/* =========================================================
CAROUSEL WINDOW
========================================================= */
.sp-carousel-window {
width: 100%;
overflow: hidden;
position: relative;
z-index: 3;
}
/* =========================================================
TRACK
========================================================= */
.sp-carousel-track {
display: flex;
gap: 24px;
width: max-content;
animation:
spPlotSlide
28s
infinite
ease-in-out;
}
.sp-carousel-track:hover {
animation-play-state: paused;
}
/* =========================================================
IMAGE CARD
========================================================= */
.sp-plot-slide {
position: relative;
width: 390px;
height: 310px;
flex:
0 0 390px;
overflow: hidden;
background: #102A39;
border:
1px solid
rgba(255,255,255,0.10);
box-shadow:
0 20px 45px
rgba(0,0,0,0.28);
transition:
transform 0.4s ease,
border-color 0.4s ease;
}
.sp-plot-slide:hover {
transform: translateY(-7px);
border-color:
rgba(196,164,106,0.55);
}
/* =========================================================
IMAGE
========================================================= */
.sp-plot-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:
transform 0.7s ease;
}
.sp-plot-slide:hover img {
transform: scale(1.06);
}
/* =========================================================
IMAGE SHADE
========================================================= */
.sp-image-shade {
position: absolute;
inset: 0;
background:
linear-gradient(
to top,
rgba(3,15,23,0.94) 0%,
rgba(3,15,23,0.55) 35%,
rgba(3,15,23,0.05) 75%
);
}
/* =========================================================
GOLD CORNER LINE
========================================================= */
.sp-plot-slide:before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 65px;
height: 2px;
background: #C4A46A;
z-index: 5;
}
/* =========================================================
PROPERTY CONTENT
========================================================= */
.sp-plot-overlay {
position: absolute;
left: 26px;
right: 26px;
bottom: 25px;
z-index: 6;
}
.sp-plot-overlay span {
display: block;
margin-bottom: 9px;
font-family:
Arial,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
color: #D0AD63;
}
.sp-plot-overlay h3 {
margin: 0 0 15px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 27px;
font-weight: 400;
line-height: 1.1;
color: #FFFFFF;
}
/* =========================================================
VIEW PROPERTY
========================================================= */
.sp-view-property {
display: inline-flex;
align-items: center;
gap: 10px;
font-family:
Arial,
sans-serif;
font-size: 11px;
font-weight: 700;
color: #FFFFFF;
border-bottom:
1px solid
rgba(196,164,106,0.65);
padding-bottom: 5px;
}
.sp-view-property b {
font-size: 17px;
font-weight: 400;
color: #D0AD63;
transition:
transform 0.25s ease;
}
.sp-plot-slide:hover
.sp-view-property b {
transform:
translateX(5px);
}
/* =========================================================
BOTTOM BAR
========================================================= */
.sp-carousel-bottom {
display: flex;
align-items: center;
gap: 22px;
margin-top: 38px;
padding-top: 22px;
border-top:
1px solid
rgba(255,255,255,0.10);
}
.sp-carousel-bottom p {
margin: 0;
font-family:
Arial,
sans-serif;
font-size: 12px;
color:
rgba(255,255,255,0.45);
}
.sp-carousel-bottom a {
margin-left: auto;
display: inline-flex;
align-items: center;
gap: 10px;
color: #FFFFFF;
font-family:
Arial,
sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration: none;
}
.sp-carousel-bottom a b {
color: #C4A46A;
font-size: 17px;
font-weight: 400;
}
/* =========================================================
PROGRESS LINE
========================================================= */
.sp-carousel-progress {
width: 110px;
height: 2px;
background:
rgba(255,255,255,0.12);
overflow: hidden;
}
.sp-carousel-progress span {
display: block;
width: 35%;
height: 100%;
background: #C4A46A;
animation:
spProgress
28s
infinite
linear;
}
/* =========================================================
ANIMATION
========================================================= */
@keyframes spProgress {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(300%);
}
}
@keyframes spPlotSlide {
0%,
15% {
transform: translateX(0);
}
20%,
35% {
transform: translateX(-414px);
}
40%,
55% {
transform: translateX(-828px);
}
60%,
75% {
transform: translateX(-1242px);
}
80%,
95% {
transform: translateX(-1656px);
}
100% {
transform: translateX(0);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 700px) {
.sp-plot-carousel {
padding:
75px 0 60px;
}
.sp-carousel-container {
width: 88%;
}
.sp-carousel-heading {
margin-bottom: 42px;
}
.sp-carousel-heading h2 {
font-size: 45px;
letter-spacing: -1px;
}
.sp-carousel-heading p {
font-size: 14px;
}
.sp-carousel-track {
gap: 15px;
}
.sp-plot-slide {
width: 100%;
flex:
0 0 100%;
height: 290px;
}
.sp-carousel-bottom {
flex-wrap: wrap;
gap: 15px;
}
.sp-carousel-bottom a {
width: 100%;
margin-left: 0;
margin-top: 5px;
}
.sp-ring-one {
width: 350px;
height: 350px;
right: -250px;
top: 100px;
}
.sp-ring-two {
width: 220px;
height: 220px;
left: -170px;
bottom: -100px;
}
@keyframes spPlotSlide {
0%,
15% {
transform: translateX(0);
}
20%,
35% {
transform:
translateX(
calc(-100vw + 12%)
);
}
40%,
55% {
transform:
translateX(
calc(-200vw + 24%)
);
}
60%,
75% {
transform:
translateX(
calc(-300vw + 36%)
);
}
80%,
95% {
transform:
translateX(
calc(-400vw + 48%)
);
}
100% {
transform: translateX(0);
}
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-abaa5f8 *//* =========================================================
SATYAM PROPERTY
PREMIUM LOCATIONS SECTION
LIGHT BLUE + NAVY + GOLD
========================================================= */
.sp-locations {
position: relative;
width: 100%;
padding: 105px 0 110px;
overflow: hidden;
box-sizing: border-box;
background:
radial-gradient(
circle at 5% 10%,
rgba(201, 224, 237, 0.85),
transparent 35%
),
radial-gradient(
circle at 95% 85%,
rgba(178, 210, 228, 0.65),
transparent 38%
),
linear-gradient(
135deg,
#f5faff 0%,
#e8f3f8 48%,
#dcecf4 100%
);
}
/* =========================================================
CONTAINER
========================================================= */
.sp-locations-wrap {
width: 88%;
max-width: 1250px;
margin: auto;
}
/* =========================================================
HEADER
========================================================= */
.sp-locations-heading {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 70px;
margin-bottom: 48px;
}
.sp-location-eyebrow {
display: block;
margin-bottom: 15px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
color: #ad8540;
}
.sp-locations-heading h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(42px, 5vw, 64px);
line-height: 1.04;
font-weight: 400;
color: #102c3d;
}
.sp-locations-heading h2 em {
font-style: normal;
color: #1d526f;
}
.sp-location-intro {
max-width: 400px;
padding-bottom: 4px;
}
.sp-location-intro p {
margin: 0 0 22px;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 1.75;
color: #526d7c;
}
/* =========================================================
TOP BUTTON
========================================================= */
.sp-location-top-btn {
display: inline-flex;
align-items: center;
gap: 14px;
padding: 12px 19px;
border-radius: 6px;
background: #102c3d;
color: #ffffff;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 600;
transition: all .3s ease;
}
.sp-location-top-btn span {
color: #d0aa61;
font-size: 17px;
}
.sp-location-top-btn:hover {
background: #c39c55;
color: #102c3d;
transform: translateY(-2px);
}
/* =========================================================
MAP
========================================================= */
.sp-location-map {
position: relative;
width: 100%;
height: 455px;
overflow: hidden;
border-radius: 18px;
background:
radial-gradient(
circle at 50% 45%,
#183e55 0%,
#0d2c40 48%,
#071c2b 100%
);
box-shadow:
0 25px 55px rgba(18, 58, 80, .20);
border: 1px solid rgba(255,255,255,.25);
}
/* =========================================================
MAP GLOW
========================================================= */
.sp-location-map::before {
content: "";
position: absolute;
width: 500px;
height: 500px;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(148,191,211,.14);
box-shadow:
0 0 0 70px rgba(118,169,195,.035),
0 0 0 140px rgba(118,169,195,.025);
pointer-events: none;
}
/* =========================================================
MAP LABEL
========================================================= */
.sp-map-label {
position: absolute;
top: 28px;
left: 30px;
z-index: 5;
padding: 14px 18px;
border-left: 2px solid #c9a45d;
background: rgba(7,29,43,.75);
backdrop-filter: blur(8px);
}
.sp-map-label span {
display: block;
margin-bottom: 4px;
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: 2px;
color: #c9a45d;
}
.sp-map-label strong {
font-family: Georgia, serif;
font-size: 18px;
font-weight: 400;
color: #ffffff;
}
/* =========================================================
DECORATIVE MAP LINES
========================================================= */
.sp-map-line {
position: absolute;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(164,205,222,.25),
transparent
);
transform-origin: left center;
}
.sp-line-1 {
width: 75%;
left: 10%;
top: 43%;
transform: rotate(-14deg);
}
.sp-line-2 {
width: 62%;
left: 22%;
top: 68%;
transform: rotate(11deg);
}
.sp-line-3 {
width: 50%;
left: 35%;
top: 27%;
transform: rotate(23deg);
}
/* =========================================================
MAP PINS
========================================================= */
.sp-map-pin {
position: absolute;
z-index: 10;
width: 22px;
height: 22px;
cursor: pointer;
}
.sp-pin-dot {
position: absolute;
width: 15px;
height: 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
background: #d0a95d;
border: 4px solid rgba(255,255,255,.95);
box-shadow:
0 0 0 7px rgba(208,169,93,.13),
0 5px 15px rgba(0,0,0,.3);
}
/* =========================================================
PIN POSITIONS
========================================================= */
.sp-pin-kanpur {
left: 66%;
top: 34%;
}
.sp-pin-etawah {
left: 45%;
top: 48%;
}
.sp-pin-muradganj {
left: 56%;
top: 67%;
}
.sp-pin-karoka {
left: 28%;
top: 63%;
}
/* =========================================================
PIN CARD
========================================================= */
.sp-pin-card {
position: absolute;
left: 50%;
bottom: 29px;
transform: translateX(-50%);
width: 150px;
padding: 13px 15px;
background: rgba(5,25,38,.94);
border: 1px solid rgba(201,164,92,.42);
border-radius: 7px;
opacity: 0;
visibility: hidden;
transition: all .25s ease;
box-shadow:
0 15px 30px rgba(0,0,0,.28);
}
.sp-pin-card small {
display: block;
color: #c9a45c;
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: 2px;
}
.sp-pin-card strong {
display: block;
margin-top: 4px;
font-family: Georgia, serif;
font-size: 19px;
font-weight: 400;
color: #ffffff;
}
.sp-pin-card span {
display: block;
margin-top: 3px;
font-family: Arial, sans-serif;
font-size: 10px;
color: #a9c0cb;
}
.sp-map-pin:hover .sp-pin-card {
opacity: 1;
visibility: visible;
bottom: 36px;
}
/* =========================================================
MAP CAPTION
========================================================= */
.sp-map-caption {
position: absolute;
left: 30px;
bottom: 28px;
z-index: 5;
}
.sp-map-caption span {
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: 2px;
color: #c9a45c;
}
.sp-map-caption h3 {
margin: 7px 0 0;
font-family: Georgia, serif;
font-size: 24px;
line-height: 1.15;
font-weight: 400;
color: #ffffff;
}
/* =========================================================
LOCATION CARDS
========================================================= */
.sp-location-cards {
display: grid;
grid-template-columns:
repeat(4, 1fr);
margin-top: 24px;
gap: 12px;
}
.sp-location-card {
display: grid;
grid-template-columns: 30px 1fr;
gap: 10px;
padding: 25px 22px;
min-height: 170px;
box-sizing: border-box;
border-radius: 9px;
background:
linear-gradient(
145deg,
rgba(255,255,255,.82),
rgba(237,247,251,.65)
);
border: 1px solid rgba(35,76,96,.12);
box-shadow:
0 10px 25px rgba(35,76,96,.07);
transition:
transform .3s ease,
box-shadow .3s ease,
background .3s ease;
}
.sp-location-card:hover {
transform: translateY(-5px);
background: #ffffff;
box-shadow:
0 18px 35px rgba(35,76,96,.13);
}
.sp-card-number {
font-family: Georgia, serif;
font-size: 12px;
color: #b48c48;
}
.sp-location-card h3 {
margin: 0 0 8px;
font-family: Georgia, serif;
font-size: 24px;
font-weight: 400;
color: #102c3d;
}
.sp-location-card p {
margin: 0 0 16px;
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.6;
color: #637b88;
}
.sp-location-card a {
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 600;
color: #174a66;
}
.sp-location-card a span {
margin-left: 7px;
color: #b68e4b;
transition: margin .2s ease;
}
.sp-location-card:hover a span {
margin-left: 12px;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.sp-location-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 34px;
padding: 28px 30px;
border-radius: 11px;
background:
linear-gradient(
110deg,
#123b52,
#0b2a3e
);
box-shadow:
0 15px 35px rgba(18,58,80,.14);
}
.sp-location-bottom span {
display: block;
margin-bottom: 7px;
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: 2px;
color: #c9a45c;
}
.sp-location-bottom h3 {
margin: 0;
font-family: Georgia, serif;
font-size: 26px;
font-weight: 400;
color: #ffffff;
}
/* =========================================================
MAIN BUTTON
========================================================= */
.sp-location-main-btn {
display: inline-flex;
align-items: center;
gap: 13px;
padding: 13px 21px;
border-radius: 6px;
background: #c9a45c;
color: #102c3d;
text-decoration: none;
white-space: nowrap;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
transition: all .3s ease;
}
.sp-location-main-btn span {
margin: 0;
color: #102c3d;
font-size: 16px;
letter-spacing: 0;
}
.sp-location-main-btn:hover {
background: #ffffff;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.sp-locations-heading {
display: block;
}
.sp-location-intro {
margin-top: 25px;
}
.sp-location-cards {
grid-template-columns:
repeat(2, 1fr);
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sp-locations {
padding: 70px 0 75px;
}
.sp-locations-wrap {
width: 90%;
}
.sp-locations-heading h2 {
font-size: 40px;
}
.sp-location-map {
height: 390px;
}
.sp-map-caption {
left: 20px;
bottom: 20px;
}
.sp-map-caption h3 {
font-size: 20px;
}
.sp-location-cards {
grid-template-columns: 1fr;
}
.sp-location-bottom {
flex-direction: column;
align-items: flex-start;
padding: 24px 20px;
}
.sp-location-main-btn {
width: 100%;
justify-content: center;
}
.sp-pin-card {
display: none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-ed48da8 *//* =========================================================
SATYAM PROPERTY
YOUR PROPERTY, YOUR WAY
DARK PREMIUM SECTION
========================================================= */
.sp-property-journey {
position: relative;
width: 100%;
padding: 125px 0 110px;
overflow: hidden;
background:
radial-gradient(
circle at 82% 15%,
rgba(45, 91, 118, 0.38),
transparent 30%
),
radial-gradient(
circle at 10% 85%,
rgba(32, 69, 94, 0.35),
transparent 32%
),
linear-gradient(
135deg,
#081A27 0%,
#0D2637 48%,
#102F43 100%
);
box-sizing: border-box;
}
/* =========================================================
SUBTLE BACKGROUND DETAIL
========================================================= */
.sp-property-journey::before {
content: "";
position: absolute;
width: 650px;
height: 650px;
right: -250px;
top: -300px;
border: 1px solid rgba(190, 154, 91, 0.12);
border-radius: 50%;
box-shadow:
0 0 0 80px rgba(190,154,91,0.025),
0 0 0 160px rgba(190,154,91,0.018);
pointer-events: none;
}
/* =========================================================
CONTAINER
========================================================= */
.sp-journey-container {
width: 89%;
max-width: 1280px;
margin: auto;
position: relative;
z-index: 2;
}
/* =========================================================
HEADER
========================================================= */
.sp-journey-header {
max-width: 760px;
margin-bottom: 85px;
}
.sp-journey-label {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
color: #C4A46A;
}
.sp-journey-label::before {
content: "";
width: 35px;
height: 1px;
background: #C4A46A;
}
.sp-journey-header h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(48px, 6vw, 78px);
font-weight: 400;
line-height: 0.99;
letter-spacing: -2px;
color: #FFFFFF;
}
.sp-journey-header h2 span {
color: #C4A46A;
font-style: italic;
}
.sp-journey-header p {
max-width: 520px;
margin: 27px 0 0;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 16px;
line-height: 1.75;
color: rgba(255,255,255,0.68);
}
/* =========================================================
JOURNEY TRACK
========================================================= */
.sp-journey-track {
display: grid;
grid-template-columns:
repeat(4, 1fr);
position: relative;
}
/* =========================================================
HORIZONTAL CONNECTING LINE
========================================================= */
.sp-journey-track::before {
content: "";
position: absolute;
top: 31px;
left: 31px;
right: 31px;
height: 1px;
background:
linear-gradient(
90deg,
rgba(196,164,106,0.75),
rgba(196,164,106,0.18),
rgba(196,164,106,0.75)
);
z-index: 0;
}
/* =========================================================
STEP
========================================================= */
.sp-journey-step {
position: relative;
padding-right: 38px;
min-height: 340px;
z-index: 1;
}
/* =========================================================
NUMBER
========================================================= */
.sp-step-number {
width: 62px;
height: 62px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background:
linear-gradient(
145deg,
#173B50,
#0B2231
);
border: 1px solid
rgba(196,164,106,0.65);
box-shadow:
0 10px 30px
rgba(0,0,0,0.25);
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 18px;
color: #C4A46A;
}
/* =========================================================
CONTENT
========================================================= */
.sp-step-content {
padding-top: 55px;
}
.sp-step-content > span {
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: rgba(255,255,255,0.42);
}
.sp-step-content h3 {
margin: 13px 0 17px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 31px;
font-weight: 400;
line-height: 1.08;
color: #FFFFFF;
}
.sp-step-content p {
max-width: 245px;
margin: 0 0 24px;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 13px;
line-height: 1.7;
color: rgba(255,255,255,0.58);
}
/* =========================================================
STEP LINK
========================================================= */
.sp-step-content a {
display: inline-flex;
align-items: center;
gap: 12px;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration: none;
color: #FFFFFF;
border-bottom:
1px solid rgba(196,164,106,0.6);
padding-bottom: 7px;
transition:
color 0.25s ease,
gap 0.25s ease;
}
.sp-step-content a b {
font-size: 18px;
font-weight: 400;
color: #C4A46A;
}
.sp-step-content a:hover {
color: #C4A46A;
gap: 17px;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.sp-journey-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
margin-top: 60px;
padding:
32px 35px;
background:
linear-gradient(
100deg,
rgba(255,255,255,0.065),
rgba(255,255,255,0.025)
);
border:
1px solid
rgba(255,255,255,0.10);
backdrop-filter: blur(8px);
}
.sp-journey-bottom > div span {
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 9px;
font-weight: 700;
letter-spacing: 2px;
color: #C4A46A;
}
.sp-journey-bottom h3 {
margin: 8px 0 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 27px;
font-weight: 400;
color: #FFFFFF;
}
/* =========================================================
CTA BUTTON
========================================================= */
.sp-journey-bottom > a {
display: inline-flex;
align-items: center;
gap: 18px;
padding:
16px 23px;
background: #C4A46A;
color: #102532;
font-family:
"Montserrat",
Arial,
sans-serif;
font-size: 12px;
font-weight: 700;
text-decoration: none;
white-space: nowrap;
transition:
background 0.25s ease,
transform 0.25s ease;
}
.sp-journey-bottom > a span {
font-size: 18px;
font-weight: 400;
}
.sp-journey-bottom > a:hover {
background: #D5B97F;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.sp-property-journey {
padding: 90px 0;
}
.sp-journey-header {
margin-bottom: 65px;
}
.sp-journey-track {
grid-template-columns:
repeat(2, 1fr);
gap: 50px 20px;
}
.sp-journey-track::before {
display: none;
}
.sp-journey-step {
min-height: 300px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sp-property-journey {
padding: 75px 0;
}
.sp-journey-container {
width: 88%;
}
.sp-journey-header {
margin-bottom: 55px;
}
.sp-journey-header h2 {
font-size: 46px;
letter-spacing: -1px;
}
.sp-journey-header p {
font-size: 14px;
}
.sp-journey-track {
grid-template-columns: 1fr;
gap: 0;
}
.sp-journey-step {
min-height: auto;
padding:
0 0 45px 0;
}
.sp-step-content {
padding-top: 25px;
}
.sp-step-content h3 {
font-size: 32px;
}
.sp-step-number {
width: 56px;
height: 56px;
}
.sp-journey-bottom {
flex-direction: column;
align-items: flex-start;
margin-top: 20px;
padding: 27px;
}
.sp-journey-bottom h3 {
font-size: 23px;
}
.sp-journey-bottom > a {
width: 100%;
justify-content: center;
box-sizing: border-box;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c4e9e4d *//* =========================================
SATYAM PROPERTY
WHY CHOOSE US — PREMIUM BLUE DESIGN
========================================= */
.sp-why-section {
position: relative;
width: 100%;
padding: 110px 0;
box-sizing: border-box;
overflow: hidden;
background:
radial-gradient(
circle at 88% 20%,
rgba(55, 105, 135, 0.28),
transparent 30%
),
radial-gradient(
circle at 5% 90%,
rgba(34, 78, 105, 0.32),
transparent 32%
),
linear-gradient(
135deg,
#EAF2F5 0%,
#DCEBF1 48%,
#EDF4F6 100%
);
}
/* =========================================
DECORATIVE HALF RING
========================================= */
.sp-why-section::before {
content: "";
position: absolute;
width: 520px;
height: 520px;
right: -310px;
top: -120px;
border:
1px solid
rgba(38, 79, 101, 0.18);
border-radius: 50%;
box-shadow:
0 0 0 40px
rgba(38, 79, 101, 0.035),
0 0 0 80px
rgba(38, 79, 101, 0.025);
pointer-events: none;
}
/* SECOND RING */
.sp-why-section::after {
content: "";
position: absolute;
width: 300px;
height: 300px;
left: -210px;
bottom: -180px;
border:
1px solid
rgba(196, 164, 106, 0.20);
border-radius: 50%;
pointer-events: none;
}
/* =========================================
CONTAINER
========================================= */
.sp-why-container {
position: relative;
z-index: 2;
width: 88%;
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns:
0.9fr 1.1fr;
gap: 90px;
align-items: center;
}
/* =========================================
LEFT CONTENT
========================================= */
.sp-why-label {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
font-family:
Arial,
sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.5px;
color: #9B7739;
}
/* GOLD LINE BEFORE LABEL */
.sp-why-label::before {
content: "";
width: 35px;
height: 2px;
background: #B18A43;
}
/* =========================================
HEADING
========================================= */
.sp-why-content h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size:
clamp(44px, 5vw, 62px);
font-weight: 400;
line-height: 1.05;
letter-spacing: -1.5px;
color: #102B3A;
}
/* =========================================
PARAGRAPH
========================================= */
.sp-why-content p {
max-width: 500px;
margin: 25px 0 32px;
font-family:
Arial,
sans-serif;
font-size: 15px;
line-height: 1.75;
color: #52656E;
}
/* =========================================
BUTTON
========================================= */
.sp-why-button {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 15px 24px;
background:
linear-gradient(
135deg,
#102B3A,
#173E52
);
color: #FFFFFF;
text-decoration: none;
font-family:
Arial,
sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.3px;
border:
1px solid
#102B3A;
box-shadow:
0 10px 25px
rgba(16,43,58,0.15);
transition:
all 0.3s ease;
}
.sp-why-button span {
font-size: 19px;
color: #D0AD63;
transition:
transform 0.3s ease;
}
.sp-why-button:hover {
background: #B18A43;
border-color: #B18A43;
transform: translateY(-2px);
box-shadow:
0 12px 25px
rgba(177,138,67,0.22);
}
.sp-why-button:hover span {
transform:
translateX(5px);
}
/* =========================================
FEATURES GRID
========================================= */
.sp-why-features {
position: relative;
display: grid;
grid-template-columns:
1fr 1fr;
border-top:
1px solid
rgba(16,43,58,0.14);
border-left:
1px solid
rgba(16,43,58,0.14);
background:
rgba(255,255,255,0.20);
backdrop-filter:
blur(8px);
}
/* =========================================
FEATURE CARD
========================================= */
.sp-feature {
display: grid;
grid-template-columns:
45px 1fr;
gap: 15px;
padding: 32px 27px;
border-right:
1px solid
rgba(16,43,58,0.14);
border-bottom:
1px solid
rgba(16,43,58,0.14);
background:
rgba(235,244,247,0.45);
transition:
all 0.35s ease;
}
/* HOVER */
.sp-feature:hover {
background:
rgba(255,255,255,0.75);
transform:
translateY(-3px);
box-shadow:
0 15px 30px
rgba(16,43,58,0.08);
}
/* =========================================
NUMBER
========================================= */
.sp-feature-number {
position: relative;
font-family:
Georgia,
serif;
font-size: 14px;
color: #B18A43;
padding-top: 4px;
}
/* SMALL GOLD DOT */
.sp-feature-number::after {
content: "";
position: absolute;
left: 0;
bottom: -12px;
width: 5px;
height: 5px;
border-radius: 50%;
background: #C4A15A;
}
/* =========================================
TITLE
========================================= */
.sp-feature h3 {
margin: 0 0 9px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 22px;
font-weight: 400;
line-height: 1.15;
color: #102B3A;
}
/* =========================================
DESCRIPTION
========================================= */
.sp-feature p {
margin: 0;
font-family:
Arial,
sans-serif;
font-size: 13px;
line-height: 1.65;
color: #60727A;
}
/* =========================================
GOLD DETAIL ABOVE FEATURES
========================================= */
.sp-why-features::before {
content: "";
position: absolute;
top: -2px;
left: 0;
width: 65px;
height: 2px;
background: #B18A43;
z-index: 3;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.sp-why-container {
width: 88%;
grid-template-columns: 1fr;
gap: 60px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.sp-why-section {
padding: 75px 0;
}
.sp-why-container {
width: 88%;
gap: 45px;
}
.sp-why-content h2 {
font-size: 42px;
letter-spacing: -1px;
}
.sp-why-content p {
font-size: 14px;
}
.sp-why-features {
grid-template-columns: 1fr;
}
.sp-feature {
padding: 25px 20px;
}
.sp-why-section::before {
width: 350px;
height: 350px;
right: -250px;
}
.sp-why-section::after {
width: 220px;
height: 220px;
left: -160px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d93a7ff *//* =========================================================
SATYAM PROPERTIES
ABOUT SECTION
NAVY + SOFT BLUE + GOLD
========================================================= */
.sp-about {
position: relative;
width: 100%;
overflow: hidden;
box-sizing: border-box;
padding: 115px 0 120px;
background:
radial-gradient(
circle at 90% 20%,
rgba(117, 165, 190, 0.18) 0%,
rgba(117, 165, 190, 0.06) 25%,
transparent 52%
),
linear-gradient(
120deg,
#071c2b 0%,
#0a2637 42%,
#0d3145 72%,
#081e2e 100%
);
color: #ffffff;
box-sizing: border-box;
}
/* =========================================================
BACKGROUND RINGS
========================================================= */
.sp-about-bg-ring {
position: absolute;
border: 1px solid rgba(145, 183, 201, 0.16);
border-radius: 50%;
pointer-events: none;
}
.sp-ring-1 {
width: 720px;
height: 720px;
right: -360px;
top: -250px;
}
.sp-ring-2 {
width: 570px;
height: 570px;
right: -285px;
top: -175px;
border-color: rgba(196, 161, 90, 0.15);
}
/* =========================================================
MAIN CONTAINER
========================================================= */
.sp-about-container {
position: relative;
z-index: 2;
width: 88%;
max-width: 1250px;
margin: 0 auto;
display: grid;
grid-template-columns: 0.95fr 1.05fr;
gap: 85px;
align-items: center;
}
/* =========================================================
LEFT SIDE
========================================================= */
.sp-about-left {
position: relative;
}
/* LABEL */
.sp-about-label {
display: flex;
align-items: center;
gap: 16px;
margin-bottom: 24px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #c9a45f;
}
.sp-about-label span {
display: block;
width: 52px;
height: 2px;
background: #c9a45f;
}
/* MAIN HEADING */
.sp-about-left h2 {
margin: 0;
max-width: 620px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(52px, 5.3vw, 78px);
font-weight: 400;
line-height: 0.98;
letter-spacing: -2px;
color: #f5f8fa;
}
.sp-about-left h2 em {
display: block;
font-style: italic;
color: #8eafbf;
margin-top: 8px;
}
/* GOLD DETAIL LINE */
.sp-gold-line {
width: 82px;
height: 2px;
margin: 32px 0 28px;
background: linear-gradient(
90deg,
#c9a45f,
#e3c989
);
}
/* INTRO */
.sp-about-intro {
max-width: 570px;
margin: 0 0 18px;
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1.75;
color: #c8d7df;
}
/* SECOND PARAGRAPH */
.sp-about-text {
max-width: 550px;
margin: 0 0 34px;
font-family: Arial, sans-serif;
font-size: 15px;
line-height: 1.75;
color: #91aab8;
}
/* =========================================================
BUTTON
========================================================= */
.sp-about-btn {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 28px;
min-width: 165px;
padding: 15px 20px;
border: 1px solid rgba(201, 164, 95, 0.7);
border-radius: 5px;
background:
linear-gradient(
135deg,
rgba(201, 164, 95, 0.16),
rgba(201, 164, 95, 0.04)
);
color: #f4f7f8;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 600;
transition:
background 0.35s ease,
transform 0.35s ease,
border-color 0.35s ease;
}
.sp-about-btn strong {
color: #d0ad63;
font-size: 20px;
font-weight: 400;
line-height: 1;
}
.sp-about-btn:hover {
transform: translateY(-3px);
border-color: #d0ad63;
background:
linear-gradient(
135deg,
rgba(201, 164, 95, 0.30),
rgba(201, 164, 95, 0.08)
);
color: #ffffff;
}
/* =========================================================
RIGHT SIDE
========================================================= */
.sp-about-right {
position: relative;
padding: 35px 0 0 65px;
border-left: 1px solid rgba(152, 184, 199, 0.18);
}
/* WATERMARK */
.sp-about-watermark {
position: absolute;
top: -55px;
right: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(80px, 9vw, 135px);
font-weight: 700;
letter-spacing: 5px;
color: rgba(125, 164, 181, 0.055);
white-space: nowrap;
pointer-events: none;
}
/* TAGLINE */
.sp-about-tagline {
position: relative;
margin-bottom: 38px;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
color: #c9a45f;
}
.sp-about-tagline i {
margin: 0 8px;
color: #7695a5;
font-style: normal;
}
/* =========================================================
FEATURES
========================================================= */
.sp-about-feature {
position: relative;
display: grid;
grid-template-columns: 65px 1fr;
gap: 25px;
padding: 30px 0;
border-top: 1px solid rgba(143, 177, 192, 0.17);
transition:
padding-left 0.35s ease,
background 0.35s ease;
}
.sp-about-feature:last-child {
border-bottom: 1px solid rgba(143, 177, 192, 0.17);
}
/* NUMBER */
.sp-feature-number {
font-family:
Georgia,
serif;
font-size: 14px;
color: #c9a45f;
padding-top: 5px;
}
/* FEATURE TITLE */
.sp-about-feature h3 {
margin: 0 0 9px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 28px;
font-weight: 400;
line-height: 1.15;
color: #f4f7f8;
}
/* FEATURE TEXT */
.sp-about-feature p {
max-width: 470px;
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.7;
color: #91aab8;
}
/* HOVER */
.sp-about-feature:hover {
padding-left: 12px;
}
/* =========================================================
DECORATIVE GOLD DOT
========================================================= */
.sp-about-feature::before {
content: "";
position: absolute;
left: -69px;
top: 39px;
width: 6px;
height: 6px;
border-radius: 50%;
background: #c9a45f;
box-shadow:
0 0 0 5px rgba(201, 164, 95, 0.08);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.sp-about {
padding: 90px 0;
}
.sp-about-container {
width: 86%;
grid-template-columns: 1fr;
gap: 65px;
}
.sp-about-right {
padding-left: 35px;
}
.sp-about-feature::before {
left: -39px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sp-about {
padding: 70px 0 80px;
}
.sp-about-container {
width: 88%;
gap: 50px;
}
.sp-about-label {
font-size: 10px;
letter-spacing: 2px;
gap: 10px;
}
.sp-about-label span {
width: 35px;
}
.sp-about-left h2 {
font-size: 48px;
letter-spacing: -1px;
}
.sp-about-intro {
font-size: 15px;
}
.sp-about-text {
font-size: 14px;
}
.sp-about-right {
padding: 25px 0 0 20px;
}
.sp-about-watermark {
font-size: 65px;
top: -20px;
}
.sp-about-feature {
grid-template-columns: 42px 1fr;
gap: 12px;
padding: 25px 0;
}
.sp-about-feature h3 {
font-size: 23px;
}
.sp-about-feature p {
font-size: 13px;
}
.sp-about-feature::before {
display: none;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2ce196b *//* =========================================================
SATYAM PROPERTIES
TESTIMONIALS SECTION
LIGHT BLUE PREMIUM DESIGN
========================================================= */
.sp-testimonials {
position: relative;
width: 100%;
overflow: hidden;
padding: 110px 0;
background:
radial-gradient(
circle at 85% 15%,
rgba(125, 171, 194, 0.28),
transparent 32%
),
linear-gradient(
135deg,
#eef7fa 0%,
#e3f0f5 48%,
#d5e8ef 100%
);
box-sizing: border-box;
}
/* =========================================================
DECORATIVE RINGS
========================================================= */
.sp-testimonials-bg-ring {
position: absolute;
border: 1px solid rgba(48, 84, 103, 0.12);
border-radius: 50%;
pointer-events: none;
}
.ring-one {
width: 620px;
height: 620px;
right: -260px;
top: -220px;
}
.ring-two {
width: 420px;
height: 420px;
right: -150px;
top: -120px;
border-color: rgba(180, 139, 67, 0.16);
}
/* =========================================================
CONTAINER
========================================================= */
.sp-testimonials-container {
position: relative;
width: 88%;
max-width: 1240px;
margin: auto;
z-index: 2;
}
/* =========================================================
HEADER
========================================================= */
.sp-testimonials-header {
max-width: 700px;
margin-bottom: 55px;
}
.sp-testimonial-label {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 18px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #a77c35;
}
.sp-testimonial-label span {
width: 55px;
height: 2px;
background: #b99350;
display: block;
}
.sp-testimonials-header h2 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: clamp(46px, 5vw, 70px);
line-height: 1.03;
font-weight: 400;
letter-spacing: -2px;
color: #102b3a;
}
.sp-testimonials-header h2 em {
color: #52778b;
font-style: italic;
}
.sp-testimonials-header p {
max-width: 570px;
margin: 22px 0 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.7;
color: #526d7b;
}
/* =========================================================
TESTIMONIAL GRID
========================================================= */
.sp-testimonial-grid {
display: grid;
grid-template-columns:
minmax(340px, 0.9fr)
minmax(500px, 1.1fr);
gap: 28px;
align-items: stretch;
}
/* =========================================================
FEATURED CARD
========================================================= */
.sp-featured-testimonial {
position: relative;
padding: 42px;
background: rgba(255,255,255,0.92);
border: 1px solid rgba(55, 89, 106, 0.12);
border-radius: 18px;
box-shadow:
0 25px 60px rgba(32, 67, 84, 0.10);
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 430px;
transition:
transform 0.35s ease,
box-shadow 0.35s ease;
}
.sp-featured-testimonial:hover {
transform: translateY(-5px);
box-shadow:
0 30px 70px rgba(32, 67, 84, 0.16);
}
/* TOP */
.sp-featured-top {
display: flex;
align-items: center;
justify-content: space-between;
}
.sp-quote-mark {
font-family: Georgia, serif;
font-size: 80px;
line-height: 0.6;
color: #b99350;
opacity: 0.75;
}
.sp-stars {
font-size: 14px;
letter-spacing: 4px;
color: #b99350;
}
/* TEXT */
.sp-featured-text {
margin: 35px 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 25px;
line-height: 1.5;
color: #183545;
}
/* =========================================================
CUSTOMER
========================================================= */
.sp-customer {
display: flex;
align-items: center;
gap: 15px;
padding-top: 25px;
border-top: 1px solid #dce7eb;
}
.sp-customer img {
width: 58px;
height: 58px;
border-radius: 50%;
object-fit: cover;
border: 3px solid #dcebf0;
}
.sp-customer h4 {
margin: 0 0 4px;
font-family: Arial, sans-serif;
font-size: 15px;
color: #173446;
}
.sp-customer span {
font-family: Arial, sans-serif;
font-size: 12px;
color: #78909c;
}
/* =========================================================
SMALL TESTIMONIALS
========================================================= */
.sp-small-testimonials {
display: flex;
flex-direction: column;
gap: 18px;
}
.sp-testimonial-card {
background: rgba(255,255,255,0.82);
border: 1px solid rgba(55, 89, 106, 0.12);
border-radius: 14px;
padding: 24px 28px;
box-shadow:
0 12px 35px rgba(32, 67, 84, 0.06);
transition:
transform 0.3s ease,
background 0.3s ease;
}
.sp-testimonial-card:hover {
transform: translateX(6px);
background: #ffffff;
}
/* CARD TOP */
.sp-card-top {
display: flex;
align-items: center;
gap: 13px;
}
.sp-card-top img {
width: 50px;
height: 50px;
border-radius: 50%;
object-fit: cover;
}
.sp-card-top h4 {
margin: 0 0 3px;
font-family: Arial, sans-serif;
font-size: 15px;
color: #163444;
}
.sp-card-top span {
font-family: Arial, sans-serif;
font-size: 11px;
color: #78909c;
}
.sp-card-stars {
margin-left: auto;
font-size: 11px;
letter-spacing: 2px;
color: #b99350;
}
/* CARD TEXT */
.sp-testimonial-card p {
margin: 18px 0 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.7;
color: #58717e;
}
/* =========================================================
BOTTOM CTA
========================================================= */
.sp-testimonial-bottom {
margin-top: 55px;
padding: 27px 32px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 25px;
border-radius: 14px;
background:
linear-gradient(
100deg,
#123647,
#1b4b60
);
box-shadow:
0 20px 45px rgba(25, 65, 82, 0.16);
}
.sp-testimonial-bottom span {
display: block;
margin-bottom: 6px;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #c5a15e;
}
.sp-testimonial-bottom h3 {
margin: 0;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 25px;
font-weight: 400;
color: #ffffff;
}
/* BUTTON */
.sp-testimonial-button {
display: inline-flex;
align-items: center;
gap: 18px;
padding: 14px 22px;
border-radius: 6px;
background: #c5a15e;
color: #102b3a;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
transition: all 0.3s ease;
}
.sp-testimonial-button span {
margin: 0;
font-size: 18px;
color: #102b3a;
}
.sp-testimonial-button:hover {
background: #ffffff;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 950px) {
.sp-testimonial-grid {
grid-template-columns: 1fr;
}
.sp-featured-testimonial {
min-height: auto;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sp-testimonials {
padding: 75px 0;
}
.sp-testimonials-container {
width: 90%;
}
.sp-testimonials-header h2 {
font-size: 42px;
letter-spacing: -1px;
}
.sp-testimonials-header p {
font-size: 14px;
}
.sp-featured-testimonial {
padding: 28px;
border-radius: 14px;
}
.sp-featured-text {
font-size: 21px;
}
.sp-testimonial-card {
padding: 21px;
}
.sp-testimonial-bottom {
flex-direction: column;
align-items: flex-start;
}
.sp-testimonial-button {
width: 100%;
justify-content: center;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-6bec0e0 *//* =========================================================
SATYAM PROPERTIES
YOUR PROPERTY JOURNEY
PREMIUM NAVY + SOFT BLUE + GOLD
========================================================= */
.sp-journey-section {
position: relative;
width: 100%;
overflow: hidden;
padding: 120px 0;
background:
radial-gradient(
circle at 85% 20%,
rgba(105, 157, 187, 0.16),
transparent 34%
),
linear-gradient(
135deg,
#071d2b 0%,
#0a2638 48%,
#102f43 100%
);
box-sizing: border-box;
}
/* BACKGROUND RINGS */
.sp-journey-bg-ring {
position: absolute;
border: 1px solid rgba(190, 161, 91, 0.20);
border-radius: 50%;
pointer-events: none;
}
.sp-journey-ring-1 {
width: 650px;
height: 650px;
right: -350px;
top: -220px;
}
.sp-journey-ring-2 {
width: 850px;
height: 850px;
right: -470px;
top: -320px;
border-color: rgba(128, 176, 201, 0.10);
}
/* CONTAINER */
.sp-journey-container {
position: relative;
width: 88%;
max-width: 1220px;
margin: 0 auto;
z-index: 2;
}
/* HEADER */
.sp-journey-header {
max-width: 720px;
margin-bottom: 80px;
}
.sp-gold-line {
display: inline-block;
width: 82px;
height: 2px;
margin-right: 16px;
vertical-align: middle;
background: #c7a45c;
}
.sp-journey-label {
display: inline-block;
vertical-align: middle;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #d0ad63;
}
.sp-journey-header h2 {
margin: 25px 0 18px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 62px;
font-weight: 400;
line-height: 1.05;
color: #f5f8fa;
}
.sp-journey-header h2 em {
display: block;
color: #9fc3d5;
font-style: italic;
}
.sp-journey-header p {
max-width: 620px;
margin: 0;
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1.75;
color: #a9c0ce;
}
/* =========================================================
JOURNEY TRACK
========================================================= */
.sp-journey-track {
position: relative;
display: grid;
grid-template-columns:
repeat(4, 1fr);
gap: 0;
border-top: 1px solid
rgba(170, 198, 211, 0.20);
}
/* GOLD CONNECTING LINE */
.sp-journey-track::before {
content: "";
position: absolute;
left: 8%;
right: 8%;
top: -1px;
height: 1px;
background:
linear-gradient(
90deg,
transparent,
rgba(199,164,92,0.8),
rgba(199,164,92,0.8),
transparent
);
}
/* STEP */
.sp-journey-step {
position: relative;
min-height: 280px;
padding: 34px 28px 20px;
border-right: 1px solid
rgba(170, 198, 211, 0.14);
box-sizing: border-box;
}
.sp-journey-step:first-child {
border-left: 1px solid
rgba(170, 198, 211, 0.14);
}
/* NUMBER */
.sp-step-number {
font-family: Georgia, serif;
font-size: 15px;
color: #d0ad63;
margin-bottom: 40px;
}
/* DOT */
.sp-step-dot {
position: absolute;
top: -6px;
left: 28px;
width: 11px;
height: 11px;
border-radius: 50%;
background: #d0ad63;
box-shadow:
0 0 0 7px rgba(208,173,99,0.08),
0 0 20px rgba(208,173,99,0.25);
}
/* CONTENT */
.sp-step-content {
max-width: 230px;
}
.sp-step-content > span {
display: block;
margin-bottom: 12px;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #79a8bd;
}
.sp-step-content h3 {
margin: 0 0 15px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 25px;
font-weight: 400;
line-height: 1.2;
color: #f4f7f8;
}
.sp-step-content p {
margin: 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.7;
color: #91adbb;
}
/* HOVER */
.sp-journey-step {
transition:
background 0.35s ease,
transform 0.35s ease;
}
.sp-journey-step:hover {
background:
linear-gradient(
180deg,
rgba(123,169,190,0.08),
rgba(123,169,190,0)
);
transform: translateY(-4px);
}
/* =========================================================
CTA
========================================================= */
.sp-journey-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
margin-top: 70px;
padding: 30px 34px;
border: 1px solid
rgba(199,164,92,0.35);
border-radius: 10px;
background:
linear-gradient(
110deg,
rgba(115,163,185,0.10),
rgba(255,255,255,0.025)
);
}
.sp-journey-cta span {
display: block;
margin-bottom: 7px;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #cba85e;
}
.sp-journey-cta h3 {
margin: 0;
font-family: Georgia, serif;
font-size: 28px;
font-weight: 400;
color: #f5f7f8;
}
/* BUTTON */
.sp-journey-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 22px;
padding: 15px 24px;
min-width: 145px;
border: 1px solid #c5a35c;
border-radius: 5px;
background: #c5a35c;
color: #071d2b;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 700;
transition:
background 0.3s ease,
color 0.3s ease,
transform 0.3s ease;
}
.sp-journey-button span {
margin: 0;
color: inherit;
font-size: 18px;
}
.sp-journey-button:hover {
background: transparent;
color: #d6b66d;
transform: translateY(-2px);
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.sp-journey-header h2 {
font-size: 50px;
}
.sp-journey-track {
grid-template-columns: 1fr 1fr;
}
.sp-journey-step {
border-bottom: 1px solid
rgba(170,198,211,0.14);
}
.sp-journey-cta {
align-items: flex-start;
flex-direction: column;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sp-journey-section {
padding: 80px 0;
}
.sp-journey-container {
width: 88%;
}
.sp-journey-header {
margin-bottom: 55px;
}
.sp-journey-header h2 {
font-size: 42px;
}
.sp-journey-header p {
font-size: 15px;
}
.sp-journey-track {
grid-template-columns: 1fr;
}
.sp-journey-step,
.sp-journey-step:first-child {
border-left: 0;
border-right: 0;
min-height: auto;
padding: 30px 0 35px 45px;
}
.sp-step-dot {
left: 0;
}
.sp-journey-track {
border-top: 0;
}
.sp-journey-track::before {
left: 5px;
right: auto;
top: 0;
bottom: 0;
width: 1px;
height: auto;
background:
linear-gradient(
180deg,
transparent,
#c7a45c,
transparent
);
}
.sp-step-number {
margin-bottom: 15px;
}
.sp-journey-cta {
padding: 25px;
margin-top: 45px;
}
.sp-journey-cta h3 {
font-size: 23px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-a933e2e *//* =========================================================
SATYAM PROPERTIES
FAQ SECTION
========================================================= */
.sp-faq-section {
position: relative;
width: 100%;
overflow: hidden;
padding: 115px 0;
background:
radial-gradient(
circle at 10% 80%,
rgba(122, 170, 192, 0.14),
transparent 30%
),
linear-gradient(
135deg,
#eef5f8 0%,
#dceaf0 45%,
#f4f7f8 100%
);
box-sizing: border-box;
}
/* BACKGROUND RINGS */
.sp-faq-ring {
position: absolute;
border-radius: 50%;
pointer-events: none;
border: 1px solid
rgba(12, 46, 65, 0.10);
}
.sp-faq-ring-1 {
width: 600px;
height: 600px;
left: -380px;
bottom: -280px;
}
.sp-faq-ring-2 {
width: 800px;
height: 800px;
right: -550px;
top: -450px;
border-color:
rgba(199,164,92,0.15);
}
/* CONTAINER */
.sp-faq-container {
position: relative;
width: 88%;
max-width: 1220px;
margin: 0 auto;
display: grid;
grid-template-columns:
0.85fr 1.15fr;
gap: 100px;
z-index: 2;
}
/* =========================================================
INTRO
========================================================= */
.sp-faq-intro {
padding-top: 10px;
}
.sp-faq-heading-line {
display: inline-block;
width: 75px;
height: 2px;
margin-right: 15px;
vertical-align: middle;
background: #c6a45d;
}
.sp-faq-label {
display: inline-block;
vertical-align: middle;
font-family: Arial, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 3px;
color: #a47d36;
}
.sp-faq-intro h2 {
margin: 25px 0 20px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 58px;
font-weight: 400;
line-height: 1.05;
color: #092537;
}
.sp-faq-intro h2 em {
display: block;
color: #719aae;
font-style: italic;
}
.sp-faq-intro > p {
max-width: 480px;
margin: 0;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.8;
color: #526b79;
}
/* CONTACT BOX */
.sp-faq-contact {
margin-top: 45px;
padding-top: 28px;
border-top: 1px solid
rgba(12,46,65,0.18);
}
.sp-faq-contact > span {
display: block;
margin-bottom: 8px;
font-family: Arial, sans-serif;
font-size: 10px;
font-weight: 700;
letter-spacing: 2px;
color: #a27b35;
}
.sp-faq-contact h3 {
margin: 0 0 20px;
font-family: Georgia, serif;
font-size: 27px;
font-weight: 400;
color: #092537;
}
/* BUTTON */
.sp-faq-button {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 14px 22px;
border-radius: 5px;
background: #0a2638;
border: 1px solid #0a2638;
color: #ffffff;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 13px;
font-weight: 600;
transition: 0.3s ease;
}
.sp-faq-button b {
color: #d0ad63;
font-size: 18px;
}
.sp-faq-button:hover {
background: #c5a35c;
border-color: #c5a35c;
color: #092537;
transform: translateY(-2px);
}
.sp-faq-button:hover b {
color: #092537;
}
/* =========================================================
FAQ LIST
========================================================= */
.sp-faq-list {
border-top: 1px solid
rgba(12,46,65,0.20);
}
/* ITEM */
.sp-faq-item {
border-bottom: 1px solid
rgba(12,46,65,0.20);
transition: background 0.3s ease;
}
.sp-faq-item:hover {
background:
rgba(255,255,255,0.32);
}
/* SUMMARY */
.sp-faq-item summary {
display: grid;
grid-template-columns:
48px 1fr 35px;
align-items: center;
gap: 20px;
padding: 28px 8px;
cursor: pointer;
list-style: none;
}
.sp-faq-item summary::-webkit-details-marker {
display: none;
}
/* NUMBER */
.sp-faq-item summary > span {
font-family: Georgia, serif;
font-size: 13px;
color: #b38a43;
}
/* QUESTION */
.sp-faq-item summary strong {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 22px;
font-weight: 400;
line-height: 1.3;
color: #0a293b;
}
/* PLUS */
.sp-faq-item summary i {
display: flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid
rgba(12,46,65,0.25);
border-radius: 50%;
font-family: Arial, sans-serif;
font-size: 18px;
font-style: normal;
color: #0a293b;
transition: 0.3s ease;
}
/* OPEN PLUS */
.sp-faq-item[open] summary i {
transform: rotate(45deg);
background: #c5a35c;
border-color: #c5a35c;
color: #092537;
}
/* ANSWER */
.sp-faq-answer {
padding: 0 63px 30px 68px;
}
.sp-faq-answer p {
margin: 0;
max-width: 620px;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.8;
color: #59717e;
}
/* =========================================================
TABLET
========================================================= */
@media (max-width: 900px) {
.sp-faq-container {
grid-template-columns: 1fr;
gap: 65px;
}
.sp-faq-intro h2 {
font-size: 50px;
}
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 600px) {
.sp-faq-section {
padding: 80px 0;
}
.sp-faq-container {
width: 88%;
gap: 50px;
}
.sp-faq-intro h2 {
font-size: 42px;
}
.sp-faq-intro > p {
font-size: 15px;
}
.sp-faq-item summary {
grid-template-columns:
35px 1fr 30px;
gap: 10px;
padding: 23px 0;
}
.sp-faq-item summary strong {
font-size: 18px;
}
.sp-faq-answer {
padding:
0 30px 25px 45px;
}
.sp-faq-answer p {
font-size: 13px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e0d7808 *//* =====================================================
SATYAM PROPERTIES
PREMIUM CTA SECTION
BLUE → NAVY GRADIENT
===================================================== */
.sp-cta {
position: relative;
width: 100%;
min-height: 560px;
padding: 110px 8%;
box-sizing: border-box;
overflow: hidden;
background:
radial-gradient(
circle at 15% 50%,
rgba(126, 178, 207, 0.28),
transparent 35%
),
radial-gradient(
circle at 85% 20%,
rgba(58, 110, 145, 0.25),
transparent 35%
),
linear-gradient(
115deg,
#b9d4e1 0%,
#719db5 28%,
#315b73 58%,
#102d3d 100%
);
display: flex;
align-items: center;
}
/* CONTENT */
.sp-cta-content {
position: relative;
z-index: 5;
max-width: 760px;
}
.sp-cta-label {
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 3px;
color: #d2a858;
}
.sp-cta-label::before {
content: "";
width: 48px;
height: 2px;
background: #d2a858;
}
/* HEADING */
.sp-cta h2 {
margin: 0;
max-width: 720px;
font-family: Georgia, "Times New Roman", serif;
font-size: clamp(48px, 6vw, 78px);
font-weight: 400;
line-height: 0.98;
color: #ffffff;
}
.sp-cta h2 em {
display: block;
font-style: italic;
color: #c9e0eb;
}
/* DESCRIPTION */
.sp-cta p {
max-width: 590px;
margin: 28px 0 34px;
font-family: Arial, sans-serif;
font-size: 17px;
line-height: 1.7;
color: rgba(255,255,255,0.82);
}
/* BUTTON AREA */
.sp-cta-buttons {
display: flex;
align-items: center;
gap: 14px;
flex-wrap: wrap;
}
/* PRIMARY BUTTON */
.sp-btn-primary {
display: inline-flex;
align-items: center;
gap: 22px;
padding: 16px 24px;
border-radius: 5px;
background: #d2a858;
color: #102d3d;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 700;
transition: all 0.3s ease;
}
.sp-btn-primary span {
font-size: 20px;
}
.sp-btn-primary:hover {
background: #ffffff;
color: #102d3d;
transform: translateY(-3px);
}
/* SECONDARY BUTTON */
.sp-btn-secondary {
display: inline-flex;
align-items: center;
padding: 15px 23px;
border: 1px solid rgba(255,255,255,0.55);
border-radius: 5px;
background: rgba(255,255,255,0.08);
color: #ffffff;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 14px;
font-weight: 600;
backdrop-filter: blur(8px);
transition: all 0.3s ease;
}
.sp-btn-secondary:hover {
background: rgba(255,255,255,0.18);
border-color: #ffffff;
transform: translateY(-3px);
}
/* =====================================================
DECORATIVE HALF RINGS
===================================================== */
.sp-cta-ring {
position: absolute;
border: 1px solid rgba(210,168,88,0.28);
border-radius: 50%;
pointer-events: none;
}
.ring-one {
width: 620px;
height: 620px;
right: -300px;
top: -250px;
}
.ring-two {
width: 430px;
height: 430px;
right: -190px;
top: -150px;
border-color: rgba(190,220,235,0.18);
}
/* SOFT LIGHT */
.sp-cta-glow {
position: absolute;
width: 420px;
height: 420px;
left: -180px;
bottom: -240px;
border-radius: 50%;
background: rgba(190,220,235,0.16);
filter: blur(10px);
}
/* =====================================================
MOBILE
===================================================== */
@media (max-width: 700px) {
.sp-cta {
min-height: auto;
padding: 80px 7%;
}
.sp-cta h2 {
font-size: 45px;
}
.sp-cta p {
font-size: 15px;
}
.sp-cta-buttons {
flex-direction: column;
align-items: flex-start;
}
.sp-btn-primary,
.sp-btn-secondary {
width: auto;
}
.ring-one {
width: 400px;
height: 400px;
right: -250px;
top: -150px;
}
.ring-two {
width: 300px;
height: 300px;
right: -180px;
top: -100px;
}
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-dd65d49 *//* =========================================
SATYAM PROPERTIES
PREMIUM FOOTER
========================================= */
.sp-footer {
position: relative;
width: 100%;
overflow: hidden;
background:
radial-gradient(
circle at 92% 10%,
rgba(104, 157, 183, 0.12),
transparent 28%
),
linear-gradient(
135deg,
#061a28 0%,
#082231 55%,
#071b29 100%
);
color: #ffffff;
box-sizing: border-box;
}
/* =========================================
TOP FOOTER
========================================= */
.sp-footer-top {
position: relative;
z-index: 2;
width: 86%;
max-width: 1180px;
margin: 0 auto;
padding: 85px 0 70px;
display: grid;
grid-template-columns:
1.6fr
0.8fr
0.9fr
1fr;
gap: 55px;
}
/* =========================================
BRAND
========================================= */
.sp-footer-logo {
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 36px;
letter-spacing: 5px;
color: #a9c8d6;
}
.sp-footer-tagline {
margin-top: 8px;
font-family: Arial, sans-serif;
font-size: 9px;
letter-spacing: 3px;
color: #c9a45c;
}
.sp-footer-brand p {
max-width: 340px;
margin: 25px 0;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.75;
color: #9eb5c1;
}
/* =========================================
FOOTER CONTACT BUTTON
========================================= */
.sp-footer-contact {
display: inline-flex;
align-items: center;
gap: 20px;
padding: 13px 18px;
border: 1px solid rgba(201,164,92,0.55);
border-radius: 5px;
color: #ffffff;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: 600;
transition: all 0.3s ease;
}
.sp-footer-contact span {
color: #c9a45c;
font-size: 17px;
}
.sp-footer-contact:hover {
background: #c9a45c;
border-color: #c9a45c;
color: #071b29;
}
/* =========================================
FOOTER COLUMNS
========================================= */
.sp-footer-column h3 {
margin: 0 0 25px;
font-family:
Georgia,
"Times New Roman",
serif;
font-size: 20px;
font-weight: 400;
color: #ffffff;
}
.sp-footer-column a,
.sp-footer-column span {
display: block;
width: fit-content;
margin-bottom: 14px;
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.5;
color: #91adba;
text-decoration: none;
transition:
color 0.25s ease,
transform 0.25s ease;
}
.sp-footer-column a:hover {
color: #c9a45c;
transform: translateX(4px);
}
/* =========================================
DIVIDER
========================================= */
.sp-footer-divider {
width: 86%;
max-width: 1180px;
height: 1px;
margin: 0 auto;
background:
linear-gradient(
90deg,
transparent,
rgba(201,164,92,0.55),
rgba(142,181,199,0.25),
transparent
);
}
/* =========================================
FOOTER BOTTOM
========================================= */
.sp-footer-bottom {
width: 86%;
max-width: 1180px;
margin: 0 auto;
padding: 24px 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.sp-footer-bottom span,
.sp-footer-bottom a {
font-family: Arial, sans-serif;
font-size: 11px;
color: #718d9a;
text-decoration: none;
}
.sp-footer-bottom-links {
display: flex;
gap: 25px;
}
.sp-footer-bottom a:hover {
color: #c9a45c;
}
/* =========================================
SUBTLE SIDE ARC
========================================= */
.sp-footer::after {
content: "";
position: absolute;
width: 480px;
height: 480px;
right: -300px;
bottom: -300px;
border-radius: 50%;
border: 1px solid rgba(145,185,201,0.10);
box-shadow:
0 0 0 35px rgba(145,185,201,0.025),
0 0 0 70px rgba(145,185,201,0.018);
pointer-events: none;
}
/* =========================================
TABLET
========================================= */
@media (max-width: 900px) {
.sp-footer-top {
grid-template-columns:
1fr 1fr;
gap: 45px;
}
}
/* =========================================
MOBILE
========================================= */
@media (max-width: 600px) {
.sp-footer-top {
width: 88%;
grid-template-columns: 1fr;
padding: 65px 0 50px;
gap: 40px;
}
.sp-footer-bottom {
width: 88%;
flex-direction: column;
align-items: flex-start;
padding: 22px 0;
}
.sp-footer-bottom-links {
gap: 18px;
}
.sp-footer-logo {
font-size: 30px;
}
}/* End custom CSS */