/* globals.css */
:root {
--foreground-rgb: 0, 0, 0;
--background-start-rgb: 214, 219, 220;
--background-end-rgb: 255, 255, 255;
}
body {
margin: 0;
padding: 0;
}
/* -----------------------------------------------------------
FAQ Section (Pelocis Theme)
----------------------------------------------------------- */
.faq-one .sec-title {
padding-bottom: 22px;
}
.sec-title {
padding-bottom: 50px;
position: relative;
}
.sec-title__shape {
position: relative;
display: inline-block;
}
.sec-title__shape::before {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #e2a475);
display: block;
}
.sec-title__shape::after {
content: "";
width: 12px;
height: 12px;
background-color: var(--pelocis-black, #222222);
border: 1px solid var(--pelocis-white, #fff);
display: block;
position: absolute;
bottom: -3px;
right: -3px;
}
.sec-title__tagline {
margin: 0;
font-family: var(--pelocis-font);
color: var(--pelocis-base, #e2a475);
font-size: 18px;
line-height: 16px;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.sec-title__title {
margin: 0;
font-size: 35px;
color: var(--pelocis-black, #222222);
font-weight: bold;
line-height: 46px;
margin-top: 6px;
}
@media (min-width: 1200px) {
.faq-one__text {
padding-right: 70px;
}
}
.faq-one__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin: 0 0 30px;
}
.faq-one__card {
display: flex;
align-items: center;
gap: 20px;
margin: 0 0 26px;
}
.faq-one__img {
width: fit-content;
}
.faq-one__img img {
border-radius: 8px;
}
.faq-one__content {
flex: 1;
}
.faq-one__list {
margin: 0;
padding: 0;
list-style: none;
}
.faq-one__list li {
display: flex;
align-items: baseline;
gap: 8px;
font-size: 16px;
font-weight: 500;
line-height: 26px;
color: var(--pelocis-text-gray, #89868d);
}
.faq-one__list li span {
font-size: 17px;
color: var(--pelocis-black, #222222);
transition: all 500ms ease;
}
.faq-one__quote {
background-color: var(--pelocis-gray, #F5F2EF);
border-radius: 15px;
border-left: 4px solid var(--pelocis-base, #e2a475);
padding: 14px 30px 15px;
font-size: 18px;
line-height: 28px;
font-style: italic;
color: var(--pelocis-text-dark, #636363);
font-weight: 400;
}
/* -----------------------------------------------------------
Offer Section
----------------------------------------------------------- */
.secondary-bg {
background: #07172b;
}
.offer-area {
position: relative;
overflow: hidden;
background: #070d1a;
padding-top: 80px;
padding-bottom: 80px;
}
@media (max-width: 767px) {
.offer-area {
padding-top: 60px;
padding-bottom: 60px;
}
}
.offer__shadow {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 900px;
height: 900px;
border-radius: 50%;
background: radial-gradient(circle, rgba(60, 114, 252, 0.18) 0%, rgba(60, 114, 252, 0.06) 40%, transparent 70%);
pointer-events: none;
z-index: 0;
}
.offer__shape-left {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
}
.offer__shape-right {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 0;
pointer-events: none;
}
.offer-area .container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.offer-header-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin-bottom: 95px;
}
.offer-section-header h5 {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: #3779b9;
margin: 0 0 12px;
}
.offer-section-header h2 {
color: #ffffff;
font-size: clamp(1.6rem, 3vw, 2.4rem);
font-weight: 700;
line-height: 1.3;
margin: 0;
}
.btn-one {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
background-size: 200% auto !important;
border-radius: 10px !important;
color: #fff !important;
padding: 15px 20px !important;
border: none !important;
transition: all 0.5s ease !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
background-position: left center;
}
.btn-one:hover {
background-position: right center !important;
color: #fff !important;
}
/* Offer grid */
.offer-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 1rem;
}
@media (max-width: 1199px) {
.offer-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 767px) {
.offer-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 479px) {
.offer-grid {
grid-template-columns: repeat(1, 1fr);
}
}
/* Offer card */
.offer__item {
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 0 20px 20px;
border-radius: 8px;
text-align: center;
cursor: pointer;
position: relative;
transition: border-color 0.3s;
}
/* corner-shape images */
.offer__item .shape-top {
position: absolute;
top: -1px;
right: -1px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
pointer-events: none;
}
.offer__item .shape-bottom {
position: absolute;
bottom: -1px;
left: -1px;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s, visibility 0.3s;
pointer-events: none;
}
.offer__item:hover .shape-top,
.offer__item:hover .shape-bottom {
opacity: 1;
visibility: visible;
}
/* Icon circle */
.offer__icon {
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: linear-gradient(160deg, #2a5ee8 0%, #0a1a4a 100%);
box-shadow: 0 0 18px rgba(60, 114, 252, 0.45);
margin: -35px auto 0;
transition: background 1s, transform 1s, box-shadow 0.4s;
}
.offer__item:hover .offer__icon {
background: linear-gradient(160deg, #3779b9 0%, #1a3fa8 100%);
box-shadow: 0 0 28px rgba(60, 114, 252, 0.75);
transform: rotateY(360deg);
}
/* card title */
.offer__item h4 {
color: #fff;
font-size: 16px;
font-weight: 600;
margin: 20px 0 0;
}
/* WOW fallback keyframes */
@keyframes _bounceInUp {
0% {
opacity: 0;
transform: translateY(60px);
}
60% {
opacity: 1;
transform: translateY(-12px);
}
80% {
transform: translateY(6px);
}
100% {
transform: translateY(0);
}
}
@keyframes _fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes _fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes _fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes _fadeInLeft {
from {
opacity: 0;
transform: translateX(-40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes _fadeInRight {
from {
opacity: 0;
transform: translateX(40px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes _fadeInUpBig {
from {
opacity: 0;
transform: translateY(80px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes _fadeInDownBig {
from {
opacity: 0;
transform: translateY(-80px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.wow.bounceInUp {
animation: _bounceInUp 1.2s ease both;
}
.wow.fadeInLeft {
animation: _fadeInLeft 1s ease both;
}
.wow.fadeInUp {
animation: _fadeInUp 1s ease both;
}
.wow.fadeIn {
animation: _fadeIn 1.5s ease both;
}
.wow.fadeInUpBig {
animation: _fadeInUpBig 1.5s ease both;
}
.wow.fadeInDownBig {
animation: _fadeInDownBig 1.5s ease both;
}
/* -----------------------------------------------------------
Inner Banner
----------------------------------------------------------- */
.banner__inner-page {
position: relative;
overflow: hidden;
z-index: 1;
text-transform: capitalize;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding-top: 80px;
padding-bottom: 80px;
}
@media (max-width: 767px) {
.banner__inner-page {
padding-top: 60px;
padding-bottom: 60px;
}
}
.banner__inner-page::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%);
z-index: -1;
opacity: 0.82;
}
.banner__inner-page .ib-shape1,
.banner__inner-page .ib-shape2 {
position: absolute;
left: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.banner__inner-page .ib-shape3 {
position: absolute;
right: 0;
bottom: 0;
z-index: -1;
pointer-events: none;
}
.banner__inner-page .ib-container {
position: relative;
z-index: 2;
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
}
.banner__inner-page h2 {
font-size: 40px;
line-height: 48px;
color: #ffffff;
margin-bottom: 10px;
font-weight: 700;
}
.banner__inner-page .breadcrumb-list {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-size: 15px;
}
.banner__inner-page .breadcrumb-list a {
color: #ffffff;
text-decoration: none;
transition: color 0.3s;
}
.banner__inner-page .breadcrumb-list a:hover {
color: #3779b9;
}
.banner__inner-page .breadcrumb-list span {
color: rgba(255, 255, 255, 0.75);
display: flex;
align-items: center;
gap: 4px;
}
.banner__inner-page .breadcrumb-list i {
font-size: 13px;
color: #3779b9;
}
@keyframes swayX {
0% {
transform: translateX(0);
}
50% {
transform: translateX(-18px);
}
100% {
transform: translateX(0);
}
}
.sway__animationX {
animation: swayX 4s ease-in-out infinite;
display: block;
}
@keyframes _slideInLeft {
from {
opacity: 0;
transform: translateX(-80px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes _slideInRight {
from {
opacity: 0;
transform: translateX(80px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.wow.slideInLeft {
animation: _slideInLeft 1.2s ease both;
}
.wow.slideInRight {
animation: _slideInRight 1.2s ease both;
}
@media (max-width: 768px) {
.banner__inner-page {
padding-top: 60px;
padding-bottom: 60px;
}
.banner__inner-page h2 {
font-size: 28px;
line-height: 36px;
}
.banner__inner-page .ib-shape3 {
display: none;
}
}
/* -----------------------------------------------------------
Features One (fo-) Section
----------------------------------------------------------- */
/* --- CSS Variables (shared) --- */
:root {
--getizy-base: #3779b9;
--getizy-base-two: #1a1f2b;
--getizy-secondary: #222230;
--getizy-white: #FFFFFF;
--getizy-white-rgb: 255, 255, 255;
--getizy-text: #7F7D86;
}
/* --- Section --- */
.fo-section {
position: relative;
overflow: visible;
/* background: #f5f0ec; */
padding-top: 80px;
padding-bottom: 80px;
}
/* --- Background shapes --- */
.fo-shapes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.fo-shape-one {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
opacity: 0.06;
background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%);
top: -200px;
left: -200px;
}
.fo-shape-two {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
opacity: 0.06;
background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%);
bottom: -200px;
right: -200px;
}
/* --- Container --- */
.fo-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
position: relative;
z-index: 1;
}
/* --- Row --- */
.fo-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 30px;
justify-content: center;
/* Extra top padding so the hover icon circle (50px above card) has room */
padding-top: 60px;
}
/* --- Col --- */
.fo-col {
flex: 1 1 300px;
max-width: 360px;
/* Extra top space so the hover card icon badge doesn't clip at top */
padding-top: 50px;
}
/* -- Item is the full stacked unit -- */
.fo-item {
position: relative;
/* The hover card is absolutely placed AT THE TOP of .fo-item,
so .fo-item itself does NOT need padding-top */
}
/* ----------------------------------
HOVER OVERLAY CARD (gradient stripe)
Sits OVER the main dark card top
---------------------------------- */
.fo-hover-card {
position: absolute;
/* Start fully hidden above the card */
top: -74px;
left: 0;
right: 0;
z-index: 4;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
padding: 50px 75px 20px 23px;
visibility: hidden;
opacity: 0;
transform: translateY(-30px);
transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease;
/* Height matches the card top section */
min-height: 160px;
}
/* Show on hover or when active */
.fo-item:hover .fo-hover-card,
.fo-item--active .fo-hover-card {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
/* Icon badge that sticks UP above the hover card */
.fo-hover-icon {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 84px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
z-index: 5;
/* box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35); */
}
.fo-hover-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 10px 0 0;
}
/* Arrow button top-right of hover card */
.fo-hover-btn {
position: absolute;
top: 0;
right: 0;
width: 76px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
/* background: rgba(255, 255, 255, 0.15); */
text-decoration: none;
transition: background 0.3s;
}
/* .fo-hover-btn:hover {
background: rgba(255, 255, 255, 0.28);
} */
/* ----------------------------------
MAIN CARD
---------------------------------- */
.fo-card {
position: relative;
z-index: 1;
}
/* -- Top: dark bg ? white on hover -- */
.fo-card-top {
position: relative;
background-color: var(--getizy-secondary);
padding: 28px 28px 30px 28px;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: background-color 0.45s ease;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-top: none;
border-bottom: none;
align-items: center;
}
.fo-item:hover .fo-card-top,
.fo-item--active .fo-card-top {
background-color: #fff;
border-left: 4px solid var(--getizy-secondary);
border-right: 4px solid var(--getizy-secondary);
}
.fo-card-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 0 0 16px;
transition: color 0.45s ease;
}
.fo-item:hover .fo-card-title,
.fo-item--active .fo-card-title {
color: var(--getizy-secondary);
}
/* Arrow btn top-right of main card */
.fo-card-btn {
display: none;
}
.fo-item:hover .fo-card-btn,
.fo-item--active .fo-card-btn {
background: var(--getizy-secondary);
}
.fo-card-desc {
font-size: 14px;
line-height: 1.7;
color: var(--getizy-text);
margin: 0;
transition: color 0.45s ease;
}
.fo-item:hover .fo-card-desc,
.fo-item--active .fo-card-desc {
color: var(--getizy-text);
}
/* -- Bottom: white section with image -- */
.fo-card-bottom {
background-color: #fff;
padding: 20px 20px 20px 20px;
position: relative;
border: 4px solid transparent;
border-image: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
border-image-slice: 1;
transition: padding 0.45s ease, border 0.45s ease;
}
.fo-item:hover .fo-card-bottom,
.fo-item--active .fo-card-bottom {
border-image: none;
border-color: var(--getizy-secondary);
border-style: solid;
border-width: 4px;
border-top: none;
padding: 0 32px 40px 32px;
}
.fo-card-image {
width: 100%;
height: 126px;
overflow: hidden;
}
/* Floating icon circle at bottom-left of the image area */
.fo-card-icon {
position: absolute;
bottom: -48px;
left: 18px;
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
z-index: 3;
box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35);
transition: opacity 500ms ease, transform 500ms ease;
}
.fo-item:hover .fo-card-icon,
.fo-item--active .fo-card-icon {
opacity: 0;
transform: rotateY(180deg);
}
/* ----------------------------------
Responsive
---------------------------------- */
@media (max-width: 991px) {
.fo-row {
gap: 20px;
}
.fo-col {
flex: 1 1 260px;
max-width: 320px;
}
}
@media (max-width: 767px) {
.fo-col {
flex: 1 1 100%;
max-width: 100%;
padding-top: 20px !important;
}
.fo-section {
padding-top: 60px;
padding-bottom: 60px;
}
.fo-item {
padding-top: 0 !important;
}
.fo-hover-card {
display: none !important;
}
.fo-card {
background-color: #fff !important;
border: 1px solid #e1e8ef !important;
border-radius: 12px !important;
padding: 30px 20px !important;
text-align: center !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important;
z-index: 1 !important;
}
.fo-card-top {
background-color: transparent !important;
padding: 0 !important;
min-height: auto !important;
border: none !important;
order: 2 !important;
}
.fo-card-title {
color: var(--getizy-secondary) !important;
font-size: 20px !important;
margin-bottom: 12px !important;
}
.fo-card-desc {
color: var(--getizy-text) !important;
font-size: 15px !important;
margin: 0 !important;
line-height: 1.6 !important;
}
.fo-card-bottom {
display: block !important;
padding: 0 !important;
border: none !important;
margin-bottom: 20px !important;
background: transparent !important;
order: 1 !important;
min-height: auto !important;
}
.fo-card-image {
display: none !important;
}
.fo-card-icon {
position: static !important;
width: 65px !important;
height: 65px !important;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%) !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
margin: 0 auto !important;
opacity: 1 !important;
transform: none !important;
box-shadow: 0 4px 12px rgba(55, 121, 185, 0.25) !important;
}
.fo-card-icon img {
width: 32px !important;
height: 32px !important;
}
.fo-row {
padding-top: 10px !important;
}
/* Force hover states OFF on mobile to avoid flash of dark bg */
.fo-item:hover .fo-card-top,
.fo-item--active .fo-card-top {
border: none !important;
padding: 0 !important;
background-color: transparent !important;
}
.fo-item:hover .fo-card-bottom,
.fo-item--active .fo-card-bottom {
padding: 0 !important;
border: none !important;
}
.fo-item:hover .fo-card-icon,
.fo-item--active .fo-card-icon {
opacity: 1 !important;
transform: none !important;
}
}
.features-one .row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
.features-one .col-lg-4 {
width: 25%;
padding: 0 15px;
box-sizing: border-box;
}
.features-one .col-md-6 {
width: 50%;
padding: 0 15px;
box-sizing: border-box;
}
.gutter-y-80>* {
margin-bottom: 80px;
}
/* --- Section wrapper --- */
.features-one {
padding-top: 250px;
position: relative;
overflow: hidden;
padding-bottom: 170px;
}
/* --- Background shapes --- */
.features-one__shapes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
.body-shape-one,
.body-shape-two {
position: absolute;
width: 500px;
height: 500px;
border-radius: 50%;
opacity: 0.04;
background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%);
}
.body-shape-one {
top: -150px;
left: -150px;
}
.body-shape-two {
bottom: -150px;
right: -150px;
}
.features-one .container {
position: relative;
z-index: 1;
}
/* --- Item wrapper --- */
.features-one__item {
position: relative;
padding-top: 80px;
/* space for the hover overlay that sits above */
}
/* --- Hover overlay card (slides in from top) --- */
.features-one__card__hover {
position: absolute;
top: -80px;
left: 0;
right: 0;
z-index: 2;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
padding: 30px 40px 30px 40px;
visibility: hidden;
opacity: 0;
transform: translateY(-50px);
transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease;
}
.features-one__item:hover .features-one__card__hover,
.features-one__card__hover__active .features-one__card__hover {
visibility: visible;
transform: translateY(0%);
opacity: 1;
}
.features-one__card__hover__title {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: var(--getizy-white);
margin: 0 0 0 0;
padding-right: 50px;
}
.features-one__card__hover__btn {
width: 80px;
height: 90px;
background-color: rgba(var(--getizy-white-rgb), 0.15);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
color: var(--getizy-white);
font-size: 18px;
transition: background 0.3s;
}
.features-one__card__hover__btn:hover {
background-color: rgba(var(--getizy-white-rgb), 0.25);
}
.features-one__card__hover__icon {
position: absolute;
top: -40px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 80px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
color: var(--getizy-white);
font-size: 32px;
}
/* --- Main card --- */
.features-one__card {
position: relative;
background: var(--getizy-white);
}
/* Top wrap � default dark bg */
.features-one__card__top__wrap {
display: flex;
flex-direction: column;
background-color: var(--getizy-secondary);
padding: 30px 40px 30px 40px;
position: relative;
transition: background-color 0.5s ease, border 0.5s ease;
}
.features-one__item:hover .features-one__card__top__wrap,
.features-one__card__hover__active .features-one__card__top__wrap {
background-color: var(--getizy-white);
border-left: 2px solid var(--getizy-secondary);
border-right: 2px solid var(--getizy-secondary);
border-bottom: none;
}
.features-one__card__title {
font-size: 24px;
font-weight: 700;
line-height: 1.3;
color: var(--getizy-white);
padding-bottom: 34px;
margin: 0;
padding-right: 50px;
transition: color 0.5s ease;
}
.features-one__item:hover .features-one__card__title,
.features-one__card__hover__active .features-one__card__title {
color: var(--getizy-secondary);
}
/* Arrow button in top wrap */
.features-one__card__btn {
width: 80px;
height: 90px;
background-color: rgba(var(--getizy-white-rgb), 0.08);
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0;
top: 0;
text-decoration: none;
color: var(--getizy-white);
font-size: 18px;
transition: background 0.3s, color 0.3s;
}
.features-one__item:hover .features-one__card__btn,
.features-one__card__hover__active .features-one__card__btn {
background-color: var(--getizy-secondary);
color: var(--getizy-white);
}
.features-one__card__btn-two {
background-color: rgba(var(--getizy-white-rgb), 0.08);
}
.features-one__card__desc {
font-size: 15px;
line-height: 1.7;
color: var(--getizy-text);
margin: 0;
}
.features-one__item:hover .features-one__card__desc,
.features-one__card__hover__active .features-one__card__desc {
color: var(--getizy-text);
}
/* Bottom wrap */
.features-one__card__bottom__wrap {
background-color: var(--getizy-white);
padding: 20px;
position: relative;
border: 2px solid transparent;
border-image: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
border-image-slice: 1;
transition: border 0.5s ease, padding 0.5s ease;
}
.features-one__item:hover .features-one__card__bottom__wrap,
.features-one__card__hover__active .features-one__card__bottom__wrap {
border-top: none;
border-image: none;
border-color: var(--getizy-secondary);
border-style: solid;
border-width: 2px;
padding: 0px 40px 42px 40px;
}
.features-one__card__image {
width: 100%;
height: 123px;
overflow: hidden;
}
/* Floating icon circle */
.features-one__card__icon {
position: absolute;
bottom: -50px;
left: 20px;
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
color: var(--getizy-white);
font-size: 36px;
transition: opacity 500ms ease, transform 500ms ease;
z-index: 3;
}
.features-one__item:hover .features-one__card__icon,
.features-one__card__hover__active .features-one__card__icon {
opacity: 0;
transform: rotateY(180deg);
}
/* --- Animate classes for scroll reveal --- */
.features-one__item.wow.fadeInUp {
animation-name: _featuresOnefadeInUp;
animation-fill-mode: both;
}
@keyframes _featuresOnefadeInUp {
from {
opacity: 0;
transform: translateY(40px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* icon fonts fallback sizing */
.features-one__card__hover__icon span,
.features-one__card__icon span {
font-size: 36px;
color: var(--getizy-white);
}
.icon-right-arrow::before {
content: "\2192";
}
/* --- Responsive --- */
@media (max-width: 991px) {
.features-one .col-lg-4 {
width: 50%;
}
.features-one {
padding-top: 160px;
padding-bottom: 100px;
}
}
@media (max-width: 767px) {
.features-one .col-lg-4,
.features-one .col-md-6 {
width: 100%;
}
.features-one {
padding-top: 100px;
padding-bottom: 80px;
}
}
/* -----------------------------------------------------------
About One Section (Careers page)
----------------------------------------------------------- */
/* --- Container / Row --- */
.ao-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
position: relative;
z-index: 1;
}
/* removed ao-grid classes as we are using standard bootstrap container/row/col-lg-7/5 */
/* --- Section --- */
.about-one {
position: relative;
/* background-color: var(--getizy-secondary, #222230); */
padding-bottom: 160px;
z-index: 1;
overflow: hidden;
}
.about-one.section-space {
padding-top: 180px;
}
/* dark texture bg */
.about-one__bg {
/* background-image: url('/assets/img-app/bg/about-bg1.png'); */
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
background-position: top left;
background-size: cover;
background-repeat: no-repeat;
opacity: 0.06;
z-index: 0;
}
/* decorative shapes inherited from features-one */
.about-one__shapes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
/* --- Images column --- */
.about-one__images {
position: relative;
width: 100%;
height: 695px;
}
.about-one__img__one {
width: 440px;
height: 625px;
position: relative;
overflow: hidden;
z-index: 1;
border-radius: 12px;
}
.about-one__img__two {
width: 490px;
height: 485px;
position: absolute;
top: 155px;
/* Adjusting for center overlap */
left: 200px;
overflow: hidden;
z-index: 2;
/* Now on top of img one */
border-radius: 12px;
}
/* Rotating logo circle */
.about-one__logo__icon {
position: absolute;
top: 226px;
left: 585px;
transform: translate(-50%, -50%);
width: 164px;
height: 164px;
border-radius: 50%;
background-color: var(--getizy-secondary, #222230);
display: flex;
align-items: center;
justify-content: center;
animation: rotated2 10s infinite linear;
z-index: 10;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.about-one__orange-bar {
position: absolute;
bottom: 0px;
left: 0px;
width: 120px;
height: 8px;
background: linear-gradient(90deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
z-index: 10;
border-radius: 4px;
}
@keyframes rotated2 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* --- Content column --- */
.about-one__wrapper {
position: relative;
z-index: 1;
}
/* Big gradient circle behind content */
.about-one__wrapper__bg__overlay {
position: absolute;
left: -310px;
top: 50%;
transform: translateY(-50%);
width: 900px;
height: 900px;
border-radius: 50%;
background: linear-gradient(145deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
z-index: -1;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.2);
}
.about-one__wrapper__bg__overlay::after {
content: "";
position: absolute;
top: 30px;
left: 30px;
width: 840px;
height: 840px;
border-radius: 50%;
background-color: transparent;
border: 2px solid var(--getizy-secondary, #222230);
animation: leftToRightThree 3s infinite linear;
}
@keyframes leftToRightThree {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.about-one__content {
position: relative;
z-index: 11;
padding-top: 50px;
left: -20px;
/* padding-left: 20px; */
/* Added slight padding for better alignment with the circle */
}
/* sec-title inside about-one */
.ao-sec-title {
margin-bottom: 10px;
}
.ao-sec-title .sec-title__tagline {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--getizy-white, #ffffff);
margin: 0 0 12px;
}
.ao-diamond {
color: #fff;
margin-right: 10px;
font-size: 14px;
}
.ao-sec-title .sec-title__title {
font-size: clamp(2.5rem, 5vw, 4.5rem);
font-weight: 700;
line-height: 1.1;
color: var(--getizy-white, #ffffff);
margin: 0 0 20px;
}
/* body text */
.about-one__content__desc {
font-size: 16px;
line-height: 30px;
color: #FFEEEA;
padding-bottom: 30px;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
/* element strip */
.about-one__content__eliment {
display: flex;
align-items: center;
position: relative;
padding: 15px;
background-color: var(--getizy-secondary, #222230);
border-radius: 8px;
margin-top: 35px;
max-width: 530px;
}
.about-one__content__eliment__img-wrapper {
width: 100px;
height: 100px;
border-radius: 50%;
border: 4px solid var(--getizy-white, #ffffff);
overflow: hidden;
flex-shrink: 0;
z-index: 1;
}
.about-one__content__eliment__img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-one__content__eliment__content {
padding-left: 20px;
}
.about-one__content__eliment__title {
font-size: 20px;
font-weight: 700;
color: var(--getizy-white, #ffffff);
margin: 0;
}
.about-one__content__eliment__desc {
font-size: 14px;
line-height: 1.6;
color: #FFEEEA;
margin: 0;
}
/* checklist */
.about-one__content__list {
list-style: none;
margin: 0;
padding: 0;
padding-top: 35px;
}
.about-one__content__list li {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: var(--getizy-white, #ffffff);
margin-bottom: 10px;
}
.about-one__content__list li i {
color: var(--getizy-white, #ffffff);
font-size: 16px;
}
/* Button */
.getizy-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
font-size: 16px;
line-height: 1;
font-weight: 600;
color: var(--getizy-white, #ffffff);
padding: 20px 40px;
overflow: hidden;
z-index: 0;
background: linear-gradient(145deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
cursor: pointer;
text-decoration: none;
transition: all 0.5s;
}
.about-one__content .getizy-btn {
background: var(--getizy-secondary, #222230);
margin-top: 30px;
}
.about-one__content .getizy-btn:hover {
background: linear-gradient(145deg, var(--getizy-base, #3779b9) 0%, var(--getizy-base-two, #FB8459) 100%);
}
.btn-hover-cropping {
overflow: hidden;
position: relative;
transition: all 0.5s;
}
/* --- Responsive --- */
@media (max-width: 991px) {
.ao-col-7,
.ao-col-5 {
width: 100%;
}
.about-one__images {
height: 420px;
margin-bottom: 80px;
}
.about-one__img__one {
width: 280px;
height: 420px;
}
.about-one__img__two {
width: 300px;
height: 290px;
right: 10px;
bottom: -40px;
}
.about-one__logo__icon {
top: 80px;
right: 60px;
width: 110px;
height: 110px;
}
.about-one__wrapper__bg__overlay {
left: -100px;
top: -40px;
width: 600px;
height: 600px;
}
.about-one__wrapper__bg__overlay::after {
width: 578px;
height: 578px;
}
}
@media (max-width: 767px) {
.about-one {
padding-bottom: 80px;
}
.about-one.section-space {
padding-top: 60px;
}
.about-one__images {
height: 320px;
margin-bottom: 60px;
}
.about-one__img__one {
width: 200px;
height: 320px;
}
.about-one__img__two {
width: 220px;
height: 210px;
right: 0;
bottom: -30px;
}
.about-one__logo__icon {
display: none;
}
.about-one__content__eliment__content {
padding-left: 60px;
margin-left: 56px;
}
}
/* -----------------------------------------------------------
FAQ Section (faq-two)
----------------------------------------------------------- */
.faq-two {
position: relative;
background-color: #1b272a;
padding: 80px 0 289px;
clip-path: polygon(0 0, 100% 0, 100% 69%, 80% 100%, 20% 100%, 0% 69%);
z-index: 1;
}
.faq-two__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.07;
z-index: -1;
}
.faq-two__content {
position: relative;
}
.faq-two__content__title {
font-size: 35px;
line-height: 46px;
font-weight: 700;
color: #fff;
margin: 0 0 21px;
padding-left: 17px;
position: relative;
}
.faq-two__content__title::before {
content: "";
position: absolute;
left: 0;
top: 5px;
bottom: 5px;
width: 2px;
background-color: var(--getizy-base, #3779b9);
}
.faq-two__content__text {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}
.faq-two__content__list {
margin: 0;
padding: 0;
list-style: none;
}
.faq-two__content__list li {
display: flex;
align-items: center;
gap: 15px;
color: #fff;
font-weight: 700;
margin-bottom: 20px;
}
.faq-two__content__list li i {
font-size: 24px;
color: var(--getizy-base, #3779b9);
}
/* Accordion */
.tolak-accrodion .accrodion {
background-color: #fff;
border-radius: 50px;
transition: all 500ms ease;
overflow: hidden;
margin-bottom: 10px;
}
.tolak-accrodion .accrodion.active {
border-radius: 10px;
}
.tolak-accrodion .accrodion-title {
padding: 19px 30px;
padding-right: 50px;
transition: all 500ms ease;
cursor: pointer;
position: relative;
z-index: 2;
}
.tolak-accrodion .accrodion.active .accrodion-title {
background-color: #fb8459;
/* Using base-two for active title as seen in image */
color: #fff;
}
.tolak-accrodion .accrodion-title h4 {
margin: 0;
font-size: 18px;
font-weight: 700;
display: flex;
align-items: center;
gap: 10px;
color: inherit;
}
.tolak-accrodion .accrodion-title__icon {
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
}
.tolak-accrodion .accrodion-title__icon::before,
.tolak-accrodion .accrodion-title__icon::after {
content: "";
position: absolute;
background-color: currentColor;
transition: all 500ms ease;
}
.tolak-accrodion .accrodion-title__icon::before {
width: 2px;
height: 12px;
left: 9px;
top: 4px;
}
.tolak-accrodion .accrodion-title__icon::after {
width: 12px;
height: 2px;
left: 4px;
top: 9px;
}
.tolak-accrodion .accrodion.active .accrodion-title__icon::before {
transform: rotate(90deg);
opacity: 0;
}
.tolak-accrodion .accrodion-content {
display: none;
padding: 0 30px 25px;
}
.tolak-accrodion .accrodion.active .accrodion-content {
display: block;
}
.tolak-accrodion .inner {
display: flex;
align-items: center;
gap: 20px;
padding-top: 15px;
}
.tolak-accrodion .inner__image {
flex-shrink: 0;
}
/* -----------------------------------------------------------
Video Section (video-three)
----------------------------------------------------------- */
.video-three {
position: relative;
z-index: 10;
padding-bottom: 80px;
}
.video-three__inner {
position: relative;
background-position: top center;
background-repeat: no-repeat;
background-size: cover;
border-radius: 50px;
border: 13px solid #fff;
border-right-width: 10px;
border-left-width: 10px;
overflow: visible;
padding: 120px 0 0;
margin-top: -169px;
z-index: 1;
}
.video-three__btn {
width: 250px;
height: 250px;
background-color: var(--getizy-base, #3779b9);
border: 8px solid #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 50%;
margin: 0 auto -125px;
position: relative;
z-index: 10;
transition: all 500ms ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.video-three__btn__logo-outer {
position: absolute;
width: 100%;
height: 100%;
border: 2px dashed rgba(255, 255, 255, 0.5);
border-radius: 50%;
animation: rotate-clockwise 15s linear infinite;
}
.video-three__btn__logo-inner {
position: relative;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
animation: rotate-counter-clockwise 10s linear infinite;
}
@keyframes rotate-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes rotate-counter-clockwise {
from {
transform: rotate(0deg);
}
to {
transform: rotate(-360deg);
}
}
@media (max-width: 991px) {
.faq-two {
padding: 80px 0 200px;
clip-path: none;
}
.video-three__inner {
margin-top: -100px;
padding-top: 200px;
}
.video-three__btn {
width: 180px;
height: 220px;
margin-bottom: -110px;
}
}
/* -----------------------------------------------------------
Why Choose Us Section (why-choose-three)
----------------------------------------------------------- */
.why-choose-three {
position: relative;
padding: 80px 0;
overflow: hidden;
background-color: #f7f8fc;
}
.why-choose-three__bg {
position: absolute;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-position: right bottom;
background-repeat: no-repeat;
background-size: auto;
opacity: 0.1;
z-index: 1;
}
.why-choose-three .container {
position: relative;
z-index: 2;
}
.why-choose-three__image {
position: relative;
margin-left: -375px;
}
.why-choose-three__image img {
width: 100%;
border-radius: 0 500px 500px 0;
}
.why-choose-three__content {
padding-left: 30px;
}
.why-choose-three__content__text {
margin-bottom: 35px;
font-size: 16px;
line-height: 30px;
}
.why-choose-three__content__list {
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
margin: 0;
padding: 0;
list-style: none;
counter-reset: count;
}
.why-choose-three__content__list li {
display: flex;
align-items: center;
gap: 20px;
position: relative;
z-index: 2;
background-color: #fff;
border-radius: 10px;
font-size: 22px;
font-weight: 700;
color: #1a1f2b;
font-family: var(--getizy-heading, "Barlow", sans-serif);
counter-increment: count;
padding: 19px 30px;
max-width: 87%;
transition: all 500ms ease;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.why-choose-three__content__list li:hover {
max-width: 100%;
color: #fff;
}
.why-choose-three__content__list li::after {
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 100%;
content: "";
border-radius: 10px;
transition: all 500ms ease;
background-color: var(--getizy-base, #3779b9);
z-index: -1;
}
.why-choose-three__content__list li:hover::after {
width: 100%;
background-color: var(--getizy-base, #3779b9);
}
.why-choose-three__content__list__number::after {
content: counters(count, ".", decimal-leading-zero);
font-size: 14px;
font-weight: 700;
width: 32px;
height: 32px;
background-color: #1a1f2b;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 500ms ease;
}
.why-choose-three__content__list li:hover .why-choose-three__content__list__number::after {
background-color: #fff;
color: #1a1f2b;
}
.why-choose-three__content__list__icon {
font-size: 40px;
color: var(--getizy-base, #3779b9);
transition: all 500ms ease;
}
.why-choose-three__content__list li:hover .why-choose-three__content__list__icon {
color: #fff;
transform: scale(1.1);
}
.why-choose-three__content__list__rm {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
background-color: #1b272a;
border: 4px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: #fff;
visibility: hidden;
opacity: 0;
transition: all 500ms ease;
margin-right: -26px;
}
.why-choose-three__content__list li:hover .why-choose-three__content__list__rm {
right: 30px;
visibility: visible;
opacity: 1;
margin-right: 0;
}
/* Section Title Three */
.sec-title-three {
margin-bottom: 25px;
}
.sec-title-three__tagline {
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
color: var(--getizy-base, #3779b9);
letter-spacing: 0.1em;
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 10px;
}
.sec-title-three__tagline__left-border,
.sec-title-three__tagline__right-border {
width: 30px;
height: 2px;
background-color: currentColor;
display: inline-block;
}
.sec-title-three__title {
font-size: 45px;
font-weight: 700;
line-height: 1.1;
color: #1a1f2b;
}
/* Media query for wider screens to increase spacing */
@media (min-width: 1400px) {
.main-menu-metatron ul {
gap: 20px;
}
.main-menu-metatron ul li a {
padding: 0 10px;
font-size: 13px;
}
}
@media (max-width: 1199px) {
.why-choose-three__image {
margin-left: -150px;
}
}
@media (max-width: 991px) {
.why-choose-three {
padding: 80px 0;
}
.why-choose-three__image {
margin-left: 0;
margin-bottom: 40px;
}
.why-choose-three__image img {
border-radius: 20px;
}
.why-choose-three__content {
padding-left: 0;
}
.sec-title-three__title {
font-size: 36px;
}
}
/* -----------------------------------------------------------
Contact Section (contact-one)
----------------------------------------------------------- */
.contact-one {
position: relative;
overflow: hidden;
padding: 0 0 80px;
background-color: #fff;
}
.contact-one__info {
position: relative;
background-color: var(--getizy-base, #3779b9);
border-radius: 10px;
padding: 58px 30px 40px 200px;
z-index: 2;
top: -91px;
}
.contact-one__info__icon {
font-size: 114px;
line-height: 114px;
color: #fff;
left: 45px;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
min-height: 114px;
display: flex;
align-items: center;
}
.contact-one__info__title {
font-size: 30px;
color: #fff;
margin: 0 0 6px;
font-weight: 700;
}
.contact-one__info__title span {
text-decoration: underline;
}
.contact-one__info__text {
margin: 0;
}
.contact-one__info__text a {
color: #fff;
font-size: 24px;
font-weight: 700;
transition: all 500ms ease;
}
.contact-one__info__text a:hover {
opacity: 0.8;
}
.contact-one__info::after {
position: absolute;
right: -56px;
top: 50%;
transform: translateY(-50%);
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 48px 0 48px 56px;
border-color: transparent transparent transparent var(--getizy-base, #3779b9);
}
.contact-one__image {
position: relative;
z-index: 9;
margin: 20px 0 0 -50px;
top: 28px;
}
.contact-one__image img {
max-width: 100%;
animation: messageMove2 2.5s linear 0s infinite;
}
@keyframes messageMove2 {
0% {
transform: translateX(0);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0);
}
}
.contact-one__container {
max-width: 1599px;
margin-top: 10px;
}
.contact-one__wrapper {
position: relative;
z-index: 2;
background-color: #1a1f2b;
border-radius: 10px;
background-position: right bottom;
background-repeat: no-repeat;
overflow: hidden;
}
/* .contact-one__wrapper::after {
position: absolute;
left: 0;
bottom: 0;
width: 215px;
height: 100px;
content: "";
background-color: var(--getizy-base, #3779b9);
z-index: -1;
border-radius: 0 0 0 10px;
} */
.contact-one__image-two {
position: relative;
padding: 23px 0 0 25px;
display: inline-block;
margin-bottom: -10px;
}
.contact-one__image-two img {
max-width: 100%;
border: 10px solid #fff;
position: relative;
z-index: 2;
}
.contact-one__content::before {
position: absolute;
left: -56px;
top: 156px;
content: "";
width: 0px;
height: 0px;
border-style: solid;
border-width: 48px 56px 48px 0;
border-color: transparent var(--getizy-base, #3779b9) transparent transparent;
z-index: 1;
}
@keyframes airTree {
0% {
transform: translateY(-50%) rotate(0deg) translate(0px, 0px);
}
50% {
transform: translateY(-50%) rotate(0deg) translate(0px, 6px);
}
100% {
transform: translateY(-50%) rotate(0deg) translate(0px, 0px);
}
}
.contact-one__content {
padding: 60px 50px 60px 0;
}
.contact-one__content__text {
color: rgba(255, 255, 255, 0.7);
margin-bottom: 30px;
}
/* Form Styles */
.form-one__group {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-one__control--full {
grid-column: span 2;
}
.form-one__control input,
.form-one__control textarea {
width: 100%;
background-color: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 5px;
color: #fff;
padding: 15px 20px;
outline: none;
transition: all 500ms ease;
}
.form-one__control textarea {
height: 140px;
resize: none;
}
.form-one__control input:focus,
.form-one__control textarea:focus {
border-color: var(--getizy-base, #3779b9);
}
.contact-one__form .tolak-btn {
width: auto;
background-color: #3779b9 !important;
color: #fff !important;
border: none;
padding: 15px 40px;
font-weight: 700;
border-radius: 5px;
cursor: pointer;
transition: all 500ms ease;
}
.contact-one__form .tolak-btn:hover {
background-color: #fff;
color: #1a1f2b;
}
@media (max-width: 991px) {
/* .contact-one {
padding: 80px 0 0;
} */
.contact-one__info {
padding: 40px 30px 40px 140px;
margin-bottom: 30px;
}
.contact-one__info__icon {
font-size: 80px;
left: 30px;
}
.contact-one__info::after {
display: none;
}
.contact-one__image {
margin: 0;
margin-bottom: 40px;
/* top: 68px; */
}
.contact-one__image-two {
padding: 20px;
display: block;
text-align: center;
}
.contact-one__image-two::before {
display: none;
}
.contact-one__content {
padding: 0 30px 50px;
}
.form-one__group {
grid-template-columns: 1fr;
}
.form-one__control--full {
grid-column: span 1;
}
}
/* -----------------------------------------------------------
Service Section Three (service-three)
----------------------------------------------------------- */
.service-three {
position: relative;
/* background-color: #ecf2fc; */
padding: 80px 0;
overflow: hidden;
z-index: 1;
}
.service-three__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.07;
z-index: -1;
}
.service-three__shape {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
background-position: left bottom;
background-repeat: no-repeat;
background-size: auto;
opacity: 0.2;
z-index: -1;
}
.service-three__item {
position: relative;
z-index: 2;
padding: 40px 0 20px;
transition: all 500ms ease;
}
.service-three__item__content {
position: relative;
z-index: 2;
background-color: #3779b9;
border-radius: 20px 20px 0 0;
padding: 0 28px 22px;
transition: all 500ms ease;
}
.service-three__item:hover .service-three__item__content {
background-color: #1a1f2b;
}
.service-three__item__icon {
position: relative;
z-index: 3;
top: -40px;
width: 84px;
height: 84px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto -22px;
background-color: #1a1f2b;
font-size: 42px;
color: var(--getizy-base, #3779b9);
transition: all 500ms ease;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
}
.service-three__item:hover .service-three__item__icon {
background-color: var(--getizy-base, #3779b9);
color: #fff;
}
.service-three__item__title {
font-size: 22px;
font-weight: 700;
margin: 0 0 10px;
}
.service-three__item__title a {
color: #fff;
transition: all 500ms ease;
}
.service-three__item:hover .service-three__item__title a {
color: #fff;
}
.service-three__item__text {
line-height: 26px;
margin: 0;
color: #fff;
transition: all 500ms ease;
}
.service-three__item:hover .service-three__item__text {
color: #fff !important;
}
.service-three__item__image {
position: relative;
overflow: hidden;
line-height: 0;
}
.service-three__item__image img {
width: 100%;
height: auto;
clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%);
transition: all 500ms ease;
}
.service-three__item:hover .service-three__item__image img {
transform: scale(1.05);
}
.service-three__item__rm {
position: absolute;
left: 0;
right: 0;
bottom: -6px;
margin: 0 auto;
width: 52px;
height: 52px;
background-color: #1b272a;
border: 4px solid #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
color: var(--getizy-base, #3779b9);
transition: all 500ms ease;
z-index: 3;
}
.service-three__item:hover .service-three__item__rm {
background-color: var(--getizy-base, #3779b9);
color: #fff;
}
@media (max-width: 991px) {
.service-three {
padding: 80px 0;
}
}
/* -----------------------------------------------------------
Work Process Section (work-process-style2)
----------------------------------------------------------- */
.work-process-container-wrapper.style2 {
position: relative;
padding: 80px 0;
z-index: 1;
}
.work-process-container-wrapper.style2 .shape {
position: absolute;
right: 5%;
top: 10%;
z-index: 2;
}
.rotate360 {
animation: rotate 15s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.work-process-wrapper.style2 {
position: relative;
/* background-color: #3d72fc; */
border-radius: 40px;
padding: 0px 20px;
overflow: hidden;
z-index: 1;
}
.work-process-wrapper.style2 .shape1,
.work-process-wrapper.style2 .shape2 {
position: absolute;
z-index: -1;
opacity: 0.1;
}
.work-process-wrapper.style2 .shape1 {
left: 0;
top: 0;
}
.work-process-wrapper.style2 .shape2 {
right: 0;
bottom: 0;
}
.work-process-content .section-title .subtitle {
display: flex;
align-items: center;
gap: 15px;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 20px;
}
.work-process-content .section-title .title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 25px;
}
.work-process-content .section-title p {
font-size: 16px;
line-height: 1.8;
margin-bottom: 40px;
}
@media (max-width: 991px) {
.work-process-section .shape-1 {
display: none;
}
}
.gt-btn.style5 {
display: inline-flex;
align-items: center;
gap: 15px;
background-color: #fff;
color: #3d72fc;
padding: 18px 35px;
border-radius: 50px;
font-weight: 700;
transition: all 500ms ease;
}
.gt-btn.style5:hover {
background-color: #1b272a;
color: #fff;
}
/* Hub and Spoke Visualization */
.work-process-thumb {
position: relative;
width: 100%;
height: 600px;
display: flex;
align-items: center;
justify-content: center;
}
.work-process-thumb .thumb2_1 {
position: relative;
z-index: 2;
width: 200px;
height: 200px;
background-color: transparent;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.work-process-thumb .thumb2_1 img {
max-width: 100%;
filter: none;
}
.active-description-center {
/* background: #fff; */
padding: 40px;
border-radius: 50%;
width: 450px;
height: 450px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
position: absolute;
z-index: 10;
}
@media (max-width: 1300px) {
.active-description-center {
top: -58px;
}
}
@media (max-width: 1399px) {
.active-description-center {
width: 380px;
height: 380px;
padding: 30px;
}
.close-desc-btn {
top: 30px !important;
right: 30px !important;
}
}
@keyframes zoomIn {
from {
opacity: 0;
transform: scale(0.5);
}
to {
opacity: 1;
transform: scale(1);
}
}
.active-description-center h4 {
font-size: 20px;
color: #1a1f2b;
margin-bottom: 15px;
font-weight: 700;
}
.active-description-center p {
font-size: 15px;
color: #555;
line-height: 1.6;
}
.close-desc-btn {
position: absolute;
top: 50px;
right: 50px;
background: #3779b9;
color: #fff;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 24px;
transition: all 0.3s ease;
line-height: 1;
}
.close-desc-btn:hover {
background: #1a1f2b;
}
.work-process-thumb::before {
content: "";
position: absolute;
width: 450px;
height: 450px;
border: 2px dashed #1a1f2b !important;
border-radius: 50%;
z-index: 1;
animation: rotate 30s linear infinite;
}
.process-card {
position: absolute;
background: #3779b9;
padding: 20px 30px 20px 60px;
border-radius: 12px;
display: flex;
align-items: center;
gap: 15px;
width: 260px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
z-index: 3;
transition: all 400ms ease;
min-height: 70px;
}
/* .process-card:hover {
transform: translateY(-5px);
} */
.process-card .number {
position: absolute;
left: 15px;
top: 20px;
transform: none;
width: 32px;
height: 32px;
background: #1a1f2b;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
font-weight: 800;
border: 2px solid #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.process-card .icon {
font-size: 24px;
color: #3d72fc;
}
.process-card .text {
font-size: 15px;
font-weight: 700;
color: #fff;
line-height: 1.1;
letter-spacing: -0.01em;
}
.description-mobile {
display: none;
}
.process-card.active {
background: #1a1f2b !important;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
scale: 1.05;
}
.process-card.active .number {
background: #3779b9;
}
/* Card Positions Around Circle */
.card-1 {
top: 0;
left: 50%;
transform: translateX(-50%);
}
.card-2 {
top: 25%;
left: 0;
}
.card-3 {
bottom: 20%;
left: 0;
}
.card-4 {
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.card-5 {
bottom: 20%;
left: 80%;
transform: translateX(-50%);
}
.card-6 {
bottom: 65%;
right: 0;
}
.card-7 {
top: 20%;
right: 0;
}
/* Mirror Number for right cards */
/* .card-6 .number,
.card-7 .number {
left: auto;
right: -15px;
} */
@media (max-width: 1399px) {
.work-process-thumb {
height: 500px;
scale: 0.8;
}
}
@media (max-width: 1199px) {
/* .work-process-wrapper.style2 {
padding: 80px 40px;
} */
.work-process-content .section-title .title {
font-size: 36px;
}
.work-process-thumb {
/* margin-top: 50px; */
scale: 1;
height: auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
align-items: stretch;
/* padding: 20px; */
}
.work-process-thumb::before,
.work-process-thumb .thumb2_1 {
display: none;
}
.process-card {
position: relative;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100%;
}
.active-description-center {
display: none !important;
}
.description-mobile {
display: block;
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
margin-top: 10px;
font-weight: 400;
line-height: 1.5;
}
.process-card {
position: relative;
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
transform: none !important;
width: 100%;
flex-direction: column;
align-items: flex-start;
padding: 25px 30px 25px 55px;
gap: 8px;
height: 100%;
}
.process-card .number {
left: 15px;
top: 25px;
transform: none;
width: 26px;
height: 26px;
font-size: 12px;
}
}
@media (max-width: 767px) {
.work-process-thumb {
grid-template-columns: 1fr;
}
}
/* -----------------------------------------------------------
Preloader
----------------------------------------------------------- */
#preloader {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
background: #07172b;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
}
.bd-loader-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.bd-loader {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes rotate-smooth {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* -----------------------------------------------------------
Portfolio Inner Banner
----------------------------------------------------------- */
.pf-banner {
position: relative;
overflow: hidden;
background-size: cover;
background-position: center;
padding: 100px 0 80px;
text-align: center;
z-index: 1;
}
.pf-banner::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(270.07deg, #002b98 0.07%, #00060c 99.95%);
opacity: 0.88;
z-index: -1;
}
.pf-banner .ib-shape2 {
position: absolute;
left: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
opacity: 0.5;
animation: pf-slideInLeft 1.2s ease both;
}
.pf-banner .ib-shape3 {
position: absolute;
right: 0;
bottom: 0;
z-index: 0;
pointer-events: none;
opacity: 0.35;
animation: pf-slideInRight 1.2s ease both;
}
@keyframes pf-slideInLeft {
from {
opacity: 0;
transform: translateX(-80px);
}
to {
opacity: 0.5;
transform: translateX(0);
}
}
@keyframes pf-slideInRight {
from {
opacity: 0;
transform: translateX(80px);
}
to {
opacity: 0.35;
transform: translateX(0);
}
}
.pf-banner-inner {
position: relative;
z-index: 2;
animation: pf-fadeInUp 0.9s ease both;
}
@keyframes pf-fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pf-banner-sub {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2.5px;
color: #3779b9;
margin-bottom: 14px;
}
.pf-banner-sub .line {
display: inline-block;
width: 36px;
height: 2px;
background: #3779b9;
border-radius: 2px;
}
.pf-banner h1 {
font-size: clamp(32px, 5vw, 52px);
font-weight: 800;
line-height: 1.2;
color: #fff;
margin: 0 auto 20px;
max-width: 700px;
}
.pf-banner h1 span {
color: #3779b9;
}
.pf-banner-bread {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
font-size: 15px;
color: rgba(255, 255, 255, 0.75);
}
.pf-banner-bread a {
color: #fff;
text-decoration: none;
transition: color 0.3s;
}
.pf-banner-bread a:hover {
color: #3779b9;
}
.pf-banner-bread i {
font-size: 12px;
color: #3779b9;
}
/* Page Header Integration */
.page-header .ib-shape2,
.page-header .ib-shape3 {
position: absolute;
bottom: 0;
z-index: 0;
pointer-events: none;
}
.page-header .ib-shape2 {
left: 0;
animation: pf-slideInLeft 1.2s ease both;
}
.page-header .ib-shape3 {
right: 0;
animation: pf-slideInRight 1.2s ease both;
}
@media (max-width: 768px) {
.pf-banner {
padding: 70px 0 60px;
}
.pf-banner .ib-shape3 {
display: none;
}
}
/* -----------------------------------------------------------
Portfolio Section
----------------------------------------------------------- */
.pf-section {
/* background: #f7f9fc; */
padding: 80px 0;
}
.pf-container {
max-width: 1260px;
margin: 0 auto;
padding: 0 20px;
}
/* -- Tabs -- */
.pf-tabs {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-bottom: 56px;
}
.pf-tab-btn {
padding: 10px 22px;
border-radius: 10px !important;
border: none !important;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
color: white !important;
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: all 0.25s;
white-space: nowrap;
}
.pf-tab-btn:hover,
.pf-tab-btn.active {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
color: #fff !important;
box-shadow: 0 6px 20px rgba(55, 121, 185, 0.35);
opacity: 0.85;
}
/* -- Grids -- */
.pf-grid {
display: grid;
gap: 36px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.pf-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.pf-grid {
grid-template-columns: 1fr;
}
}
.pf-grid-meta {
display: grid;
gap: 36px;
grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
.pf-grid-meta {
grid-template-columns: 1fr;
}
}
.pf-grid-mobile {
display: grid;
gap: 36px;
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
.pf-grid-mobile {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 640px) {
.pf-grid-mobile {
grid-template-columns: 1fr;
}
}
/* -- Section divider label -- */
.pf-section-label {
text-align: center;
margin: 60px 0 30px;
}
.pf-section-label h3 {
font-size: 22px;
font-weight: 700;
color: #1a1f2b;
display: inline-flex;
align-items: center;
gap: 10px;
}
.pf-section-label h3::before,
.pf-section-label h3::after {
content: "";
display: block;
width: 50px;
height: 2px;
background: #3779b9;
border-radius: 2px;
}
/* -- Shared card info -- */
.pf-card-info {
margin-top: 14px;
}
.pf-category-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1.5px;
color: #3779b9;
background: rgba(55, 121, 185, 0.1);
border-radius: 30px;
padding: 3px 12px;
margin-bottom: 6px;
}
.pf-card-name {
font-size: 16px;
font-weight: 700;
color: #1a1f2b;
margin: 0 0 8px;
}
.pf-card-link {
font-size: 13px;
color: #3779b9;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
transition: opacity 0.2s;
}
.pf-card-link:hover {
opacity: 0.75;
}
/* -- Fade-in -- */
@keyframes pfFadeUp {
from {
opacity: 0;
transform: translateY(24px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.pf-fade-item {
animation: pfFadeUp 0.45s ease both;
}
/* ------------------------------------------------------
MONITOR mockup (Web / Shopify / WordPress)
------------------------------------------------------ */
.pf-monitor-wrap {
text-align: center;
}
.pf-monitor {
display: inline-block;
position: relative;
width: 100%;
max-width: 360px;
}
.pf-monitor-screen {
background: #0a0a12;
border: 8px solid #2a2e3d;
border-bottom: 14px solid #2a2e3d;
border-radius: 8px 8px 4px 4px;
overflow: hidden;
aspect-ratio: 16 / 10;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
}
.pf-monitor-screen img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top;
/* Show top of website */
display: block;
transition: transform 0.5s ease;
}
.pf-monitor-wrap:hover .pf-monitor-screen img {
transform: scale(1.04);
}
.pf-monitor-stand {
width: 28px;
height: 22px;
background: #2a2e3d;
margin: 0 auto;
clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
}
.pf-monitor-base {
width: 70px;
height: 6px;
background: #2a2e3d;
border-radius: 4px;
margin: 0 auto;
}
/* ------------------- Card Names and Links ------------------- */
.pf-card-name {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1a1f2b;
transition: color 0.3s;
}
.pf-card-name a {
color: inherit;
text-decoration: none;
display: inline-block;
cursor: pointer;
}
.pf-card-name a:hover {
color: #3779b9;
}
/* ------------------- Graphic Design: Pinned on Wall ------------------- */
.pf-pinned-item {
display: flex;
flex-direction: column;
align-items: center;
transition: transform 0.3s ease;
}
.pf-pinned-item:hover {
transform: translateY(-5px) rotate(1deg);
}
.pf-pinned-paper {
position: relative;
background: #fff;
padding: 12px 12px 30px;
/* Polaroid/Paper style bottom margin */
box-shadow:
2px 5px 15px rgba(0, 0, 0, 0.2),
0 0 1px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.3s;
}
.pf-pinned-item:hover .pf-pinned-paper {
box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.3);
}
.pf-pin {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
width: 14px;
height: 14px;
background: #3779b9;
/* Pin head color */
border-radius: 50%;
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
inset -2px -2px 4px rgba(0, 0, 0, 0.4);
z-index: 5;
}
.pf-pinned-paper img {
display: block;
max-width: 100%;
height: auto;
border: 1px solid #eee;
}
/* Dynamic sizes based on detected orientation */
.pf-pinned-item.landscape .pf-pinned-paper {
width: 100%;
}
.pf-pinned-item.portrait .pf-pinned-paper {
max-width: 280px;
margin: 0 auto;
}
/* ------------------------------------------------------
LIGHTBOX
------------------------------------------------------ */
.pf-lightbox-backdrop {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.95);
display: flex;
align-items: center;
justify-content: center;
z-index: 100000;
padding: 40px;
cursor: zoom-out;
opacity: 0;
animation: pfFadeIn 0.3s forwards;
}
@keyframes pfFadeIn {
to {
opacity: 1;
}
}
.pf-lightbox-content {
position: relative;
max-width: 90%;
max-height: 90%;
cursor: default;
display: flex;
flex-direction: column;
align-items: center;
animation: pfScaleIn 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pfScaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.pf-lightbox-img {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 4px;
box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}
.pf-lightbox-details {
background: #fff;
padding: 20px 30px;
border-radius: 0 0 8px 8px;
width: 100%;
text-align: center;
}
.pf-lightbox-details h3 {
margin: 0 0 5px;
color: #1a1f2b;
font-weight: 800;
}
.pf-lightbox-details p {
margin: 0;
color: #3779b9;
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
}
/* -- META ADS card -- */
.pf-meta-wrap {
border-radius: 10px;
overflow: hidden;
}
.pf-meta-screen {
position: relative;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.pf-meta-screen img {
width: 100%;
height: 260px;
object-fit: cover;
display: block;
transition: transform 0.45s;
}
.pf-meta-wrap:hover .pf-meta-screen img {
transform: scale(1.04);
}
.pf-meta-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 12px 16px;
background: linear-gradient(transparent, rgba(10, 15, 35, 0.75));
}
/* -- LOGO BRANDING card -- */
.pf-logo-wrap {
text-align: center;
}
.pf-logo-frame {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.10);
overflow: hidden;
padding: 20px;
transition: box-shadow 0.3s, transform 0.3s;
}
.pf-logo-wrap:hover .pf-logo-frame {
box-shadow: 0 12px 40px rgba(55, 121, 185, 0.22);
transform: translateY(-4px);
}
.pf-logo-frame img {
width: 100%;
max-height: 200px;
object-fit: contain;
}
/* -- VIDEO EDITING card -- */
.pf-video-wrap {
text-align: center;
}
.pf-video-player {
position: relative;
border-radius: 12px;
overflow: hidden;
background: #0a0a12;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
aspect-ratio: 16 / 9;
}
.pf-video-player iframe,
.pf-video-player video {
width: 100%;
height: 100%;
border: none;
display: block;
}
/* ------------------------------------------------------
PHONE mockup � Mobile App Development
------------------------------------------------------ */
.pf-mobile-wrap {
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.pf-phone {
position: relative;
width: 220px;
background: #0f1320;
border-radius: 40px;
padding: 12px;
box-shadow:
0 25px 50px rgba(0, 0, 0, 0.5),
inset 0 0 0 2px rgba(255, 255, 255, 0.1);
margin: 0 auto 10px;
transition: transform 0.3s ease;
}
.pf-phone:hover {
transform: translateY(-10px);
}
.pf-phone-notch {
position: absolute;
top: 18px;
left: 50%;
transform: translateX(-50%);
width: 70px;
height: 18px;
background: #0a0d17;
border-radius: 12px;
z-index: 10;
}
.pf-phone-screen {
background: #fff;
border-radius: 30px;
overflow: hidden;
aspect-ratio: 9 / 18.5;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.pf-phone-screen img {
display: block;
width: 85%;
height: auto;
object-fit: contain;
transition: transform 0.5s ease;
}
.pf-phone:hover .pf-phone-screen img {
transform: scale(1.1);
}
.pf-phone-home-btn {
width: 40px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 10px;
margin: 15px auto 5px;
}
.pf-live-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: #10c47a;
background: rgba(16, 196, 122, 0.1);
padding: 2px 10px;
border-radius: 20px;
margin-top: 4px;
}
.pf-soon-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: #f59e0b;
background: rgba(245, 158, 11, 0.1);
padding: 2px 10px;
border-radius: 20px;
margin-top: 4px;
}
/* -----------------------------------------------------------
Medical Services Circular Section
----------------------------------------------------------- */
.medical-services-section {
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.medical-services-section.space {
padding-top: 80px;
padding-bottom: 80px;
}
.section-title.text-center {
margin-bottom: 75px;
}
.sec-title.h1 {
font-size: 48px;
font-weight: 700;
margin-bottom: 10px;
}
.sec-title .inner-text {
color: var(--theme-color2, #3779b9);
}
.sec-text {
font-size: 16px;
color: var(--getizy-text, #7F7D86);
margin-bottom: 20px;
}
.sec-icon2 img {
max-width: 100%;
}
@media (min-width: 767px) {
.service-circle {
position: relative;
width: 800px;
height: 800px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 50%;
}
.service-circle__lines .line {
background-color: #f5f7ff;
width: 20px;
height: 900px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
z-index: 2;
}
.service-circle__lines .line:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg);
}
.service-circle__lines .line:nth-child(3) {
transform: translate(-50%, -50%) rotate(90deg);
}
.service-circle__lines .line:nth-child(4) {
transform: translate(-50%, -50%) rotate(150deg);
}
.service-circle__menu {
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
}
.service-circle__menu ul {
position: absolute;
width: 800px;
height: 800px;
padding: 0;
list-style: none;
border-radius: 50%;
overflow: hidden;
}
.service-circle__menu li {
position: absolute;
top: -84px;
left: -84px;
width: 484px;
height: 484px;
transform-origin: 100% 100%;
overflow: hidden;
transform: rotate(var(--rotate-item, 0)) skew(30deg);
}
.service-circle__menu li:nth-child(1) {
--rotate-item: 0deg;
--rotate-icon: -300deg;
}
.service-circle__menu li:nth-child(2) {
--rotate-item: 60deg;
--rotate-icon: 0deg;
}
.service-circle__menu li:nth-child(3) {
--rotate-item: 120deg;
--rotate-icon: -60deg;
--icon-top: 34%;
--icon-left: 46%;
}
.service-circle__menu li:nth-child(4) {
--rotate-item: 180deg;
--rotate-icon: -120deg;
--icon-left: 46%;
}
.service-circle__menu li:nth-child(5) {
--rotate-item: 240deg;
--rotate-icon: -180deg;
--icon-left: 48%;
}
.service-circle__menu li:nth-child(6) {
--rotate-item: 300deg;
--rotate-icon: -240deg;
}
.service-circle__menu li a {
display: block;
width: 484px;
height: 484px;
margin-top: 119px;
margin-left: 119px;
background-color: #fff;
transform: skew(-30deg) rotate(-60deg);
transition: background-color 0.5s;
text-align: center;
position: relative;
}
.service-circle__menu li a img {
position: absolute;
left: var(--icon-left, 50%);
top: var(--icon-top, 35%);
transform: translate(-50%, -50%) rotate(var(--rotate-icon, -300deg));
transform-origin: 50% center;
transition: all ease 0.4s;
}
.service-circle__menu li a:hover,
.service-circle__menu li.active a {
background-color: var(--theme-color2, #3779b9);
}
.service-circle__menu li a:hover img,
.service-circle__menu li.active a img {
filter: brightness(0) invert(1);
}
.service-circle__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 425px;
height: 425px;
border-radius: 50%;
background-color: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.service-circle__item {
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
padding: 20px;
opacity: 0;
visibility: hidden;
transition: all ease 0.4s;
}
.service-circle__item.active {
opacity: 1;
visibility: visible;
}
.service-circle__title {
color: #fff;
max-width: 260px;
position: relative;
padding-bottom: 20px;
font-size: 24px;
font-weight: 600;
}
.service-circle__title:after,
.service-circle__title:before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 220px;
margin: 0 0 0 -110px;
height: 1px;
background-color: #fff;
border-radius: 10px;
opacity: 0.7;
}
.service-circle__title:after {
height: 3px;
width: 40px;
margin: 0 0 -1px -20px;
opacity: 1;
}
.service-circle__title a {
color: inherit;
text-decoration: none;
}
.service-circle__text {
color: #fff;
font-size: 15px;
max-width: 300px;
margin-top: 15px;
}
}
/* Base styles for visibility across screen sizes */
@media (max-width: 766px) {
.service-circle {
padding: 40px 0;
}
.service-circle__menu {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 15px;
margin-bottom: 30px;
}
.service-circle__menu ul {
display: contents;
}
.service-circle__menu li {
width: 80px;
height: 80px;
background: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.service-circle__menu li.active {
background: var(--theme-color2, #3779b9);
}
/* -----------------------------------------------------------
Facilities Section Nine & Ten (v2 - Exact Match)
----------------------------------------------------------- */
.facilities-main-section.space {
padding-top: 130px;
padding-bottom: 130px;
}
.service-section-nine {
position: relative;
}
.container-style8 {
max-width: 1320px;
margin: 0 auto;
padding: 0 15px;
}
.title-area-four {
margin-bottom: 49px;
}
.title-area-four .sub-title8 {
position: relative;
color: #444;
text-align: center;
font-size: 16px;
font-weight: 700;
line-height: normal;
letter-spacing: 3.2px;
text-transform: uppercase;
display: inline-block;
margin-top: 61px;
}
.title-area-four .sub-title8::before {
content: "";
position: absolute;
top: -61px;
transform: translateX(-50%);
left: 50%;
width: 41px;
height: 36px;
background-image: url(/assets/img/about/plus.svg);
background-repeat: no-repeat;
}
.title-area-four h2 {
color: #15274E;
font-size: 60px;
font-weight: 700;
line-height: normal;
}
.service-tabs {
border-radius: 10px 10px 300px 10px;
background: #27477d;
padding: 25px 25px 23px 22px;
overflow: hidden;
}
.service-tabs .nav-tabs {
border: 0;
display: flex;
flex-direction: column;
}
.service-tabs .nav-tabs .nav-link {
border: 0;
width: 100%;
text-align: left;
border-radius: 10px;
background: rgba(217, 217, 217, 0.1);
height: 60px;
line-height: 60px;
padding: 0 27px;
margin-bottom: 10px;
color: #fff;
font-size: 18px;
font-weight: 700;
line-height: normal;
transition: all 0.4s ease;
}
.service-tabs .nav-tabs .nav-link:hover,
.service-tabs .nav-link.active {
background-color: #07ccec;
color: #fff;
}
.service-tabs .nav-link.active i,
.service-tabs .nav-tabs .nav-link:hover i {
color: #fff;
}
.service-tabs .nav-tabs .nav-link i {
position: relative;
font-size: 14px;
top: -1px;
margin-right: 15px;
color: rgba(255, 255, 255, 0.5);
}
.service-tab-content {
position: relative;
border-radius: 300px 10px 10px 10px;
background: #FFF;
padding: 68px 88px 71px 306px;
min-height: 500px;
}
.service-tab-content .title {
color: #15274E;
font-size: 35px;
font-weight: 700;
line-height: normal;
}
.service-tab-content p {
color: #444;
font-size: 18px;
font-weight: 400;
line-height: 32px;
margin-bottom: 23px;
}
.ser-list-nine {
padding-left: 0;
list-style: none;
margin-bottom: 30px;
}
.ser-list-nine li {
position: relative;
color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px;
padding-left: 28px;
margin-bottom: 20px;
}
.ser-list-nine li::before {
content: "";
position: absolute;
top: 6px;
left: 0;
width: 14px;
height: 14px;
border-radius: 50px;
background-color: #07ccec;
}
.ser-btn-nine {
color: #000;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 28px;
border-bottom: 2px solid #07ccec;
display: inline-block;
text-decoration: none;
}
.service-tab-content .ser-img-nine {
position: absolute;
top: 51px;
left: -230px;
margin: 20px;
width: 426px;
height: 426px;
border-radius: 100%;
}
.service-tab-content .ser-img-nine::before {
content: "";
position: absolute;
top: -20px;
left: -20px;
width: 466px;
height: 466px;
border: 5px solid var(--theme-color4, #3779b9);
border-radius: 50%;
}
.service-tab-content .ser-img-nine>img {
border-radius: 50%;
width: 100%;
height: 100%;
object-fit: cover;
}
.service-tab-content .ser-img-nine .icon-box {
position: absolute;
top: 33px;
right: -18px;
width: 124px;
height: 124px;
line-height: 124px;
text-align: center;
border-radius: 50%;
background-color: #07ccec;
display: flex;
align-items: center;
justify-content: center;
}
.service-tab-content .ser-img-nine .icon-box::before {
content: "\f067";
position: absolute;
top: -50px;
right: -11px;
font-family: "Font Awesome 5 Pro";
font-weight: 900;
color: var(--theme-color4, #3779b9);
}
.outer-box {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
background: #fff;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
margin-top: 50px;
}
.service-block-ten {
display: flex;
align-items: center;
gap: 20px;
padding: 10px;
}
.ser-icon-ten {
width: 60px;
height: 60px;
flex-shrink: 0;
}
.ser-content-ten .title {
font-size: 32px;
font-weight: 700;
color: #15274E;
margin: 0;
}
.ser-content-ten .title span {
font-size: 20px;
}
.ser-content-ten span {
color: #7F7D86;
font-size: 15px;
}
@media (max-width: 1199px) {
.service-tab-content {
padding: 50px 40px 50px 250px;
margin-left: 50px;
}
}
@media (max-width: 991px) {
.service-tab-content {
border-radius: 20px;
padding: 40px;
margin-left: 0;
margin-top: 300px;
}
.service-tab-content .ser-img-nine {
top: -250px;
left: 50%;
transform: translateX(-50%);
width: 300px;
height: 300px;
margin: 0;
}
.service-tab-content .ser-img-nine::before {
width: 340px;
height: 340px;
}
.service-tab-content .ser-img-nine .icon-box {
width: 80px;
height: 80px;
top: 10px;
right: -10px;
}
}
}
.service-circle__menu li.active img {
filter: brightness(0) invert(1);
}
.service-circle__center {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
padding: 40px 20px;
border-radius: 20px;
text-align: center;
color: #fff;
}
.service-circle__item {
display: none;
}
.service-circle__item.active {
display: block;
}
.service-circle__title {
color: #fff;
font-size: 22px;
margin-bottom: 15px;
}
.service-circle__text {
color: #fff;
font-size: 14px;
}
.service-circle__lines {
display: none;
}
/* -----------------------------------------------------------
About Two Section
----------------------------------------------------------- */
:root {
--pelocis-base: #3779b9;
--pelocis-black: #1a1f2b;
--pelocis-white: #fff;
--pelocis-border-color: #DDDDDD;
--pelocis-text-dark: #636363;
--pelocis-font: inherit;
--pelocis-heading-font: inherit;
}
.about-two {
position: relative;
padding: 80px 0;
border-bottom: 1px solid var(--pelocis-border-color, #DDDDDD);
overflow: hidden;
margin: 80px 0;
}
.about-two__shape {
width: 600px;
height: 100%;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);
position: absolute;
left: 0;
top: 0;
z-index: -1;
}
.about-two__shape__two {
position: absolute;
left: 50px;
bottom: 50px;
width: 250px;
opacity: 0.2;
animation: messageMove 2s linear 0s infinite;
z-index: -1;
filter: brightness(0) invert(1);
}
.about-two__shape__three {
position: absolute;
right: 0;
bottom: 70px;
animation: zumpBottom 2s linear 0s infinite;
z-index: -1;
}
.about-two__img {
position: relative;
display: block;
border: 15px solid var(--pelocis-white, #fff);
border-radius: 50%;
float: right;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-right: 50px;
z-index: 2;
}
.about-two__img img {
max-width: 500px;
border-radius: 50%;
width: 100%;
}
@media (max-width: 1199px) {
.about-two__img {
/* float: none; */
margin-bottom: 50px;
}
}
@media (max-width: 1199px) {
.about-two__shape {
display: none;
}
.about-two {
margin: 0px 0px;
}
}
@media (max-width: 1199px) and (min-width: 992px) {
.about-two__img {
right: 170px;
}
}
.about-two__content {
position: relative;
}
.sec-title {
padding-bottom: 20px;
position: relative;
margin-bottom: 30px;
}
.about-two__dot-circle {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 26px;
height: 26px;
border: 2px solid #3779b9;
border-radius: 50%;
display: block;
}
.about-two__dot-circle::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: #3779b9;
border-radius: 50%;
}
.sec-title__shape {
position: relative;
display: inline-block;
}
.sec-title__shape::before {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #3779b9);
display: block;
}
.sec-title__shape::after {
content: "";
width: 12px;
height: 12px;
background-color: var(--pelocis-black, #1a1f2b);
border: 1px solid var(--pelocis-white, #fff);
display: block;
position: absolute;
bottom: -3px;
right: -3px;
}
.sec-title__tagline {
margin: 0;
color: var(--pelocis-base, #3779b9);
font-size: 18px;
line-height: 16px;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.sec-title__title {
margin: 0;
font-size: 35px;
color: var(--pelocis-black, #1a1f2b);
font-weight: bold;
line-height: 46px;
margin-top: 6px;
}
.about-two__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin: 0 0 20px;
}
.about-two__list {
padding: 0;
margin: 0;
list-style: none;
}
@media (min-width: 1200px) {
.about-two__list li {
padding-right: 10px;
}
}
.about-two__list li {
display: flex;
align-items: center;
gap: 26px;
border-left: 2px solid var(--pelocis-black, #1a1f2b);
padding-left: 23px;
margin-bottom: 30px;
position: relative;
transition: all 500ms ease;
}
.about-two__list li::before {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
background-color: var(--pelocis-base, #3779b9);
transition: width 500ms ease;
}
.about-two__list li::after {
content: "";
width: 0;
height: 2px;
position: absolute;
top: 0;
left: 0;
background-color: var(--pelocis-base, #3779b9);
transition: width 500ms ease;
}
.about-two__list li:hover::after {
width: 47px;
}
.about-two__list li span {
display: none;
}
.about-two__list__icon-box {
position: relative;
width: 70px;
height: 70px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.about-two__list__circle {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: contain;
animation: rotate 15s linear infinite;
}
.about-two__list__icon {
position: relative;
z-index: 1;
width: 50px;
height: 50px;
object-fit: contain;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
[class^="icon-"],
[class*=" icon-"] {
font-family: 'icomoon' !important;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-social-care:before {
content: "\e92f";
}
.about-two__list__title {
font-size: 22px;
font-weight: 500;
line-height: 26px;
margin-bottom: 5px;
}
.about-two__list__text {
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 0;
}
.about-two__author {
padding: 30px 0 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
border-top: 1px solid var(--pelocis-border-color);
}
.about-two__author__img img {
border-radius: 50%;
}
.about-two__author__title {
font-size: 18px;
font-weight: 700;
margin: 0;
}
.about-two__author__text {
font-size: 15px;
color: var(--pelocis-text-dark);
margin: 0;
}
.about-two__author__signature {
font-family: 'Mrs Saint Delafield', cursive;
font-size: 40px;
color: var(--pelocis-black);
}
@keyframes messageMove {
0% {
transform: translateX(0px);
}
50% {
transform: translateX(10px);
}
100% {
transform: translateX(0px);
}
}
@keyframes zumpBottom {
0% {
transform: translate3d(0px, 0px, 0px);
}
50% {
transform: translate3d(0px, 10px, 0px);
}
100% {
transform: translate3d(0px, 0px, 0px);
}
}
/* -----------------------------------------------------------
Medical Services Section (Circular Menu - Refined v2)
----------------------------------------------------------- */
.medical-services-section {
background-size: cover;
background-position: center;
position: relative;
z-index: 1;
}
.medical-services-section.space {
padding-top: 80px;
padding-bottom: 80px;
}
.section-title.text-center {
margin-bottom: 75px;
}
.sec-icon2 {
margin-top: 15px;
}
@media (min-width: 767px) {
.service-circle {
position: relative;
width: 800px;
height: 800px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
border-radius: 50%;
}
}
@media (min-width: 767px) {
.service-circle__lines .line {
background-color: #f5f7ff;
width: 20px;
height: 900px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
z-index: 2;
}
.service-circle__lines .line:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg);
}
.service-circle__lines .line:nth-child(3) {
transform: translate(-50%, -50%) rotate(90deg);
}
}
@media (min-width: 767px) {
.service-circle__menu {
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
}
.service-circle__menu ul {
position: absolute;
width: 800px;
height: 800px;
padding: 0;
list-style: none;
border-radius: 50%;
overflow: hidden;
}
.service-circle__menu li {
position: absolute;
top: -84px;
left: -84px;
width: 484px;
height: 484px;
transform-origin: 100% 100%;
overflow: hidden;
transform: rotate(var(--rotate-item, 0)) skew(30deg);
}
.service-circle__menu li:nth-child(2) {
--rotate-item: 60deg;
--rotate-icon: 0;
}
.service-circle__menu li:nth-child(3) {
--rotate-item: 120deg;
--rotate-icon: -60deg;
--icon-top: 34%;
--icon-left: 46%;
}
.service-circle__menu li:nth-child(4) {
--rotate-item: 180deg;
--rotate-icon: -120deg;
--icon-left: 46%;
}
.service-circle__menu li:nth-child(5) {
--rotate-item: 240deg;
--rotate-icon: -180deg;
--icon-left: 48%;
}
.service-circle__menu li:nth-child(6) {
--rotate-item: 300deg;
--rotate-icon: -240deg;
}
.service-circle__menu li a {
display: block;
width: 484px;
height: 484px;
margin-top: 119px;
margin-left: 119px;
background-color: #fff;
transform: skew(-30deg) rotate(-60deg);
transition: background-color 0.5s;
text-align: center;
}
.service-circle__menu li a:hover,
.service-circle__menu li.active a {
background-color: var(--theme-color2, #3779b9);
}
.service-circle__menu li img {
position: absolute;
left: var(--icon-left, 50%);
top: var(--icon-top, 35%);
transform: translate(-50%, -50%) rotate(var(--rotate-icon, -300deg));
transform-origin: 50% center;
display: block;
transition: all ease 0.4s;
}
.service-circle__menu li a:hover img,
.service-circle__menu li.active a img {
filter: brightness(0) invert(1);
}
}
@media (min-width: 767px) {
.service-circle__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 425px;
height: 425px;
border-radius: 50%;
background-color: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
text-align: center;
}
.service-circle__item {
position: absolute;
left: 47px;
top: 135px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
border-radius: 50%;
padding: 20px;
text-align: center;
transition: all ease 0.4s;
opacity: 0;
visibility: hidden;
}
.service-circle__item.active {
opacity: 1;
visibility: visible;
}
.service-circle__title {
color: #fff;
max-width: 260px;
position: relative;
padding-bottom: 20px;
font-size: 24px;
font-weight: 700;
margin-bottom: 20px;
}
.service-circle__title:after,
.service-circle__title:before {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 220px;
margin: 0 0 0 -110px;
height: 1px;
background-color: #fff;
border-radius: 10px;
opacity: 0.7;
}
.service-circle__title:after {
height: 3px;
width: 40px;
margin: 0 0 -1px -20px;
opacity: 1;
}
.service-circle__title a {
color: inherit;
text-decoration: none;
}
.service-circle__text {
color: #fff;
font-size: 16px;
line-height: 1.6;
}
}
@keyframes g {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
/* -----------------------------------------------------------
Why Choose Us Section (WhyChooseTwo)
----------------------------------------------------------- */
.why-choose-two {
position: relative;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
counter-reset: count;
}
.why-choose-two__shape-three {
position: absolute;
left: 0;
bottom: 0;
}
.why-choose-two__content {
padding-top: 80px;
padding-bottom: 80px;
}
/* .why-choose-two .sec-title {
padding-bottom: 20px;
} */
.why-choose-two__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: #fff;
margin-bottom: 25px;
}
.why-choose-two__list {
padding: 0;
list-style: none;
margin-bottom: 0;
}
.why-choose-two__item {
background-color: var(--pelocis-white, #fff);
display: flex;
align-items: center;
padding: 10px;
position: relative;
overflow: hidden;
margin-bottom: 30px;
transition: all 500ms ease;
counter-increment: count;
border-radius: 10px;
}
.why-choose-two__item::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 63px;
height: 100%;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(100% 0%, 48% 50%, 100% 100%, 0% 100%, 0 48%, 0% 0%);
transition: all 500ms ease;
}
.why-choose-two__count {
transition: all 500ms ease;
transition-delay: 200ms;
font-size: 40px;
font-weight: 700;
line-height: 48px;
color: var(--pelocis-white, #fff);
background-color: var(--pelocis-white, #fff);
font-family: var(--pelocis-heading-font);
-webkit-text-stroke: 1px var(--pelocis-black, #1a1f2b);
position: absolute;
left: -200px;
height: 100%;
width: 160px;
display: flex;
padding-left: 30px;
align-items: center;
-webkit-mask: url("data:image/svg+xml;utf8,");
mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top right;
mask-position: top right;
-webkit-mask-size: auto;
mask-size: auto;
}
.why-choose-two__count:before {
content: counters(count, ".", decimal-leading-zero);
display: inline-block;
position: relative;
}
.icon-idea:before {
content: "\e927";
}
.icon-cognitive:before {
content: "\e904";
}
.icon-family-life:before {
content: "\e90b";
}
[class^="icon-"],
[class*=" icon-"],
.why-choose-two__icon span {
/* font-family: inherit !important; */
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.why-choose-two__icon {
width: 90px;
height: 88px;
border: 3px solid var(--pelocis-white, #fff);
display: flex;
justify-content: center;
align-items: center;
background-color: var(--pelocis-black, #1a1f2b);
border-radius: 10px;
z-index: 1;
flex-shrink: 0;
font-size: 44px;
color: var(--pelocis-white, #fff);
transition: all 500ms ease;
}
.why-choose-two__item__content {
padding-left: 20px;
transition: all 500ms ease;
}
.why-choose-two__item__title {
font-size: 22px;
font-weight: 500;
line-height: 26.4px;
color: var(--pelocis-black, #1a1f2b);
margin-bottom: 6px;
transition: all 500ms ease;
}
.why-choose-two__item__text {
font-size: 16px;
font-weight: 400;
line-height: 25px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 0;
transition: all 500ms ease;
}
.why-choose-two__item:last-child {
margin-bottom: 0;
}
.why-choose-two .pelocis-stretch-element-inside-column {
position: relative;
height: 100%;
left: 50px;
}
.why-choose-two__shape-one {
-webkit-mask: url("data:image/svg+xml;utf8,");
mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: top left;
mask-position: top left;
-webkit-mask-size: cover;
mask-size: cover;
max-width: 987px;
position: relative;
z-index: 12;
}
.why-choose-two__shape-one img {
max-width: 100%;
height: 100%;
min-height: 869px;
object-fit: cover;
}
.why-choose-two__shape-two {
-webkit-mask: url("data:image/svg+xml;utf8,");
mask: url("data:image/svg+xml;utf8,");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: bottom left;
mask-position: bottom left;
-webkit-mask-size: cover;
mask-size: cover;
max-width: 987px;
height: 100%;
width: 100%;
background-color: var(--pelocis-base, #3779b9);
position: absolute;
top: 0;
right: 25px;
z-index: 11;
}
/* Hover Effects Refined */
.why-choose-two__item:hover {
background-color: var(--pelocis-black, #1a1f2b);
padding-left: 130px;
}
.why-choose-two__item:hover .why-choose-two__count {
left: 0;
}
.why-choose-two__item:hover .why-choose-two__icon {
background-color: var(--pelocis-base, #3779b9);
transform: translateX(-30px);
}
.why-choose-two__item:hover .why-choose-two__item__title,
.why-choose-two__item:hover .why-choose-two__item__text {
color: var(--pelocis-white, #fff);
}
/* ═══════════════════════════════════════════════════════════
Our History Section (HistoryTwo)
═══════════════════════════════════════════════════════════ */
.history-two {
position: relative;
padding: 80px 0 80px;
counter-reset: count;
}
.history-two__bg {
width: 100%;
height: 737px;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
position: absolute;
left: 0;
bottom: 0;
}
.history-two__bg::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
/* background-color: rgba(var(--pelocis-black-rgb, 34, 34, 34), 0.94); */
}
.history-two .container {
max-width: 988px;
}
.history-two__wrapper {
border: 1px solid var(--pelocis-border-color, #DDDDDD);
position: relative;
padding-bottom: 50px;
border-radius: 10px;
background-color: var(--pelocis-white, #fff);
z-index: 1;
}
.history-two__wrapper::after {
content: "";
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background-color: var(--pelocis-border-color, #DDDDDD);
}
.history-two__wrapper .col-lg-6 {
padding: 0;
}
.history-two__wrapper .col-lg-6:first-child .history-two__border {
margin-top: 79.5px;
}
.history-two__border {
position: relative;
background: linear-gradient(to top, var(--pelocis-base, #3779b9) 50%, var(--pelocis-black, #1a1f2b) 50%) border-box;
background-origin: border-box;
background-clip: content-box, border-box;
margin-left: 70px;
margin-right: 88px;
margin-bottom: 0px;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
margin-top: 59.5px;
}
.history-two__border--left {
margin-left: 88px;
margin-right: 70px;
}
.history-two__content {
position: relative;
padding-top: 50px;
padding-bottom: 20px;
padding-right: 10px;
padding-left: 30px;
background-color: var(--pelocis-white, #fff);
margin: 6px;
border-radius: 10px;
counter-increment: count;
width: 100%;
}
.history-two__content::before {
content: "";
position: absolute;
right: -40px;
top: 43%;
transform: translateY(-50%);
clip-path: polygon(0 0, 0% 100%, 100% 100%);
width: 40px;
height: 35px;
background-color: var(--pelocis-black, #1a1f2b);
}
.history-two__content::after {
content: "";
position: absolute;
right: -40px;
top: 56.6%;
transform: translateY(-50%);
clip-path: polygon(0 0, 100% 0, 0 100%);
width: 40px;
height: 35px;
background-color: var(--pelocis-base, #3779b9);
}
.history-two__content--left::before {
right: auto;
left: -40px;
clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.history-two__content--left::after {
left: -40px;
right: auto;
clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.history-two__content__count {
width: 65px;
height: 65px;
border-radius: 8px;
background-color: var(--pelocis-black, #1a1f2b);
color: var(--pelocis-white, #fff);
font-size: 28px;
font-weight: 700;
line-height: 46px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
font-family: var(--pelocis-heading-font);
top: -35px;
left: 30px;
filter: drop-shadow(0px 0px 40px rgba(0, 0, 0, 0.15));
}
.history-two__content__count::before {
content: counters(count, ".", decimal-leading-zero);
position: relative;
display: inline-block;
}
.history-two__content__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 14px;
}
.history-two__content__title {
font-size: 22px;
font-weight: 700;
line-height: 26px;
color: var(--pelocis-black, #1a1f2b);
margin-bottom: 2px;
}
.history-two__content__date {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
}
.history-two__images {
display: flex;
align-items: center;
gap: 30px;
position: relative;
height: 100%;
padding: 45px;
padding-top: 29.5px;
padding-left: 40px;
padding-bottom: 0;
}
.history-two__images--right {
padding-left: 69px;
padding-right: 0;
}
.history-two__images::after {
content: "";
position: absolute;
top: 58%;
left: -8px;
transform: translateY(-50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: var(--pelocis-base, #3779b9);
z-index: 11;
}
.history-two__images--right::after {
left: auto;
right: -8px;
}
.history-two__images img {
border-radius: 12px;
max-width: 100%;
}
.history-two__images__date {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-black, #1a1f2b);
margin-top: 20px;
}
.history-two__btn {
text-align: center;
margin-top: 50px;
}
.history-two__wrapper .col-lg-6:first-child+.col-lg-6 .history-two__images {
padding-top: 49.5px;
}
.history-two__wrapper .col-lg-6:first-child+.col-lg-6 .history-two__images::after {
top: 62%;
}
@media (max-width: 767px) {
.history-two__wrapper {
border: none;
padding-bottom: 0;
background-color: transparent;
}
.history-two__wrapper::after {
display: none;
}
.history-two__border,
.history-two__border--left {
margin: 25px 0 30px 0 !important;
}
.history-two__content::before,
.history-two__content::after {
display: none !important;
}
.history-two__images {
padding: 0 !important;
margin-bottom: 40px;
justify-content: center;
}
.history-two__images--right {
padding: 0 !important;
}
.history-two__images::after {
display: none !important;
}
.history-two__images img {
margin: 0 auto;
display: block;
}
.history-two__images {
display: none !important;
}
}
@media (max-width: 767px) {
.history-two__border,
.history-two__border--left {
margin-bottom: 30px !important;
}
}
/*
About Three Section (AboutThree)
*/
.about-three {
position: relative;
padding: 80px 0;
overflow: hidden;
}
.about-three__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 400px;
background: linear-gradient(90deg, var(--pelocis-base, #3779b9) 45%, rgba(34, 34, 34, 0.95) 100%);
}
.about-three__shape-one {
position: absolute;
left: -10px;
bottom: 0;
}
.about-three__shape-two {
position: absolute;
right: 11%;
top: 85px;
}
@keyframes leafMove {
0% {
transform: rotate(0deg) translateX(0);
}
50% {
transform: rotate(-2.3568deg) translateX(5.892px);
}
100% {
transform: rotate(0deg) translateX(0);
}
}
.about-three__shape-two img {
animation: leafMove 2s linear 0s infinite;
}
.about-three .container {
position: relative;
}
.about-three__content {
position: relative;
width: 100%;
}
/* .about-three__content .sec-title {
padding-bottom: 21px;
} */
.about-three__content .sec-title__shape::before {
background-color: var(--pelocis-black, #1a1f2b);
}
.about-three__content .sec-title__shape::after {
background-color: var(--pelocis-white, #fff);
}
.about-three__content .sec-title__title,
.about-three__content .sec-title__tagline {
color: var(--pelocis-white, #fff);
}
@media (min-width: 1200px) {
.about-three__text {
padding-right: 70px;
}
}
.about-three__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-white, #fff);
margin: 0 0 -10px;
}
@media (min-width: 1200px) {
.about-three__card {
margin-right: -42px;
}
}
.about-three__card {
display: flex;
margin-bottom: 26px;
}
.about-three__card__list {
width: 65.5%;
padding: 0;
list-style: none;
margin-bottom: 0;
}
.about-three__card__item {
display: flex;
align-items: center;
gap: 20px;
padding: 30px 0;
/* border-bottom: 1px solid var(--pelocis-border-color, #DDDDDD); */
/* margin-bottom: 26px; */
}
.about-three__card__item h3 {
font-size: 22px;
margin-bottom: 0;
color: #1a1f2b;
}
.about-three__card__icon {
width: 87px;
height: 87px;
background-color: #1a1f2b;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pelocis-base, #3779b9);
font-size: 45px;
transition: all 400ms ease;
}
.about-three__card__list li:last-child {
display: flex;
align-items: center;
font-size: 16px;
color: #1a1f2b;
}
.about-three__card__exp {
width: 34.5%;
top: 10px;
padding: 52px 10px 34px;
background-color: var(--pelocis-black, #1a1f2b);
position: relative;
z-index: 2;
text-align: center;
max-height: 213px;
margin-left: 16px;
margin-bottom: 16px;
}
.about-three__card__exp__number {
font-size: 70px;
font-weight: 500;
line-height: 26px;
color: var(--pelocis-white, #fff);
display: flex;
align-items: center;
justify-content: center;
margin: 0 0 24px;
}
.about-three__card__exp__text {
font-size: 22px;
font-weight: 500;
line-height: 30px;
text-align: center;
color: var(--pelocis-white, #fff);
margin-bottom: 0;
}
.about-three__card__exp::after {
content: "";
position: absolute;
left: -16px;
bottom: -14px;
width: 108%;
height: 107%;
border-left: 6px solid var(--pelocis-base, #3779b9);
border-bottom: 6px solid var(--pelocis-base, #3779b9);
}
.about-three__content__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin: 0 0 37px;
}
.about-three__content__text span {
color: var(--pelocis-base, #3779b9);
font-weight: 600;
}
.about-three__img {
position: relative;
border: 12px solid var(--pelocis-white, #fff);
border-radius: 10px;
display: inline-block;
margin-top: 11px;
}
.about-three__img img {
border-radius: 10px;
width: 100%;
}
/* -----------------------------------------------------------
Home Contact One Section
----------------------------------------------------------- */
.home-contact-one {
/* background-color: var(--pelocis-black, #1a1f2b); */
padding: 80px 0 80px;
position: relative;
z-index: 1;
}
.home-contact-one__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.home-contact-one .home-contact__card {
padding: 32px;
background-color: var(--pelocis-base, #3779b9);
margin-right: 45px;
border-radius: 40px;
position: relative;
margin-top: 5px;
z-index: 10;
}
.home-contact-one .home-contact__card__content {
background-color: var(--pelocis-white, #fff);
border-radius: 40px;
padding: 70px 80px;
position: relative;
z-index: 2;
}
.home-contact-one .home-contact__card__list {
list-style: none;
padding: 0;
margin: 0;
}
.home-contact-one .home-contact__card__list li {
display: flex;
align-items: center;
gap: 15px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
margin-bottom: 30px;
border-radius: 10px;
padding: 28px 0px;
padding-right: 38px;
padding-left: 55px;
position: relative;
transition: all 500ms ease;
background: #fff;
}
.home-contact-one .home-contact__card__list li:hover {
border-color: var(--pelocis-base, #3779b9);
}
.home-contact-one .home-contact__card__list li span {
font-size: 30px;
color: #1B1A1A;
}
.home-contact-one .home-contact__card__list__title {
font-size: 18px;
font-weight: 700;
line-height: 21px;
color: #1B1A1A;
margin-bottom: 4px;
}
.home-contact-one .home-contact__card__list__text {
font-size: 16px;
font-weight: 500;
line-height: 25px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 0;
}
.home-contact-one .home-contact__card__list__text a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95% / 0px 1px no-repeat;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__text a {
color: var(--pelocis-base, #3779b9);
background-size: 100% 1px;
}
.home-contact-one .home-contact__card__list__shape {
width: 39px;
height: 55px;
clip-path: polygon(78% 48%, 0 0, 1% 100%);
background-color: var(--pelocis-base, #3779b9);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(50%);
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__shape {
opacity: 1;
visibility: visible;
}
.home-contact-one .home-contact__card__shape-one {
width: 349px;
height: 89%;
position: absolute;
left: -200px;
top: 50%;
transform: translateY(-50%);
background-color: #1a1f2b;
border-radius: 90px 0px 0px 90px;
z-index: -1;
}
.home-contact-one .home-contact__card__shape-three {
position: absolute;
left: 50px;
bottom: 57px;
z-index: 5;
}
.home-contact-one .home-contact__card__shape-two {
position: absolute;
left: -136px;
bottom: 32px;
z-index: 15;
max-width: 400px;
}
.home-contact-one .appointment__form {
position: relative;
}
.home-contact-one .appointment__form__title {
position: relative;
}
.home-contact-one .appointment__form__top .sec-title__shape::after {
background-color: var(--pelocis-white, #fff);
}
.home-contact-one .appointment__form__top .sec-title__title {
color: var(--pelocis-white, #fff);
}
.home-contact-one .appointment__form__title__shape {
position: absolute;
right: 26px;
top: -20px;
}
.home-contact-one .appointment__form__range__value,
.home-contact-one .appointment__form__lable,
.home-contact-one .appointment__form__range__lable,
.home-contact-one .appointment__form__text {
color: var(--pelocis-white, #fff);
}
@media (min-width: 1200px) {
.home-contact-one .appointment__form__text {
padding-right: 50px;
}
}
.home-contact-one .appointment__form__text {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 13px;
}
.appointment__form__lable {
font-size: 16px;
font-weight: 500;
line-height: 26px;
margin-bottom: 11px;
display: block;
cursor: pointer;
}
.appointment__form__range__input {
width: 100%;
height: 4px;
background: var(--pelocis-base, #3779b9);
border-radius: 5px;
outline: none;
appearance: none;
-webkit-appearance: none;
margin-bottom: 25px;
}
.appointment__form__range__input::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border: 2px solid var(--pelocis-base, #3779b9);
border-radius: 50%;
cursor: pointer;
}
/* -----------------------------------------------------------
Home Contact One Section
----------------------------------------------------------- */
.home-contact-one {
/* background-color: var(--pelocis-black, #1a1f2b); */
padding: 80px 0 80px;
position: relative;
z-index: 1;
}
.home-contact-one__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.home-contact-one .home-contact__card {
padding: 32px;
background-color: var(--pelocis-base, #3779b9);
margin-right: 45px;
border-radius: 40px;
position: relative;
margin-top: 5px;
z-index: 10;
}
.home-contact-one .home-contact__card__content {
background-color: var(--pelocis-white, #fff);
border-radius: 40px;
padding: 70px 80px;
position: relative;
z-index: 2;
}
.home-contact-one .home-contact__card__list {
list-style: none;
padding: 0;
margin: 0;
}
.home-contact-one .home-contact__card__list li {
display: flex;
align-items: center;
gap: 15px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
margin-bottom: 30px;
border-radius: 10px;
padding: 28px 0px;
padding-right: 38px;
padding-left: 55px;
position: relative;
transition: all 500ms ease;
background: #fff;
}
.home-contact-one .home-contact__card__list li:hover {
border-color: var(--pelocis-base, #3779b9);
}
.home-contact-one .home-contact__card__list li span {
font-size: 30px;
color: #1B1A1A;
}
.home-contact-one .home-contact__card__list li span::before {
color: #1B1A1A;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list__title {
font-size: 18px;
font-weight: 700;
line-height: 21px;
color: #1B1A1A;
margin-bottom: 4px;
}
.home-contact-one .home-contact__card__list__text {
font-size: 16px;
font-weight: 500;
line-height: 25px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 0;
}
.home-contact-one .home-contact__card__list__text a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95% / 0px 1px no-repeat;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__text a {
color: var(--pelocis-base, #3779b9);
background-size: 100% 1px;
}
.home-contact-one .home-contact__card__list__shape {
width: 39px;
height: 55px;
clip-path: polygon(78% 48%, 0 0, 1% 100%);
background-color: var(--pelocis-base, #3779b9);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(50%);
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__shape {
opacity: 1;
visibility: visible;
}
.home-contact-one .home-contact__card__shape-one {
width: 349px;
height: 89%;
position: absolute;
left: -200px;
top: 50%;
transform: translateY(-50%);
background-color: #1a1f2b;
border-radius: 90px 0px 0px 90px;
z-index: -1;
}
.home-contact-one .home-contact__card__shape-three {
position: absolute;
left: 50px;
bottom: 57px;
z-index: 5;
}
.home-contact-one .home-contact__card__shape-two {
position: absolute;
left: -136px;
bottom: 32px;
z-index: 15;
max-width: 400px;
}
.home-contact-one .appointment__form {
position: relative;
}
.home-contact-one .appointment__form .sec-title {
padding-bottom: 21px;
}
.home-contact-one .appointment__form__title {
position: relative;
}
.home-contact-one .appointment__form__top .sec-title__shape::after {
background-color: var(--pelocis-white, #fff);
bottom: -3px;
right: -3px;
}
.home-contact-one .appointment__form__top .sec-title__title {
color: var(--pelocis-white, #fff);
}
.home-contact-one .appointment__form__title__shape {
position: absolute;
right: 26px;
top: -20px;
}
.home-contact-one .appointment__form__range__value,
.home-contact-one .appointment__form__lable,
.home-contact-one .appointment__form__range__lable,
.home-contact-one .appointment__form__text {
color: var(--pelocis-white, #fff);
}
@media (min-width: 1200px) {
.home-contact-one .appointment__form__text {
padding-right: 50px;
}
}
.home-contact-one .appointment__form__text {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 13px;
}
.appointment__form__lable {
font-size: 16px;
font-weight: 500;
line-height: 26px;
margin-bottom: 11px;
display: block;
cursor: pointer;
}
.appointment__form__range__input {
width: 100%;
height: 4px;
background: var(--pelocis-base, #3779b9);
border-radius: 5px;
outline: none;
appearance: none;
-webkit-appearance: none;
margin-bottom: 25px;
}
.appointment__form__range__input::-webkit-slider-thumb {
appearance: none;
-webkit-appearance: none;
width: 16px;
height: 16px;
background: #fff;
border: 2px solid var(--pelocis-base, #3779b9);
border-radius: 50%;
cursor: pointer;
}
/* -----------------------------------------------------------
Home Contact One Section
----------------------------------------------------------- */
.home-contact-one {
/* background-color: var(--pelocis-black, #1a1f2b); */
padding: 80px 0 80px;
position: relative;
z-index: 1;
}
.home-contact-one__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.home-contact-one .home-contact__card {
padding: 32px;
background-color: var(--pelocis-base, #3779b9);
margin-right: 45px;
border-radius: 40px;
position: relative;
margin-top: 5px;
z-index: 10;
}
.home-contact-one .home-contact__card__content {
background-color: var(--pelocis-white, #fff);
border-radius: 40px;
padding: 70px 80px;
position: relative;
z-index: 2;
}
.home-contact-one .home-contact__card__list {
list-style: none;
padding: 0;
margin: 0;
}
.home-contact-one .home-contact__card__list li {
display: flex;
align-items: center;
gap: 15px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
margin-bottom: 30px;
border-radius: 10px;
padding: 28px 0px;
padding-right: 38px;
padding-left: 55px;
position: relative;
transition: all 500ms ease;
background: #fff;
}
.home-contact-one .home-contact__card__list li:hover {
border-color: var(--pelocis-base, #3779b9);
}
.home-contact-one .home-contact__card__list li span {
font-size: 30px;
color: #1B1A1A;
}
.home-contact-one .home-contact__card__list li span::before {
color: #1B1A1A;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list__title {
font-size: 18px;
font-weight: 700;
line-height: 21px;
color: #1B1A1A;
margin-bottom: 4px;
}
.home-contact-one .home-contact__card__list__text {
font-size: 16px;
font-weight: 500;
line-height: 25px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 0;
}
.home-contact-one .home-contact__card__list__text a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95% / 0px 1px no-repeat;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__text a {
color: var(--pelocis-base, #3779b9);
background-size: 100% 1px;
}
.home-contact-one .home-contact__card__list__shape {
width: 39px;
height: 55px;
clip-path: polygon(78% 48%, 0 0, 1% 100%);
background-color: var(--pelocis-base, #3779b9);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(50%);
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__shape {
opacity: 1;
visibility: visible;
}
.home-contact-one .home-contact__card__shape-one {
width: 349px;
height: 89%;
position: absolute;
left: -200px;
top: 50%;
transform: translateY(-50%);
background-color: #1a1f2b;
border-radius: 90px 0px 0px 90px;
z-index: -1;
}
.home-contact-one .home-contact__card__shape-three {
position: absolute;
left: 50px;
bottom: 57px;
z-index: 5;
}
.home-contact-one .home-contact__card__shape-two {
position: absolute;
left: -136px;
bottom: 32px;
z-index: 15;
max-width: 400px;
}
.home-contact-one .appointment__form {
position: relative;
}
.home-contact-one .appointment__form .sec-title {
padding-bottom: 21px;
}
.home-contact-one .appointment__form__title {
position: relative;
}
.home-contact-one .appointment__form__top .sec-title__shape::after {
background-color: var(--pelocis-white, #fff);
bottom: -3px;
right: -3px;
}
.home-contact-one .appointment__form__top .sec-title__title {
color: var(--pelocis-white, #fff);
}
.home-contact-one .appointment__form__title__shape {
position: absolute;
right: 26px;
top: -20px;
}
.home-contact-one .appointment__form__range__value,
.home-contact-one .appointment__form__lable,
.home-contact-one .appointment__form__range__lable,
.home-contact-one .appointment__form__text {
color: var(--pelocis-white, #fff);
}
@media (min-width: 1200px) {
.home-contact-one .appointment__form__text {
padding-right: 50px;
}
}
.home-contact-one .appointment__form__text {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 13px;
}
.appointment__form__lable {
font-size: 16px;
font-weight: 500;
line-height: 26px;
margin-bottom: 11px;
display: block;
cursor: pointer;
}
.appointment__form__range__input {
width: 100%;
height: 4px;
background: var(--pelocis-base, #3779b9);
border-radius: 5px;
outline: none;
-webkit-appearance: none;
appearance: none;
margin-bottom: 25px;
}
.appointment__form__range__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #fff;
border: 2px solid var(--pelocis-base, #3779b9);
border-radius: 50%;
cursor: pointer;
}
/* -----------------------------------------------------------
Home Contact One Section
----------------------------------------------------------- */
.home-contact-one {
/* background-color: var(--pelocis-black, #1a1f2b); */
padding: 80px 0 80px;
position: relative;
z-index: 1;
}
.home-contact-one__bg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
z-index: -1;
}
.home-contact-one .home-contact__card {
padding: 32px;
background-color: var(--pelocis-base, #3779b9);
margin-right: 45px;
border-radius: 40px;
position: relative;
margin-top: 5px;
z-index: 10;
}
.home-contact-one .home-contact__card__content {
background-color: var(--pelocis-white, #fff);
border-radius: 40px;
padding: 70px 80px;
position: relative;
z-index: 2;
}
.home-contact-one .home-contact__card__list {
list-style: none;
padding: 0;
margin: 0;
}
.home-contact-one .home-contact__card__list li {
display: flex;
align-items: center;
gap: 15px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
margin-bottom: 30px;
border-radius: 10px;
padding: 28px 0px;
padding-right: 38px;
padding-left: 55px;
position: relative;
transition: all 500ms ease;
background: #fff;
}
.home-contact-one .home-contact__card__list li:hover {
border-color: var(--pelocis-base, #3779b9);
}
.home-contact-one .home-contact__card__list li span {
font-size: 30px;
color: #1B1A1A;
}
.home-contact-one .home-contact__card__list__title {
font-size: 18px;
font-weight: 700;
line-height: 21px;
color: #1B1A1A;
margin-bottom: 4px;
}
.home-contact-one .home-contact__card__list__text {
font-size: 16px;
font-weight: 500;
line-height: 25px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 0;
}
.home-contact-one .home-contact__card__list__text a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95% / 0px 1px no-repeat;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__text a {
color: var(--pelocis-base, #3779b9);
background-size: 100% 1px;
}
.home-contact-one .home-contact__card__list__shape {
width: 39px;
height: 55px;
clip-path: polygon(78% 48%, 0 0, 1% 100%);
background-color: var(--pelocis-base, #3779b9);
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%) scaleY(50%);
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
}
.home-contact-one .home-contact__card__list li:hover .home-contact__card__list__shape {
opacity: 1;
visibility: visible;
}
.home-contact-one .home-contact__card__shape-one {
width: 349px;
height: 89%;
position: absolute;
left: -200px;
top: 50%;
transform: translateY(-50%);
background-color: #1a1f2b;
border-radius: 90px 0px 0px 90px;
z-index: -1;
}
.home-contact-one .home-contact__card__shape-three {
position: absolute;
left: 50px;
bottom: 57px;
z-index: 5;
}
.home-contact-one .home-contact__card__shape-two {
position: absolute;
left: -136px;
bottom: 32px;
z-index: 15;
max-width: 400px;
}
.home-contact-one .appointment__form {
position: relative;
}
.home-contact-one .appointment__form__title {
position: relative;
}
.home-contact-one .appointment__form__top .sec-title__shape::after {
background-color: var(--pelocis-white, #fff);
}
.home-contact-one .appointment__form__top .sec-title__title {
color: var(--pelocis-white, #fff);
}
.home-contact-one .appointment__form__title__shape {
position: absolute;
right: 26px;
top: -20px;
}
.home-contact-one .appointment__form__range__value,
.home-contact-one .appointment__form__lable,
.home-contact-one .appointment__form__range__lable,
.home-contact-one .appointment__form__text {
color: var(--pelocis-white, #fff);
}
@media (min-width: 1200px) {
.home-contact-one .appointment__form__text {
padding-right: 50px;
}
}
.home-contact-one .appointment__form__text {
font-size: 16px;
line-height: 26px;
font-weight: 400;
margin-bottom: 13px;
}
.appointment__form__lable {
font-size: 16px;
font-weight: 500;
line-height: 26px;
margin-bottom: 11px;
display: block;
cursor: pointer;
}
.appointment__form__range__input {
width: 100%;
height: 4px;
background: var(--pelocis-base, #3779b9);
border-radius: 5px;
outline: none;
-webkit-appearance: none;
appearance: none;
margin-bottom: 25px;
}
.appointment__form__range__input::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 16px;
height: 16px;
background: #fff;
border: 2px solid var(--pelocis-base, #3779b9);
border-radius: 50%;
cursor: pointer;
}
/*
Page Header Section
*/
.page-header {
background-color: var(--pelocis-black, #1a1f2b);
position: relative;
padding-top: 295px;
padding-bottom: 175px;
display: flex;
align-items: center;
overflow: hidden;
z-index: 1;
}
.page-header::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #1a1f2b 0%, #3779b9 60%, #1a1f2b 100%) !important;
opacity: 0.8;
z-index: -1;
}
.page-header__bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%;
}
.page-header__bg__img {
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
z-index: 1;
position: relative;
clip-path: polygon(0 0, 100% 0, 100% 100%, 19% 100%);
}
.page-header__bg__shape-1 {
position: absolute;
left: -26px;
bottom: -1px;
background-color: var(--pelocis-white, #fff);
height: 326px;
width: 337px;
clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%);
animation: moveRight 2s ease-in-out infinite alternate;
}
.page-header__bg__shape-2 {
position: absolute;
left: -8px;
bottom: 0px;
background-color: var(--pelocis-base, #1a1f2b);
height: 326px;
width: 337px;
clip-path: polygon(60% 0, 100% 0, 100% 100%, 0% 100%);
animation: moveLeft 2s ease-in-out infinite alternate;
}
.page-header .container {
position: relative;
z-index: 10;
}
.page-header__title {
font-size: 40px !important;
color: var(--pelocis-white, #fff);
font-family: var(--pelocis-heading-font);
text-transform: capitalize;
font-weight: 800;
margin-bottom: 15px;
line-height: 1.1;
}
.pelocis-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
margin: 0 !important;
margin-bottom: 13px;
padding-left: 0;
list-style: none;
}
.pelocis-breadcrumb li {
font-size: 18px;
color: var(--pelocis-white, #fff);
text-transform: capitalize;
display: flex;
align-items: center;
}
.pelocis-breadcrumb li a {
color: inherit;
display: inline-flex;
line-height: 28px;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95% / 0px 1px no-repeat;
transition: all 500ms ease;
text-decoration: none;
}
.pelocis-breadcrumb li span {
color: inherit;
display: inline-flex;
line-height: 28px;
}
.pelocis-breadcrumb li:not(:last-of-type)::after {
content: "/";
position: relative;
top: -1px;
margin-left: 10px;
margin-right: 10px;
color: var(--pelocis-base, #3779b9);
}
.pelocis-breadcrumb li:last-of-type {
color: var(--pelocis-base, #3779b9);
}
.page-header__shape {
position: absolute;
left: 20px;
bottom: 20px;
animation: zumpBottom 2s linear infinite;
opacity: 0.3;
}
@keyframes moveRight {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-10px);
}
}
@keyframes moveLeft {
0% {
transform: translateX(0);
}
100% {
transform: translateX(10px);
}
}
@keyframes zumpBottom {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
@media (min-width: 768px) {
.page-header__title {
font-size: 40px !important;
}
.pelocis-breadcrumb {
margin-bottom: 7px;
}
}
/*
FAQ Four Section
*/
.faq-four {
padding: 0 0 80px;
position: relative;
}
.faq-four::after {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 1px;
content: "";
background-color: var(--pelocis-border-color, #DDDDDD);
z-index: -1;
}
.faq-four__content {
position: relative;
/* padding: 60px 0 60px; */
}
.faq-four__image2 img {
min-height: 650px;
object-fit: cover;
max-width: 100%;
clip-path: polygon(0 0,
100% 0,
88% 50%,
100% 100%,
0 100%);
}
.faq-four__image2__icon {
width: 175px;
height: 175px;
background-color: var(--pelocis-base, #3779b9);
border: 10px solid var(--pelocis-white, #fff);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
z-index: 2;
font-size: 70px;
color: var(--pelocis-white, #fff);
}
.faq-four__image2__icon::after {
content: "";
width: calc(100% - 29px);
height: calc(100% - 29px);
border: 1px dashed var(--pelocis-white, #fff);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
z-index: -1;
animation: textRotate 15s linear 0s forwards infinite alternate;
}
/* .faq-four__content .sec-title {
padding-bottom: 21px;
} */
.faq-four__content__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin: 0 0 25px;
}
@media (min-width: 1200px) {
.faq-four__content__text {
padding-right: 70px;
}
}
.faq-one__accordion {
position: relative;
margin: 10px 0 0;
}
.faq-one__accordion .accrodion {
margin-bottom: 25px;
border-radius: 10px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
overflow: hidden;
transition: all 400ms ease;
}
.faq-one__accordion .active {
border-radius: 10px;
}
.faq-one__accordion .active .accrodion-title {
background-color: var(--pelocis-black, #1a1f2b);
}
.faq-one__accordion .accrodion-title {
padding: 12.5px 30px;
padding-left: 55px;
cursor: pointer;
position: relative;
transition: all 400ms ease;
}
.faq-one__accordion .accrodion-title h4 {
font-weight: 500;
color: var(--pelocis-black, #1a1f2b);
font-family: var(--pelocis-font);
font-size: 18px !important;
line-height: 25px;
margin: 0;
transition: all 500ms ease;
position: relative;
display: flex;
justify-content: space-between;
}
.faq-one__accordion .active .accrodion-title h4 {
color: var(--pelocis-white, #fff);
}
.faq-one__accordion .accrodion-title h4 i {
font-size: 12px;
transform: rotate(90deg);
transition: all 400ms ease;
}
.faq-one__accordion .active .accrodion-title h4 i {
transform: rotate(-90deg);
}
.faq-one__accordion .accrodion-title__shape {
width: 47px;
height: 100%;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(75% 0%, 48% 50%, 75% 100%, 0% 100%, 0 48%, 0% 0%);
position: absolute;
left: 0;
top: 0;
transition: all 400ms ease;
}
.faq-one__accordion .active .accrodion-title__shape {
opacity: 0;
visibility: hidden;
}
.faq-one__accordion .accrodion-title__icon {
width: 20px;
height: 20px;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 22px;
background-color: var(--pelocis-black, #1a1f2b);
color: var(--pelocis-white, #fff);
font-size: 10px;
transition: all 400ms ease;
opacity: 0;
visibility: hidden;
}
.faq-one__accordion .active .accrodion-title__icon {
background-color: var(--pelocis-base, #3779b9);
opacity: 1;
visibility: visible;
}
.faq-one__accordion .accrodion-content .inner {
padding: 20px 25px;
display: flex;
align-items: center;
gap: 15px;
}
.faq-one__accordion .accrodion-content__icon {
width: 77px;
height: 74px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
background-color: var(--pelocis-base, #3779b9);
color: var(--pelocis-white, #fff);
flex-shrink: 0;
font-size: 40px;
}
.faq-one__accordion .accrodion-content p {
margin: 0;
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--pelocis-text-dark, #636363);
}
.faq-four .pelocis-stretch-element-inside-column {
position: relative;
height: 100%;
}
.faq-four__image {
position: relative;
height: 100%;
}
.faq-four__image img {
min-height: 630px;
object-fit: cover;
max-width: 100%;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12% 50%);
}
.faq-four__image__icon {
width: 175px;
height: 175px;
background-color: var(--pelocis-base, #3779b9);
border: 10px solid var(--pelocis-white, #fff);
display: flex;
justify-content: center;
align-items: center;
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
border-radius: 50%;
z-index: 2;
font-size: 70px;
color: var(--pelocis-white, #fff);
}
.faq-four__image__icon::after {
content: "";
width: calc(100% - 29px);
height: calc(100% - 29px);
border: 1px dashed var(--pelocis-white, #fff);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
border-radius: 50%;
z-index: -1;
animation: textRotate 15s linear 0s forwards infinite alternate;
}
@keyframes textRotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/*
Counselling Solutions Section
*/
.counselling-solutions {
position: relative;
/* padding: 80px 0 80px; */
}
@media (max-width: 1920px) and (min-width: 1440px) {
.counselling-solutions {
padding-bottom: 90px !important;
}
}
/* .counselling-solutions .sec-title {
padding-bottom: 20px;
} */
.counselling-solutions__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 15px;
}
.counselling-solutions__text b,
.counselling-solutions__text strong {
color: var(--pelocis-base, #3779b9);
}
.counselling-solutions__list {
list-style: none;
display: flex;
align-items: center;
border-top: 1px solid var(--pelocis-border-color, #DDDDDD);
border-bottom: 1px solid var(--pelocis-border-color, #DDDDDD);
padding: 0;
margin: 30px 0 0;
}
.counselling-solutions__item {
padding: 30px 0;
display: flex;
align-items: center;
gap: 15px;
width: 50%;
}
.counselling-solutions__item:first-child {
border-right: 1px solid var(--pelocis-border-color, #DDDDDD);
}
.counselling-solutions__item__img {
width: 65px;
height: 65px;
border-radius: 50%;
overflow: hidden;
}
.counselling-solutions__item__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.counselling-solutions__item__content h3 {
font-size: 20px;
color: var(--pelocis-black, #1a1f2b);
font-weight: 700;
margin: 0;
}
.counselling-solutions__item__content p {
font-size: 16px;
margin: 0;
color: var(--pelocis-text-dark, #636363);
}
.counselling-solutions__item__signature {
font-family: var(--pelocis-font-signature, cursive);
font-size: 35px;
color: var(--pelocis-black, #1a1f2b);
margin: 0;
padding-left: 30px;
}
.counselling-solutions__list--two {
list-style: none;
padding: 0;
margin: 26px 0 33px;
}
.counselling-solutions__list--two li {
font-size: 16px;
color: var(--pelocis-black, #1a1f2b);
display: flex;
align-items: center;
gap: 10px;
}
.counselling-solutions__list--two li span {
color: var(--pelocis-base, #3779b9);
font-size: 20px;
}
.counselling-solutions__image {
display: flex;
flex-direction: column;
align-items: flex-end;
position: relative;
margin-top: 10px;
}
.counselling-solutions__image::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 13px;
height: 295px;
border-radius: 20px;
background-color: var(--pelocis-base, #3779b9);
}
.counselling-solutions__image::after {
content: "";
position: absolute;
left: 30px;
top: 0;
width: 13px;
height: 155px;
border-radius: 20px;
background-color: var(--pelocis-black, #1a1f2b);
}
.counselling-solutions__image__one {
border-radius: 0px 50px 50px 0px;
max-width: 100%;
}
.counselling-solutions__image__two {
position: absolute;
bottom: -50px;
left: 0;
border: 10px solid var(--pelocis-white, #fff);
border-radius: 50px 0px 0px 50px;
max-width: 294px;
z-index: 10;
}
.counselling-solutions__image__watch-btn {
display: flex;
align-items: center;
justify-content: flex-end;
width: 80%;
border-right: 1px solid var(--pelocis-base, #3779b9);
border-bottom: 1px solid var(--pelocis-base, #3779b9);
gap: 10px;
padding-right: 48px;
padding-top: 62px;
padding-bottom: 22px;
margin-top: -40px;
position: relative;
z-index: 5;
}
.counselling-solutions__image__watch-btn a {
border: 1px solid var(--pelocis-black2, #333333);
width: 52px;
height: 52px;
display: flex;
justify-content: center;
align-items: center;
background-color: transparent;
border-radius: 50%;
font-size: 22px;
color: var(--pelocis-black2, #333333);
transition: all 400ms ease;
}
.counselling-solutions__image__watch-btn a:hover {
background-color: var(--pelocis-base, #3779b9);
border-color: var(--pelocis-base, #3779b9);
color: var(--pelocis-white, #fff);
}
.counselling-solutions__image__watch-btn span {
font-size: 16px;
font-weight: 700;
color: var(--pelocis-black, #1a1f2b);
font-family: var(--pelocis-heading-font);
}
/*
Call Area Three & Counter Area Two
*/
.call-area-three {
position: relative;
background-color: var(--pelocis-black, #1a1f2b);
padding: 140px 0 240px;
overflow: hidden;
z-index: 1;
}
.call-area-three__bg.parallax-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 120%;
/* Extra height for parallax */
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
opacity: 0.15;
z-index: 0;
}
.call-area-three__content {
position: relative;
text-align: center;
z-index: 2;
}
.call-area-three__title {
font-size: 42px;
font-weight: 800;
line-height: normal;
color: var(--pelocis-white, #fff);
margin: 0 0 15px;
text-transform: capitalize;
}
.call-area-three__text {
font-size: 18px;
font-weight: 400;
line-height: 30px;
color: rgba(255, 255, 255, 0.85);
margin-bottom: 45px;
}
.pelocis-btn--premium {
background-color: var(--pelocis-base, #3779b9);
padding: 18px 45px;
border-radius: 50px;
font-weight: 700;
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.3);
transition: all 400ms ease;
color: #fff !important;
}
.pelocis-btn--premium:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(55, 121, 185, 0.5);
background-color: #2a5a8a;
}
.counter-area-two {
position: relative;
margin-top: -163px;
z-index: 10;
/* margin-bottom: 80px; */
}
.counter-area-three {
position: relative;
/* margin-top: -163px; */
z-index: 10;
/* margin-bottom: 80px; */
}
.counter-area-three__list {
background-color: var(--pelocis-white, #fff);
padding: 0;
margin: 0;
border-radius: 50px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
list-style: none;
display: flex;
overflow: hidden;
position: relative;
}
.counter-area-three__list {
background-color: var(--pelocis-white, #fff);
padding: 0;
margin: 0;
border-radius: 50px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
list-style: none;
display: flex;
overflow: hidden;
position: relative;
}
.counter-area-two__list {
background-color: var(--pelocis-white, #fff);
padding: 0;
margin: 0;
border-radius: 50px;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
list-style: none;
display: flex;
overflow: hidden;
position: relative;
}
.counter-area-two__item {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
position: relative;
transition: all 500ms ease;
margin: 0;
padding: 79px 0 75px;
flex-grow: 1;
overflow: hidden;
}
.counter-area-three__item {
display: flex;
align-items: center;
flex-direction: column;
text-align: center;
position: relative;
transition: all 500ms ease;
margin: 0;
padding: 79px 0 75px;
flex-grow: 1;
overflow: hidden;
}
.counter-area-two__item:not(:last-of-type)::before {
content: "";
width: 1px;
height: 131px;
background-color: var(--pelocis-border-color, #DDDDDD);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.counter-area-three__item:not(:last-of-type)::before {
content: "";
width: 1px;
height: 131px;
background-color: var(--pelocis-border-color, #DDDDDD);
position: absolute;
top: 50%;
right: 0;
transform: translateY(-50%);
}
.counter-area-three__icon {
border: 3px solid var(--pelocis-base, #3779b9);
border-bottom: none;
width: 89px;
height: 73px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-size: 40px;
color: var(--pelocis-base, #3779b9);
transition: all 500ms ease;
margin-bottom: 25px;
}
.counter-area-three__icon::before {
content: "";
position: absolute;
right: -35px;
bottom: 0;
width: 32px;
height: 18px;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(0 0%, 0% 100%, 100% 100%);
transition: all 500ms ease;
}
.counter-area-three__icon::after {
content: "";
position: absolute;
left: -35px;
bottom: 0;
width: 32px;
height: 18px;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
transition: all 500ms ease;
}
.counter-area-three__icon img {
max-width: 45px !important;
height: auto;
transition: all 500ms ease;
}
.counter-area-three__item:hover .counter-area-three__icon img {
transform: scale(1.1);
}
.counter-area-two__icon {
border: 3px solid var(--pelocis-base, #3779b9);
border-bottom: none;
width: 89px;
height: 73px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
font-size: 40px;
color: var(--pelocis-base, #3779b9);
transition: all 500ms ease;
margin-bottom: 25px;
}
.counter-area-two__icon::before {
content: "";
position: absolute;
right: -35px;
bottom: 0;
width: 32px;
height: 18px;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(0 0%, 0% 100%, 100% 100%);
transition: all 500ms ease;
}
.counter-area-two__icon::after {
content: "";
position: absolute;
left: -35px;
bottom: 0;
width: 32px;
height: 18px;
background-color: var(--pelocis-base, #3779b9);
clip-path: polygon(100% 0%, 0% 100%, 100% 100%);
transition: all 500ms ease;
}
.counter-area-two__icon img {
max-width: 45px !important;
height: auto;
transition: all 500ms ease;
}
.counter-area-two__item:hover .counter-area-two__icon img {
transform: scale(1.1);
}
/* .counter-area-two__item::after {
content: "";
position: absolute;
bottom: -32px;
width: 80%;
left: 50%;
transform: translateX(-50%);
background-color: var(--pelocis-base, #3779b9);
height: 32px;
border-radius: 50px;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
} */
/* .counter-area-three__item::after {
content: "";
position: absolute;
bottom: -32px;
width: 80%;
left: 50%;
transform: translateX(-50%);
background-color: var(--pelocis-base, #3779b9);
height: 32px;
border-radius: 50px;
opacity: 0;
visibility: hidden;
transition: all 500ms ease;
} */
/* .counter-area-two__item:hover::after {
opacity: 1;
visibility: visible;
bottom: 0;
}
.counter-area-three__item:hover::after {
opacity: 1;
visibility: visible;
bottom: 0;
} */
.counter-area-two__count {
font-size: 35px;
font-weight: 700;
line-height: 1;
color: var(--pelocis-black, #1a1f2b);
margin: 0 0 5px;
}
.counter-area-three__count {
font-size: 35px;
font-weight: 700;
line-height: 1;
color: var(--pelocis-black, #1a1f2b);
margin: 0 0 5px;
}
.counter-area-two__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin: 0;
}
.counter-area-three__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
margin: 0;
}
/*
Medical Services Circle
*/
.medical-services-circle {
position: relative;
background-size: cover;
background-position: center;
padding: 80px 0;
background-color: #fff;
overflow: hidden;
}
.medical-services-circle .sec-title .inner-text {
color: var(--pelocis-base, #3779b9);
}
.sec-icon2 {
margin-top: 15px;
}
.service-circle {
position: relative;
width: 800px;
height: 800px;
margin: 50px auto 0;
border-radius: 50%;
z-index: 1;
}
.service-circle__lines .line {
background-color: #f5f7ff;
width: 20px;
height: 900px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
z-index: 2;
}
.service-circle__lines .line:nth-child(2) {
transform: translate(-50%, -50%) rotate(30deg);
}
.service-circle__lines .line:nth-child(3) {
transform: translate(-50%, -50%) rotate(90deg);
}
.service-circle__menu {
position: relative;
width: 800px;
height: 800px;
margin: 0 auto;
}
.service-circle__menu ul {
position: absolute;
width: 800px;
height: 800px;
padding: 0;
list-style: none;
border-radius: 50%;
overflow: hidden;
margin: 0;
}
.service-circle__menu li {
position: absolute;
top: -84px;
left: -84px;
width: 484px;
height: 484px;
transform-origin: 100% 100%;
overflow: hidden;
transform: rotate(var(--rotate-item, 0)) skew(30deg);
z-index: 1;
}
.service-circle__menu li a {
display: block;
width: 484px;
height: 484px;
margin-top: 119px;
margin-left: 119px;
background-color: #fff;
transform: skew(-30deg) rotate(-60deg);
transition: background-color 0.5s;
text-align: center;
position: relative;
z-index: 1;
}
.service-circle__menu li.active a,
.service-circle__menu li a:hover {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
}
.service-circle__menu li img {
position: absolute;
left: var(--icon-left, 50%);
top: var(--icon-top, 35%);
transform: translate(-50%, -50%) rotate(var(--rotate-icon, 0));
transform-origin: 50% center;
display: block;
transition: all ease 0.4s;
width: auto;
max-width: 60px;
filter: brightness(1);
}
.service-circle__menu li.active a img,
.service-circle__menu li a:hover img {
filter: brightness(0) invert(1);
}
.service-circle__center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
width: 425px;
height: 425px;
border-radius: 50%;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
/* border: 4px solid rgba(255, 255, 255, 0.1); */
}
.service-circle__item {
position: absolute;
left: 0;
top: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
width: 100%;
border-radius: 50%;
padding: 40px;
text-align: center;
transition: all ease 0.4s;
opacity: 0;
visibility: hidden;
}
.service-circle__item.active {
opacity: 1;
visibility: visible;
}
.service-circle__title {
color: #fff;
max-width: 300px;
position: relative;
padding-bottom: 20px;
margin: 0 0 15px;
font-size: 24px;
font-weight: 700;
}
.service-circle__title::before,
.service-circle__title::after {
content: "";
position: absolute;
left: 50%;
bottom: 0;
width: 220px;
margin-left: -110px;
height: 1px;
background-color: #fff;
opacity: 0.7;
}
.service-circle__title::after {
height: 3px;
width: 40px;
margin-left: -20px;
background-color: #fff;
opacity: 1;
z-index: 1;
}
.service-circle__text {
color: #fff;
font-size: 16px;
line-height: 26px;
margin: 0;
max-width: 320px;
}
@media (max-width: 991px) {
.service-circle {
width: 600px;
height: 600px;
}
.service-circle__menu,
.service-circle__menu ul {
width: 600px;
height: 600px;
}
.service-circle__menu li {
width: 384px;
height: 384px;
}
.service-circle__menu li a {
width: 384px;
height: 384px;
}
.service-circle__center {
width: 320px;
height: 320px;
}
}
@media (max-width: 767px) {
.service-circle {
width: 100%;
height: auto;
border-radius: 0;
overflow: visible;
}
.service-circle__lines {
display: none;
}
.service-circle__menu {
width: 100%;
height: auto;
}
.service-circle__menu ul {
position: relative;
width: 100%;
height: auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
border-radius: 0;
overflow: visible;
}
.service-circle__menu li {
position: relative;
top: 0;
left: 0;
width: 100%;
height: auto;
transform: none;
aspect-ratio: 1/1;
}
.service-circle__menu li a {
width: 100%;
height: 100%;
margin: 0;
transform: none;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.service-circle__menu li img {
position: static;
transform: none;
max-width: 45px;
}
.service-circle__center {
position: relative;
top: 0;
left: 0;
transform: none;
width: 100%;
height: auto;
min-height: 250px;
margin-top: 30px;
border-radius: 20px;
}
.service-circle__item {
padding: 30px 20px;
}
}
/*
Home Polishing Fixes
*/
.call-area-three .pelocis-btn {
z-index: 10;
position: relative;
}
.service-circle__item {
display: flex !important;
align-items: center;
justify-content: center;
}
.service-circle__item-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
max-width: 320px;
text-align: center;
}
.service-circle__center {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
/* border: 4px solid rgba(255, 255, 255, 0.1); */
}
/* Ensure icons are visible even if font is loading */
.counter-area-two__icon span {
display: inline-block;
min-width: 1em;
min-height: 1em;
}
/* -----------------------------------------------------------
Contact Status Styles
---------------------------------------------------------- */
.status-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 400px;
padding: 20px;
animation: statusFadeIn 0.5s ease-out;
}
.status-card {
background: #fff;
width: 100%;
max-width: 400px;
padding: 60px 40px;
border-radius: 24px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
animation: statusSlideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.status-card .bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.status-card .bubble {
position: absolute;
border-radius: 50%;
opacity: 0.6;
}
/* Success Bubbles */
.status-container.success .bubble {
background: #87b031;
}
/* Error Bubbles */
.status-container.error .bubble {
background: #f1595d;
}
.status-card .bubble-1 {
width: 12px;
height: 12px;
top: 15%;
left: 10%;
animation: bubbleFloat 3s infinite ease-in-out;
}
.status-card .bubble-2 {
width: 8px;
height: 8px;
top: 25%;
right: 15%;
animation: bubbleFloat 4s infinite ease-in-out;
}
.status-card .bubble-3 {
width: 15px;
height: 15px;
bottom: 20%;
left: 15%;
animation: bubbleFloat 5s infinite ease-in-out;
}
.status-card .bubble-4 {
width: 10px;
height: 10px;
bottom: 15%;
right: 10%;
animation: bubbleFloat 3.5s infinite ease-in-out;
}
.status-card .bubble-5 {
width: 6px;
height: 6px;
top: 40%;
left: 5%;
animation: bubbleFloat 6s infinite ease-in-out;
}
.status-card .bubble-6 {
width: 14px;
height: 14px;
top: 60%;
right: 5%;
animation: bubbleFloat 4.5s infinite ease-in-out;
}
.status-card .bubble-7 {
width: 9px;
height: 9px;
top: 10%;
right: 30%;
animation: bubbleFloat 3.2s infinite ease-in-out;
}
.status-card .bubble-8 {
width: 11px;
height: 11px;
bottom: 10%;
left: 40%;
animation: bubbleFloat 4.8s infinite ease-in-out;
}
.status-card .bubble-9 {
width: 7px;
height: 7px;
top: 50%;
left: 20%;
animation: bubbleFloat 5.5s infinite ease-in-out;
}
.status-card .bubble-10 {
width: 13px;
height: 13px;
bottom: 40%;
right: 25%;
animation: bubbleFloat 3.8s infinite ease-in-out;
}
.status-card .bubble-11 {
width: 8px;
height: 8px;
top: 70%;
left: 35%;
animation: bubbleFloat 4.2s infinite ease-in-out;
}
.status-card .bubble-12 {
width: 10px;
height: 10px;
top: 5%;
left: 50%;
animation: bubbleFloat 3.6s infinite ease-in-out;
}
@keyframes bubbleFloat {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-15px) scale(1.1);
}
}
.status-card .icon-wrapper {
margin-bottom: 30px;
display: flex;
justify-content: center;
animation: iconBounce 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both;
}
.status-card .icon-circle {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
position: relative;
}
.status-container.success .icon-circle {
background: rgba(135, 176, 49, 0.15);
color: #87b031;
border: 4px solid #87b031;
}
.status-container.error .icon-circle {
background: rgba(241, 89, 93, 0.15);
color: #f1595d;
border: 4px solid #f1595d;
}
.status-title {
font-size: 32px;
font-weight: 800;
margin-bottom: 12px;
animation: statusFadeIn 0.5s ease-out 0.5s both;
}
.status-container.success .status-title {
color: #87b031;
}
.status-container.error .status-title {
color: #f1595d;
}
.status-message {
font-size: 16px;
color: #64748b;
margin-bottom: 40px;
line-height: 1.6;
animation: statusFadeIn 0.5s ease-out 0.6s both;
}
.status-btn {
padding: 16px 40px;
border: none;
border-radius: 14px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 200px;
animation: statusFadeIn 0.5s ease-out 0.7s both;
}
.status-container.success .status-btn {
background: #87b031;
color: #fff;
box-shadow: 0 10px 20px rgba(135, 176, 49, 0.3);
}
.status-container.success .status-btn:hover {
background: #769a2b;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(135, 176, 49, 0.4);
}
.status-container.error .status-btn {
background: #f1595d;
color: #fff;
box-shadow: 0 10px 20px rgba(241, 89, 93, 0.3);
}
.status-container.error .status-btn:hover {
background: #e04a4e;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(241, 89, 93, 0.4);
}
@keyframes statusFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes statusSlideUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.9);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes iconBounce {
0% {
transform: scale(0);
}
60% {
transform: scale(1.1);
}
80% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
/* -----------------------------------------------------------
Projects Section Styles
---------------------------------------------------------- */
:root {
--pelocis-base: #3779b9;
--pelocis-black: #1a1f2b;
--pelocis-white: #fff;
--pelocis-gray: #F5F2EF;
--pelocis-border-color: #DDDDDD;
}
.projects-one {
position: relative;
padding-top: 110px;
padding-bottom: 120px;
counter-reset: count;
/* background-color: var(--pelocis-gray, #F5F2EF); */
}
.projects-one__title {
position: relative;
/* margin-bottom: 50px; */
}
.projects-one .sec-title {
padding-bottom: 20px;
}
.sec-title__shape {
position: relative;
display: inline-block;
}
.sec-title__shape::before {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #3779b9);
display: block;
}
.sec-title__shape::after {
content: "";
width: 12px;
height: 12px;
background-color: var(--pelocis-black, #1a1f2b);
border: 1px solid var(--pelocis-white, #fff);
display: block;
position: absolute;
bottom: -3px;
right: -3px;
}
.sec-title__tagline {
margin: 0;
color: var(--pelocis-base, #3779b9);
font-size: 18px;
line-height: 16px;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.sec-title__title {
font-size: 42px;
font-weight: 800;
line-height: 1.2;
margin-top: 15px;
color: var(--pelocis-black);
}
.projects-one__filter__list {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
flex-wrap: wrap;
padding-left: 0;
list-style: none;
}
.projects-one__filter__list button.list-unstyled-item {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
background-size: 200% auto !important;
border-radius: 10px !important;
color: #fff !important;
padding: 15px 30px !important;
border: none !important;
transition: all 0.5s ease-6ms !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
background-position: left center !important;
font-weight: 700 !important;
cursor: pointer;
}
.projects-one__filter__list button.list-unstyled-item.active,
.projects-one__filter__list button.list-unstyled-item:hover {
/* background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important; */
color: var(--pelocis-white, #fff) !important;
opacity: 0.85;
}
.projects-grid {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 30px;
}
.project-item {
flex: 0 0 calc(33.333% - 30px);
max-width: calc(33.333% - 30px);
}
@media (max-width: 991px) {
.project-item {
flex: 0 0 calc(50% - 30px);
max-width: calc(50% - 30px);
}
}
@media (max-width: 767px) {
.projects-one {
padding-top: 60px;
padding-bottom: 70px;
}
.project-item {
flex: 0 0 100%;
max-width: 400px;
/* Limit width on mobile for better appearance */
}
.sec-title__title {
font-size: 30px;
}
.projects-one__filter__list li {
padding: 8px 15px;
font-size: 14px;
margin-bottom: 5px;
}
}
@media (max-width: 480px) {
.project-item {
max-width: 100%;
}
.projects-one__card img {
height: 250px;
}
}
.projects-one__card {
position: relative;
overflow: hidden;
counter-increment: count;
border-radius: 20px;
background: #000;
}
.projects-one__card img {
transform: scale(1);
max-width: 100%;
transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
width: 100%;
height: 350px;
object-fit: cover;
display: block;
opacity: 1;
}
.projects-one__card:hover img {
transform: scale(1.1);
opacity: 0.7;
}
.projects-one__card__hover {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
transform: translateY(100%);
opacity: 0;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 10;
pointer-events: none;
}
.projects-one__card:hover .projects-one__card__hover {
transform: translateY(0);
opacity: 1;
}
.projects-one__card__hover-mask {
width: 95%;
height: 40%;
position: absolute;
left: 2.5%;
bottom: 20px;
clip-path: polygon(87% 0, 100% 50%, 87% 100%, 0 100%, 0 0);
background-color: var(--pelocis-base, #3779b9);
z-index: -1;
border-radius: 15px;
}
.projects-one__card__hover-content-inner {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 0 40px 40px;
pointer-events: auto;
}
.projects-one__card__hover-text {
text-align: left;
max-width: 85%;
}
.projects-one__card__hover-text h3 {
font-size: 22px;
font-weight: 800;
line-height: 1.2;
color: var(--pelocis-white, #fff);
margin-bottom: 8px;
}
.projects-one__card__hover-text h3 a {
color: inherit;
text-decoration: none;
}
.projects-one__card__hover-text p {
color: var(--pelocis-white, #fff);
font-size: 14px;
font-weight: 500;
line-height: 1.5;
margin-bottom: 0;
}
.projects-one__card__hover-item {
position: absolute;
width: 50px;
height: 50px;
top: -60px;
left: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 15px 15px 0px 0px;
background-color: var(--pelocis-white, #fff);
color: var(--pelocis-black, #1a1f2b);
font-size: 18px;
font-weight: 800;
border: 1px solid var(--pelocis-base, #3779b9);
border-bottom: none;
}
.projects-one__card__hover-item::before {
content: "0" counter(count);
}
.projects-one__card__hover-link {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--pelocis-white, #fff);
color: var(--pelocis-base, #3779b9);
font-size: 16px;
border-radius: 12px;
cursor: pointer;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
}
.projects-one__card__hover-link:hover {
background-color: var(--pelocis-black);
color: var(--pelocis-white);
}
/* ============================================================
SERVICE DETAILS & SLIDER SECTION
============================================================ */
.service-details {
padding: 100px 0;
}
.service-details__thumbnail {
margin-bottom: 35px;
border-radius: 20px;
overflow: hidden;
}
.service-details__thumbnail img {
width: 100%;
}
.service-details__title {
font-size: 36px;
font-weight: 800;
margin-bottom: 20px;
color: #1a1f2b;
}
.service-details__text {
font-size: 16px;
line-height: 1.8;
color: #64748b;
margin-bottom: 25px;
}
.service-details__dynamic-content h3 {
font-size: 24px;
font-weight: 800;
margin-bottom: 20px;
color: #1a1f2b;
}
.service-details__benefit {
margin: 20px 0;
}
.service-details__benefit__img {
border-radius: 12px;
overflow: hidden;
}
.service-details__benefit__img img {
width: 100%;
}
.service-details__benefit__title {
font-size: 22px;
font-weight: 800;
margin-bottom: 15px;
}
.service-details__benefit__list li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 15px;
color: #64748b;
margin-bottom: 10px;
}
.service-details__benefit__list li i {
color: #3779b9;
margin-top: 4px;
}
/* Sidebar Styles */
.service-sidebar__single {
margin-bottom: 30px;
background: #f8fbff;
/* padding: 20px; */
border-radius: 20px;
}
.service-sidebar__title {
font-size: 24px;
font-weight: 800;
margin-bottom: 25px;
color: #1a1f2b;
}
.service-sidebar__nav li {
margin-bottom: 12px;
}
.service-sidebar__nav li a {
display: flex !important;
align-items: center;
justify-content: space-between;
background: #fff;
padding: 15px 25px;
border-radius: 50px;
font-weight: 700;
color: #1a1f2b;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.service-sidebar__nav li.active a,
.service-sidebar__nav li a:hover {
background: #1a1f2b !important;
color: #fff !important;
}
.service-sidebar__contact {
position: relative;
padding: 50px 20px;
background: #1a1f2b;
border-radius: 20px;
overflow: hidden;
text-align: center;
z-index: 1;
}
.service-sidebar__contact-bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: center;
opacity: 0.1;
z-index: -1;
}
.service-sidebar__contact-icon {
width: 70px;
height: 70px;
background: #fff;
color: #3779b9;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
margin: 0 auto 25px;
}
.service-sidebar__contact-title {
color: #fff;
font-size: 22px;
font-weight: 800;
line-height: 1.4;
margin-bottom: 15px;
}
.service-sidebar__contact-phone a {
color: #fff;
font-size: 20px;
font-weight: 700;
text-decoration: none;
}
.service-sidebar__contact-btn {
margin-top: 25px;
}
.theme-btn {
display: inline-block;
background: #3779b9 !important;
color: #fff !important;
padding: 20px 45px !important;
border-radius: 50px;
font-weight: 700;
transition: all 0.3s ease;
}
.theme-btn:hover {
background: #fff;
color: #1a1f2b;
}
.hero-1 .theme-btn {
padding: 24px 55px !important;
}
/* Service Slider (Service Three) Styles */
.service-three__item {
margin-top: 40px;
border-radius: 20px;
overflow: hidden;
transition: all 500ms ease;
}
.service-three__item__content {
padding: 0 28px 30px;
}
.service-three__item__icon {
position: relative;
top: -40px;
width: 84px;
height: 84px;
background-color: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto -20px;
color: #3779b9;
font-size: 36px;
transition: all 500ms ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.service-three__item:hover .service-three__item__icon {
background-color: #f1f5f9;
color: #fff;
}
.service-three__item__title {
font-size: 22px;
font-weight: 700;
margin-bottom: 12px;
}
.service-three__item__title a {
color: #fff !important;
}
.service-three__item:hover .service-three__item__title a {
color: #3779b9 !important;
}
.service-three__item__text {
font-size: 15px;
color: #fff;
line-height: 1.6;
margin-bottom: 0;
}
.service-three__item__image {
position: relative;
overflow: hidden;
line-height: 0;
}
.service-img-fixed {
width: 100%;
height: 250px !important;
object-fit: cover;
clip-path: polygon(0% 0%, 100% 0, 100% 69%, 50% 100%, 0 69%);
transition: all 500ms ease;
}
.service-three__item:hover .service-img-fixed {
transform: scale(1.05);
}
.slider-nav-btn {
border: 1px solid rgba(255, 255, 255, 0.2);
background: transparent;
color: #fff;
width: 50px;
height: 50px;
border-radius: 50%;
transition: all 0.3s ease;
}
.slider-nav-btn:hover {
background: #3779b9;
border-color: #3779b9;
}
/* ============================================================
SEC-TITLE � Universal Section Heading Design System
============================================================ */
/* .sec-title-wrapper {
margin-bottom: 50px;
} */
.sec-title {
padding-bottom: 0;
position: relative;
display: inline-block;
}
.sec-title__shape {
position: relative;
display: inline-block;
vertical-align: middle;
}
.sec-title__shape::before {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #3779b9);
display: block;
}
.sec-title__shape::after {
content: "";
width: 12px;
height: 12px;
background-color: var(--pelocis-black, #1a1f2b);
border: 1px solid var(--pelocis-white, #fff);
display: block;
position: absolute;
bottom: -3px;
right: -3px;
}
.sec-title__tagline {
margin: 0;
font-family: var(--pelocis-font, inherit);
color: var(--pelocis-base, #3779b9);
font-size: 16px;
line-height: 16px;
text-transform: uppercase;
font-weight: 600;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
letter-spacing: 0.5px;
}
.sec-title__title {
margin: 0;
font-size: 36px;
color: var(--pelocis-black, #1a1f2b);
font-weight: 800;
line-height: 1.3;
margin-top: 10px;
}
.sec-title__title.text-white {
color: #ffffff !important;
}
.sec-title--light .sec-title__tagline {
color: var(--pelocis-base, #3779b9);
}
.sec-title--light .sec-title__shape::after {
background-color: #fff;
border-color: rgba(255, 255, 255, 0.3);
}
.sec-title__text-shape {
position: absolute;
right: -30px;
top: -20px;
pointer-events: none;
z-index: 0;
opacity: 0.85;
max-width: 90px;
}
/* Centered variant */
.text-center .sec-title__text-shape {
right: -40px;
top: -30px;
}
@media (max-width: 767px) {
.sec-title__title {
font-size: 23px;
}
.sec-title__text-shape {
max-width: 60px;
right: -20px;
}
}
/* ============================================================
MEDICAL SERVICES ENHANCEMENTS
============================================================ */
.medical-services-section {
background-attachment: fixed !important;
background-position: center !important;
background-size: cover !important;
position: relative;
z-index: 1;
}
.glass-effect {
background: rgba(255, 255, 255, 0.05) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 8px 32px 0 rgba(7, 23, 43, 0.37);
}
.decorative-element {
position: absolute;
z-index: 1;
pointer-events: none;
animation: float-around 15s infinite ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.decorative-element img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.3));
}
/* Position Adjustments for Element Assets - Scaling Up */
.elem-left-1 {
top: 12%;
left: 8%;
width: 220px;
height: 220px;
animation-delay: 0.2s;
}
.elem-left-2 {
top: 48%;
left: 12%;
width: 180px;
height: 180px;
animation-delay: -3.5s;
}
.elem-left-3 {
bottom: 18%;
left: 5%;
width: 250px;
height: 250px;
animation-delay: -6.8s;
}
.elem-right-1 {
top: 15%;
right: 10%;
width: 210px;
height: 210px;
animation-delay: -1.2s;
}
.elem-right-2 {
top: 55%;
right: 15%;
width: 190px;
height: 190px;
animation-delay: -4.5s;
}
.elem-right-3 {
bottom: 25%;
right: 7%;
width: 230px;
height: 230px;
animation-delay: -7.2s;
}
/* Tab Highlighting Interactivity */
.tab-highlight-transition {
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important;
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
overflow: visible;
z-index: 5;
}
.active-tab-pointer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-left: 60px solid transparent;
border-right: 60px solid transparent;
border-bottom: 100px solid rgba(55, 121, 185, 0.4);
z-index: -1;
pointer-events: none;
}
.service-circle__menu li.active a::before {
content: "";
position: absolute;
top: -12px;
left: -12px;
right: -12px;
bottom: -12px;
border: 2px dashed #3779b9;
border-radius: 50%;
animation: rotate-dashed 8s linear infinite;
z-index: -1;
}
@keyframes rotate-dashed {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* ============================================================
MEDICAL SERVICES DECORATIVE ELEMENTS
============================================================ */
.decorative-element {
position: absolute;
z-index: 1;
pointer-events: none;
animation: float-around 15s infinite ease-in-out;
display: flex;
align-items: center;
justify-content: center;
}
.decorative-element img {
max-width: 100%;
height: auto;
filter: drop-shadow(0 10px 20px rgba(0, 0, 0, 0.2));
}
/* Positions for 8 Elements */
.elem-left-1 {
top: 10%;
left: 5%;
width: 140px;
animation-delay: 0s;
}
.elem-left-2 {
top: 35%;
left: 12%;
width: 110px;
animation-delay: -3s;
}
.elem-left-3 {
top: 60%;
left: 7%;
width: 130px;
animation-delay: -6s;
}
.elem-left-4 {
bottom: 10%;
left: 15%;
width: 100px;
animation-delay: -9s;
}
.elem-right-1 {
top: 12%;
right: 6%;
width: 150px;
animation-delay: -1.5s;
}
.elem-right-2 {
top: 38%;
right: 14%;
width: 120px;
animation-delay: -4.5s;
}
.elem-right-3 {
top: 62%;
right: 8%;
width: 140px;
animation-delay: -7.5s;
}
.elem-right-4 {
bottom: 12%;
right: 16%;
width: 110px;
animation-delay: -10.5s;
}
@keyframes float-around {
0%,
100% {
transform: translateY(0) translateX(0) scale(1) rotate(0deg);
}
33% {
transform: translateY(-20px) translateX(15px) scale(1.05) rotate(4deg);
}
66% {
transform: translateY(15px) translateX(-10px) scale(0.95) rotate(-4deg);
}
}
/* ============================================================
NEW TESTIMONIALS & PARALLAX SECTION
============================================================ */
.testimonial1-section-area {
position: relative;
z-index: 1;
}
.section-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: rgba(26, 31, 43, 0.85); */
z-index: 0;
}
.sp1 {
padding: 100px 0;
}
@media (max-width: 767px) {
.sp1 {
padding: 60px 0;
}
}
.testimonial-bubble {
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 30px;
border-radius: 20px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
}
.testimonial-bubble:hover {
transform: translateY(-5px);
}
.testi-author-info img {
transition: transform 0.3s ease;
}
.testi-card-wrapper:hover .testi-author-info img {
transform: scale(1.1);
}
.vl-btn2 {
background: #3779b9;
color: #fff;
padding: 16px 35px;
border-radius: 50px;
font-weight: 700;
transition: all 0.3s ease;
border: none;
text-decoration: none !important;
}
.vl-btn2:hover {
background: #fff;
color: #1a1f2b;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
/* Parallax Utility */
.parallax-bg {
background-attachment: fixed !important;
}
@media (max-width: 1024px) {
.parallax-bg {
background-attachment: scroll !important;
}
}
/* Navigation Dropdown Arrow Rotation */
.has-dropdown>a>i {
display: inline-block;
transition: transform 0.3s ease;
}
.has-dropdown:hover>a>i {
transform: rotate(180deg);
}
.main-menu ul li {
margin-right: 30px;
}
.main-menu ul li a {
font-weight: 700 !important;
letter-spacing: 0.5px;
}
.main-menu ul li a:hover {
color: #3779b9 !important;
}
/* Google Reviews Branding Styles */
.google-reviews-branding-global {
margin-top: 15px;
display: flex;
flex-direction: column;
}
.google-reviews-branding-global .google-logo {
font-size: 28px;
font-weight: 700;
line-height: 1.2;
letter-spacing: 3px;
font-family: 'Product Sans', 'Google Sans', Roboto, Arial, sans-serif;
display: flex;
align-items: center;
}
.google-reviews-branding-global .reviews-text-stars {
font-size: 13px;
font-weight: 700;
line-height: 1.2;
font-family: 'Product Sans', 'Google Sans', Roboto, Arial, sans-serif;
display: flex;
align-items: center;
gap: 5px;
margin-top: -2px;
}
.google-reviews-branding-global .stars-container {
display: flex;
gap: 1px;
font-size: 13px;
line-height: 1;
}
/* Testimonials Section Styles */
.testimonials-two-box-solid {
background: #fff;
padding: 40px 30px 40px 80px;
border-left: 4px solid #3779b9;
position: relative;
margin-left: 60px;
min-height: 320px;
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.author-image-solid {
position: absolute;
left: -50px;
top: 50%;
transform: translateY(-50%);
z-index: 5;
}
.author-image-solid img {
height: 100px !important;
width: 100px !important;
border-radius: 50%;
object-fit: cover;
border: 5px solid #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.icon-quote-testi {
position: absolute;
top: 25px;
right: 25px;
font-size: 40px;
color: rgba(55, 121, 185, 0.1);
}
.content-solid h4 {
font-size: 20px;
margin-bottom: 2px;
font-weight: 700;
color: #1a1f2b;
}
.content-solid .tag {
color: #787878;
font-size: 13px;
display: block;
margin-bottom: 10px;
}
.ratings-solid {
display: flex;
gap: 4px;
margin-bottom: 15px;
color: #FBBC04;
}
.ratings-solid li {
list-style: none;
font-size: 14px;
}
.content-solid p {
font-size: 14px;
line-height: 1.6;
color: #555;
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
overflow: hidden;
height: 112px;
}
.testimonial-dot-inner {
list-style: none;
display: flex !important;
justify-content: center;
padding: 0;
margin-top: 30px;
gap: 10px;
}
.testimonial-dot-inner li button {
font-size: 0;
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
border: none;
cursor: pointer;
transition: all 0.3s ease;
}
.testimonial-dot-inner li.slick-active button {
background: #3779b9;
transform: scale(1.3);
}
/* Home Contact Form Styles */
.home-contact-form-container-global {
background: #1a1f2b;
padding: 25px;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.form-label-custom-global,
.form-label-custom {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: #fff;
font-size: 14px;
letter-spacing: 0.5px;
text-transform: uppercase;
}
.form-input-custom-global,
.form-textarea-custom-global,
.form-select-custom-styled-global,
.form-input,
.form-select,
.form-textarea {
width: 100%;
padding: 15px 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
background-color: rgba(255, 255, 255, 0.05);
border-radius: 12px;
outline: none;
font-size: 15px;
color: #fff;
transition: all 0.3s ease;
height: 60px;
}
.form-select-custom-styled-global option,
.form-select option {
background-color: #111827;
color: #fff;
}
.form-textarea-custom-global,
.form-textarea {
min-height: 110px;
/* height: auto; */
resize: vertical;
}
.form-input-custom-global:focus,
.form-textarea-custom-global:focus,
.form-select-custom-styled-global:focus,
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
border-color: #3779b9;
background-color: rgba(255, 255, 255, 0.08);
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.15);
}
.submit-btn-custom-global {
width: 100%;
background: #3779b9 !important;
color: #fff !important;
padding: 18px 30px;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 17px;
box-shadow: 0 10px 20px rgba(55, 121, 185, 0.2);
height: 60px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.submit-btn-custom-global:hover {
background: #1e293b;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
/* Why Choose Us Section Styles */
.why-choose-us {
padding: 80px 0;
background: #eaf0f9 !important;
}
@media (max-width: 767px) {
.why-choose-us {
padding: 60px 0;
}
}
.why-choose-us .section-subtitle {
color: #3779b9;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.why-choose-us .rotate-triangle {
font-size: 14px;
transform: rotate(-30deg);
margin-top: -2px;
}
.why-choose-us .section-title {
font-size: 44px;
font-weight: 800;
color: #1a1a1a;
line-height: 1.2;
margin-bottom: 25px;
}
.why-choose-us .section-desc {
font-size: 16px;
color: #666;
line-height: 1.7;
margin-bottom: 20px;
}
.why-choose-us .feature-item {
padding: 25px 0;
}
.why-choose-us .border-top-line {
border-top: 1px solid #eee;
}
.why-choose-us .feature-icon {
width: 70px;
height: 70px;
background: #3779b9;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
flex-shrink: 0;
color: #fff;
font-size: 28px;
}
.why-choose-us .feature-content h4 {
font-size: 22px;
font-weight: 700;
margin-bottom: 8px;
color: #1a1a1a;
}
.why-choose-us .feature-content p {
font-size: 15px;
color: #666;
margin: 0;
}
.why-choose-us .note-item {
display: flex;
align-items: flex-start;
gap: 15px;
}
.why-choose-us .note-item i {
color: #1a1a1a;
font-size: 18px;
margin-top: 3px;
}
.why-choose-us .note-item span {
font-size: 16px;
color: #444;
font-weight: 500;
line-height: 1.5;
}
.why-choose-us .image-area-wrapper {
padding-left: 20px;
}
.why-choose-us .main-image {
width: 100%;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
}
.why-choose-us .main-image img {
width: 100%;
height: 550px;
display: block;
}
.why-choose-us .circular-image {
position: absolute;
top: 50%;
left: -80px;
transform: translateY(-50%);
width: 280px;
height: 280px;
background: #fff;
padding: 10px;
border-radius: 50%;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
z-index: 2;
}
.why-choose-us .inner-circle {
width: 100%;
height: 100%;
border-radius: 50%;
overflow: hidden;
border: 2px solid #fff;
}
.why-choose-us .inner-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 1199px) {
.why-choose-us .circular-image {
width: 220px;
height: 220px;
left: -50px;
}
.why-choose-us .section-title {
font-size: 36px;
}
}
@media (max-width: 991px) {
/* .why-choose-us .content-area {
padding-right: 0;
margin-bottom: 60px;
} */
.why-choose-us .image-area-wrapper {
padding-left: 0;
}
.why-choose-us .circular-image {
width: 200px;
height: 200px;
left: -30px;
}
}
@media (max-width: 575px) {
.why-choose-us .circular-image {
position: relative;
top: 0;
left: 0;
transform: none;
margin: -60px auto 0;
}
}
/* FAQ Two Section Styles */
.faq-two {
padding: 80px 0 200px;
position: relative;
background-color: #0f172a;
clip-path: none !important;
}
.faq-two .faq-two__bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-attachment: fixed;
background-size: cover;
opacity: 0.15;
}
.faq-two .contact-form-card {
background: rgba(26, 31, 43, 0.8);
backdrop-filter: blur(10px);
padding: 60px;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.05);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
margin-bottom: 20px;
}
.faq-two .section-subtitle {
color: #3779b9;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 700;
font-size: 14px;
display: block;
margin-bottom: 15px;
}
.faq-two .section-heading {
font-size: 42px;
font-weight: 800;
margin-bottom: 0;
}
.faq-two .faq-form-label {
display: block;
color: #fff;
font-size: 14px;
font-weight: 700;
margin-bottom: 8px;
letter-spacing: 0.5px;
}
.faq-two .faq-error {
color: #ff6b6b;
font-size: 12px;
margin-top: 5px;
display: block;
}
.faq-two .faq-contact-form input,
.faq-two .faq-contact-form textarea,
.faq-two .faq-select {
width: 100%;
background: #fff !important;
border: 1px solid #e2e8f0;
padding: 18px 25px;
border-radius: 12px;
color: #1e293b;
outline: none;
transition: all 0.3s ease;
font-size: 15px;
}
.faq-two .faq-select option {
background: #fff;
color: #1e293b;
}
.faq-two .faq-contact-form textarea {
min-height: 150px;
resize: vertical;
}
.faq-two .faq-contact-form input:focus,
.faq-two .faq-contact-form textarea:focus,
.faq-two .faq-select:focus {
border-color: #3779b9;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1);
}
.faq-two .primary-btn-1,
.faq-two .primary-btn-1-link {
background: #3779b9 !important;
color: #fff !important;
padding: 18px 35px;
border-radius: 12px;
font-weight: 700;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
margin-top: 25px;
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}
.testimonial-btn {
background: #3779b9 !important;
color: #fff !important;
padding: 18px 35px;
border-radius: 12px;
font-weight: 700;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
text-transform: uppercase;
font-size: 16px;
letter-spacing: 1px;
margin-top: 25px;
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}
.faq-two .primary-btn-1:hover,
.faq-two .primary-btn-1-link:hover {
background: #1e293b;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
color: #fff;
}
/* Video Three Section Styles */
.video-three .video-three__inner {
border-radius: 30px;
overflow: hidden;
min-height: 500px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.video-three .video-three__inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(15, 23, 42, 0.6);
}
.video-three .video-content-overlay {
position: relative;
z-index: 1;
text-align: center;
max-width: 800px;
padding: 0 20px;
}
.video-three .consultation-title {
font-size: 48px;
color: #fff;
font-weight: 800;
line-height: 1.2;
margin-bottom: 20px;
}
.video-three .consultation-text {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 0;
}
@media (max-width: 991px) {
.video-three .consultation-title {
font-size: 36px;
}
.faq-two .contact-form-card {
padding: 40px 30px;
}
}
@media (max-width: 767px) {
.video-three .consultation-title {
font-size: 30px;
}
}
/* Contact One Section Styles */
.contact-one .form-label {
display: block;
margin-bottom: 8px;
font-weight: 700;
color: #fff;
font-size: 14px;
letter-spacing: 0.5px;
}
.contact-one .form-input,
.contact-one .form-textarea,
.contact-one .form-select-custom {
width: 100%;
padding: 18px 25px;
border: 1px solid #e2e8f0;
background-color: #fff;
border-radius: 12px;
outline: none;
font-size: 15px;
color: #1e293b;
transition: all 0.3s ease;
}
.contact-one .form-textarea {
min-height: 120px;
resize: vertical;
}
.contact-one .form-input:focus,
.contact-one .form-textarea:focus,
.contact-one .form-select-custom:focus {
border-color: #3779b9;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1);
}
.contact-one .submit-btn {
width: 100%;
border: none;
transition: all 0.3s ease;
}
.contact-one .text-danger {
color: #ff6b6b;
font-size: 12px;
margin-top: 5px;
display: block;
}
/* Contact Popup Styles */
.contact-popup-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(2, 6, 11, 0.85);
backdrop-filter: blur(8px);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 15px;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.contact-popup-overlay.active {
opacity: 1;
visibility: visible;
}
.contact-popup-content {
background: #fff;
width: 100%;
max-width: 1000px;
max-height: 95vh;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
position: relative;
display: flex;
flex-direction: column;
}
.contact-popup-content .info-panel {
padding: 50px;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
color: #fff;
background: linear-gradient(135deg, #1a1f2b 0%, #3779b9 100%);
}
.contact-popup-content .info-inner {
position: relative;
z-index: 1;
}
.contact-popup-content .title {
font-size: 32px;
font-weight: 800;
margin-bottom: 15px;
line-height: 1.2;
color: #ffffff !important;
}
.contact-popup-content .desc {
font-size: 16px;
color: rgba(255, 255, 255, 0.9) !important;
line-height: 1.6;
}
.contact-popup-content .contact-details {
margin-top: 35px;
margin-bottom: 30px;
}
.contact-popup-content .detail-item {
display: flex;
align-items: center;
margin-bottom: 20px;
gap: 15px;
}
.contact-popup-content .icon {
width: 48px;
height: 48px;
min-width: 48px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.15);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
transition: all 0.3s ease;
}
.contact-popup-content .detail-item:hover .icon {
background: #fff;
color: #3779b9;
}
.contact-popup-content .text {
min-width: 0;
flex: 1;
}
.contact-popup-content .text p {
margin: 0;
color: rgba(255, 255, 255, 0.7) !important;
font-size: 13px;
font-weight: 500;
}
.contact-popup-content .text h5 {
margin: 0;
font-size: 17px;
color: #ffffff !important;
font-weight: 700;
word-break: break-all;
overflow-wrap: anywhere;
line-height: 1.3;
}
.contact-popup-content .social-links {
display: flex;
gap: 12px;
}
.contact-popup-content .social-icon {
width: 36px;
height: 36px;
min-width: 36px;
flex-shrink: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: #fff;
transition: 0.3s;
font-size: 14px;
}
.contact-popup-content .social-icon:hover {
background: #fff;
color: #3779b9;
transform: translateY(-3px);
}
.contact-popup-content .form-panel {
padding: 40px 50px;
position: relative;
background: #fff;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: #3779b9 #f1f1f1;
}
.contact-popup-content .form-title {
font-size: 26px;
font-weight: 800;
margin-bottom: 25px;
color: #1a1f2b;
letter-spacing: -0.5px;
}
.contact-popup-content .form-input,
.contact-popup-content .form-textarea,
.contact-popup-content .form-select {
width: 100%;
padding: 14px 20px;
border-radius: 12px;
border: 1px solid #e2e8f0;
outline: none;
background: #fff;
transition: all 0.3s ease;
font-size: 14px;
color: #1e293b;
}
.contact-popup-content .submit-btn {
width: 100%;
border: none;
padding: 16px;
border-radius: 12px;
margin-top: 20px;
background: #3779b9;
color: #fff;
font-weight: 700;
font-size: 15px;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1px;
}
.contact-popup-content .status-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.contact-popup-content .close-btn {
position: absolute;
top: 10px;
right: 10px;
background: #f3f4f6;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
font-size: 18px;
cursor: pointer;
color: #1a1f2b;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
z-index: 100;
}
@media (max-width: 991px) {
.contact-popup-content .info-panel {
display: none;
}
.contact-popup-content .form-panel {
padding: 40px 30px;
}
.contact-popup-content {
max-width: 550px;
}
}
@media (max-width: 575px) {
.contact-popup-content .form-title {
font-size: 20px;
margin-bottom: 15px;
}
.contact-popup-content .form-input,
.contact-popup-content .form-textarea,
.contact-popup-content .form-select {
font-size: 13px;
padding: 8px 12px;
}
.contact-popup-content .g-recaptcha {
transform: scale(0.85);
transform-origin: 0 0;
}
}
@media (max-width: 375px) {
.contact-popup-content .form-panel {
padding: 25px 15px;
}
.contact-popup-content .g-recaptcha {
transform: scale(0.75);
}
}
@media (max-width: 320px) {
.contact-popup-content .form-panel {
padding: 20px 10px;
}
.contact-popup-content .form-title {
font-size: 18px;
}
.contact-popup-content .submit-btn {
padding: 12px;
font-size: 13px;
}
.contact-popup-content .g-recaptcha {
transform: scale(0.65);
}
}
/* About Service Section Styles */
.about-service {
padding: 80px 0;
background: #fff;
overflow: hidden;
}
@media (max-width: 767px) {
.about-service {
padding: 60px 0;
}
}
.about-service .experience-box {
position: absolute;
top: 0;
left: 0;
background: #3779b9;
color: #fff;
padding: 40px 30px;
z-index: 3;
text-align: center;
border-radius: 4px;
box-shadow: 0 10px 30px rgba(60, 114, 252, 0.3);
}
.about-service .experience-box h3 {
font-size: 54px;
font-weight: 800;
margin: 0;
line-height: 1;
}
.about-service .experience-box span {
font-size: 16px;
font-weight: 600;
display: block;
margin-top: 5px;
line-height: 1.2;
}
.about-service .main-img-wrap {
width: 100%;
max-width: 450px;
border-radius: 10px;
overflow: hidden;
margin-left: auto;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
}
.about-service .main-img-wrap img {
width: 100%;
display: block;
}
.about-service .curved-img-wrap {
position: absolute;
bottom: -40px;
left: -20px;
width: 320px;
height: 320px;
border-radius: 100px 30px 100px 100px;
overflow: hidden;
border: 8px solid #fff;
z-index: 2;
box-shadow: 0 15px 45px rgba(0, 0, 0, 0.12);
}
.about-service .curved-img-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
.about-service .dots-shape {
position: absolute;
top: 80px;
left: -40px;
z-index: 1;
opacity: 0.4;
}
.about-service .section-subtitle {
color: #3779b9;
font-weight: 700;
margin-bottom: 15px;
display: flex;
align-items: center;
gap: 12px;
font-size: 15px;
text-transform: uppercase;
letter-spacing: 1.5px;
}
.about-service .section-title {
font-size: 46px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
margin-bottom: 25px;
}
.about-service .section-desc {
font-size: 16px;
color: #64748b;
line-height: 1.8;
margin-bottom: 35px;
}
.about-service .maroon-icon {
color: #0f172a;
font-size: 18px;
margin-right: 12px;
}
.about-service .bullet-item span {
font-size: 16px;
font-weight: 600;
color: #0f172a;
}
.about-service .about-more-btn {
display: inline-flex;
align-items: center;
background: #3779b9;
color: #fff;
padding: 8px 8px 8px 25px;
border-radius: 6px;
text-decoration: none;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.about-service .about-more-btn:hover {
background: #2563eb;
transform: translateY(-2px);
}
.about-service .icon-circle {
width: 40px;
height: 40px;
/* background: #fff; */
color: #3779b9;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-left: 20px;
}
.about-service .animate-bounce-y {
animation: bounceY 4s infinite ease-in-out;
}
@media (max-width: 1199px) {
.about-service .content-area {
padding-left: 30px;
}
.about-service .section-title {
font-size: 38px;
}
.about-service .curved-img-wrap {
width: 260px;
height: 260px;
}
}
@media (max-width: 991px) {
.about-service .about-image-stack {
margin-bottom: 80px;
padding-left: 0;
}
.about-service .content-area {
padding-left: 0;
}
}
@media (max-width: 575px) {
.about-service .curved-img-wrap {
width: 200px;
height: 200px;
bottom: -20px;
left: 0;
}
.about-service .experience-box {
padding: 25px 20px;
}
.about-service .experience-box h3 {
font-size: 40px;
}
}
/* Blog Section One Styles */
.blog-section-one .blog-image {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.blog-section-one .blog-category-tag {
position: absolute;
bottom: 0px;
right: 0px;
background: #3779b9;
color: #fff;
padding: 10px 20px;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
z-index: 2;
/* border-radius: 12px 0 0 0; */
letter-spacing: 0.5px;
}
.blog-section-one .blog-style-one {
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
border-radius: 20px 20px 15px 15px;
background: #fff;
transition: all 0.3s ease;
}
.blog-section-one .blog-style-one:hover {
border-color: #3779b9;
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
}
.blog-section-one .blog-content {
padding: 30px 25px;
}
.blog-section-one .blog-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
height: 3em;
}
.blog-section-one .post-meta span {
display: inline-flex;
align-items: center;
gap: 8px;
margin-right: 15px;
font-size: 14px;
color: #64748b;
}
.blog-section-one .post-meta i {
color: #3779b9;
}
/* Blog Section Three Styles (Home-3) */
.blog-section-three .blog-title-box {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.blog-section-three .blog-image {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.blog-section-three .blog-image img {
width: 100%;
border-radius: 20px 20px 0 0;
}
.blog-section-three .blog-category-tag {
position: absolute;
bottom: 0px;
right: 0px;
background: #3779b9;
color: #fff;
padding: 10px 25px;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
z-index: 2;
border-radius: 12px 0 0 0;
}
.blog-section-three .blog-style-one {
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
border-radius: 20px 20px 15px 15px;
background: #fff;
transition: all 0.3s ease;
}
.blog-section-three .blog-style-one:hover {
border-color: #3779b9;
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
}
.blog-section-three .blog-content {
padding: 30px 25px;
}
.blog-section-three .blog-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
height: 3em;
}
/* Blog Two Section Styles (Home-2) */
.blog-two-section .blog-two-title-area {
display: flex;
align-items: flex-end;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
}
.blog-two-section .blog-image {
position: relative;
display: block;
overflow: hidden;
border-radius: 20px 20px 0 0;
}
.blog-two-section .blog-image img {
width: 100%;
border-radius: 20px 20px 0 0;
}
.blog-two-section .blog-category-tag {
position: absolute;
bottom: 0px;
right: 0px;
background: #3779b9;
color: #fff;
padding: 10px 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
z-index: 2;
border-radius: 12px 0 0 0;
}
.blog-two-section .blog-style-two {
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
border-bottom: 1px solid #e2e8f0;
border-radius: 20px 20px 15px 15px;
background: #fff;
transition: all 0.3s ease;
height: 100%;
}
.blog-two-section .blog-style-two:hover {
border-color: #3779b9;
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
}
.blog-two-section .blog-content-area {
padding: 30px 25px;
}
.blog-two-section .blog-title {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.5;
height: 3em;
}
/* FAQ Page Section Styles */
.faq-page-section {
/* background: #f8fbff; */
padding: 80px 0;
}
.faq-page-section .section-subtitle {
color: #3779b9;
font-weight: 700;
margin-bottom: 15px;
display: inline-flex;
align-items: center;
gap: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 14px;
}
.faq-page-section .section-title {
font-size: 48px;
font-weight: 800;
color: #1a1f2b;
margin-bottom: 20px;
}
.faq-page-section .section-desc {
color: #64748b;
font-size: 16px;
}
.faq-page-section .faq-item {
background: #fff;
border-radius: 12px;
border: 1px solid #e2e8f0;
margin-bottom: 15px;
overflow: hidden;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
}
.faq-page-section .faq-item.active {
border-color: #3779b9;
box-shadow: 0 10px 30px rgba(55, 121, 185, 0.1);
}
.faq-page-section .faq-question {
width: 100%;
padding: 18px 25px;
display: flex;
justify-content: space-between;
align-items: center;
background: none;
border: none;
text-align: left;
cursor: pointer;
outline: none;
}
.faq-page-section .question-text {
font-size: 15px;
font-weight: 700;
color: #1a1f2b;
line-height: 1.4;
}
.faq-page-section .faq-item.active .question-text {
color: #3779b9;
}
.faq-page-section .faq-icon {
width: 28px;
height: 28px;
min-width: 28px;
background: #f1f5f9;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 11px;
color: #64748b;
transition: all 0.3s ease;
}
.faq-page-section .faq-item.active .faq-icon {
background: #3779b9;
color: #fff;
transform: rotate(180deg);
}
.faq-page-section .faq-answer {
max-height: 0;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.faq-page-section .faq-answer.show {
max-height: 300px;
}
.faq-page-section .answer-inner {
padding: 0 25px 20px;
color: #64748b;
line-height: 1.6;
font-size: 14px;
}
.faq-page-section .faq-center-image-wrap {
padding: 0 15px;
}
.faq-page-section .main-faq-img {
width: 100%;
max-width: 400px;
border-radius: 20px;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
@media (max-width: 991px) {
.faq-page-section .section-desc {
margin-top: 20px !important;
padding-left: 0 !important;
border-left: none !important;
}
/* .faq-page-section .col-lg-4 {
margin-bottom: 30px;
} */
.faq-page-section .faq-center-image-wrap {
order: -1;
margin-bottom: 40px;
}
.faq-page-section .section-title {
font-size: 36px;
}
}
/* Contact Status Styles */
.status-container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 400px;
padding: 20px;
animation: fadeIn 0.5s ease-out;
}
.status-container .status-card {
background: #fff;
width: 100%;
max-width: 400px;
padding: 60px 40px;
border-radius: 24px;
text-align: center;
position: relative;
overflow: hidden;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.05);
animation: slideUp 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.status-container .bubbles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.status-container .bubble {
position: absolute;
border-radius: 50%;
opacity: 0.6;
}
.status-container.success .bubble {
background: #87b031;
}
.status-container.error .bubble {
background: #f1595d;
}
.status-container .bubble-1 {
width: 12px;
height: 12px;
top: 15%;
left: 10%;
animation: float 3s infinite ease-in-out;
}
.status-container .bubble-2 {
width: 8px;
height: 8px;
top: 25%;
right: 15%;
animation: float 4s infinite ease-in-out;
}
.status-container .bubble-3 {
width: 15px;
height: 15px;
bottom: 20%;
left: 15%;
animation: float 5s infinite ease-in-out;
}
.status-container .bubble-4 {
width: 10px;
height: 10px;
bottom: 15%;
right: 10%;
animation: float 3.5s infinite ease-in-out;
}
.status-container .bubble-5 {
width: 6px;
height: 6px;
top: 40%;
left: 5%;
animation: float 6s infinite ease-in-out;
}
.status-container .bubble-6 {
width: 14px;
height: 14px;
top: 60%;
right: 5%;
animation: float 4.5s infinite ease-in-out;
}
.status-container .bubble-7 {
width: 9px;
height: 9px;
top: 10%;
right: 30%;
animation: float 3.2s infinite ease-in-out;
}
.status-container .bubble-8 {
width: 11px;
height: 11px;
bottom: 10%;
left: 40%;
animation: float 4.8s infinite ease-in-out;
}
.status-container .bubble-9 {
width: 7px;
height: 7px;
top: 50%;
left: 20%;
animation: float 5.5s infinite ease-in-out;
}
.status-container .bubble-10 {
width: 13px;
height: 13px;
bottom: 40%;
right: 25%;
animation: float 3.8s infinite ease-in-out;
}
.status-container .bubble-11 {
width: 8px;
height: 8px;
top: 70%;
left: 35%;
animation: float 4.2s infinite ease-in-out;
}
.status-container .bubble-12 {
width: 10px;
height: 10px;
top: 5%;
left: 50%;
animation: float 3.6s infinite ease-in-out;
}
.status-container .icon-wrapper {
margin-bottom: 30px;
display: flex;
justify-content: center;
animation: bounce 1s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.3s both;
}
.status-container .icon-circle {
width: 100px;
height: 100px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 40px;
position: relative;
}
.status-container.success .icon-circle {
background: rgba(135, 176, 49, 0.15);
color: #87b031;
border: 4px solid #87b031;
}
.status-container.error .icon-circle {
background: rgba(241, 89, 93, 0.15);
color: #f1595d;
border: 4px solid #f1595d;
}
.status-container .status-title {
font-size: 32px;
font-weight: 800;
margin-bottom: 12px;
animation: fadeIn 0.5s ease-out 0.5s both;
}
.status-container.success .status-title {
color: #87b031;
}
.status-container.error .status-title {
color: #f1595d;
}
.status-container .status-message {
font-size: 16px;
color: #64748b;
margin-bottom: 40px;
line-height: 1.6;
animation: fadeIn 0.5s ease-out 0.6s both;
}
.status-container .status-btn {
padding: 16px 40px;
border: none;
border-radius: 14px;
font-weight: 700;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
width: 100%;
max-width: 200px;
animation: fadeIn 0.5s ease-out 0.7s both;
}
.status-container.success .status-btn {
background: #87b031;
color: #fff;
box-shadow: 0 10px 20px rgba(135, 176, 49, 0.3);
}
.status-container.success .status-btn:hover {
background: #769a2b;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(135, 176, 49, 0.4);
}
.status-container.error .status-btn {
background: #f1595d;
color: #fff;
box-shadow: 0 10px 20px rgba(241, 89, 93, 0.3);
}
.status-container.error .status-btn:hover {
background: #e04a4e;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(241, 89, 93, 0.4);
}
/* Map Section Styles */
.map-area {
margin-bottom: -10px;
}
.map-area .map-wrapper {
height: 500px;
width: 100%;
overflow: hidden;
border: none;
}
.map-area iframe {
display: block;
width: 100%;
height: 100%;
border: none;
background: transparent;
/* filter: grayscale(1); */
}
/* Contact Section Styles (Root) */
.contact-area .form-label {
display: block;
margin-bottom: 10px;
font-weight: 700;
color: #fff;
font-size: 15px;
letter-spacing: 0.5px;
}
.contact-area .contact-info-item .icon {
width: 75px;
height: 75px;
background: #fff;
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
color: #3779b9;
font-size: 28px;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 10px 25px rgba(99, 102, 241, 0.1);
}
@media (max-width: 424px) {
.contact-area .contact-info-item .icon {
width: 50px;
height: 50px;
min-width: 50px;
margin-right: 15px;
font-size: 18px;
}
.about-three__card__exp {
display: none;
}
.about-three__card__list {
width: 100%;
}
}
.contact-area .contact-info-item:hover .icon {
background: #3779b9;
color: #fff;
transform: scale(1.1) rotate(10deg);
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
}
.contact-area .contact-info-item .content span {
display: block;
font-size: 13px;
color: #64748b;
margin-bottom: 6px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 600;
}
.contact-area .contact-info-item .content h6 {
font-size: 22px;
font-weight: 700;
margin: 0;
color: #1e293b;
}
.contact-area .contact-info-item .content h6 a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-area .contact-info-item .content h6 a:hover {
color: #3779b9;
}
.contact-area .contact-form-wrapper {
background: #1a1f2b;
padding: 60px;
border-radius: 24px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.contact-area .contact-form input,
.contact-area .contact-form textarea,
.contact-area .contact-form select {
width: 100%;
padding: 18px 25px;
border: 1px solid #e2e8f0;
background: #fff !important;
border-radius: 12px;
outline: none;
transition: all 0.3s ease;
font-size: 15px;
color: #1e293b;
}
.contact-area .contact-form textarea {
min-height: 150px;
resize: vertical;
}
.contact-area .contact-form input:focus,
.contact-area .contact-form textarea:focus,
.contact-area .contact-form select:focus {
border-color: #3779b9;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1);
}
.contact-area .primary-btn-1 {
background: #3779b9;
color: #fff;
padding: 20px 30px;
border: none;
border-radius: 12px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 15px;
margin-top: 10px;
box-shadow: 0 10px 20px rgba(99, 102, 241, 0.2);
}
.contact-area .primary-btn-1:hover {
background: #1e293b;
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
}
.contact-area .text-danger {
color: #ff6b6b;
font-size: 12px;
margin-top: 5px;
display: block;
}
@media (max-width: 991px) {
.contact-area .contact-form-wrapper {
margin-top: 60px;
padding: 40px;
}
}
@media (max-width: 575px) {
.contact-area .contact-form-wrapper {
padding: 25px;
}
}
/* Success Page Unification Styles */
.success-hero-section {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 60px 0;
background: #ffffff;
overflow: hidden;
}
.success-hero-section .bg-shapes .shape {
position: absolute;
z-index: 0;
opacity: 0.15;
}
.success-hero-section .shape-1 {
width: 500px;
height: 500px;
background: #87b031;
top: -150px;
right: -150px;
border-radius: 50%;
}
.success-hero-section .shape-2 {
width: 450px;
height: 450px;
background: #a4d041;
bottom: -100px;
left: -100px;
border-radius: 50%;
}
.success-hero-section .shape-3 {
width: 300px;
height: 300px;
background: #d1ef8f;
top: 15%;
left: 5%;
border-radius: 50%;
}
.success-content-wrapper {
position: relative;
z-index: 1;
display: flex;
justify-content: center;
animation: fadeInUp 1.2s cubic-bezier(0.165, 0.84, 0.44, 1);
width: 100%;
}
.success-card-glass {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 60px;
width: 100%;
max-width: 850px;
display: flex;
flex-direction: column;
align-items: center;
padding: 90px 60px;
box-shadow: 0 30px 60px rgba(135, 176, 49, 0.1);
text-align: center;
position: relative;
}
.success-status-icon {
position: relative;
margin-bottom: 50px;
}
/* .icon-main-circle {
width: 180px;
height: 180px;
background: #ffffff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
border: 4px solid #87b031;
} */
.checkmark-svg {
width: 120px;
height: 120px;
z-index: 3;
}
.checkmark {
width: 100%;
height: 100%;
border-radius: 50%;
display: block;
stroke-width: 8;
stroke: #87b031;
stroke-miterlimit: 10;
animation: scale .3s ease-in-out .9s both;
}
.checkmark__circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
stroke-width: 8;
stroke-miterlimit: 10;
stroke: #87b031;
fill: none;
animation: stroke 0.8s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}
.checkmark__check {
transform-origin: 50% 50%;
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: stroke 0.4s cubic-bezier(0.65, 0, 0.45, 1) 0.9s forwards;
}
.floating-elements {
position: absolute;
top: 50%;
left: 50%;
width: 300px;
height: 300px;
transform: translate(-50%, -50%);
pointer-events: none;
}
.floating-elements .dot {
position: absolute;
background: #87b031;
border-radius: 50%;
opacity: 0;
}
.dot-1 {
width: 8px;
height: 8px;
top: 10%;
left: 20%;
animation: explode 2s 1s infinite;
}
.dot-2 {
width: 12px;
height: 12px;
top: 20%;
right: 10%;
animation: explode 2.5s 1.2s infinite;
background: #a4d041 !important;
}
.dot-3 {
width: 6px;
height: 6px;
bottom: 15%;
left: 15%;
animation: explode 3s 0.8s infinite;
}
.dot-4 {
width: 10px;
height: 10px;
bottom: 30%;
right: 20%;
animation: explode 2.2s 1.5s infinite;
background: #d1ef8f !important;
}
.dot-5 {
width: 7px;
height: 7px;
top: 40%;
left: 30%;
animation: explode 2.8s 1.1s infinite;
}
.dot-6 {
width: 9px;
height: 9px;
top: 60%;
right: 30%;
animation: explode 2.4s 1.3s infinite;
}
.dot-7 {
width: 5px;
height: 5px;
top: 15%;
left: 50%;
animation: explode 2.9s 0.9s infinite;
background: #87b031 !important;
}
.dot-8 {
width: 11px;
height: 11px;
bottom: 10%;
left: 45%;
animation: explode 2.6s 1.4s infinite;
background: #a4d041 !important;
}
.dot-9 {
width: 8px;
height: 8px;
top: 80%;
left: 10%;
animation: explode 2.7s 1.2s infinite;
}
.dot-10 {
width: 10px;
height: 10px;
top: 5%;
right: 40%;
animation: explode 2.3s 1s infinite;
background: #d1ef8f !important;
}
@keyframes stroke {
100% {
stroke-dashoffset: 0;
}
}
@keyframes scale {
0%,
100% {
transform: none;
}
50% {
transform: scale3d(1.1, 1.1, 1);
}
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(60px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes explode {
0% {
transform: scale(0) translate(0, 0);
opacity: 0;
}
50% {
opacity: 0.8;
}
100% {
transform: scale(1.5) translate(var(--x, 50px), var(--y, 50px));
opacity: 0;
}
}
/* Unique motion for dots using nth-child */
.dot:nth-child(odd) {
--x: -60px;
--y: -40px;
}
.dot:nth-child(even) {
--x: 60px;
--y: -60px;
}
.dot:nth-child(3n) {
--x: -40px;
--y: 60px;
}
.dot:nth-child(4n) {
--x: 70px;
--y: 50px;
}
.success-title {
font-size: 64px;
font-weight: 900;
color: #87b031;
margin-bottom: 12px;
letter-spacing: -2px;
}
.success-subtitle {
font-size: 24px;
color: #87b031;
font-weight: 700;
margin-bottom: 35px;
}
.success-card-glass .divider {
width: 80px;
height: 5px;
background: #87b031;
margin: 0 auto 35px;
border-radius: 3px;
}
.success-description {
font-size: 21px;
color: #4b5563;
line-height: 1.8;
margin-bottom: 50px;
}
.action-buttons {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.home-btn {
background: #1a1f2b !important;
color: #fff !important;
padding: 18px 45px !important;
font-size: 17px !important;
transition: all 0.3s ease !important;
text-decoration: none !important;
border-radius: 8px !important;
font-weight: 700 !important;
}
.home-btn:hover {
background: #87b031 !important;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.success-card-glass {
padding: 60px 25px;
border-radius: 40px;
}
.success-title {
font-size: 42px;
}
.success-subtitle {
font-size: 19px;
}
.success-description {
font-size: 17px;
}
/* .icon-main-circle {
width: 140px;
height: 140px;
} */
.checkmark-svg {
width: 90px;
height: 90px;
}
}
/* ============================================================
WHY CHOOSE US - Parallax & Style Refinements
============================================================ */
.why-choose-us {
position: relative;
overflow: hidden;
background-color: #000;
}
.why-choose-us__bg {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-attachment: fixed;
background-size: cover;
background-position: center;
z-index: 0;
}
.why-choose-us__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* background: rgba(0, 0, 0, 0.75); */
z-index: 1;
}
.why-choose-us .container {
position: relative;
z-index: 2;
}
.why-choose-us__image-wrapper {
overflow: hidden;
border-radius: 12px;
max-height: 400px;
/* Reduced height to match content better */
}
.why-choose-us__main-image {
width: 100%;
height: 400px;
object-fit: cover;
display: block;
}
.why-choose-us .note-item i {
color: #3779b9 !important;
/* Keep the brand color for icons */
}
/* ============================================================
BLOG DETAILS SECTION
============================================================ */
.blog-details-img img {
height: 500px;
width: 100%;
object-fit: cover;
border-radius: 0 !important;
/* User requested no border radius */
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}
.details-text img {
border-radius: 0 !important;
margin: 20px 0;
}
.blog-meta {
display: flex;
gap: 30px;
font-size: 16px;
color: #64748b;
font-weight: 600;
margin-bottom: 25px;
/* Reduced */
}
.blog-meta i {
color: #3779b9;
margin-right: 8px;
}
.details-title {
font-size: 42px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
margin-bottom: 25px;
/* Reduced */
}
.details-text {
font-size: 18px;
line-height: 1.8;
color: #475569;
}
.details-text p {
margin-top: 20px !important;
/* Reduced for better balance */
margin-bottom: 20px !important;
}
.details-text h4 {
font-size: 22px !important;
/* Increased for better prominence */
font-weight: 700;
color: #1e293b;
margin-top: 35px !important;
/* Reduced for better balance */
margin-bottom: 20px !important;
/* Reduced for better balance */
}
.details-text ul,
.details-text ol {
margin-top: 20px !important;
margin-bottom: 20px !important;
padding-left: 20px;
}
.details-text ul {
list-style-type: disc;
}
.details-text ol {
list-style-type: decimal;
}
.details-text li {
font-size: 16px;
/* Matched to paragraph size */
margin-bottom: 10px;
/* Increased for clear view */
padding-left: 10px;
}
.details-text a {
color: #3779b9;
font-weight: 600;
text-decoration: none;
}
.details-text a:hover {
color: #2c6195;
}
.blog-blockquote {
background: #f8fbff;
padding: 40px 60px;
border-left: 5px solid #3779b9;
border-radius: 0 24px 24px 0;
position: relative;
margin: 30px 0;
/* Reduced */
}
.blog-blockquote p {
font-size: 22px;
font-style: italic;
font-weight: 700;
color: #1e293b;
line-height: 1.5;
margin: 0;
}
/* Override primary-btn-5 to NOT be white */
.primary-btn-5 {
background-color: #3779b9 !important;
color: #fff !important;
border: 1px solid #3779b9 !important;
}
.primary-btn-5:hover {
background-color: #1e293b !important;
border-color: #1e293b !important;
color: #fff !important;
}
.primary-btn-5 span {
background-color: #1e293b !important;
}
/* Blog Card Footer Styles */
.blog-footer {
margin-top: 15px;
padding-top: 10px;
}
.post-meta-admin {
display: flex;
align-items: center;
gap: 10px;
font-size: 15px;
color: #0f172a;
font-weight: 500;
}
.post-meta-admin i.icon-blue {
color: #3779b9;
font-size: 22px;
}
.learn-more-link {
font-size: 16px;
font-weight: 700;
color: #0f172a;
text-decoration: none;
transition: all 0.3s ease;
}
.learn-more-link span {
color: #3779b9;
margin-left: 5px;
font-size: 18px;
}
.learn-more-link:hover {
color: #3779b9;
}
.border-top {
border-top: 1px solid #e2e8f0;
}
/* ============================================================
BLOG SECTION & PAGINATION (GLOBAL)
============================================================ */
/* .blog-section-one.section-space {
padding-bottom: 0;
} */
.pagination-wrapper {
padding-top: 60px;
/* padding-bottom: 80px; */
text-align: center;
}
.pagination-items {
display: flex !important;
justify-content: center;
align-items: center;
gap: 12px !important;
}
.pagination-arrow {
width: 48px;
height: 48px;
background: white;
border: 1px solid #eef2f6;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
border-radius: 6px;
color: #3779b9;
font-size: 14px;
cursor: pointer;
}
.pagination-arrow:hover:not(.disabled) {
background: #3779b9 !important;
color: white !important;
border-color: #3779b9 !important;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(55, 121, 185, 0.2);
}
.pagination-arrow.disabled {
background: #f8fafc !important;
color: #cbd5e1 !important;
border-color: #f1f5f9 !important;
box-shadow: none !important;
opacity: 0.6 !important;
cursor: not-allowed;
}
.pagination-btn {
width: 48px;
height: 48px;
background: white;
border: 1px solid #eef2f6;
border-radius: 6px;
font-weight: 700;
font-size: 16px;
color: #475569;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
cursor: pointer;
}
.pagination-btn.active {
background: #3779b9 !important;
color: white !important;
border-color: #3779b9 !important;
box-shadow: 0 6px 15px rgba(55, 121, 185, 0.3);
}
.pagination-btn:hover:not(.active) {
background: #f1f5f9;
border-color: #3779b9;
color: #3779b9;
transform: translateY(-2px);
}
@media (max-width: 991px) {
.details-title {
font-size: 32px;
}
.blog-details-img img {
height: 400px;
}
.blog-blockquote {
padding: 30px 40px;
}
}
@media (max-width: 767px) {
.blog-meta {
flex-direction: column;
gap: 10px;
}
.blog-details-img img {
height: 300px;
}
}
/* Custom About Features for Metatron */
.about-feature-item-3 {
display: flex;
gap: 20px;
align-items: flex-start;
padding: 10px 0;
}
.about-feature-item-3 .icon {
width: 60px;
height: 60px;
min-width: 60px;
background: rgba(55, 121, 185, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
color: #3779b9;
font-size: 24px;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.about-feature-item-3:hover .icon {
background: #3779b9;
color: #fff;
transform: translateY(-8px) scale(1.1);
box-shadow: 0 10px 20px rgba(55, 121, 185, 0.2);
}
.about-feature-item-3 .content {
flex: 1;
}
.about-feature-item-3 .tagline {
font-size: 13px;
color: #3779b9;
text-transform: uppercase;
font-weight: 600;
margin-bottom: 5px;
display: block;
letter-spacing: 0.5px;
}
.about-feature-item-3 .title {
font-size: 22px;
font-weight: 700;
color: #0d1e3d;
margin-bottom: 8px;
transition: color 0.3s ease;
}
.about-feature-item-3:hover .title {
color: #3779b9;
}
.about-feature-item-3 p {
color: #555;
margin-bottom: 0;
font-size: 15px;
line-height: 1.6;
}
/* -----------------------------------------------------------
FIX: Global Responsiveness & Overflow (requested breakpoints)
----------------------------------------------------------- */
/* Prevent horizontal overflow globally */
html,
body {
overflow-x: hidden !important;
width: 100%;
position: relative;
}
/* Base fixes for Hero and About */
.banner-title {
word-wrap: break-word;
overflow-wrap: break-word;
}
.working-area {
transition: all 0.3s ease;
}
/* 1920px - 1600px */
@media (max-width: 1920px) {
.large-container {
max-width: 1720px !important;
margin: 0 auto;
}
}
@media (max-width: 1600px) {
.large-container {
max-width: 1550px !important;
}
h1.banner-title {
font-size: 56px !important;
}
}
/* 1540px */
@media (max-width: 1540px) {
.large-container {
max-width: 1480px !important;
}
h1.banner-title {
font-size: 52px !important;
}
}
/* 1440px */
@media (max-width: 1440px) {
.large-container {
max-width: 1380px !important;
}
h1.banner-title {
font-size: 50px !important;
line-height: 1.2 !important;
}
}
/* 1360px */
@media (max-width: 1360px) {
.large-container {
max-width: 1300px !important;
}
}
/* 1200px */
@media (max-width: 1200px) {
.large-container {
max-width: 1140px !important;
}
h1.banner-title {
font-size: 48px !important;
}
.about-us-image-area .working-area {
left: 103px !important;
top: 24px !important;
}
}
/* 1024px */
@media (max-width: 1024px) {
.large-container {
max-width: 960px !important;
}
.about-us-image-area .working-area {
left: 72px !important;
top: -18px !important;
}
h1.banner-title {
font-size: 42px !important;
}
}
/* 992px */
@media (max-width: 992px) {
.banner-main {
padding: 150px 0 !important;
}
h1.banner-title {
font-size: 38px !important;
line-height: 1.3 !important;
}
.banner-area {
padding-left: 20px !important;
}
}
/* 768px */
@media (max-width: 768px) {
.banner-main {
padding: 100px 0 !important;
}
.about-us-image-area .working-area {
left: 151px !important;
top: -18px !important;
}
h1.banner-title {
font-size: 34px !important;
}
/* Inner page banner fixes */
.page-header__bg {
display: none !important;
}
.page-header__shape {
width: 30% !important;
}
}
/* 500px */
@media (max-width: 500px) {
h1.banner-title {
font-size: 28px !important;
line-height: 1.2 !important;
}
.about-us-image-area .working-area {
left: 77px !important;
top: -18px !important;
}
.banner-sub-title {
font-size: 14px !important;
letter-spacing: 5px !important;
/* margin-left: 5px !important; */
}
.banner-sub-title:before {
left: -40px !important;
width: 30px !important;
}
}
@media (max-width: 475px) {
.about-us-image-area .working-area {
left: 49px !important;
top: -18px !important;
}
}
/* 425px */
@media (max-width: 425px) {
h1.banner-title {
font-size: 26px !important;
}
.banner-btn-area {
flex-direction: column !important;
gap: 15px !important;
}
}
/* 375px */
@media (max-width: 375px) {
h1.banner-title {
font-size: 24px !important;
}
.about-us-image-area .working-area {
left: 30px !important;
top: -18px !important;
}
.about-us-image-area .icon-box i {
color: #fff;
font-size: 38px !important;
}
.about-us-image-area .working-area {
padding: 25px 16px 10px !important;
}
.about-us-image-area .icon-box h4 {
color: #fff;
margin-top: 14px;
font-size: 14px;
margin-bottom: 1px;
}
.about-us-image-area .icon-box p {
font-family: var(--secondary-font);
color: #fff;
position: relative;
font-size: 12px !important;
}
.banner-area {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
/* 320px */
@media (max-width: 320px) {
h1.banner-title {
font-size: 22px !important;
}
.banner-main {
padding: 80px 0 !important;
}
}
@media (max-width: 768px) {
.page-header__bg {
display: none !important;
}
.page-header {
padding: 100px 0 !important;
}
}
@media (max-width: 768px) {
.page-header__shape {
width: 30%;
}
}
@media (max-width: 425px) {
.sec-title__tagline {
font-size: 12px !important;
}
}
@media (max-width: 767px) {
.counter-area-three__list,
.counter-area-two__list {
display: flex;
flex-direction: column;
}
.about-service .dots-shape {
display: none;
}
.counter-area-three__item,
.counter-area-two__item {
padding: 15px 0 25px !important;
}
}
@media (max-width: 425px) {
.testimonials-two-box-solid {
padding: 40px 10px 40px 55px;
margin-left: 48px;
}
.counselling-solutions__image__two {
display: none;
}
}
@media (max-width: 500px) {
.contact-area .contact-info-item .content h6 {
font-size: 14px;
}
.faq-one__card {
flex-direction: column !important;
}
.choose-section .bg-image {
display: none;
}
}
@media (max-width: 390px) {
.blog-style-one .blog-content {
padding: 15px !important;
}
.blog-style-one .post-meta {
gap: 10px !important;
}
.blog-section-one .post-meta span {
gap: 0px;
}
.blog-section-one .post-meta span {
margin-right: 10px;
}
}
@media (max-width: 350px) {
.contact-area .contact-form input,
.contact-area .contact-form select,
.contact-area .primary-btn-1,
.contact-area .contact-form textarea,
.contact-one .submit-btn,
.contact-one .form-textarea,
.contact-one .form-select-custom,
.contact-one .form-input,
.form-input-custom-global,
.form-select-custom-styled-global,
.form-textarea-custom-global,
.submit-btn-custom-global {
width: 80% !important;
}
}
.about-service {
position: relative;
}
.about-service .dots-shape {
position: absolute;
top: 80px;
left: -40px;
z-index: 0;
opacity: 0.4;
}
.about-service img {
position: relative;
z-index: 2;
}
@media (max-width: 1192px) {
.pelocis-stretch-element-inside-column {
margin-right: 0 !important;
}
}
/* ============================================================
METATRON HEADER (MOBILE APP STYLE) - REFINED
============================================================ */
.header-metatron-style {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 1001;
/* High enough to be over offcanvas overlay (900) and info (999) */
padding: 0;
/* Remove default padding, we use row-bg3 for padding */
}
/* Glassmorphism row for header */
.row-bg3 {
background: rgba(26, 31, 43, 0.8) !important;
backdrop-filter: blur(12px) !important;
-webkit-backdrop-filter: blur(12px) !important;
border: 1px solid rgba(255, 255, 255, 0.1) !important;
border-radius: 16px !important;
padding: 12px 30px !important;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
margin-top: 20px !important;
transition: all 0.3s ease !important;
}
@media (max-width: 991px) {
.row-bg3 {
margin-top: 0 !important;
border-radius: 0 !important;
border: none !important;
background: #1a1f2b !important;
padding: 15px 20px !important;
}
}
@media (max-width: 991px) {
.header-metatron-style {
padding: 0;
}
}
.header-area-metatron {
transition: all 0.4s ease;
}
.header-area-metatron.sticky {
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 16px 0;
/* Maintains the "cut" from edges */
z-index: 1000;
animation: metatronSlideDown 0.4s ease forwards;
}
@keyframes metatronSlideDown {
from {
transform: translateY(-100%);
}
to {
transform: translateY(0);
}
}
.header-row-wrapper {
display: flex !important;
justify-content: space-between;
border: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(26, 31, 43, 0.9);
/* Slightly more solid dark glass */
backdrop-filter: blur(12px);
padding: 12px 10px;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.header-area-metatron.sticky .header-row-wrapper {
background: #1a1f2b;
/* Solid dark background when sticky for better visibility */
border-radius: 16px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
@media (max-width: 991px) {
.header-row-wrapper {
border-radius: 0;
padding: 15px 20px;
background: #1a1f2b;
/* Mobile background also dark */
border: none;
}
}
.header-logo-metatron img {
max-width: 170px;
height: auto;
transition: all 0.3s ease;
/* filter: brightness(0) invert(1); */
/* Force logo to white */
}
.main-menu-metatron ul {
display: flex;
justify-content: center;
gap: 7px;
margin: 0;
padding: 0;
list-style: none;
}
.main-menu-metatron ul li {
position: relative;
padding: 25px 0;
}
.main-menu-metatron ul li a {
font-size: 16px;
font-family: 'Figtree', sans-serif;
padding: 0 5px;
font-weight: 700;
color: #ffffff;
/* White text for dark theme */
/* text-transform: uppercase; */
transition: all 0.3s;
letter-spacing: 0.5px;
}
.main-menu-metatron ul li a:hover {
color: #3779b9;
}
/* Submenu Style */
.main-menu-metatron ul li .submenu {
position: absolute;
top: 100%;
left: 0;
width: 380px;
background: #1a1f2b;
/* Dark background like mobile app */
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
padding: 15px 0;
border-radius: 12px;
opacity: 0;
visibility: hidden;
transform: translateY(20px) scale(0.95);
transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
z-index: 100;
display: block !important;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.main-menu-metatron ul li:hover .submenu {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.main-menu-metatron ul li .submenu li {
width: 100%;
padding: 0;
}
.main-menu-metatron ul li .submenu li a {
padding: 12px 25px;
display: block;
text-align: left;
font-size: 16px;
/* text-transform: uppercase; */
font-weight: 600;
color: #ffffff;
/* White text for dark theme */
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.main-menu-metatron ul li .submenu li:last-child a {
border-bottom: none;
}
.main-menu-metatron ul li .submenu li a:hover {
background: rgba(55, 121, 185, 0.15);
color: #3779b9;
padding-left: 35px;
}
.metatron-primary-btn {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
color: #fff !important;
padding: 12px 10px;
border-radius: 10px;
font-weight: 700;
font-size: 14px;
transition: all 0.3s;
display: inline-flex;
align-items: center;
text-transform: uppercase;
letter-spacing: 1px;
}
.metatron-primary-btn:hover {
background: #3779b9;
transform: translateY(-3px);
box-shadow: 0 10px 20px rgba(55, 121, 185, 0.3);
}
.hamburger-btn {
background: rgba(255, 255, 255, 0.1);
border: none;
width: 40px;
height: 45px;
border-radius: 12px;
font-size: 18px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s;
}
.hamburger-btn:hover {
background: #3779b9;
color: #fff;
}
.banner-section {
padding-top: 0 !important;
}
/* ============================================================
Features One (fo-) Section
============================================================ */
:root {
--getizy-base: #3779b9;
--getizy-base-two: #1a1f2b;
--getizy-secondary: #222230;
--getizy-white: #FFFFFF;
--getizy-text: #7F7D86;
}
.fo-section {
position: relative;
overflow: visible;
padding-top: 80px;
padding-bottom: 80px;
}
.fo-shapes {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
overflow: hidden;
}
.fo-shape-one {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
opacity: 0.06;
background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%);
top: -200px;
left: -200px;
}
.fo-shape-two {
position: absolute;
width: 600px;
height: 600px;
border-radius: 50%;
opacity: 0.06;
background: radial-gradient(circle, var(--getizy-base) 0%, transparent 70%);
bottom: -200px;
right: -200px;
}
.fo-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 15px;
position: relative;
z-index: 1;
}
.fo-row {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 30px;
justify-content: center;
padding-top: 60px;
}
.fo-col {
flex: 1 1 300px;
max-width: 360px;
padding-top: 50px;
}
.fo-item {
position: relative;
}
.fo-hover-card {
position: absolute;
top: -74px;
left: 0;
right: 0;
z-index: 4;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
padding: 50px 75px 20px 23px;
visibility: hidden;
opacity: 0;
transform: translateY(-30px);
transition: opacity 500ms ease, visibility 500ms ease, transform 500ms ease;
min-height: 160px;
}
.fo-item:hover .fo-hover-card,
.fo-item--active .fo-hover-card {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
@media (max-width: 767px) {
.fo-hover-card {
display: none !important;
}
.fo-col {
padding-top: 0;
}
}
.fo-hover-icon {
position: absolute;
top: -50px;
left: 50%;
transform: translateX(-50%);
width: 84px;
height: 84px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
z-index: 5;
/* box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35); */
}
.fo-hover-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 10px 0 0;
}
.fo-card {
position: relative;
z-index: 1;
}
.fo-card-top {
position: relative;
background-color: var(--getizy-secondary);
padding: 28px 28px 30px 28px;
min-height: 160px;
display: flex;
flex-direction: column;
justify-content: flex-start;
transition: background-color 0.45s ease;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
}
.fo-item:hover .fo-card-top,
.fo-item--active .fo-card-top {
background-color: #fff;
border-left: 4px solid var(--getizy-secondary);
border-right: 4px solid var(--getizy-secondary);
}
@media (max-width: 767px) {
.fo-card-top {
background-color: #fff;
border: 1px solid #eee;
border-radius: 12px;
min-height: auto;
padding: 20px;
}
}
.fo-card-title {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
color: #fff;
margin: 0 0 16px;
transition: color 0.45s ease;
}
.fo-item:hover .fo-card-title,
.fo-item--active .fo-card-title {
color: var(--getizy-secondary);
}
@media (max-width: 767px) {
.fo-card-title {
color: var(--getizy-secondary);
font-size: 18px;
margin-bottom: 8px;
}
}
.fo-card-desc {
font-size: 14px;
line-height: 1.7;
color: var(--getizy-text);
margin: 0;
transition: color 0.45s ease;
}
.fo-card-bottom {
background-color: #fff;
padding: 20px 20px 20px 20px;
position: relative;
border: 4px solid transparent;
border-image: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
border-image-slice: 1;
transition: padding 0.45s ease, border 0.45s ease;
}
.fo-item:hover .fo-card-bottom,
.fo-item--active .fo-card-bottom {
border-image: none;
border-color: var(--getizy-secondary);
border-style: solid;
border-width: 4px;
border-top: none;
padding: 0 32px 40px 32px;
}
.fo-card-image {
width: 100%;
height: 126px;
overflow: hidden;
}
.fo-card-icon {
position: absolute;
bottom: -48px;
left: 18px;
width: 96px;
height: 96px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(90deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
z-index: 3;
box-shadow: 0 8px 24px rgba(211, 61, 53, 0.35);
transition: opacity 500ms ease, transform 500ms ease;
}
.fo-item:hover .fo-card-icon,
.fo-item--active .fo-card-icon {
opacity: 0;
transform: rotateY(180deg);
}
.fo-mobile-icon {
width: 50px;
height: 50px;
background: linear-gradient(135deg, var(--getizy-base) 0%, var(--getizy-base-two) 100%);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* ============================================================
Offcanvas Mobile Navigation (React-based, replaces meanmenu)
============================================================ */
.offcanvas-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.offcanvas-nav>ul>li {
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.offcanvas-nav__row {
display: flex;
align-items: center;
justify-content: space-between;
}
.offcanvas-nav__row a {
display: block;
padding: 12px 0;
color: #fff;
font-size: 15px;
font-weight: 600;
/* text-transform: uppercase; */
letter-spacing: 0.5px;
text-decoration: none !important;
transition: color 0.2s;
flex: 1;
}
.offcanvas-nav__row a:hover {
color: #3779b9;
}
.offcanvas-nav__toggle {
background: rgba(255, 255, 255, 0.08);
border: none;
color: #fff;
width: 32px;
height: 32px;
border-radius: 6px;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
flex-shrink: 0;
}
.offcanvas-nav__toggle:hover {
background: #3779b9;
}
.offcanvas-submenu {
padding: 0 0 8px 16px;
}
.offcanvas-submenu li {
border-bottom: none !important;
}
.offcanvas-submenu li a {
padding: 8px 0 !important;
font-size: 13px !important;
color: rgba(255, 255, 255, 0.75) !important;
/* text-transform: uppercase !important; */
font-weight: 500 !important;
letter-spacing: 0.3px !important;
}
.offcanvas-submenu li a:hover {
color: #3779b9 !important;
}
@media (max-width: 425px) {
.primary-btn-1 {
font-size: 12px !important;
padding: 20px 10px !important;
}
.faq-two .section-heading {
font-size: 32px !important;
}
}
/* ============================================================
GLOBAL BUTTON & TAB STANDARDIZATION (2000% EXACT MATCH)
============================================================ */
.primary-btn-1,
.vl-btn1,
.vl-btn2,
.theme-btn,
.about-more-btn,
.banner-btn-area a,
.secondary-btn,
.btn-one,
.pf-tab-btn,
.project-btn,
.service-tabs .nav-tabs .nav-link.active,
.service-tabs .nav-tabs .nav-link:hover,
.tp-btn,
.list-unstyled-item,
.hamburger-btn,
.df-search-close-btn,
.primary-btn-1,
.vl-btn1,
.vl-btn2,
.theme-btn,
.about-more-btn,
.banner-btn-area a,
.secondary-btn,
.btn-one,
.postbox__slider-button-next,
.postbox__slider-button-prev,
.tolak-btn,
.submit-btn,
.contact-one__form .tolak-btn,
.about-2-btn-area a,
.pf-tabs button,
.pf-tab-btn.active,
.pf-tab-btn {
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%) !important;
background-size: 200% auto !important;
border-radius: 10px !important;
color: #fff !important;
padding: 15px 30px !important;
border: none !important;
transition: all 0.5s ease-6ms !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
text-decoration: none !important;
background-position: left center !important;
font-weight: 700 !important;
}
.primary-btn-1:hover,
.vl-btn1:hover,
.vl-btn2:hover,
.theme-btn:hover,
.about-more-btn:hover,
.banner-btn-area a:hover,
.secondary-btn:hover,
.btn-one:hover,
.submit-btn-custom-global:hover,
.pf-tab-btn:hover,
.pf-tab-btn.active,
.pf-tabs button:hover,
.project-btn:hover,
.tp-btn:hover,
.list-unstyled-item:hover,
.list-unstyled-item.active,
.hamburger-btn:hover,
.df-search-close-btn:hover,
.postbox__slider-button-next:hover,
.postbox__slider-button-prev:hover,
.tolak-btn:hover,
.submit-btn:hover,
.contact-one__form .tolak-btn:hover,
.contact-one__form button:hover,
.about-2-btn-area a:hover {
background-position: left center !important;
color: #fff !important;
opacity: 1 !important;
}
/* ============================================================
ACCESSIBILITY STATEMENT PAGE
============================================================ */
.accessibility-section {
background: #ffffff;
padding-top: 80px;
padding-bottom: 80px;
}
.accessibility-content {
color: #444;
line-height: 1.8;
}
.accessibility-content h2 {
font-size: 34px;
font-weight: 700;
color: #1a1f2b;
border-left: 4px solid #3779b9;
padding-left: 16px;
margin-bottom: 28px;
margin-top: 0;
}
.accessibility-content h3 {
font-size: 22px;
font-weight: 700;
color: #1a1f2b;
margin-top: 44px;
margin-bottom: 20px;
position: relative;
padding-bottom: 12px;
}
.accessibility-content h3::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 100%);
border-radius: 2px;
}
.accessibility-content p {
font-size: 15px;
line-height: 1.9;
color: #555;
margin-bottom: 18px;
}
.accessibility-content a {
color: #3779b9;
text-decoration: underline;
transition: color 0.3s;
}
.accessibility-content a:hover {
color: #1a1f2b;
}
.accessibility-content ul {
margin-bottom: 28px;
padding-left: 0;
list-style: none;
}
.accessibility-content ul li {
font-size: 15px;
line-height: 1.85;
color: #555;
margin-bottom: 16px;
position: relative;
padding-left: 30px;
list-style: none;
}
.accessibility-content ul li::before {
content: "";
background-image: url("/assets/img/arrow-white.png");
background-size: contain;
background-repeat: no-repeat;
width: 14px;
height: 14px;
position: absolute;
top: 6px;
left: 0;
filter: invert(37%) sepia(72%) saturate(600%) hue-rotate(185deg) brightness(100%) contrast(95%);
}
.accessibility-content ul li strong {
color: #1a1f2b;
font-weight: 600;
}
@media (max-width: 767px) {
.accessibility-section {
padding-top: 60px;
padding-bottom: 60px;
}
.accessibility-content h2 {
font-size: 26px;
}
.accessibility-content h3 {
font-size: 20px;
}
}
/*
Service One Home 100% Exact - Final Refinement
*/
.service-one-home {
padding: 80px 0;
padding-top: 80px;
/* background-color: var(--pelocis-gray, #F5F2EF); */
position: relative;
overflow: hidden;
counter-reset: count;
}
.service-one-home__shape-one {
position: absolute;
top: 0;
right: 0;
}
.service-one-home__shape-two {
position: absolute;
left: 0;
top: 0;
}
.service-one-home__shape-three {
position: absolute;
bottom: 0;
right: 0;
}
.service-one-home .container {
z-index: 1;
position: relative;
}
@media (min-width: 1200px) {
.service-one-home .container {
max-width: 1200px;
}
}
.sec-title {
/* padding-bottom: 50px; */
position: relative;
}
.sec-title__shape {
position: relative;
display: inline-block;
}
.sec-title__shape::before {
content: "";
width: 13px;
height: 13px;
background-color: var(--pelocis-base, #e2a475);
display: block;
}
.sec-title__shape::after {
content: "";
width: 12px;
height: 12px;
background-color: var(--pelocis-black, #222222);
border: 1px solid var(--pelocis-white, #fff);
display: block;
position: absolute;
bottom: -3px;
right: -3px;
}
.sec-title__tagline {
margin: 0;
font-family: var(--pelocis-font, inherit);
color: var(--pelocis-base, #e2a475);
font-size: 18px;
line-height: 16px;
text-transform: uppercase;
font-weight: 500;
display: inline-block;
vertical-align: middle;
margin-left: 10px;
}
.sec-title__title {
margin: 0;
font-size: 35px;
color: var(--pelocis-black, #222222);
font-weight: bold;
line-height: 1.3;
margin-top: 6px;
}
.service-one-home__title__shape {
position: absolute;
right: 68px;
top: -25px;
}
.service-one-home__text p {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: var(--pelocis-text-dark, #636363);
}
.service-one-home__carousel.swiper {
position: relative;
overflow: hidden;
}
.service-one-home__carousel .swiper-slide {
height: auto;
display: flex !important;
}
.service-one-home .item {
width: 100%;
height: 100%;
}
.service-one-home .home-services__card {
background-color: var(--pelocis-white, #fff);
position: relative;
overflow: hidden;
counter-increment: count;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.service-one-home .home-services__card__icon img {
filter: brightness(0) invert(1);
}
.service-one-home .home-services__card__content {
padding: 11px 30px;
padding-top: 110px;
flex-grow: 1;
}
.service-one-home .home-services__card__shape--one {
width: 180px;
height: 137px;
border-radius: 50%;
position: absolute;
right: 19px;
top: -80px;
background-color: var(--pelocis-black, #222222);
transition: all 500ms ease;
}
.service-one-home .home-services__card__shape--two {
width: 180px;
height: 137px;
border-radius: 50%;
position: absolute;
right: -133px;
top: -50px;
background-color: var(--pelocis-black, #222222);
transition: all 500ms ease;
}
.service-one-home .home-services__card__icon {
width: 76px;
height: 76px;
margin: 0 auto;
margin-bottom: 18px;
background-color: var(--pelocis-base, #e2a475);
color: var(--pelocis-white, #fff);
display: flex;
justify-content: center;
align-items: center;
font-size: 42px;
border-radius: 10px;
position: absolute;
right: 30px;
top: 30px;
transition: all 500ms ease;
z-index: 1;
}
.service-one-home .home-services__card:hover .home-services__card__icon {
background-color: var(--pelocis-black, #222222);
}
.service-one-home .home-services__card__count {
display: none !important;
}
.service-one-home .home-services__card__title {
font-size: 22px;
font-weight: 500;
line-height: 26px;
color: var(--pelocis-black, #222222);
margin-bottom: 12px;
}
.service-one-home .home-services__card__title a {
color: inherit;
background: linear-gradient(to right, currentcolor 0%, currentcolor 100%) 0px 95% / 0px 1px no-repeat;
transition: all 500ms ease;
}
.service-one-home .home-services__card__title a:hover {
color: var(--pelocis-base, #e2a475);
}
.service-one-home .home-services__card__text {
font-size: 18px;
font-weight: 400;
line-height: 28px;
color: var(--pelocis-text-dark, #636363);
margin-bottom: 16px;
}
.service-one-home .home-services__card__image {
position: relative;
overflow: hidden;
}
.service-one-home .home-services__card__image img {
width: 100%;
transition: all 500ms ease;
}
.service-one-home .home-services__card:hover .home-services__card__image img {
transform: scale(1.05);
}
.service-one-home .home-services__card__hover {
width: 100%;
height: 100%;
background: rgba(var(--pelocis-black2-rgb), 0.7);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
transition: all 500ms ease;
opacity: 0;
visibility: hidden;
}
.service-one-home .home-services__card:hover .home-services__card__hover {
opacity: 1;
visibility: visible;
}
.service-one-home .home-services__card__hover-link {
width: 42px;
height: 42px;
border-radius: 10px;
font-size: 24px;
background-color: var(--pelocis-base, #e2a475);
color: var(--pelocis-white, #fff);
display: flex;
justify-content: center;
align-items: center;
transform: translateX(-100px);
transition: all 500ms ease;
}
.service-one-home .home-services__card:hover .home-services__card__hover-link {
transform: translateX(0);
}
.service-one-home .home-services__card__link {
width: 42px;
height: 42px;
border-radius: 10px;
position: absolute;
right: 10px;
bottom: 10px;
background-color: var(--pelocis-white, #fff);
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
transition: all 500ms ease;
z-index: 2;
}
.service-one-home .home-services__card__link i {
display: inline-block;
font-weight: normal;
transform: rotate(-45deg);
color: #000 !important;
}
.service-one-home__swiper-dot,
.bd-swiper-dot,
.swiper-pagination {
display: none !important;
}
.align-items-center {
align-items: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
@media (max-width: 1199px) and (min-width: 600px) {
.why-choose-two .pelocis-stretch-element-inside-column {
left: 152px;
}
}
@media (max-width: 1110px) and (min-width: 992px) {
.main-menu-metatron ul {
justify-content: flex-start;
}
.main-menu-metatron ul li a {
padding: 5px 5px;
font-size: 13px;
}
header .vl-btn1 {
padding-left: 15px !important;
padding-right: 15px !important;
}
.main-menu-metatron ul li .submenu li a {
font-size: 13px;
}
}
/* ============================================================
HEADER CONTAINER CONSTRAINT (1024px - 1920px)
============================================================ */
@media (min-width: 1024px) and (max-width: 1920px) {
.header-metatron-style .container-fluid.headerfix {
max-width: 1320px !important;
margin-right: auto !important;
margin-left: auto !important;
padding-left: 15px !important;
padding-right: 15px !important;
}
.header-metatron-style .row-bg3 {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
@media (max-width: 1200px) {
/* .brand-section{
padding-top: 90px !important;
} */
.home-contact-one .appointment__form__top .sec-title__title {
font-size: 30px !important;
}
}
@media (max-width: 1024px) {
.choose-section .bg-image {
display: none !important;
}
.sidebar__call__title {
margin: 0 0 1px !important;
font-size: 14px !important;
font-weight: 700;
color: var(--insuba-white);
line-height: 1.4;
}
.sidebar__call__number {
position: relative;
z-index: 1;
font-size: 14px !important;
font-weight: 400;
color: var(--insuba-white);
line-height: 1;
text-decoration: none;
transition: all 500ms ease;
}
.sidebar__call__icon {
width: 60px !important;
height: 60px !important;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 28px !important;
color: #fff;
background-color: #3779b9;
border: 6px solid #fff;
border-radius: 43px;
}
}
@media (max-width: 992px) {
.home-contact-form-container-global {
margin-top: 30px !important;
}
}
@media (max-width: 768px) {
.banner-section {
padding-top: 60px !important;
}
.service-sidebar {
display: none;
}
.counselling-solutions__title {
padding-top: 30px;
}
.counter-area-two__count {
font-size: 25px !important;
}
.counter-area-two__text {
font-size: 12px !important;
}
.work-process-box-3 {
margin-top: 0px;
}
}
@media (max-width: 500px) {
.home-contact-one .appointment__form__top .sec-title__title {
font-size: 28px !important;
}
.service-details__benefit__img img {
width: 100%;
margin-bottom: 15px !important;
}
.banner-section {
padding-top: 60px !important;
}
.sec-title__title {
font-size: 20px !important;
}
.call-area-three__title {
font-size: 25px !important;
margin-bottom: -20px !important;
}
.sec-title {
margin-bottom: 10px !important;
}
.cta-1-section h3 {
font-size: 22px !important;
}
.home-contact-one .home-contact__card__shape-two {
display: none !important;
}
.about-us-content-area {
padding-left: 0px !important;
padding: 0px !important;
}
}
@media (max-width:1400px) and (min-width:501px) {
.contact-area .contact-info-item .content h6 {
font-size: 16px !important;
}
}
@media (max-width: 991px) {
.history-two__content--left::before,
.history-two__content--left::after,
.history-two__content::before,
.history-two__content::after {
display: none;
}
}
/* -----------------------------------------------------------
Blog Sidebar Styles (Metatron Creative Look)
----------------------------------------------------------- */
.news-area .main-sidebar .single-sidebar-widget {
box-sizing: border-box;
padding: 30px;
margin-bottom: 40px;
background-color: #f8f9fa;
border-radius: 10px;
transition: all 0.3s ease-in-out;
}
.news-area .main-sidebar .single-sidebar-widget:hover {
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.news-area .main-sidebar .single-sidebar-widget .wid-title {
margin-bottom: 25px;
padding-left: 45px;
position: relative;
}
.news-area .main-sidebar .single-sidebar-widget .wid-title::before {
left: 0;
top: 50%;
transform: translateY(-50%);
content: "";
height: 4px;
width: 18px;
border-radius: 5px;
position: absolute;
background-color: #3779b9;
}
.news-area .main-sidebar .single-sidebar-widget .wid-title::after {
left: 22px;
top: 50%;
transform: translateY(-50%);
content: "";
height: 4px;
width: 4px;
border-radius: 50%;
position: absolute;
background-color: #3779b9;
}
.news-area .main-sidebar .single-sidebar-widget .wid-title h3 {
font-size: 18px;
font-weight: 700;
margin: 0;
}
/* Search Widget */
.search_widget form {
width: 100%;
position: relative;
}
.search_widget form input {
background-color: #ffffff;
font-size: 15px;
padding: 15px 20px;
width: 100%;
border: 1px solid #eee;
border-radius: 5px;
}
.search_widget form button {
position: absolute;
right: 0;
top: 0;
width: 60px;
font-size: 18px;
height: 100%;
background-color: #3779b9;
color: #ffffff;
text-align: center;
border: none;
border-radius: 0 5px 5px 0;
transition: all 0.3s ease-in-out;
}
.search_widget form button:hover {
background-color: #2a5e91;
}
/* Recent News */
.popular-posts .single-post-item {
display: flex;
align-items: center;
margin-bottom: 25px;
}
.popular-posts .single-post-item:last-child {
margin-bottom: 0;
}
.popular-posts .single-post-item .thumb {
height: 80px;
width: 80px;
min-width: 80px;
border-radius: 8px;
overflow: hidden;
margin-right: 15px;
}
.popular-posts .single-post-item .thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.popular-posts .single-post-item:hover .thumb img {
transform: scale(1.1);
}
.popular-posts .single-post-item .post-content h5 {
font-size: 14px;
font-weight: 600;
margin-bottom: 5px;
line-height: 1.4;
}
.popular-posts .single-post-item .post-content h5 a {
color: #222;
text-decoration: none;
transition: color 0.3s;
}
.popular-posts .single-post-item .post-content h5 a:hover {
color: #3779b9;
}
.popular-posts .single-post-item .post-content .post-date {
font-size: 13px;
color: #636363;
}
.popular-posts .single-post-item .post-content .post-date i {
margin-right: 5px;
color: #3779b9;
}
/* Categories Widget */
.widget_categories ul {
padding: 0;
list-style: none;
margin: 0;
}
.widget_categories ul li {
margin-bottom: 12px;
}
.widget_categories ul li:last-child {
margin-bottom: 0;
}
.widget_categories ul li a {
display: flex;
justify-content: space-between;
align-items: center;
background: #ffffff;
padding: 14px 20px;
border-radius: 8px;
color: #1a1f2b;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
border: 1px solid #f0f0f0;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}
.widget_categories ul li a:hover,
.widget_categories ul li.active a {
background-color: #3779b9;
color: #ffffff;
border-color: #3779b9;
transform: translateY(-2px);
box-shadow: 0 6px 15px rgba(55, 121, 185, 0.2);
}
.widget_categories ul li a span.category-count {
background-color: #f0f4f8;
color: #3779b9;
width: 40px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20px;
font-size: 13px;
font-weight: 700;
transition: all 0.4s ease;
}
.widget_categories ul li a:hover span.category-count,
.widget_categories ul li.active a span.category-count {
background-color: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
/* Blog Results Grid – responsive overrides */
/* Specifically override .news-area .row column stacking at 1024px from main.css */
@media (max-width: 1024px) {
.blog-results-grid .row {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
}
.blog-results-grid .col-6 {
width: 50% !important;
flex: 0 0 50% !important;
max-width: 50% !important;
}
}
/* At ≤500px force single column */
@media (max-width: 500px) {
.blog-results-grid .col-6 {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
}
/* Tag Cloud */
.tagcloud {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.tagcloud a {
background: #ffffff;
padding: 8px 15px;
border-radius: 5px;
color: #222;
font-size: 13px;
font-weight: 500;
text-decoration: none;
transition: all 0.3s;
}
.tagcloud a:hover {
background-color: #3779b9;
color: #ffffff;
}
@media (max-width: 767px) {
.video-three .video-three__inner {
margin-top: -50px;
}
}
/* -----------------------------------------------------------
Home Page Blog Slider Styles
----------------------------------------------------------- */
.blog-slider-active .blog-slider-inner {
margin: 0 -10px;
}
.blog-slider-item {
outline: none;
padding: 0 10px;
}
.blog-slider-inner .slick-dots {
bottom: -40px;
}
.blog-slider-inner .slick-dots li button:before {
font-size: 12px;
color: #3779b9;
opacity: 0.25;
}
.blog-slider-inner .slick-dots li.slick-active button:before {
color: #3779b9;
opacity: 1;
}
/* Ensure 100% width on mobile as requested and handle container padding */
@media (max-width: 767px) {
.blog-section-one .small-container {
padding-left: 15px !important;
padding-right: 15px !important;
}
}
@media (max-width: 500px) {
.blog-slider-item {
width: 100% !important;
}
.blog-style-one .blog-image img {
width: 100%;
height: auto;
}
}
.blog-section-one.section-space.pb-0.pt-0 {
padding-bottom: 20px !important;
/* padding-top: 20px !important; */
}
.service-details__content-title,
/* Refined Service Details Spacing (Blog Match) */
.service-details__title {
font-size: 34px;
font-weight: 800;
color: #0f172a;
line-height: 1.2;
margin-bottom: 25px;
}
.service-details__dynamic-content {
font-size: 18px;
line-height: 1.8;
color: #475569;
}
/* .service-details__dynamic-content p {
margin-top: 20px;
margin-bottom: 20px;
} */
.service-details__dynamic-content h3,
.service-details__dynamic-content h4 {
font-size: 24px;
font-weight: 700;
color: #1e293b;
/* margin-top: 25px; */
margin-bottom: 12px;
}
.service-details__dynamic-content ul,
.service-details__dynamic-content ol {
margin-top: 15px;
margin-bottom: 15px;
}
/* Custom Service Details List */
.service-details__benefit__list_custom {
list-style: none;
padding: 0;
margin: 15px 0;
}
.service-details__benefit__list_custom li {
display: flex !important;
align-items: flex-start !important;
gap: 12px;
margin-bottom: 12px !important;
line-height: 1.8;
font-size: 16px;
color: #475569;
}
.service-details__benefit__list_custom li i {
color: #3779b9;
font-size: 18px;
margin-top: 5px;
flex-shrink: 0;
}
.service-details__benefit__list_custom li .list-content {
flex: 1;
}
.service-details__benefit__list_custom li b {
color: #1a1f2b;
font-weight: 700;
font-size: 17px !important;
display: inline;
margin-right: 5px;
}
.service-details__benefit__list_custom li p {
margin: 0 !important;
display: inline;
}
/* Small text utility */
.small-text {
font-size: var(--small-text-size) !important;
}
/* Portfolio Cards Section (Pelocis Style) */
.service-details__portfolio-cards {
display: flex;
gap: 30px;
margin-top: 40px;
margin-bottom: 50px;
}
@media (max-width: 991px) {
.service-details__portfolio-cards {
flex-wrap: wrap;
justify-content: center;
}
}
@media (max-width: 767px) {
.service-details__portfolio-cards {
flex-direction: column;
gap: 30px;
}
.home-contact-one .home-contact__card__list li {
display: flex;
align-items: center;
gap: 9px !important;
border: 1px solid var(--pelocis-border-color, #DDDDDD);
margin-bottom: 21px !important;
border-radius: 10px !important;
padding: 20px 0px !important;
padding-right: 41px !important;
padding-left: 89px !important;
position: relative;
transition: all 500ms ease;
background: #fff;
}
}
.service-one .service-card {
flex: 1;
min-width: 300px;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #DDDDDD;
position: relative;
transition: all 500ms ease-in-out;
text-align: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.service-one .service-card__inner {
position: relative;
width: 100%;
padding: 40px 30px;
transition: 0.5s ease-in-out;
z-index: 1;
}
.service-one .service-card__hover {
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
top: 0px;
left: 0px;
opacity: 0;
visibility: hidden;
border: 1px solid #3779b9;
background-position: center center;
transition: opacity 0.5s ease-in-out;
z-index: -1;
}
.service-one .service-card__hover::after {
background-color: rgba(255, 255, 255, 0.9);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
.service-one .service-card:hover .service-card__hover {
opacity: 1;
visibility: visible;
}
.service-one .service-card__shape {
width: 218px;
height: 80px;
background-color: #3779b9;
clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%) scaleY(0.6);
opacity: 0;
visibility: hidden;
z-index: 1;
transition: 500ms ease-in-out;
}
.service-one .service-card:hover .service-card__shape {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scaleY(1);
}
.service-one .service-card__icon {
width: 76px;
height: 76px;
margin: 0 auto;
margin-bottom: 18px;
background-color: #3779b9;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
border-radius: 10px;
position: relative;
overflow: hidden;
z-index: 1;
transition: all 500ms ease-in-out;
}
.service-one .service-card__icon::before {
content: "";
position: absolute;
right: -22px;
top: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: -1;
}
.service-one .service-card__icon::after {
content: "";
position: absolute;
left: -22px;
bottom: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: -1;
}
.service-one .service-card:hover .service-card__icon {
background-color: #222222;
}
.service-one .service-card:hover .service-card__icon::before,
.service-one .service-card:hover .service-card__icon::after {
background-color: #3779b9;
}
.service-one .service-card__title {
font-size: 18px !important;
font-weight: 700;
line-height: 26px;
color: #0f172a;
margin-bottom: 10px !important;
margin-top: 0 !important;
z-index: 1;
position: relative;
transition: all 500ms ease;
}
.service-one .service-card__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: #475569;
margin-bottom: 12px !important;
z-index: 1;
position: relative;
transition: all 500ms ease;
}
.service-one .service-card__link {
font-size: 14px;
font-weight: 700;
color: #3779b9;
text-decoration: none;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 500ms ease;
z-index: 1;
position: relative;
}
.service-one .service-card__link:hover {
color: #0f172a;
}
.service-one-erp .service-card {
width: 100%;
min-width: 0;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #DDDDDD;
position: relative;
transition: all 500ms ease-in-out;
text-align: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.service-one-erp .service-card__inner {
position: relative;
width: 100%;
padding: 20px 14px;
transition: 0.5s ease-in-out;
z-index: 1;
}
.service-one-erp .service-card__hover {
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
top: 0px;
left: 0px;
opacity: 0;
visibility: hidden;
border: 1px solid #3779b9;
background-position: center center;
transition: opacity 0.5s ease-in-out;
z-index: -1;
}
.service-one-erp .service-card__hover::after {
background-color: rgba(255, 255, 255, 0.9);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
.service-one-erp .service-card:hover .service-card__hover {
opacity: 1;
visibility: visible;
}
.service-one-erp .service-card__shape {
width: 218px;
height: 80px;
background-color: #3779b9;
clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%) scaleY(0.6);
opacity: 0;
visibility: hidden;
z-index: 1;
transition: 500ms ease-in-out;
}
.service-one-erp .service-card:hover .service-card__shape {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scaleY(1);
}
.service-one-erp .service-card__icon {
width: 76px;
height: 76px;
margin: 0 auto;
margin-bottom: 18px;
background-color: #3779b9;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 32px;
border-radius: 10px;
position: relative;
overflow: hidden;
z-index: 1;
transition: all 500ms ease-in-out;
}
.service-one-erp .service-card__icon::before {
content: "";
position: absolute;
right: -22px;
top: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: 0;
}
.service-one-erp .service-card__icon::after {
content: "";
position: absolute;
left: -22px;
bottom: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: 0;
}
.service-one-erp .service-card:hover .service-card__icon {
background-color: #222222;
}
.service-one-erp .service-card:hover .service-card__icon::before,
.service-one-erp .service-card:hover .service-card__icon::after {
background-color: #3779b9;
}
.service-one-erp .service-card__title {
font-size: 18px !important;
font-weight: 700;
line-height: 26px;
color: #0f172a;
margin-bottom: 10px !important;
margin-top: 0 !important;
z-index: 1;
position: relative;
transition: all 500ms ease;
}
.service-one-erp .service-card__text {
font-size: 16px;
font-weight: 400;
line-height: 26px;
color: #475569;
margin-bottom: 12px !important;
z-index: 1;
position: relative;
transition: all 500ms ease;
}
.service-one-erp .service-card__link {
font-size: 14px;
font-weight: 700;
color: #3779b9;
text-decoration: none;
text-transform: uppercase;
display: inline-flex;
align-items: center;
gap: 8px;
transition: all 500ms ease;
z-index: 1;
position: relative;
}
.service-one-erp .service-card__link:hover {
color: #0f172a;
}
h4.service-details__dynamic-content-erp {
font-size: 30px !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.2 !important;
margin-bottom: 25px !important;
}
.service-details__portfolio-cards.service-one-erp {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 30px !important;
}
@media (max-width: 1360px) {
.service-details__portfolio-cards.service-one-erp {
gap: 20px !important;
}
}
@media (max-width: 1200px) {
.service-details__portfolio-cards.service-one-erp {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 991px) {
.service-details__portfolio-cards.service-one-erp {
grid-template-columns: repeat(2, 1fr) !important;
}
h4.service-details__dynamic-content-erp {
font-size: 26px !important;
}
}
@media (max-width: 767px) {
.service-details__portfolio-cards.service-one-erp {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
h4.service-details__dynamic-content-erp {
font-size: 24px !important;
}
}
@media (max-width: 500px) {
.service-details__portfolio-cards.service-one-erp {
gap: 8px !important;
}
.service-one-erp .service-card__inner {
padding: 10px 5px !important;
}
.service-one-erp .service-card {
padding: 5px !important;
}
.service-one-erp .service-card__icon {
width: 50px !important;
height: 50px !important;
font-size: 20px !important;
margin-bottom: 8px !important;
}
.service-one-erp .service-card__title {
font-size: 13px !important;
line-height: 1.2 !important;
}
h4.service-details__dynamic-content-erp {
font-size: 22px !important;
}
}
@media (max-width: 425px) {
.service-one-erp .service-card__inner {
padding: 8px 2px !important;
}
.service-one-erp .service-card__icon {
width: 40px !important;
height: 40px !important;
font-size: 16px !important;
margin-bottom: 5px !important;
}
.service-one-erp .service-card__title {
font-size: 11px !important;
line-height: 1.1 !important;
}
h4.service-details__dynamic-content-erp {
font-size: 20px !important;
}
}
@media (max-width: 350px) {
.service-details__portfolio-cards.service-one-erp {
gap: 5px !important;
}
.service-one-erp .service-card__icon {
width: 35px !important;
height: 35px !important;
font-size: 14px !important;
}
.service-one-erp .service-card__title {
font-size: 10px !important;
}
}
.service-details__portfolio-cards.service-one-erp-industries {
display: grid !important;
grid-template-columns: repeat(5, 1fr) !important;
gap: 20px !important;
}
@media (max-width: 1360px) {
.service-details__portfolio-cards.service-one-erp-industries {
gap: 15px !important;
}
}
@media (max-width: 1200px) {
.service-details__portfolio-cards.service-one-erp-industries {
grid-template-columns: repeat(4, 1fr) !important;
gap: 20px !important;
}
}
@media (max-width: 991px) {
.service-details__portfolio-cards.service-one-erp-industries {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: 767px) {
.service-details__portfolio-cards.service-one-erp-industries {
grid-template-columns: repeat(2, 1fr) !important;
gap: 15px !important;
}
}
@media (max-width: 500px) {
.service-details__portfolio-cards.service-one-erp-industries {
gap: 10px !important;
}
}
.service-one-erp-industries .service-card {
width: 100%;
min-width: 0;
padding: 10px;
display: flex;
flex-direction: column;
align-items: center;
border: 1px solid #DDDDDD;
position: relative;
transition: all 500ms ease-in-out;
text-align: center;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.service-one-erp-industries .service-card__inner {
position: relative;
width: 100%;
padding: 20px 10px;
transition: 0.5s ease-in-out;
z-index: 1;
}
.service-one .service-card__icon img {
width: 40px;
height: auto;
transition: all 0.5s ease-in-out;
filter: brightness(0) invert(1);
position: relative;
z-index: 2;
}
.service-one .service-card__icon {
position: relative;
overflow: hidden;
z-index: 1;
}
.service-one .service-card__icon::after {
content: "";
position: absolute;
left: -22px;
bottom: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: -1;
}
.service-one .service-card__icon::before {
content: "";
position: absolute;
right: -22px;
top: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: -1;
}
.service-one .service-card:hover .service-card__icon::after {
left: -12px;
bottom: -12px;
}
.service-one .service-card:hover .service-card__icon::before {
right: -12px;
top: -12px;
}
.service-one .service-card:hover .service-card__icon img {
filter: brightness(0) invert(1);
position: relative;
z-index: 1;
}
.service-one-erp-industries .service-card__hover {
width: 100%;
height: 100%;
position: absolute;
background-repeat: no-repeat;
background-size: cover;
top: 0px;
left: 0px;
opacity: 0;
visibility: hidden;
border: 1px solid #3779b9;
background-position: center center;
transition: opacity 0.5s ease-in-out;
z-index: -1;
}
.service-one-erp-industries .service-card__hover::after {
background-color: rgba(255, 255, 255, 0.9);
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
.service-one-erp-industries .service-card:hover .service-card__hover {
opacity: 1;
visibility: visible;
}
.service-one-erp-industries .service-card__shape {
width: 218px;
height: 80px;
background-color: #3779b9;
clip-path: polygon(36% 100%, 65% 100%, 100% 0px, 0px 0px);
position: absolute;
top: 0px;
left: 50%;
transform: translateX(-50%) scaleY(0.6);
opacity: 0;
visibility: hidden;
z-index: 1;
transition: 500ms ease-in-out;
}
.service-one-erp-industries .service-card:hover .service-card__shape {
opacity: 1;
visibility: visible;
transform: translateX(-50%) scaleY(1);
}
.service-one-erp-industries .service-card__icon {
width: 60px;
height: 60px;
margin: 0 auto;
margin-bottom: 12px;
background-color: #3779b9;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
border-radius: 10px;
position: relative;
overflow: hidden;
z-index: 1;
transition: all 500ms ease-in-out;
}
.service-one-erp-industries .service-card__icon::before {
content: "";
position: absolute;
right: -22px;
top: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: 0;
}
.service-one-erp-industries .service-card__icon::after {
content: "";
position: absolute;
left: -22px;
bottom: -22px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: 0;
}
.service-one-erp-industries .service-card:hover .service-card__icon {
background-color: #222222;
}
.service-one-erp-industries .service-card:hover .service-card__icon::before,
.service-one-erp-industries .service-card:hover .service-card__icon::after {
background-color: #3779b9;
}
.service-one-erp-industries .service-card__title {
font-size: 15px !important;
font-weight: 700;
line-height: 1.3;
color: #0f172a;
margin: 0 !important;
z-index: 1;
position: relative;
transition: all 500ms ease;
}
@media (max-width: 500px) {
.service-one-erp-industries .service-card {
padding: 5px !important;
}
.service-one-erp-industries .service-card__inner {
padding: 10px 5px !important;
}
.service-one-erp-industries .service-card__icon {
width: 50px !important;
height: 50px !important;
font-size: 20px !important;
margin-bottom: 8px !important;
}
.service-one-erp-industries .service-card__title {
font-size: 12px !important;
line-height: 1.2 !important;
}
}
@media (max-width: 425px) {
.service-one-erp-industries .service-card__inner {
padding: 8px 2px !important;
}
.service-one-erp-industries .service-card__icon {
width: 40px !important;
height: 40px !important;
font-size: 16px !important;
margin-bottom: 5px !important;
}
.service-one-erp-industries .service-card__title {
font-size: 10px !important;
line-height: 1.1 !important;
}
}
@media (max-width: 350px) {
.service-one-erp-industries .service-card__icon {
width: 35px !important;
height: 35px !important;
font-size: 14px !important;
}
.service-one-erp-industries .service-card__title {
font-size: 9px !important;
}
}
/* ERP Service List Redesign */
.erp-service-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.erp-service-item {
display: flex;
align-items: center;
gap: 20px;
/* padding: 25px; */
background: #fff;
border-radius: 12px;
transition: all 0.4s ease-in-out;
border: 1px solid #3779b9;
position: relative;
overflow: hidden;
}
.erp-service-item:hover {
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
border-color: #3779b9;
transform: translateY(-5px);
align-items: center;
}
.erp-service-item .icon {
position: relative;
width: 64px;
height: 64px;
background: #3779b9;
/* Solid blue for white icon visibility */
color: #3779b9;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
border-radius: 0px;
/* Square to match about section */
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
z-index: 1;
flex-shrink: 0;
overflow: hidden;
}
.erp-service-item .icon::after {
content: "";
position: absolute;
left: -24px;
bottom: -24px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: -1;
}
.erp-service-item .icon::before {
content: "";
position: absolute;
right: -24px;
top: -24px;
width: 50%;
height: 50%;
background-color: #222222;
transform: rotate(41deg);
transition: all 500ms ease-in-out;
z-index: -1;
}
.erp-service-item:hover .icon::after {
left: -14px;
bottom: -20px;
}
.erp-service-item:hover .icon::before {
right: -14px;
top: -20px;
}
.erp-service-item:hover .icon {
color: #fff;
}
.erp-service-item .icon img {
width: 32px;
height: auto;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
filter: brightness(0) invert(1);
}
.erp-service-item:hover .icon img {
filter: brightness(0) invert(1);
position: relative;
z-index: 1;
}
.erp-service-item .content h5 {
font-size: 19px;
font-weight: 700;
margin-bottom: 10px;
color: #0f172a;
transition: all 0.3s ease;
}
.erp-service-item:hover .content h5 {
color: #3779b9;
}
.erp-service-item .content p {
font-size: 15px;
line-height: 1.6;
color: #64748b;
margin: 0;
}
@media (max-width: 991px) {
.erp-service-list {
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.erp-service-item {
padding: 15px;
gap: 12px;
}
.erp-service-item .icon {
width: 45px;
height: 45px;
font-size: 18px;
}
.erp-service-item .content h5 {
font-size: 15px;
margin-bottom: 5px;
}
.erp-service-item .content p {
font-size: 12px;
}
}
@media (max-width: 475px) {
.erp-service-list {
gap: 10px;
}
.erp-service-item {
padding: 10px;
}
.erp-service-item .content h5 {
font-size: 13px;
}
}
.erp-service-list--sidebar {
grid-template-columns: 1fr;
gap: 20px;
}
/* Typography Refinements */
.service-details b {
font-size: 17px !important;
}
/* Sidebar Call Card Styling */
:root {
--insuba-white3: #f1f6f7;
--insuba-black5: #0f3667;
--insuba-white: #ffffff;
--insuba-base: #0365d3;
--insuba-base-rgb: 55, 121, 185;
}
.sidebar__single+.sidebar__single {
margin-top: 60px;
}
.sidebar__call {
position: relative;
padding: 420px 17px 22px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
border-radius: 20px;
overflow: hidden;
}
.sidebar__call::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(180deg, transparent 30%, rgba(var(--insuba-base-rgb), 0.77)) 70%;
border-radius: inherit;
z-index: 0;
}
.sidebar__call__logo {
max-width: 100%;
height: auto;
position: absolute;
top: 23px;
left: 18px;
z-index: 1;
}
.sidebar__call__inner {
position: relative;
display: flex;
align-items: center;
gap: 26px;
background-color: #343a40;
border-radius: 43px;
z-index: 1;
padding: 6px;
}
.sidebar__call__inner::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
color: #fff;
bottom: 0;
border: 6px solid #fff;
border-radius: inherit;
pointer-events: none;
}
.sidebar__call__icon {
width: 80px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
font-size: 42px;
color: #fff;
background-color: #3779b9;
border: 6px solid #fff;
border-radius: 43px;
}
.sidebar__call__content {
position: relative;
z-index: 1;
}
.sidebar__call__title {
margin: 0 0 5px;
font-size: 18px;
font-weight: 700;
color: var(--insuba-white);
line-height: 1.4;
}
.sidebar__call__number {
position: relative;
z-index: 1;
font-size: 16px;
font-weight: 400;
color: var(--insuba-white);
line-height: 1;
text-decoration: none;
transition: all 500ms ease;
}
/* Animation */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animated {
animation-fill-mode: both;
}
.fadeInUp {
animation-name: fadeInUp;
}
/* >>> BANNER CSS EXTRACTED <<< */
/* Container limits */
.custom-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) {
.custom-container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.custom-container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.custom-container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.custom-container {
max-width: 1140px;
}
.card-1 {
top: -20px;
left: 50%;
transform: translateX(-50%);
}
.card-2 {
top: 25%;
left: -75px;
}
.card-3 {
bottom: 20%;
left: -75px;
}
.card-4 {
bottom: -20px;
left: 50%;
transform: translateX(-50%);
}
.card-5 {
bottom: 20%;
left: 92%;
transform: translateX(-50%);
}
.card-6 {
bottom: 65%;
right: -75px;
}
.card-7 {
top: 20%;
right: 0;
}
}
@media (min-width: 1400px) {
.custom-container {
max-width: 1314px;
}
}
.hero-1 {
position: relative;
z-index: 9;
overflow: hidden;
padding: 240px 0 130px;
background-color: #f7f9fc;
}
.hero-1-bg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
background: url("/assets/images/home/banner/bg.webp") no-repeat center center;
background-size: cover;
}
.hero-layout-wrapper {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
.banner-active {
overflow: hidden;
position: relative;
}
.banner-slider-wrapper {
display: flex;
transition: transform 3.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.custom-swiper-slide {
flex: 0 0 100%;
width: 100%;
display: block;
}
/* Typography and Base Layout */
.custom-swiper-slide.active .hero-content {
opacity: 0;
z-index: 3;
position: relative;
animation: slideDownIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.hero-content {
flex: 0 0 45%;
max-width: 45%;
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease, visibility 0.5s ease;
position: relative;
top: -85px;
}
/* Strictly ONLY show content when active */
.custom-swiper-slide.active .hero-content,
.custom-swiper-slide.active .hero-right-content {
opacity: 1 !important;
visibility: visible !important;
}
.custom-swiper-slide:not(.active) .hero-content,
.custom-swiper-slide:not(.active) .hero-right-content {
opacity: 0 !important;
visibility: hidden !important;
}
.banner-sub-title {
display: block;
font-size: 18px;
font-weight: 800;
color: #000 !important;
text-transform: uppercase;
margin-bottom: 20px;
letter-spacing: 3px;
opacity: 1 !important;
visibility: visible !important;
}
.hero-content h1 {
color: var(--black, #000);
margin-bottom: 30px;
font-size: 55px;
font-weight: 700;
line-height: 115%;
letter-spacing: -1px;
}
.hero-content p {
font-weight: 500;
font-size: 20px;
color: var(--black, #333);
margin-bottom: 40px;
line-height: 1.6;
}
.theme-btn {
background-color: #6a2bfa;
/* Bright purple theme color */
color: #fff;
display: inline-block;
font-size: 16px;
font-weight: 700;
padding: 23px 54px;
border-radius: 4px;
text-transform: uppercase;
transition: all 0.3s ease-in-out;
position: relative;
z-index: 1;
line-height: 1;
text-decoration: none;
}
.theme-btn:hover {
background-color: #000;
color: #fff;
}
/* Right Block Layout */
.hero-right-content {
flex: 0 0 50%;
max-width: 50%;
display: flex;
flex-direction: column;
align-items: flex-end;
justify-content: center;
position: relative;
}
/* Floating Composition */
.hero-img-group {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
min-height: 450px;
}
.hero-img-group img {
vertical-align: middle;
}
.custom-swiper-slide.active .main-shirt {
animation: slideUpIn 1s forwards 0.3s, floatAnimMain 4s infinite alternate ease-in-out 1.5s;
}
.main-shirt {
max-width: 60%;
z-index: 2;
position: relative;
transform: translateY(150px);
opacity: 0;
}
.circle-shape {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 120%;
z-index: 1;
}
.custom-swiper-slide.active .mockup-shape {
animation: slideLeftBlock 1s forwards 0.5s, floatAnimSmall 3.5s infinite alternate ease-in-out 1.7s;
}
.mockup-shape {
position: absolute;
top: 10%;
left: 2%;
max-width: 45%;
z-index: 3;
opacity: 0;
}
.custom-swiper-slide.active .cup-shape {
animation: slideUpBlock 1s forwards 0.7s, floatAnimSmall 3s infinite alternate ease-in-out 1.9s;
}
.cup-shape {
position: absolute;
bottom: 0%;
left: 5%;
max-width: 35%;
z-index: 3;
opacity: 0;
}
.custom-swiper-slide.active .t-shirt-shape {
animation: slideRightBlock 1s forwards 0.9s, floatAnimSmall 4.5s infinite alternate ease-in-out 2.1s;
}
.t-shirt-shape {
position: absolute;
top: 15%;
right: 10%;
max-width: 20%;
z-index: 3;
opacity: 0;
}
.custom-swiper-slide.active .cap-shape {
animation: slideUpBlock 1s forwards 1.1s, floatAnimSmall 4s infinite alternate ease-in-out 2.3s;
}
.cap-shape {
position: absolute;
bottom: 5%;
right: 15%;
max-width: 30%;
z-index: 3;
opacity: 0;
}
/* Bottom Slider CSS */
.our-services-slider {
width: 100%;
max-width: 700px;
z-index: 10;
--slider-slide-width: 25%;
padding-right: 20px;
animation: fadeUp 1s forwards 1.2s;
opacity: 0;
margin-top: 50px;
/* Added space at the top */
}
.hero-1 .slider-header {
display: flex;
align-items: center;
margin-bottom: 20px;
padding-left: 5px;
}
.hero-1 .slider-header span {
font-size: 17px;
font-weight: 700;
color: #fff;
margin-right: 15px;
letter-spacing: -0.5px;
}
.hero-1 .slider-progress-bar {
flex: 1;
height: 1px;
background-color: rgba(74, 52, 36, 0.3);
position: relative;
}
.hero-1 .slider-progress-line {
position: absolute;
top: -1px;
height: 3px;
width: 25%;
background-color: #fff;
transition: all 0.5s ease;
}
.hero-1 .slider-track-container {
position: relative;
width: 100%;
padding-left: 10px;
padding-right: 10px;
}
.hero-1 .custom-slider-arrow {
position: absolute;
left: -5px;
top: 35%;
/* Middle of image, not card */
transform: translateY(-50%);
background: #1a1f2b;
border: 2px solid #fff;
color: #fff;
border-radius: 50%;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.hero-1 .custom-slider-arrow i {
font-size: 12px;
margin-left: -1px;
}
.hero-1 .slider-track {
display: flex;
transition: transform 0.5s ease-in-out;
}
.hero-1 .slider-item {
flex: 0 0 var(--slider-slide-width) !important;
padding: 0 8px;
box-sizing: border-box;
}
.hero-1 .slider-image-node {
position: relative;
padding-bottom: 70%;
width: 100%;
border-radius: 15px;
/* More rounded as per screenshot */
border: 4px solid #fff;
/* Solid white border */
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
/* Slightly deeper shadow */
transition: transform 0.3s ease;
}
.hero-1 .slider-image-node:hover {
transform: translateY(-5px);
}
.hero-1 .slider-image-node img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-1 .slider-category-title {
padding-top: 15px;
text-align: center;
font-size: 14px;
font-weight: 900;
color: #1a1f2b;
}
.hero-1 .slider-category-title a {
color: #fff;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: color 0.3s;
}
.hero-1 .slider-category-title a:hover {
color: #fff;
}
.hero-1 .slider-category-title span {
margin-left: 2px;
font-weight: 900;
color: #1a1f2b;
}
/* Hero Banner Pagination Dots */
.hero-1 .banner-pagination {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 12px;
z-index: 20;
}
.hero-1 .banner-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.4);
cursor: pointer;
transition: all 0.3s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
}
.hero-1 .banner-dot.active {
background: #fff;
transform: scale(1.2);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.hero-1 .slider-arrow {
background: #e88c5a;
border: none;
color: #fff;
border-radius: 50%;
min-width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 2;
transition: 0.3s;
}
.hero-1 .slider-arrow:hover {
background: #d77641;
}
.hero-1 .slider-item {
flex: 0 0 25%;
padding: 0 6px;
box-sizing: border-box;
}
.hero-1 .slider-card {
background-color: #fff;
border-radius: 8px;
overflow: hidden;
border: 2px solid #fff;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}
.hero-1 .slider-image-box {
position: relative;
padding-bottom: 70%;
width: 100%;
}
.hero-1 .slider-image-box img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-1 .slider-label {
padding: 8px;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #222;
}
.hero-1 .slider-label a {
color: inherit;
text-decoration: none;
}
/* Animations */
@keyframes slideDownIn {
0% {
opacity: 0;
transform: translateY(-100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideUpIn {
0% {
opacity: 0;
transform: translateY(100px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeUp {
0% {
opacity: 0;
transform: translateY(30px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideLeftBlock {
0% {
opacity: 0;
transform: translateX(-150px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideRightBlock {
0% {
opacity: 0;
transform: translateX(150px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideUpBlock {
0% {
opacity: 0;
transform: translateY(150px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes floatAnimMain {
100% {
transform: translateY(-15px);
}
}
@keyframes floatAnimSmall {
100% {
transform: translateY(-8px);
}
}
/*--------------------------
13 EXACT BREAKPOINTS
---------------------------*/
/* 1920px (Base Above) */
/* 1600px */
@media (max-width: 1600px) {
.hero-1 {
padding: 220px 0 140px;
}
.hero-content h1 {
font-size: 51px;
}
.main-shirt {
max-width: 58%;
}
.hero-1 .slider-category-title {
padding-top: 15px;
text-align: center;
font-size: 12px;
font-weight: 900;
color: #1a1f2b;
}
}
/* 1540px */
@media (max-width: 1540px) {
.hero-img-group {
min-height: 420px;
}
.hero-content h1 {
font-size: 48px;
}
.our-services-slider {
max-width: 750px;
}
}
/* 1440px */
@media (max-width: 1440px) {
.hero-img-group {
min-height: 380px;
}
.hero-content h1 {
font-size: 46px;
}
.hero-content p {
font-size: 17px;
}
.our-services-slider {
max-width: 700px;
padding-right: 0px;
}
.work-process-section-3 .left-shape {
position: absolute;
top: 0;
bottom: 0;
width: 520px !important;
}
}
/* 1360px */
@media (max-width: 1360px) {
.hero-1 {
padding: 200px 0 120px;
}
.hero-1 .slider-category-title {
padding-top: 15px;
text-align: center;
font-size: 13px;
font-weight: 900;
color: #1a1f2b;
}
.work-process-section-3 .left-shape {
position: absolute;
top: 0;
bottom: 0;
width: 380px !important;
}
.hero-content {
flex: 0 0 48%;
max-width: 48%;
}
.hero-right-content {
flex: 0 0 52%;
max-width: 52%;
}
.hero-content h1 {
font-size: 45px;
}
.main-shirt {
max-width: 55%;
}
}
/* 1200px */
@media (max-width: 1200px) {
.hero-1 {
padding: 180px 0 120px;
}
.work-process-section-3 .left-shape {
position: absolute;
top: 0;
bottom: 0;
width: 357px !important;
}
.hero-content h1 {
font-size: 42px;
margin-bottom: 20px;
}
.theme-btn {
padding: 18px 40px;
font-size: 11px;
}
.our-services-slider {
max-width: 650px;
}
}
/* 1024px */
@media (max-width: 1024px) {
.hero-img-group {
min-height: 320px;
}
.blog-style-one .post-meta span {
font-size: 11px !important;
}
.blog-section-one .post-meta span {
display: inline-flex;
align-items: center;
gap: 1px !important;
margin-right: -14px !important;
color: #64748b;
}
.service-one-home .home-services__card__title a {
font-size: 20px !important;
}
.about-two__list__title {
font-size: 20px !important;
}
.about-two__list__text {
font-size: 15px !important;
}
.service-one-home .home-services__card__text {
font-size: 15px !important;
}
.hero-content {
flex: 0 0 50%;
max-width: 50%;
}
.hero-right-content {
flex: 0 0 50%;
max-width: 50%;
}
.hero-content h1 {
font-size: 36px;
}
.banner-sub-title {
color: #fff;
font-size: 13px !important;
font-style: normal;
font-weight: 600;
line-height: 32px;
letter-spacing: 2px !important;
text-transform: uppercase;
margin-left: -46px !important;
margin-bottom: 10px !important;
}
.our-services-slider {
max-width: 600px;
}
.hero-content p {
font-size: 15px !important;
}
}
/* 992px (Tablet) */
@media (max-width: 992px) {
.hero-1 {
padding: 250px 0 80px;
}
.hero-1 .slider-header span {
font-size: 17px;
font-weight: 700;
color: #1a1f2b !important;
margin-right: 15px;
letter-spacing: -0.5px;
}
.hero-content {
position: relative;
top: 0px !important;
}
.hero-1 .slider-category-title a {
color: #1a1f2b !important;
text-decoration: none;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
transition: color 0.3s;
}
.banner-pagination {
display: none !important;
}
.hero-layout-wrapper {
flex-direction: column;
text-align: center;
}
.hero-content {
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 50px;
}
.hero-right-content {
flex: 0 0 100%;
max-width: 100%;
align-items: center;
}
.hero-content h1 {
font-size: 40px;
}
.hero-img-group {
min-height: 350px;
}
.our-services-slider {
margin-top: 30px;
max-width: 750px;
padding-right: 0;
}
.banner-sub-title {
margin-left: -100px !important;
}
.hero-1 .slider-image-node {
position: relative;
padding-bottom: 50% !important;
width: 100%;
border-radius: 15px;
/* More rounded as per screenshot */
border: 4px solid #fff;
/* Solid white border */
overflow: hidden;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
/* Slightly deeper shadow */
transition: transform 0.3s ease;
}
}
/* 768px */
@media (max-width: 768px) {
.hero-1 .hero-content h1 {
font-size: 40px;
}
.hero-1 .hero-img-group {
min-height: 300px;
}
.hero-1 .main-shirt {
max-width: 60%;
}
.service-one-home .home-services__card__title a {
font-size: 17px !important;
}
.service-details__text {
font-size: 16px !important;
line-height: 28px !important;
}
.service-one-home .home-services__card__text {
font-size: 13px !important;
line-height: 22px !important;
}
.about-two__list__title {
font-size: 17px !important;
}
.about-two__list__text {
font-size: 13px !important;
line-height: 22px !important;
}
.work-process-section-3 {
margin-bottom: 0px !important;
margin-top: 60px !important;
}
.section-space {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.about-two {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.work-process-container-wrapper.style2 {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
/* 500px */
@media (max-width: 500px) {
.hero-1 {
padding: 160px 0 60px;
}
.hero-1 .slider-category-title a {
font-size: 12px !important;
}
.hero-1 .hero-content h1 {
font-size: 34px;
}
.hero-1 .hero-img-group {
min-height: 250px;
}
.banner-sub-title {
font-size: 10px !important;
margin-bottom: 0px !important;
}
.our-services-slider {
--slider-slide-width: 50% !important;
}
}
/* 475px */
@media (max-width: 475px) {
.hero-1 .hero-content h1 {
font-size: 30px;
}
.service-details__content-title {
font-size: 28px !important;
}
.service-details__content-title {
font-size: 22px !important;
}
.service-details b {
font-size: 15px !important;
}
.service-details__dynamic-content p {
font-size: 14px !important;
line-height: 24px !important;
}
.service-details__benefit__list_custom li b {
font-size: 15px !important;
}
.faq-one__accordion .accrodion-content p {
font-size: 14px !important;
line-height: 24px !important;
}
.service-details__text {
font-size: 14px !important;
line-height: 24px !important;
}
.hero-1 .hero-content p {
font-size: 13px;
}
.hero-1 .theme-btn {
padding: 18px 40px !important;
}
.service-one-home .home-services__card__title a {
font-size: 15px !important;
}
.service-one-home .home-services__card__text {
font-size: 13px !important;
line-height: 22px !important;
}
.about-two__list__title {
font-size: 15px !important;
}
.about-two__list__text {
font-size: 13px !important;
line-height: 22px !important;
}
}
/* 425px */
@media (max-width: 425px) {
.hero-1 .hero-img-group {
min-height: 200px;
}
.section-padding {
padding: 0px 0 60px !important;
margin-top: 60px;
margin-bottom: 60px;
}
.hero-1 .slider-track-container {
gap: 5px !important;
}
.hero-1 .slider-item {
padding: 0 3px;
}
.hero-1 .slider-label {
font-size: 11px;
padding: 5px;
}
}
/* 320px */
@media (max-width: 320px) {
.hero-1 .hero-content h1 {
font-size: 28px;
}
.hero-1 .hero-img-group {
min-height: 180px;
}
}
/* 1650px custom container width */
@media (min-width: 1650px) {
.custom-container {
max-width: 1650px;
}
}
/* -----------------------------------------------------------
Careers Work Process Section
----------------------------------------------------------- */
.work-process-section-3 {
position: relative;
z-index: 1;
}
.section-padding {
padding: 0px 0 80px !important;
margin-top: 80px;
margin-bottom: 80px;
}
.work-process-section-3 .left-shape {
position: absolute;
top: 0;
bottom: 0;
/* width: 520px; */
}
.work-process-section-3 .left-shape img {
height: 100%;
width: 100%;
}
.section-title {
position: relative;
z-index: 99;
margin-bottom: 30px;
margin-top: -7px;
}
.work-process-box-3 {
margin-top: 30px;
text-align: center;
position: relative;
}
.work-process-box-3::before {
position: absolute;
top: 100px;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
content: "";
background-position: center;
background-repeat: no-repeat;
background-image: url("/assets/images/services/workprocess/bg-shape.png");
transition: all 0.4s ease-in-out;
}
.work-process-box-3:hover::before {
background-image: var(--hover-bg, url("/assets/images/services/workprocess/bg-shape.png"));
}
.work-process-box-3 .content {
padding: 40px 60px;
position: relative;
z-index: 9;
}
.work-process-box-3 .content::before {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 80%;
content: "";
background: #fff;
border-radius: 5px 5px 5px 125px;
max-width: 370px;
box-shadow: 0px 0px 40px 0px rgba(42, 35, 115, 0.06);
margin: 0 auto;
z-index: -1;
transition: all 0.4s ease-in-out;
}
.work-process-box-3:hover .content::before {
height: 100%;
background: #1a1f2b;
border-radius: 5px 5px 5px 125px;
}
@media (max-width: 1199px) {
.work-process-box-3 .content::before {
max-width: initial;
height: 100%;
}
}
.work-process-box-3 .content .step {
border-radius: 22.5px;
width: 60px;
height: 137px;
line-height: 137px;
background: linear-gradient(180deg, #3779b9 0%, #07172b 100%);
color: #fff;
display: inline-block;
position: absolute;
bottom: 86px;
right: 26px;
transition: all 0.4s ease-in-out;
}
.work-process-box-3:hover .content .step {
background: linear-gradient(180deg, #fff 0%, #c0d9f0 100%);
color: #07172b;
bottom: 96px;
}
.work-process-box-3 .content .step span {
transform: rotate(-90deg);
display: inline-block;
}
.work-process-box-3 .content h3 {
font-size: 22px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 15px;
transition: color 0.4s ease-in-out;
}
.work-process-box-3 .content p {
transition: color 0.4s ease-in-out;
}
.work-process-box-3:hover .content h3 {
color: #fff;
}
.work-process-box-3:hover .content p {
color: rgba(255, 255, 255, 0.8);
}
.work-process-box-3 .icon {
width: 138px;
height: 138px;
line-height: 158px;
background: linear-gradient(90deg, #3779b9 0%, #1a1f2b 50%, #3779b9 100%);
background-size: 200% auto;
border-radius: 50%;
margin: 40px auto 0;
position: relative;
font-size: 70px;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.5s ease-in-out;
z-index: 1;
}
.work-process-box-3:hover .icon {
background-position: right center;
transform: rotateY(360deg);
box-shadow: 0 0 30px rgba(55, 121, 185, 0.5);
}
.work-process-box-3 .icon::before {
position: absolute;
top: 50%;
left: 50%;
width: 160px;
height: 160px;
border-radius: 50%;
background: linear-gradient(180deg, transparent 30%, rgba(var(--insuba-base-rgb), 0.77)) 70% !important;
transform: translate(-50%, -50%);
content: "";
z-index: -1;
transition: background 0.4s ease-in-out;
}
.work-process-box-3:hover .icon::before {
background: rgba(55, 121, 185, 0.12);
}
/* Responsive Containers per requirements */
@media (min-width: 1400px) {
.container {
max-width: 1320px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
/* Specific viewports requested */
@media (max-width: 1024px) {
.work-process-section-3 .left-shape img {
display: none !important;
}
}
@media (max-width: 992px) {
.work-process-box-3 .content {
padding: 30px 20px;
}
}
@media (max-width: 500px) {
.work-process-box-3 .content .step {
right: 10px;
height: 100px;
line-height: 100px;
width: 40px;
bottom: 50px;
}
}
@media (max-width: 475px) {}
@media (max-width: 425px) {
.work-process-box-3 .icon {
width: 100px;
height: 100px;
font-size: 50px;
}
.work-process-box-3 .icon::before {
width: 120px;
height: 120px;
}
}
@media (max-width: 320px) {}
/* Tagline & Title for Careers WP3 */
.wp3-tagline {
display: block;
font-size: 14px;
font-weight: 500;
color: #888;
letter-spacing: 1px;
margin-bottom: 10px;
text-align: center;
}
.wp3-title {
font-size: clamp(28px, 4vw, 42px);
font-weight: 700;
color: #07172b;
line-height: 1.25;
text-align: center;
margin: 0 auto 10px;
max-width: 600px;
}
/* Dashed connector row (matches reference dots + line) */
.wp3-connector {
display: flex;
align-items: center;
justify-content: space-between;
max-width: 830px;
margin: 18px auto 10px;
position: relative;
padding: 0 60px;
}
.wp3-connector-line {
position: absolute;
top: 50%;
left: 60px;
right: 60px;
height: 2px;
border-top: 2px dashed #3779b9;
transform: translateY(-50%);
z-index: 0;
}
.wp3-connector-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: #3779b9;
border: 2px solid #3779b9;
position: relative;
z-index: 1;
flex-shrink: 0;
}
/* Hide connector on small screens */
@media (max-width: 768px) {
.wp3-connector {
display: none;
}
}
@media (max-width: 1200px) {
.section-space {
padding-top: 80px;
padding-bottom: 80px;
}
.section-space-top {
padding-top: 80px;
}
}
@media (max-width: 768px) {
.section-space {
padding-top: 60px;
padding-bottom: 60px;
}
.section-space-top {
padding-top: 60px;
}
}
/* 1920px (Desktop Large) - Defaults are usually fine here */
/* 1600px */
@media (max-width: 1600px) {
.sec-title__title {
font-size: 32px;
line-height: 42px;
}
}
/* 1540px */
@media (max-width: 1540px) {
.sec-title__title {
font-size: 30px;
}
.home-contact-one .home-contact__card__content {
padding: 70px 43px !important;
position: relative;
z-index: 2;
}
}
/* 1440px */
@media (max-width: 1440px) {
.sec-title__title {
font-size: 28px;
line-height: 38px;
}
}
/* 1360px */
@media (max-width: 1360px) {
.sec-title__title {
font-size: 26px;
}
.hero-1 .slider-category-title {
font-size: 11px !important;
}
.home-contact-one .home-contact__card {
margin-right: -12px !important;
}
}
/* 1200px */
@media (max-width: 1200px) {
.sec-title__title {
font-size: 24px;
line-height: 34px;
}
.home-contact-one .home-contact__card__content {
padding: 70px 0px 70px 39px !important;
position: relative;
z-index: 2;
}
}
/* 1024px */
@media (max-width: 1024px) {
.sec-title__title {
font-size: 22px;
}
.hero-1 .slider-category-title {
font-size: 11px !important;
line-height: 15px;
}
.testimonial-btn {
font-size: 14px !important;
}
.home-contact-one .contact-home {
position: relative !important;
left: -117px !important;
top: -50px !important;
}
}
/* 992px */
@media (max-width: 992px) {
.sec-title__title {
font-size: 28px;
line-height: 38px;
}
.about-us-content-area {
padding-top: 40px;
}
}
/* 768px */
@media (max-width: 768px) {
.sec-title__title {
font-size: 24px;
line-height: 32px;
}
.home-contact-one .home-contact__card__content {
padding: 70px 35px 70px 39px !important;
position: relative;
z-index: 2;
}
.home-contact-one .contact-home {
position: relative !important;
left: 10px !important;
top: -50px !important;
}
.counter-area-two__list {
flex-wrap: wrap;
justify-content: center;
}
.counter-area-two__item {
flex: 0 0 50%;
}
}
/* 500px, 475px, 425px, 320px */
@media (max-width: 500px) {
.sec-title__title {
font-size: 22px;
}
.counter-area-two__item {
flex: 0 0 100%;
}
.home-contact-one .home-contact__card__content {
padding: 66px 0px !important;
position: relative;
z-index: 2;
}
.home-contact-one .home-contact__card__shape-one{
display: none !important;
}
.home-contact-one .contact-home {
position: relative !important;
left: -6px !important;
top: -50px !important;
}
}
/* Counter Area */
.counter-area-two__list {
display: flex;
/* align-items: center; */
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
}
/* Specific Section Adjustments */
/* About Section */
@media (max-width: 991px) {
.about-us-image-area {
margin-bottom: 50px;
}
}
/* Choose Section */
@media (max-width: 1200px) {
.choose-section .image.m-img {
margin-top: 30px;
}
}
/* Counselling Solutions */
@media (max-width: 991px) {
.counselling-solutions__image {
margin-bottom: 40px;
}
}
/* Counter Area */
.counter-area-two__list {
display: flex;
/* align-items: center; */
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
}
@media (max-width: 768px) {
.counter-area-two__item {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.call-area-three__title {
font-size: 25px !important;
}
}
@media (max-width: 500px) {
.call-area-three__title {
font-size: 22px !important;
text-align: center;
}
.call-area-three__content {
padding: 0 15px;
}
}
/* Home Service One */
.service-one-home {
padding: 100px 0;
background-size: cover;
background-position: center;
}
@media (max-width: 991px) {
.service-one-home__text {
margin-top: 20px;
}
}
/* Blog Section */
@media (max-width: 1024px) {
.blog-section-one .row {
justify-content: center;
}
}
.custom-file-upload {
position: relative;
width: 100%;
margin-top: 10px;
}
.hidden-file-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
.file-upload-label {
display: flex !important;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.03);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1.5px dashed rgba(255, 255, 255, 0.15);
border-radius: 15px;
padding: 18px 24px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
min-height: 40px;
position: relative;
overflow: hidden;
}
.file-upload-label:hover {
background: rgba(255, 255, 255, 0.08);
border-color: var(--pelocis-base, #3779b9);
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.file-upload-content {
display: flex;
align-items: center;
gap: 18px;
color: rgba(255, 255, 255, 0.85);
flex-grow: 1;
overflow: hidden;
}
.file-upload-content i {
font-size: 28px;
color: var(--pelocis-base, #3779b9);
transition: all 0.3s ease;
}
.file-upload-label:hover .file-upload-content i {
transform: scale(1.1) rotate(-5deg);
}
.file-name {
font-size: 16px;
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 280px;
letter-spacing: 0.3px;
}
.file-upload-browse {
background: #3779b9;
color: #fff;
padding: 10px 22px;
border-radius: 10px;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
transition: all 0.3s ease;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(55, 121, 185, 0.3);
}
.file-upload-label:hover .file-upload-browse {
background: #3779b9;
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(55, 121, 185, 0.5);
}
.form-one__control--full .text-danger {
display: block;
margin-top: 10px;
font-size: 14px;
font-weight: 600;
color: #FFF;
animation: fadeIn 0.3s ease;
}
/* ============================================================
CAREERS CONTACT POPUP — CareersContactPopup.tsx
============================================================ */
/* Card title as button */
.cp-card-title-btn {
background: none;
border: none;
padding: 0;
margin: 0;
cursor: pointer;
font-family: inherit;
font-size: inherit;
font-weight: inherit;
color: inherit;
line-height: inherit;
text-align: left;
transition: color 0.3s ease;
display: inline;
}
.cp-card-title-btn:hover {
color: #3779b9;
}
/* ── Overlay ── */
.cp-overlay {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(10, 14, 26, 0.75);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
animation: cpFadeIn 0.25s ease;
}
@keyframes cpFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ── Modal Container (Single Panel) ── */
/* ── Modal Container (Single Panel - Optimized) ── */
.cp-modal {
width: 100%;
max-width: 700px;
max-height: 95vh;
background: #111827;
border-radius: 20px;
overflow-y: auto;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
animation: cpSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
scrollbar-width: thin;
scrollbar-color: #3779b9 #1f2937;
}
.cp-modal::-webkit-scrollbar {
width: 4px;
}
.cp-modal::-webkit-scrollbar-track {
background: #1f2937;
}
.cp-modal::-webkit-scrollbar-thumb {
background: #3779b9;
border-radius: 10px;
}
@keyframes cpSlideUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.cp-close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
z-index: 10;
}
.cp-close-btn:hover {
background: #ef4444;
border-color: #ef4444;
color: #fff;
transform: rotate(90deg);
}
.cp-form-inner {
padding: 35px 40px 30px;
}
.cp-form-header {
text-align: center;
margin-bottom: 30px;
}
.cp-form-title {
font-size: 26px !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 4px !important;
}
.cp-form-subtitle {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.4) !important;
margin: 0 !important;
}
/* Alert */
.cp-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
margin-bottom: 20px;
animation: fadeIn 0.3s ease;
}
.cp-alert--success {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
color: #4ade80;
}
.cp-alert--danger {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #f87171;
}
/* Form Layout */
.cp-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.cp-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.cp-field--full {
margin-bottom: 15px;
}
.cp-label {
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.6) !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 !important;
}
.cp-label span {
color: #f87171;
margin-left: 2px;
}
.cp-optional {
color: rgba(255, 255, 255, 0.3) !important;
font-weight: 400 !important;
text-transform: none !important;
font-size: 11px !important;
}
.cp-input {
width: 100%;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: #fff !important;
transition: all 0.25s ease !important;
outline: none !important;
box-sizing: border-box;
}
.cp-input::placeholder {
color: rgba(255, 255, 255, 0.25) !important;
}
.cp-input:focus {
border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important;
box-shadow: 0 0 0 3px rgba(55, 121, 185, 0.1) !important;
}
.cp-input--error {
border-color: #ef4444 !important;
}
.cp-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 35px !important;
cursor: pointer;
}
.cp-select option {
background: #1f2937;
color: #fff;
}
.cp-error {
font-size: 11px !important;
color: #f87171 !important;
margin-top: 2px !important;
}
/* Textarea */
.cp-textarea {
width: 100%;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: #fff !important;
transition: all 0.25s ease !important;
outline: none !important;
resize: none;
box-sizing: border-box;
font-family: inherit;
min-height: 85px;
}
.cp-textarea::placeholder {
color: rgba(255, 255, 255, 0.25) !important;
}
.cp-textarea:focus {
border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important;
}
/* File Upload */
.cp-file-upload {
width: 100%;
}
.cp-file-hidden {
display: none;
}
.cp-file-label {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px 15px;
cursor: pointer;
transition: all 0.25s ease;
gap: 12px;
}
.cp-file-label:hover {
border-color: #3779b9;
background: rgba(55, 121, 185, 0.05);
}
.cp-file-content {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.cp-file-content i {
font-size: 16px;
color: #3779b9;
flex-shrink: 0;
}
.cp-file-name {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-file-browse {
background: #3779b9;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 12px;
border-radius: 6px;
text-transform: uppercase;
flex-shrink: 0;
}
/* ReCAPTCHA container */
.cp-captcha {
margin-top: 5px;
display: flex;
justify-content: center;
transform: scale(0.9);
transform-origin: center;
}
/* Submit Button */
.cp-submit-btn {
width: 100%;
background: linear-gradient(135deg, #3779b9 0%, #1d5fa3 100%);
color: #fff;
border: none;
border-radius: 12px;
padding: 13px 25px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(55, 121, 185, 0.3);
margin-top: 5px;
}
.cp-submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(55, 121, 185, 0.45);
}
.cp-submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.cp-submit-btn i {
font-size: 14px;
}
/* ── Responsive ── */
/* ── Modal Container (Single Panel - Optimized) ── */
.cp-modal {
width: 100%;
max-width: 720px;
background: #111827;
border-radius: 20px;
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
animation: cpSlideUp 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
/* Internal scroll only if needed */
.cp-form-inner {
padding: 35px 45px 30px;
overflow-y: auto;
max-height: 92vh;
scrollbar-width: thin;
scrollbar-color: #3779b9 #1f2937;
}
.cp-form-inner::-webkit-scrollbar {
width: 4px;
}
.cp-form-inner::-webkit-scrollbar-track {
background: #1f2937;
}
.cp-form-inner::-webkit-scrollbar-thumb {
background: #3779b9;
border-radius: 10px;
}
@keyframes cpSlideUp {
from {
opacity: 0;
transform: translateY(40px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.cp-close-btn {
position: absolute;
top: 15px;
right: 15px;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 100;
transition: all 0.25s ease;
}
.cp-close-btn:hover {
background: #ef4444;
border-color: #ef4444;
color: #fff;
transform: rotate(90deg);
}
.cp-form-header {
text-align: center;
margin-bottom: 30px;
}
.cp-form-title {
font-size: 26px !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 4px !important;
}
.cp-form-subtitle {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.4) !important;
margin: 0 !important;
}
/* Alert */
.cp-alert {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
border-radius: 8px;
font-size: 13px;
font-weight: 500;
margin-bottom: 20px;
animation: fadeIn 0.3s ease;
}
.cp-alert--success {
background: rgba(34, 197, 94, 0.1);
border: 1px solid rgba(34, 197, 94, 0.2);
color: #4ade80;
}
.cp-alert--danger {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.2);
color: #f87171;
}
/* Form Layout */
.cp-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-bottom: 15px;
}
.cp-field {
display: flex;
flex-direction: column;
gap: 6px;
}
.cp-field--full {
margin-bottom: 15px;
}
.cp-label {
font-size: 12px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, 0.6) !important;
text-transform: uppercase;
letter-spacing: 0.5px;
margin: 0 !important;
}
.cp-label span {
color: #f87171;
margin-left: 2px;
}
.cp-optional {
color: rgba(255, 255, 255, 0.3) !important;
font-weight: 400 !important;
text-transform: none !important;
font-size: 11px !important;
}
.cp-input {
width: 100%;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: #fff !important;
transition: all 0.25s ease !important;
outline: none !important;
box-sizing: border-box;
}
.cp-input::placeholder {
color: rgba(255, 255, 255, 0.25) !important;
}
.cp-input:focus {
border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important;
box-shadow: 0 0 0 3px rgba(55, 121, 185, 0.1) !important;
}
.cp-input--error {
border-color: #ef4444 !important;
}
.cp-select {
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='rgba(255,255,255,0.3)' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
padding-right: 35px !important;
cursor: pointer;
}
.cp-select option {
background: #1f2937;
color: #fff;
}
.cp-error {
font-size: 11px !important;
color: #f87171 !important;
margin-top: 2px !important;
}
/* Textarea */
.cp-textarea {
width: 100%;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 10px !important;
padding: 10px 14px !important;
font-size: 14px !important;
color: #fff !important;
transition: all 0.25s ease !important;
outline: none !important;
resize: none;
box-sizing: border-box;
font-family: inherit;
min-height: 85px;
}
.cp-textarea::placeholder {
color: rgba(255, 255, 255, 0.25) !important;
}
.cp-textarea:focus {
border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important;
}
/* File Upload */
.cp-file-upload {
width: 100%;
}
.cp-file-hidden {
display: none;
}
.cp-file-label {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.03);
border: 1px dashed rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 10px 15px;
cursor: pointer;
transition: all 0.25s ease;
gap: 12px;
}
.cp-file-label:hover {
border-color: #3779b9;
background: rgba(55, 121, 185, 0.05);
}
.cp-file-content {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 0;
}
.cp-file-content i {
font-size: 16px;
color: #3779b9;
flex-shrink: 0;
}
.cp-file-name {
font-size: 13px;
color: rgba(255, 255, 255, 0.4);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cp-file-browse {
background: #3779b9;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 12px;
border-radius: 6px;
text-transform: uppercase;
flex-shrink: 0;
}
/* ReCAPTCHA container */
.cp-captcha {
margin-top: 5px;
display: flex;
justify-content: center;
transform: scale(0.9);
transform-origin: center;
}
/* Submit Button */
.cp-submit-btn {
width: 100%;
background: linear-gradient(135deg, #3779b9 0%, #1d5fa3 100%);
color: #fff;
border: none;
border-radius: 12px;
padding: 13px 25px;
font-size: 14px;
font-weight: 800;
letter-spacing: 0.8px;
text-transform: uppercase;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(55, 121, 185, 0.3);
margin-top: 5px;
}
.cp-submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(55, 121, 185, 0.45);
}
.cp-submit-btn:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.cp-submit-btn i {
font-size: 14px;
}
/* ── Careers Popup Optimized (Dark Theme & No-Scroll) ── */
.careers-popup-optimized {
background: #1a1f2b !important;
max-width: 600px !important;
border-radius: 24px !important;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6) !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
}
.careers-popup-optimized .form-panel {
padding: 25px 40px 20px !important;
background: #1a1f2b !important;
}
.careers-popup-optimized .form-header {
text-align: center;
margin-bottom: 20px;
}
.careers-popup-optimized .form-title {
font-size: 24px !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 4px !important;
}
.careers-popup-optimized .form-subtitle {
font-size: 13px !important;
color: rgba(255, 255, 255, 0.5) !important;
margin: 0 !important;
}
.careers-popup-optimized .form-label-custom {
font-size: 10px !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.7) !important;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 4px;
display: block;
}
.careers-popup-optimized .form-label-custom span {
color: #ef4444;
}
.careers-popup-optimized .optional-label {
color: rgba(255, 255, 255, 0.3) !important;
font-weight: 500 !important;
text-transform: none !important;
}
/* Tighten grid gaps */
.careers-popup-optimized .row.g-3 {
--bs-gutter-y: 10px;
--bs-gutter-x: 15px;
}
.careers-popup-optimized .form-input {
padding: 10px 14px !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(255, 255, 255, 0.03) !important;
color: #fff !important;
font-weight: 500 !important;
border-radius: 10px !important;
}
.careers-popup-optimized .form-input:focus {
border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important;
}
.careers-popup-optimized .form-textarea {
min-height: 60px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}
/* File Upload Popup Styling */
.careers-popup-optimized .file-upload-styled {
width: 100%;
}
.careers-popup-optimized .file-hidden-input {
display: none;
}
.careers-popup-optimized .file-upload-label {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.02);
border: 1.5px dashed rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 8px 12px;
cursor: pointer;
transition: 0.25s;
}
.careers-popup-optimized .file-upload-label:hover {
border-color: #3779b9;
background: rgba(255, 255, 255, 0.05);
}
.careers-popup-optimized .file-content {
color: rgba(255, 255, 255, 0.6);
}
/* ── Careers Popup Optimized (Dark Theme & No-Scroll) ── */
.careers-popup-optimized {
background: #1a1f2b !important;
max-width: 600px !important;
border-radius: 24px !important;
box-shadow: 0 40px 100px rgba(0, 0, 0, 0.6) !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
display: flex !important;
flex-direction: column !important;
}
.careers-popup-optimized .form-panel {
padding: 30px 45px 25px !important;
background: #1a1f2b !important;
overflow-y: auto !important;
/* Allow internal scroll if needed as fallback */
max-height: calc(100vh - 40px);
}
.careers-popup-optimized .form-header {
text-align: center;
margin-bottom: 25px;
}
.careers-popup-optimized .form-title {
font-size: 26px !important;
font-weight: 800 !important;
color: #fff !important;
margin: 0 0 4px !important;
}
.careers-popup-optimized .form-subtitle {
font-size: 14px !important;
color: rgba(255, 255, 255, 0.5) !important;
margin: 0 !important;
}
.careers-popup-optimized .form-label-custom {
font-size: 11px !important;
font-weight: 800 !important;
color: rgba(255, 255, 255, 0.7) !important;
text-transform: uppercase;
letter-spacing: 0.6px;
margin-bottom: 6px;
display: block;
}
.careers-popup-optimized .form-label-custom span {
color: #ef4444;
}
.careers-popup-optimized .optional-label {
color: rgba(255, 255, 255, 0.3) !important;
font-weight: 400 !important;
text-transform: none !important;
}
/* Tighten grid gaps */
.careers-popup-optimized .row.g-3 {
--bs-gutter-y: 12px;
--bs-gutter-x: 15px;
}
.careers-popup-optimized .form-input {
padding: 12px 16px !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
background: rgba(255, 255, 255, 0.03) !important;
color: #fff !important;
font-weight: 500 !important;
border-radius: 12px !important;
}
.careers-popup-optimized .form-input:focus {
border-color: #3779b9 !important;
background: rgba(55, 121, 185, 0.05) !important;
box-shadow: 0 0 0 4px rgba(55, 121, 185, 0.1) !important;
}
.careers-popup-optimized .form-textarea {
min-height: 80px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1.5px solid rgba(255, 255, 255, 0.08) !important;
}
/* File Upload Popup Styling */
.careers-popup-optimized .file-upload-styled {
width: 100%;
}
.careers-popup-optimized .file-hidden-input {
display: none;
}
.careers-popup-optimized .file-upload-label {
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(255, 255, 255, 0.02);
border: 1.5px dashed rgba(255, 255, 255, 0.1);
border-radius: 12px;
padding: 10px 15px;
cursor: pointer;
transition: 0.25s;
}
.careers-popup-optimized .file-upload-label:hover {
border-color: #3779b9;
background: rgba(255, 255, 255, 0.05);
}
.careers-popup-optimized .file-content {
color: rgba(255, 255, 255, 0.6);
}
.careers-popup-optimized .file-name-text {
font-size: 13px;
font-weight: 500;
}
.careers-popup-optimized .file-browse-btn {
background: #3779b9;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 6px 14px;
border-radius: 8px;
text-transform: uppercase;
}
/* Captcha alignment */
.careers-popup-optimized .g-recaptcha-container {
transform: scale(0.9);
margin: 10px 0 !important;
}
/* Submit Button Override */
.careers-popup-optimized .submit-btn {
padding: 16px !important;
margin-top: 10px !important;
font-size: 15px !important;
border-radius: 12px !important;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
background: linear-gradient(135deg, #3779b9 0%, #1d5fa3 100%) !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
}
/* Multi-Viewport Optimization (Absolute No-Scroll) */
/* 1920-1600-1540-1440 */
@media (max-width: 1920px) {
.careers-popup-optimized {
max-width: 600px !important;
}
}
@media (max-width: 1440px) {
.careers-popup-optimized {
max-width: 580px !important;
}
}
/* 1360-1200 */
@media (max-width: 1360px) {
.careers-popup-optimized {
max-width: 550px !important;
}
.careers-popup-optimized .form-panel {
padding: 25px 40px 20px !important;
}
}
/* 1024-992 */
@media (max-width: 1024px) {
.careers-popup-optimized {
max-width: 520px !important;
}
.careers-popup-optimized .form-panel {
padding: 20px 35px 15px !important;
}
.careers-popup-optimized .form-title {
font-size: 24px !important;
}
}
/* 768px - Tablet */
@media (max-width: 768px) {
.careers-popup-optimized {
max-width: 600px !important;
width: 90% !important;
max-height: 95vh !important;
overflow-y: auto !important;
}
/* No-scroll optimization: compress vertical rhythm */
.careers-popup-optimized .form-panel {
padding: 10px 20px 10px !important;
}
.careers-popup-optimized .form-header {
margin-bottom: 5px !important;
}
.careers-popup-optimized .form-title {
font-size: 20px !important;
}
.careers-popup-optimized .form-input,
.careers-popup-optimized .form-select,
.careers-popup-optimized .form-textarea {
height: 33px !important;
padding: 8px 15px !important;
font-size: 14px !important;
}
.careers-popup-optimized .form-textarea {
min-height: 50px !important;
}
.careers-popup-optimized .g-recaptcha-container {
transform: scale(0.7) !important;
margin: 0 !important;
height: 60px !important;
overflow: hidden !important;
}
.careers-popup-optimized .submit-btn {
height: 50px !important;
margin-top: 5px !important;
}
}
/* 500-320px - Mobile */
@media (max-width: 500px) {
.careers-popup-optimized {
width: 95% !important;
max-height: 98vh !important;
}
.careers-popup-optimized .form-panel {
padding: 8px 15px 5px !important;
}
.careers-popup-optimized .form-label-custom {
font-size: 11px !important;
margin-bottom: 2px !important;
}
.careers-popup-optimized .row.g-3 {
--bs-gutter-y: 8px !important;
}
.careers-popup-optimized .mt-3 {
margin-top: 5px !important;
}
.careers-popup-optimized .file-upload-styled {
margin-bottom: 5px !important;
}
.careers-popup-optimized .file-browse-btn {
padding: 4px 10px !important;
font-size: 12px !important;
}
}
.careers-popup-optimized .form-textarea {
min-height: 50px !important;
font-size: 12px !important;
color: #fff;
}
.careers-popup-optimized .g-recaptcha-container {
transform: scale(0.65);
margin: 3px 0 !important;
}
.careers-popup-optimized .submit-btn {
padding: 12px !important;
font-size: 13px !important;
margin-top: 5px !important;
}
/* ── Height Based Responsiveness (No-Scroll Optimization) ── */
@media (max-height: 600px) {
.careers-popup-optimized .form-panel {
padding: 8px 15px 5px !important;
}
.careers-popup-optimized .form-header {
margin-bottom: 5px !important;
}
.careers-popup-optimized .form-title {
font-size: 16px !important;
}
.careers-popup-optimized .form-label-custom {
font-size: 9px !important;
margin-bottom: 2px !important;
}
.careers-popup-optimized .form-input,
.careers-popup-optimized .form-select {
height: 36px !important;
padding: 4px 10px !important;
font-size: 13px !important;
}
.careers-popup-optimized .form-textarea {
min-height: 36px !important;
height: 36px !important;
padding: 5px 10px !important;
}
.careers-popup-optimized .file-upload-label {
padding: 4px 10px !important;
}
.careers-popup-optimized .file-browse-btn {
padding: 2px 8px !important;
font-size: 10px !important;
}
.careers-popup-optimized .g-recaptcha-container {
transform: scale(0.6) !important;
transform-origin: center center;
height: 48px !important;
margin: 2px 0 !important;
}
.careers-popup-optimized .submit-btn {
height: 38px !important;
margin-top: 5px !important;
font-size: 11px !important;
padding: 5px !important;
}
}
@media (max-height: 500px) {
.careers-popup-optimized {
border-radius: 12px !important;
}
.careers-popup-optimized .form-panel {
padding: 2px 10px 2px !important;
}
.careers-popup-optimized .form-header {
margin-bottom: 2px !important;
}
.careers-popup-optimized .form-title {
font-size: 14px !important;
}
.careers-popup-optimized .form-label-custom {
font-size: 8px !important;
margin-bottom: 0 !important;
}
.careers-popup-optimized .form-input,
.careers-popup-optimized .form-select,
.careers-popup-optimized .form-textarea {
height: 30px !important;
min-height: 30px !important;
padding: 2px 8px !important;
font-size: 11px !important;
}
.careers-popup-optimized .mt-3,
.careers-popup-optimized .mt-1 {
margin-top: 2px !important;
}
.careers-popup-optimized .file-upload-label {
padding: 2px 8px !important;
border-width: 1px !important;
}
.careers-popup-optimized .file-content i {
font-size: 10px !important;
}
.careers-popup-optimized .file-name-text {
font-size: 10px !important;
}
.careers-popup-optimized .file-browse-btn {
padding: 2px 6px !important;
font-size: 9px !important;
}
.careers-popup-optimized .g-recaptcha-container {
transform: scale(0.5) !important;
height: 38px !important;
margin: 1px 0 !important;
}
.careers-popup-optimized .submit-btn {
height: 32px !important;
margin-top: 2px !important;
font-size: 10px !important;
padding: 0 !important;
}
/* Extreme optimization: hide labels for optional fields to save space */
.careers-popup-optimized .form-field-wrapper .form-label-custom {
display: none;
}
.careers-popup-optimized .optional-label {
display: none;
}
}
@media (max-height: 400px) {
.careers-popup-optimized .form-header {
display: none;
/* Hide header on very short screens to save space */
}
.careers-popup-optimized .form-panel {
padding-top: 20px !important;
/* Room for close btn */
}
}
@media (max-width: 475px) {
.home-contact-one .home-contact__card {
padding: 14px !important;
}
.home-contact-one .home-contact__card__list__title{
font-size: 16px !important;
}
.home-contact-one .home-contact__card__list__text a{
font-size: 14px !important;
}
}
@media (max-width: 375px) {
.home-contact-one .home-contact__card__list li {
padding-right: 41px !important;
padding-left: 36px !important;
}
}
@media (max-width: 320px) {
.home-contact-one .home-contact__card__list li {
display: flex;
align-items: center;
gap: 9px !important;
margin-bottom: 21px !important;
border-radius: 10px !important;
padding: 2px 11px !important;
padding-right: -6px !important;
padding-left: 11px !important;
}
.home-contact-one .home-contact__card {
padding: 14px !important;
}
.home-contact-one .home-contact__card__list li span{
font-size: 20px !important;
}
.home-contact-one .home-contact__card__list__title{
font-size: 14px !important;
}
.home-contact-one .home-contact__card__list__text a{
font-size: 14px !important;
}
}