* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, sans-serif;
}
#page {
overflow: hidden;
}
.container {
width: 100%;
max-width: 1140px !important;
margin: 0 auto;
padding: 0 0px;
}
/* ================================
Headings
================================ */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.25;
margin-bottom: 0.6em;
}
h1 { font-size: 3rem; } /* 48px */
h2 { font-size: 2.25rem; } /* 36px */
h3 { font-size: 1.75rem; } /* 28px */
h4 { font-size: 1.4rem; } /* 22px */
h5 { font-size: 1.15rem; } /* 18px */
h6 { font-size: 1rem; } /* 16px */
/* ================================
Paragraph & Inline Text
================================ */
p {
margin-bottom: 1rem;
font-weight: 400;
}
strong {
font-weight: 700;
}
em {
font-style: italic;
}
small {
font-size: 0.875rem;
}
/* ================================
Links
================================ */
a {
color: #0066ff;
text-decoration: none;
}
span, p{
font-size: 16px !important;
line-height: 1.6;
}
ul{
padding-left: 40px;
}
ul li{
font-size: 16px !important;
line-height: 1.6;
margin-bottom: 5px;
}
img, video {
max-width: 100%;
height: auto;
}
#menu-items li a {
font-weight: normal;
}
#footer-3 ul{
padding-left: 0px !important;
}
.smart-strategy-title {
font-size: 40px;
line-height: 1.2;
font-weight: 700;
}
*/
.icon-card {
--blob-w: 135px; /* xl */
--blob-h: 95px;
position: relative;
}
/
@media (max-width: 1536px) {
.icon-card {
--blob-w: 115px;
--blob-h: 85px;
}
} /* lg–xl */
@media (max-width: 1024px) {
.icon-card {
--blob-w: 100px;
--blob-h: 78px;
}
} /* md–lg */
@media (max-width: 768px) {
.icon-card {
--blob-w: 135px;
--blob-h: 95px;
}
.desktoplogo {
display: none !important;
}
}
/* sm–md */
@media (max-width: 640px) {
.icon-card {
--blob-w: 125px;
--blob-h: 90px;
}
} /* xsm–sm */
.icon-purple {
filter: invert(26%) sepia(58%) saturate(3200%) hue-rotate(235deg)
brightness(95%) contrast(90%);
}
.tra-menu.white-scroll .wsmainfull.scroll,
.white-menu.white-scroll .wsmainfull.scroll {
background-color: #fff !important;
}
/* Header Styles */
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
transition: all 0.4s ease;
background-color: transparent;
}
/* Transparent header by default */
.header-container {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 0px;
transition: all 0.4s ease;
width: 1140px;
margin: 0 auto;
}
/* Sticky header with white background */
header.sticky {
background-color: white;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
header.sticky .header-container {
padding: 12px 0px;
}
/* Logo */
.logo {
display: flex;
align-items: center;
text-decoration: none;
}
.logo-image {
height: 40px;
width: auto;
transition: all 0.3s ease;
}
/* Desktop Navigation */
.desktop-nav {
display: flex;
align-items: center;
gap: 40px;
}
.nav-links {
display: flex;
list-style: none;
gap: 30px;
}
.nav-links a {
color: #111111;
text-decoration: none;
font-weight: 500;
font-size: 1.05rem;
position: relative;
padding: 5px 0;
transition: color 0.3s ease;
}
header.sticky .nav-links a {
color: #333;
}
.nav-links a:hover {
color: #353535;
}
.nav-links a::after {
content: '';
position: absolute;
width: 0;
height: 2px;
bottom: 0;
left: 0;
background-color: #340EF8;
transition: width 0.3s ease;
}
.nav-links a:hover::after {
width: 100%;
}
/* Dropdown Menu */
.dropdown {
position: relative;
}
.dropdown-content {
position: absolute;
top: 30px;
left: 0;
background-color: white;
min-width: 200px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-radius: 8px;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.3s ease;
z-index: 100;
padding: 10px 0;
}
.dropdown:hover .dropdown-content {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-content a {
color: #333 !important;
display: block;
padding: 6px 15px;
text-decoration: none;
transition: all 0.2s ease;
font-size: 16px;
}
.dropdown-content a:hover {
color: #2f2f2f !important;
}
/* Desktop Buttons (modified) */
.desktop-buttons {
display: flex;
gap: 15px;
align-items: center;
}
.btn-link {
padding: 5px 22px;
border-radius: 30px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
line-height: 30px;
text-transform: uppercase;
font-size: 15px;
letter-spacing: 1px;
/* core: gradient stays in all states */
background-image: linear-gradient(135deg, #5229f2, #a91063);
background-size: 200% 100%;
background-position: 0% 50%;
color: #fff;
transition: background-position 0.35s ease, transform 0.2s ease, box-shadow 0.35s ease;
}
/* Active */
.btn-link:active {
transform: translateY(0);
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
/* Specific hooks (optional, but kept) */
.btn-login { }
.btn-signup { }
/* Sticky state: do NOT override gradient with white/transparent */
header.sticky .btn-login,
header.sticky .btn-signup {
background-image: linear-gradient(135deg, #5229f2, #a91063);
background-size: 200% 100%;
background-position: 0% 50%;
color: #fff;
border-color: transparent;
}
/* Sticky hover: same behavior */
header.sticky .btn-login:hover,
header.sticky .btn-signup:hover {
background-position: 100% 50%;
}
.mobile-toggle {
display: none;
background: none;
border: none;
font-size: 1.8rem;
color: black;
cursor: pointer;
padding: 5px;
transition: color 0.3s ease;
}
header.sticky .mobile-toggle {
color: #333;
}
/* Profile Dropdown */
.btn-profile {
padding: 0px 0px;
border-radius: 50px;
background: transparent;
border: 2px solid rgba(255, 255, 255, 0.3);
display: flex;
align-items: center;
gap: 8px;
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
header.sticky .btn-profile:hover {
background: rgba(51, 51, 51, 0.95);
border-color: #333;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}
.profile-image {
width: 35px;
height: 35px;
border-radius: 50%;
overflow: hidden;
border: 2px solid rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
}
.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.btn-profile:hover .profile-image {
border-color: white;
}
header.sticky .profile-image {
border: 2px solid rgba(51, 51, 51, 0.3);
}
header.sticky .btn-profile:hover .profile-image {
border-color: #333;
}
/* Profile Dropdown Content */
.profile-dropdown {
min-width: 220px;
right: 0;
left: auto;
padding: 10px 0;
border-radius: 10px;
box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}
.dropdown-item {
display: flex;
align-items: center;
gap: 12px;
padding: 5px 20px;
color: #333;
text-decoration: none;
transition: all 0.3s ease;
border-left: 3px solid transparent;
background: none;
border: none;
width: 100%;
text-align: left;
font-size: 1rem;
cursor: pointer;
font-family: inherit;
}
.dropdown-item:hover {
background: #f8f9fa;
color: #340ef8;
padding-left: 10px;
}
.dropdown-item i {
width: 20px;
color: #340ef8;
font-size: 0.9rem;
}
.logout-form {
border-top: 1px solid #eee;
margin-top: 5px;
padding-top: 5px;
}
.logout-btn {
color: #dc3545 !important;
}
.logout-btn i {
color: #dc3545 !important;
}
.logout-btn:hover {
background: #fff5f5 !important;
color: #c82333 !important;
}
/* Mobile Menu */
.mobile-menu {
position: fixed;
top: 0;
left: -320px;
width: 300px;
height: 100vh;
background-color: white;
box-shadow: 5px 0 30px rgba(0, 0, 0, 0.1);
z-index: 2000;
transition: left 0.4s ease;
overflow-y: auto;
padding: 5px 20px;
}
.mobile-menu.active {
left: 0;
}
.mobile-menu-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 5px;
border-bottom: 1px solid #eee;
margin-bottom: 10px;
}
.mobile-logo {
height: 35px;
width: auto;
}
.mobile-close {
background: none;
border: none;
font-size: 1.8rem;
color: #333;
cursor: pointer;
padding: 5px;
}
.mobile-nav-links {
list-style: none;
}
.mobile-nav-links li {
margin-bottom: 10px;
}
.mobile-nav-links a {
display: block;
padding: 8px 15px 8px 0;
color: #333;
text-decoration: none;
font-weight: 500;
/* border-radius: 8px; */
transition: all 0.2s ease;
border-bottom: 1px dashed #ddd;
}
.mobile-nav-links a:hover {
background-color: #f8f9fa;
color: #764ba2;
}
.mobile-nav-links li:last-child a {
border-bottom: none !important;
}
.mobile-dropdown-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease;
padding-left: 15px;
}
.mobile-dropdown.active .mobile-dropdown-content {
max-height: 300px;
}
.mobile-dropdown-toggle {
display: flex;
justify-content: space-between;
align-items: center;
}
.mobile-dropdown-toggle i {
transition: transform 0.3s ease;
float: right;
}
.mobile-dropdown-toggle i::before {
font-size: 14px;
/* float: right; */
}
.mobile-dropdown.active .mobile-dropdown-toggle i {
transform: rotate(180deg);
}
.mobile-buttons {
display: flex;
flex-direction: column;
gap: 15px;
margin-top: 30px;
}
.mobile-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1999;
opacity: 0;
visibility: hidden;
transition: all 0.4s ease;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-auth-section {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid #eee;
}
.mobile-profile {
display: flex;
align-items: center;
gap: 15px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
margin-bottom: 15px;
}
.mobile-profile-image {
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #764ba2;
}
.mobile-profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-profile-info h4 {
font-size: 1.1rem;
color: #333;
margin-bottom: 5px;
}
.mobile-profile-info a {
color: #764ba2;
font-size: 0.9rem;
text-decoration: none;
}
.mobile-auth-links {
display: flex;
flex-direction: column;
gap: 10px;
}
.mobile-logout-form {
margin-top: 10px;
background: #fff5f5 !important;
color: #c82333 !important;
padding: 10px;
border-radius: 10px;
border-left: 5px solid #c82333;
}
.mobile-auth-links a {
color: #333 !important;
}
.btn-link.btn-signup:hover, .btn-link.btn-login:hover {
background: #2F0BF8;
color: #fff;
text-decoration: unset;
}
/* Responsive Styles */
@media (max-width: 1024px) {
.desktop-nav {
gap: 20px;
}
.nav-links {
gap: 20px;
}
.btn-link {
padding: 8px 18px;
font-size: 0.95rem;
}
header {
background-color: #fff;
}
#mobile-menu ul {
padding-left: 0;
}
}
@media (max-width: 768px) {
.header-container {
padding: 20px;
width: 100%;
}
header.sticky .header-container {
padding: 0px 15px;
}
.desktop-nav, .desktop-buttons {
display: none;
}
.mobile-toggle {
display: block;
}
.content {
padding: 100px 20px 40px;
}
h1 {
font-size: 2.2rem;
}
.logo-image {
height: 35px;
}
}
@media (max-width: 480px) {
.mobile-menu {
width: 85%;
left: -85%;
}
.header-container {
padding: 5px 15px;
width: 100%;
}
.logo-image {
height: 30px;
}
}
/*=========== Breadcrumb CSS ==================*/
#service-page-breadcrumb {
background: linear-gradient(135deg, #5229f2, #a91063);
margin: 80px auto 0px;
padding: 40px 0;
text-align: center;
color: #fff;
position: relative;
overflow: hidden;
border-radius: 20px;
}
.breadcrumb-container {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0 auto;
}
.breadcrumb-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
text-transform: capitalize;
color: #fff;
}
.breadcrumb-list {
display: inline-flex;
align-items: center;
list-style: none;
gap: 10px;
padding: 0;
margin: 0;
font-size: 16px;
}
.breadcrumb-list li a {
color: #cbd5e1;
text-decoration: none;
transition: color 0.3s ease;
}
.breadcrumb-list li a:hover {
color: #fff;
}
.breadcrumb-list li span {
color: #94a3b8;
}
.breadcrumb-list li.active {
color: #ffffff;
font-weight: 600;
}
/*================For hero section ================*/
.lh-hero {
background-position: center;
background-repeat: repeat;
padding: 140px 0 80px;
position: relative;
}
.lh-hero-overlay {
position: relative;
z-index: 2;
}
.lh-hero-row {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
/* Content Styles - 60% width */
.lh-hero-content {
flex: 0 0 60%;
max-width: 60%;
padding-right: 40px; /* একটু বেশি padding দিলাম যেহেতু আরও জায়গা আছে */
}
.lh-hero-title {
font-size: 40px;
font-weight: 700;
line-height: 1.3;
color: #333;
margin-bottom: 20px;
}
.lh-hero-desc {
font-size: 16px;
line-height: 1.8;
color: #666;
margin-bottom: 30px;
}
.lh-hero-desc p {
margin-bottom: 15px;
}
.lh-hero-desc p:last-child {
margin-bottom: 0;
}
/* Button Styles */
.lh-hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
}
.lh-hero-btn {
display: inline-block;
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: 4px;
transition: all 0.3s ease;
text-align: center;
border: 2px solid transparent;
}
.lh-hero-btn-outline {
background-color: transparent;
border-color: #2563eb;
color: #2563eb;
}
.lh-hero-btn-outline:hover {
background-image: linear-gradient(135deg, #5229f2, #a91063);
color: white;
border-color: #a91063;
}
.lh-hero-btn-primary {
background-image: linear-gradient(135deg, #5229f2, #a91063);
color: white;
border: unset;
}
.lh-hero-btn-primary:hover {
background-color: #1d4ed8;
border-color: #1d4ed8;
}
/* Image Styles - 40% width */
.lh-hero-image {
flex: 0 0 40%;
max-width: 40%;
}
.lh-hero-img {
text-align: center;
}
.lh-hero-img img {
max-width: 90%;
height: auto;
display: inline-block;
}
/* Responsive Styles */
@media (max-width: 992px) {
.lh-hero {
padding: 60px 0;
}
.lh-hero-content,
.lh-hero-image {
flex: 0 0 100%;
max-width: 100%;
padding-right: 0;
}
.lh-hero-content {
margin-bottom: 40px;
padding-top: 50px;
}
.lh-hero-title {
font-size: 34px;
}
}
@media (max-width: 768px) {
.lh-hero {
padding: 50px 0;
}
.lh-hero-title {
font-size: 28px;
}
.lh-hero-desc {
font-size: 15px;
}
.lh-hero-btn {
padding: 12px 24px;
font-size: 15px;
}
.lh-hero-buttons {
justify-content: center;
}
}
@media (max-width: 576px) {
.lh-hero {
padding: 40px 0;
}
.lh-hero-title {
font-size: 24px;
}
.lh-hero-desc {
font-size: 14px;
line-height: 1.6;
}
.lh-hero-buttons {
flex-direction: column;
gap: 10px;
}
.lh-hero-btn {
width: 100%;
padding: 12px 20px;
}
}
/* =========== For service ==============*/
.service-custom-design {
box-shadow: 1px 1px 7px #cccccc70;
border-radius: 20px;
}
.service-custom-design {
overflow: hidden;
margin-bottom: 20px;
}
.service-image img {
width: 275px;
object-fit: cover;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
height: 190px;
}
#service-page .service-image img {
width: 100% !important;
object-fit: cover;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
height: 200px;
}
#service-details-page .service-image img {
width: 100% !important;
object-fit: cover;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
height: 200px;
margin-bottom: 5px;
}
/* responsive tweaks */
@media (max-width: 767px) {
.service-image img {
width: 100% !important;
height: auto !important;
}
}
/* Service image hover zoom effect */
.service-image img {
transition: transform 0.5s ease-in-out;
transform: scale(1); /* Normal size */
}
.service-image:hover img {
transform: scale(1.1); /* Zoom-in effect */
}
.service-title h6 {
color: #000000 !important;
font-size: 16px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 10px;
border-bottom: dashed 1px #ddd;
padding-bottom: 10px;
}
.fbox-txt.service-text {
padding: 15px 10px;
background: #ffffff;
margin-top: -10px;
color: #383838;
}
.service-text p {
font-size: 16px;
}
.custom-service-button {
color: #a91063;
}
.service-title:hover h6 {
color: #a91063;
}
.other-services {
padding-top: 80px;
}
.custom-section-title {
position: relative;
font-size: 1.5rem;
font-weight: 700;
color: #1e293b;
padding-left: 15px;
margin-bottom: 20px;
text-transform: uppercase;
}
.custom-section-title::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 5px;
}
#faqs-2 {
background-color: #fff;
}
.custom-logout-button {
padding: 10px 20px;
margin-top: 15px;
background: linear-gradient(135deg, #5229f2, #a91063);
border: unset;
}
.checkout-wrap {
max-width: var(--container-max);
margin: 48px auto;
padding: 28px;
border-radius: 12px;
/* background: #fff;
box-shadow: 0 6px 30px rgba(20, 30, 60, 0.06) */
border: 1px solid #eef1f6;
}
h1.h-title {
font-weight: 600;
font-size: 1.3rem;
margin-bottom: 0.25rem;
}
p.h-sub {
margin: 0;
color: var(--muted);
font-size: 0.94rem;
}
/* left column form styles */
.card-form {
border: 1px solid #eef1f6;
border-radius: 10px;
padding: 20px;
}
.form-label.required:after {
content: " *";
color: #e55353;
}
/* order summary */
.summary {
background: #fbfdff;
border: 1px solid #eef6ff;
padding: 20px;
border-radius: 10px;
}
.product-line {
display: flex;
gap: 12px;
align-items: center;
}
.product-line img {
width: 72px;
height: 72px;
object-fit: cover;
border-radius: 8px;
}
/* nice subtle button */
.btn-primary-strong {
background: linear-gradient(180deg, var(--brand), #084cdf);
border: none;
}
/* responsive tweaks */
@media (max-width: 767px) {
.checkout-wrap {
margin: 20px;
padding: 18px;
}
.service-image img {
width: 100%;
object-fit: cover;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
height: auto;
}
}
button.btn.btn-primary.custom-submit-button {
padding: 10px 10px;
color: #fff;
background: linear-gradient(135deg, #5229f2, #a91063);
border: unset;
}
#service-category {
margin-bottom: 15px;
}
#menu-items #service-category h4 {
border-bottom: 1px solid #d0d0d03d;
color: #000000;
font-size: 15px;
text-transform: uppercase;
}
#menu-items #service-category {
margin-bottom: 0px !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 {
position: absolute;
top: 62px;
left: 50%;
transform: translateX(-50%);
width: 90% !important;
padding: 20px 15px;
box-sizing: border-box;
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
z-index: 999;
border: 1px solid #f2f2f2 !important;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75::before {
content: "";
position: absolute;
top: -20px;
left: 50%;
transform: translateX(-50%);
border-width: 10px;
border-style: solid;
border-color: transparent transparent #181c62 transparent;
filter: drop-shadow(0 -1px 2px rgba(0, 0, 0, 0.1));
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a,
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a {
background-color: unset;
color: #4f4f4f;
font-size: 16px;
padding: 7px 0;
border-bottom: dashed 1px #ddd;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li:last-child > a,
.wsmenu
> .wsmenu-list
> li
> .wsmegamenu.halfmenu
ul.link-list
> li:last-child
> a {
border-bottom: none;
}
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 ul.link-list > li > a:hover,
.wsmenu > .wsmenu-list > li > .wsmegamenu.halfmenu ul.link-list > li > a:hover {
background-color: transparent;
font-size: 16px;
padding: 7px 0;
}
#menu-items {
padding-right: 15px;
}
.products-section {
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.products-section h2 {
font-size: 30px;
margin-bottom: 20px;
color: #333;
text-transform: uppercase;
}
.product-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
align-items: stretch;
}
.product-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
height: 100%;
display: flex;
flex-direction: column;
}
.product-content {
padding: 20px;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.features {
flex-grow: 1;
margin: 15px 0;
}
.product-buttons {
margin-top: auto;
}
.product-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.product-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s;
}
.product-card:hover .product-image img {
transform: scale(1.1);
}
.category-label {
position: absolute;
top: 10px;
left: 10px;
background: #a91063;
color: #fff;
padding: 5px 10px;
font-size: 0.8rem;
font-weight: bold;
border-radius: 5px;
text-transform: uppercase;
}
.product-content {
text-align: center;
}
.product-content h3 {
font-size: 22px;
margin-bottom: 6px;
color: #333;
margin-top: 10px;
padding: 0 10px;
}
.product-content p {
font-size: 16px;
color: #666;
font-weight: 500;
padding: 0 10px;
}
.product-buttons {
display: block;
}
.product-buttons button {
padding: 12px 15px;
border: none;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: background 0.3s;
width: 100%;
font-size: 16px;
color: #fff;
}
.add-to-cart {
color: #fff;
background: linear-gradient(135deg, #5229f2, #a91063);
}
.add-to-cart:hover {
.add-to-cart {
color: #fff;
background: linear-gradient(135deg, #6e49ff, #c11373);
}
}
.view-details {
background: #ecf0f1;
color: #333;
}
.view-details:hover {
background: #bdc3c7;
}
/*========= Product single page design ==================*/
.card {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent);
border-radius: 16px;
box-shadow: 0 1px 3px rgba(2, 6, 23, 0.11);
}
/* First section: two columns */
.row {
display: grid;
grid-template-columns: 1fr 520px;
gap: 28px;
align-items: start;
}
#service-first-section {
padding-bottom: 40px;
}
/* Image column */
.img-wrap {
background: var(--glass);
border-radius: 12px;
padding: 16px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.zoom {
width: 100%;
max-width: 620px;
border-radius: 8px;
overflow: hidden;
transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.zoom img {
display: block;
width: 100%;
height: auto;
object-fit: cover;
}
.img-wrap:hover .zoom {
transform: scale(1.06);
box-shadow: 0 20px 50px rgba(2, 6, 23, 0.6);
}
/* Info column */
.info {
margin-top: 20px;
}
.info h1 {
font-size: 26px;
margin: 0 0 8px;
}
.brand {
color: var(--muted);
font-size: 13px;
margin-bottom: 10px;
background: #ccc;
display: inline-block;
padding: 5px 10px;
border-radius: 50px;
}
.price {
font-weight: 500;
font-size: 16px;
margin-bottom: 14px;
}
.features {
list-style: none;
padding: 0;
margin: 0 0 18px 0;
display: block;
}
.features li {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 5px 0px 0px 0px;
border-bottom: 1px dashed rgba(255, 255, 255, 0.02);
}
.features li:last-child {
border-bottom: 0;
}
.bullet {
width: 22px;
height: 22px;
border-radius: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #ccc;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02);
color: #fff;
}
.bullet svg {
width: 15px;
height: 15px;
opacity: 0.9;
}
.feat-text {
color: var(--muted);
font-size: 16px;
margin-top: -2px;
}
.buy-now {
display: inline-block;
padding: 6px 18px;
border-radius: 10px;
background: linear-gradient(135deg, #5229f2, #a91063);
color: white;
border: 0;
font-weight: 700;
cursor: pointer;
text-decoration: none;
margin-top: 10px;
}
.buy-now:hover {
color: #d5d5d5 !important;
}
/* FAQ section */
#faq-section {
padding-top: 40px;
background: #dddddd2b;
padding-bottom: 40px;
}
#faq-section .custom-section-title {
position: relative;
font-size: 28px;
margin-bottom: 20px;
font-weight: 700;
}
#faq-section .custom-section-title::before {
width: 6px;
height: 75%;
}
.faq {
padding: 0 20px;
}
.faq h2 {
font-size: 20px;
text-transform: uppercase;
}
.q {
background: rgb(255, 255, 255);
padding: 14px;
border-radius: 10px;
margin-bottom: 10px;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}
.q .q-text {
font-weight: 600;
color: #333;
font-size: 18px;
}
.a.open p {
font-size: 16px;
color: #333;
padding-bottom: 15px;
}
.q .arrow {
transition: transform 0.25s ease;
}
.a {
max-height: 0;
overflow: hidden;
transition: max-height 0.32s ease, padding 0.25s ease;
color: var(--muted);
padding: 0 12px;
}
.a.open {
padding: 0px 12px 12px 12px;
color: var(--muted);
}
/* Responsive */
@media (max-width: 980px) {
.row {
grid-template-columns: 1fr;
}
.img-wrap {
order: 0;
}
.info {
order: 1;
}
}
@media (max-width: 420px) {
.info h1 {
font-size: 20px;
}
}
/*============= End porduct single page ===================*/
@media (max-width: 1024px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.product-grid {
grid-template-columns: 1fr;
}
}
@media screen and (max-width: 600px) {
.wsmenu > .wsmenu-list > li > .wsmegamenu.w-75 {
top: 62px !important;
left: 50% !important;
}
#menu-items a {
color: #282828 !important;
font-weight: normal;
font-size: 15px !important;
}
#service-category {
margin-bottom: 0px !important;
margin-top: 10px !important;
}
}
#plan-details-page .breadcrumb-title {
font-size: 32px;
font-weight: 700;
margin-bottom: 0;
text-transform: capitalize;
color: #fff;
}
#plan-details-page #service-page-breadcrumb {
margin: 100px 0 60px 0;
padding: 20px 0;
}
/*=========== Cart page CSS ==================*/
.wrap {
width: 100%;
max-width: var(--max);
}
.card {
background: var(--card);
border-radius: 16px;
padding: 20px;
box-shadow: 0 2px 5px rgba(15, 23, 36, 0.13);
}
/* -------------------- Header -------------------- */
.top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 18px;
}
.top h1 {
font-size: 20px;
margin: 0;
}
.top .muted {
color: var(--muted);
font-size: 13px;
}
/* -------------------- Table (desktop) -------------------- */
.table-wrap {
overflow: auto;
}
table.cart {
width: 100%;
border-collapse: collapse;
font-size: 15px;
}
table.cart thead th {
text-align: left;
padding: 14px 12px;
color: var(--muted);
font-weight: 600;
border-bottom: 1px solid rgba(15, 23, 36, 0.06);
}
table.cart tbody td {
padding: 14px 12px;
border-bottom: 1px solid rgba(15, 23, 36, 0.04);
vertical-align: middle;
}
.product-cell {
display: flex;
gap: 12px;
align-items: center;
}
.p-thumb {
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
flex-shrink: 0;
}
.p-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.p-title {
font-weight: 600;
}
.p-sku {
color: var(--muted);
font-size: 13px;
}
.price {
font-weight: 700;
}
.qty {
display: flex;
align-items: center;
gap: 8px;
}
.qty button {
background: transparent;
border: 1px solid rgba(15, 23, 36, 0.08);
padding: 6px 8px;
border-radius: 8px;
cursor: pointer;
}
.qty input {
width: 56px;
text-align: center;
border: 1px solid rgba(15, 23, 36, 0.06);
padding: 6px;
border-radius: 8px;
}
.remove {
background: transparent;
border: 0;
color: var(--danger);
cursor: pointer;
font-weight: 600;
}
/* -------------------- Totals box -------------------- */
.totals {
margin-top: 18px;
display: flex;
justify-content: flex-end;
}
.totals .panel {
width: 360px;
padding: 16px;
border-radius: 12px;
background: linear-gradient(
180deg,
rgba(99, 102, 241, 0.06),
rgba(14, 165, 164, 0.03)
);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.line {
display: flex;
justify-content: space-between;
padding: 8px 0;
color: var(--muted);
}
.line.total {
font-weight: 800;
font-size: 18px;
color: var(--accent-2);
}
.checkout-button {
display: block;
margin-top: 12px;
padding: 12px;
border-radius: 10px;
background: linear-gradient(135deg, #5229f2, #a91063);
color: white;
text-align: center;
text-decoration: none;
font-weight: 700;
}
/* -------------------- Empty state -------------------- */
.empty {
padding: 40px;
text-align: center;
color: var(--muted);
}
.empty a {
color: var(--accent);
text-decoration: none;
font-weight: 700;
}
.checkout-button:hover {
color: #ffffffa6 !important;
}
/* -------------------- Mobile: card layout -------------------- */
@media (max-width: 860px) {
table.cart thead {
display: none;
}
table.cart,
table.cart tbody,
table.cart tr,
table.cart td {
display: block;
width: 100%;
}
table.cart tr {
margin-bottom: 12px;
border-radius: 12px;
background: var(--card);
box-shadow: 0 6px 20px rgba(15, 23, 36, 0.04);
padding: 12px;
}
table.cart td {
padding: 8px;
border: 0;
}
.product-cell {
align-items: flex-start;
}
.p-thumb {
width: 64px;
height: 64px;
}
.qty {
margin-top: 8px;
}
.totals {
justify-content: center;
}
.totals .panel {
width: 100%;
}
}
/* -------------------- Small helpers -------------------- */
.muted {
color: var(--muted);
}
.small {
font-size: 13px;
}
/*============= Profile image ==============*/
.profile-image img {
width: 47px;
}
.custom-button {
background: transparent !important;
border: 2px solid #7320bc !important;
color: #7320bc !important;
line-height: 23px !important;
}
.custom-button:hover {
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: #ffffff !important;
}
.get-statred {
line-height: 23px !important;
}
.custom-heading-div {
text-align: center;
}
.heading-style {
position: relative;
display: inline-block;
padding-bottom: 20px;
}
.heading-style span {
position: relative;
z-index: 2;
}
/* Border + Cross design */
.heading-style::before,
.heading-style::after {
content: "";
position: absolute;
bottom: 0;
width: 40%;
height: 3px;
background: #6a4ec1;
}
.heading-style::before {
left: 0;
}
.heading-style::after {
right: 0;
}
/* Cross icon in the middle */
.heading-style::after,
.heading-style::before {
}
.heading-style span::after {
content: "✕";
position: absolute;
bottom: -28px;
left: 50%;
transform: translateX(-50%);
background: #fff;
padding: 0 8px;
color: #6a4ec1;
font-size: 1rem;
}
.section-title {
margin-bottom: 30px;
}
.page-pagination.theme-pagination {
padding-bottom: 60px !important;
}
#blog-page {
padding-bottom: 0 !important;
padding-top: 40px;
}
/*=======================================
Post grid section css
========================================*/
.post-grid-section {
padding: 50px 0;
background-position: top left;
background-repeat: repeat;
}
.pg-header {
margin-bottom: 20px;
padding-left: 15px;
position:relative;
}
.pg-section-title {
font-size: 28px;
font-weight: 700;
color: #0f172a;
text-transform: uppercase;
margin: 0;
line-height: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.pg-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.ps-viewport {
margin-right: 4px;
margin-left: -8px;
}
.post-card {
background: #fff;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
margin: 10px;
transition: transform 0.3s ease;
height: 100%;
}
.post-card:hover {
transform: translateY(-5px);
}
/* IMAGE AREA */
.post-img-wrapper {
position: relative;
height: 200px;
overflow: hidden;
}
.post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.post-card:hover .post-image {
transform: scale(1.05);
}
/* DATE BADGE */
.post-date-badge {
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(255, 255, 255, 0.9);
padding: 5px 12px;
border-radius: 6px;
font-size: 13px;
color: #64748b;
font-weight: 600;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.post-body {
padding: 20px;
}
.post-title {
font-size: 18px;
font-weight: 700;
line-height: 1.4;
margin-bottom: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.post-title a {
color: #0f172a;
text-decoration: none;
transition: color 0.2s;
}
.post-title a:hover {
color: #5428EF;
}
.post-author {
display: flex;
align-items: center;
gap: 10px;
}
.author-logo {
width: 24px !important;
height: 24px;
object-fit: contain;
}
.author-name {
font-size: 14px;
font-weight: 600 !important;
color: #475569;
}
.owl-carousel .owl-dots.disabled, .owl-carousel .owl-nav.disabled {
display: unset !important;
}
.owl-nav button {
position: absolute;
top: 40%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: #fff !important;
color: #5428EF !important;
border-radius: 50% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
display: flex !important;
align-items: center;
justify-content: center;
font-size: 24px !important;
transition: all 0.3s ease !important;
opacity: 0;
visibility: hidden;
}
.owl-nav button:hover {
background: #5428EF !important;
color: #fff !important;
}
.owl-prev { left: -25px; }
.owl-next { right: -25px; }
.post-carousel:hover .owl-nav button {
opacity: 1;
visibility: visible;
left: -10px;
}
.post-carousel:hover .owl-nav button.owl-next {
left: auto;
right: -10px;
}
/* Hide dots */
.owl-dots { display: none; }
@media (max-width: 576px) {
.pg-section-title {
font-size: 23px;
}
.post-author {
display: flex !important;
align-items: center;
gap: 10px;
}
}
/*==========================
CASE STUDIES SLIDER SECTION CSS
============================*/
#cs-slider {
padding: 50px 0;
}
.case-container {
max-width: 1140px;
margin: 0 auto;
position: relative;
}
.cs-slider .header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0px;
}
.cs-slider .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: 700;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
font-size: 28px;
}
.cs-slider .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
/* arrows */
.cs-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 12;
width: 44px;
height: 44px;
border-radius: 9px;
border: 1px solid rgba(15, 23, 42, 0.06);
background: #fff;
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 8px 22px rgba(17, 24, 39, 0.06);
}
.cs-arrow.left {
left: -20px;
}
.cs-arrow.right {
right: -20px;
}
.cs-arrow:active {
transform: translateY(-50%) scale(0.98);
}
@media (max-width: 640px) {
.cs-arrow.left {
left: 8px;
}
.cs-arrow.right {
right: 8px;
}
}
.cs-viewport {
overflow: hidden;
border-radius: 12px;
}
.cs-track {
display: flex;
gap: 18px;
padding: 14px;
transition: transform 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
align-items: stretch;
}
.cs-card {
flex: 0 0 calc(33.333% - 12px);
background: #fff;
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(15, 23, 42, 0.04);
box-shadow: 0 8px 22px rgba(17, 24, 39, 0.04);
display: flex;
flex-direction: column;
height: 440px;
}
.cs-hero {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}
.cs-body {
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
overflow: hidden;
}
.cs-category {
font-size: 12px;
color: #6d21c5;
font-weight: 700;
background: rgba(99, 102, 241, 0.08);
padding: 4px 8px;
border-radius: 999px;
display: inline-block;
}
.cs-title {
font-size: 16px;
font-weight: 800;
color: #0f172a;
}
.cs-excerpt {
color: #374151;
font-size: 16px;
line-height: 1.6;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
flex: 1;
}
.cs-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-top: 1px solid rgba(15, 23, 42, 0.03);
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0.6)
);
flex-shrink: 0;
min-height: 60px;
}
.cs-author {
display: flex;
align-items: center;
gap: 10px;
}
.cs-author img {
width: 36px;
height: 36px;
border-radius: 50%;
object-fit: cover;
}
.cs-author-name {
font-weight: 700;
font-size: 13px;
}
.cs-date {
font-size: 13px;
color: #6b7280;
}
@media (max-width: 1000px) {
.cs-card {
flex: 0 0 calc(50% - 12px);
}
}
@media (max-width: 640px) {
.cs-card {
flex: 0 0 100%;
}
}
.visually-hidden {
position: absolute !important;
height: 1px;
width: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
}
/*===================================
Feature section css style
======================================*/
#features-2 .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: -9px;
}
#features-2 .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
#features-2 .sub-title {
font-size: 16px !important;
margin-bottom: 30px;
padding-left: 20px;
}
/*===================================
Service section - 6 css style
======================================*/
#features-6 .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
text-align: left;
margin-bottom: 20px;
margin-left: -10px;
}
#features-6 .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
/*=================================
Trusted client
===================================*/
.brands-section {
padding: 70px 0 50px 0;
}
.brands-section .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827; /* adjust as needed */
text-transform: uppercase;
text-align: left;
margin-bottom: 20px;
margin-left: -13px;
}
.brands-section .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.brands-header {
margin-bottom: 25px;
display: flex;
align-items: center;
}
.brands-title {
font-size: 26px;
font-weight: 700;
color: #1a1a2e;
text-transform: uppercase;
position: relative;
padding-left: 15px;
margin: 0;
line-height: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.brands-title::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.brands-box {
background: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 35px 10px;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
margin: 0 0px;
}
.brand-item {
text-align: center;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
}
.client-logo {
max-height: 60px !important;
width: auto !important;
filter: grayscale(100%);
opacity: 0.7;
transition: all 0.3s ease;
}
.brand-item:hover .client-logo {
filter: grayscale(0%);
opacity: 1;
transform: scale(1.05);
}
@media (max-width: 1199px) {
.container {
padding: 0 15px; /* Padding for smaller screens */
}
}
@media (max-width: 768px) {
.brands-box {
padding: 25px 20px;
}
.brands-title {
font-size: 20px;
}
.brands-section {
padding: 50px 0;
}
}
/*==================================
Review section custom design
=====================================*/
.reviews-section {
padding: 50px 0;
background-color: #f9fafb;
}
.reviews-container {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 0px;
}
.rev-header {
margin-bottom: 25px;
padding-left: 15px;
position:relative;
}
.rev-section-title {
font-size: 28px;
font-weight: 700;
color: #0f172a;
text-transform: uppercase;
margin: 0;
line-height: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.rev-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.brands-title::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.reviews-viewport {
margin: 0 -5px;
}
#reviews-track {
margin: 0 -4px;
}
.review-item {
padding: 15px 5px;
height: 100%;
}
.review-card {
background: #fff;
border-radius: 12px;
padding: 40px 30px;
box-shadow: 0 5px 25px rgba(0,0,0,0.03);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 370px;
border: 1px solid #f1f5f9;
}
.review-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0,0,0,0.08);
}
/* REVIEW TEXT */
.review-text {
margin-bottom: 30px;
}
.review-body {
font-size: 15px;
line-height: 1.7;
color: #334155;
margin: 0;
font-style: normal;
}
/* AUTHOR INFO */
.reviews-viewport .author-row {
display: flex;
align-items: center;
gap: 15px;
border-top: 0;
padding-top: 0;
}
.reviews-viewport .author-avatar img {
width: 50px !important;
height: 50px !important;
border-radius: 50%;
object-fit: cover;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.reviews-viewport .author-meta {
display: flex;
flex-direction: column;
}
.reviews-viewport .author-name {
font-size: 16px;
font-weight: 700;
color: #0f172a;
margin: 0 0 2px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.reviews-viewport .author-profession {
font-size: 13px;
color: #64748b;
margin: 0;
font-weight: 500;
text-transform: uppercase;
}
/* OWL CAROUSEL NAVIGATION (Arrows) */
.owl-nav button {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: #fff !important;
color: #1e293b !important;
border-radius: 50% !important;
box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
font-size: 20px !important;
display: flex !important;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
opacity: 0;
visibility: hidden;
}
.reviews-carousel:hover .owl-nav button {
opacity: 1;
visibility: visible;
}
.owl-nav .owl-prev { left: -60px; }
.owl-nav .owl-next { right: -60px; }
.reviews-carousel:hover .owl-nav .owl-prev { left: -20px; }
.reviews-carousel:hover .owl-nav .owl-next { right: -20px; }
.owl-nav button:hover {
background: #5428EF !important;
color: #fff !important;
border-color: #5428EF;
}
.owl-dots { display: none; }
@media (max-width: 768px) {
.reviews-section {
padding: 30px 15px;
}
.rev-header {
margin-bottom: 10px;
}
}
/*==============================
FAQ section css
================================*/
#faqs-3 {
padding: 50px 0;
}
#faqs-3 .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
}
#faqs-3 .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
#site-page footer ul {
padding-left: 0;
}
#site-page footer ul li a {
text-decoration: none;
color: #ffffffa3;
}
#site-page #menu-items li a {
text-decoration: none;
}
#site-page .sub-menu li a {
text-decoration: none;
}
.footer-mail-link a {
color: #ffffffba !important;
text-decoration: none;
}
.bottom-secondary-link.ico-15.text-right.text-end a {
color: #6c757d;
text-decoration: none;
}
#site-page-data-table {
padding-top: 130px;
padding-bottom: 40px;
}
#site-page-data-table .card-header.bg-primary.text-white {
background: #e6e6e629 !important;
color: #000 !important;
text-align: center;
text-transform: uppercase;
}
#site-page-data-table .card-header.bg-primary.text-white h4 {
font-weight: bold;
}
#site-page-data-table .tabler-head-design {
background: linear-gradient(135deg, #5229f2, #a91063);
}
.tabler-head-design th span {
color: #fff;
font-size: 16px;
}
.data-table-body td {
color: #fff;
font-size: 16px;
}
.data-table-body td a {
text-decoration: none;
/* padding: 7px 20px; */
color: #5229f2;
box-sizing: border-box;
display: block;
text-align: center;
/* background: linear-gradient(135deg, #5229f2, #a91063); */
}
.data-table-body td:hover a {
color: #a91063;
}
.active > .page-link,
.page-link.active {
z-index: 3;
color: var(--bs-pagination-active-color);
background: linear-gradient(135deg, #5229f2, #a91063);
border-color: linear-gradient(135deg, #5229f2, #a91063);
}
.pagination .page-link {
color: #000;
}
#site-page-data-table .table > :not(caption) > * > * {
padding-block: 8px !important;
}
.data-table-body tr td {
color: #606060;
}
#site-page-data-table {
padding: 60px 0 40px 0;
}
.responsive-table-wrapper {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
background: #fff;
border-radius: 6px;
border: 1px solid #ddd;
padding: 15px;
}
#home-page .responsive-table-wrapper {
border: unset;
padding: 0 3px;
}
table {
width: 100%;
border-collapse: collapse;
min-width: 600px;
}
.tabler-head-design {
background: #0d6efd;
color: #fff;
}
.tabler-head-design th {
padding: 10px 14px;
text-align: left;
border: 1px solid #e5e5e5;
white-space: nowrap;
}
.data-table-body td {
padding: 10px 14px;
border: 1px solid #e5e5e5;
white-space: nowrap;
}
.data-table-body tr:nth-child(even) {
background: #f8f9fa;
}
.data-table-body a {
color: #0d6efd;
text-decoration: none;
font-weight: 500;
}
.data-table-body a:hover {
text-decoration: underline;
}
.site-button {
text-align: center;
margin-top: 20px;
margin-bottom: 15px;
}
@media (max-width: 768px) {
.responsive-table-wrapper {
padding: 10px;
}
table {
font-size: 14px;
min-width: 500px;
}
.tabler-head-design th,
.data-table-body td {
padding: 8px 10px;
}
}
@media (max-width: 480px) {
table {
font-size: 13px;
min-width: 400px;
}
}
.site-page-title h4 {
position: relative;
margin-bottom: 0;
text-align: left;
text-transform: uppercase;
font-weight: bold;
color: #000 !important;
padding-left: 15px;
font-size: 1.5rem;
font-size: 28px;
}
.site-page-title h4::before {
content: "";
position: absolute;
left: 0;
top: 5px;
width: 6px;
height: 70%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 5px;
}
.custom-badge-success {
color: #28a745;
text-align: center;
}
/* Danger badge (red) */
.custom-badge-danger {
color: #dc3545; /* red */
}
/* Optional: hover effect */
.custom-badge:hover {
opacity: 0.85;
}
.data-table-body td {
text-align: left !important;
}
.smart-strategy {
padding: 60px 0;
}
/* Features Section Base */
.features-section {
padding: 50px 0;
background: #ffffff;
}
#service-page .features-section {
background: #ffffff;
}
#contact-page #service-page-breadcrumb {
margin-bottom: 0;
}
.features-row {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.feature-box {
flex: 1 1 calc(25% - 30px);
background: #fff;
border-radius: 12px;
padding: 25px 20px 20px 20px;
text-align: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.feature-box:hover {
transform: translateY(-5px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}
.fbox-inner {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
/* Icon */
.fbox-icon img {
width: 60px;
height: 60px;
object-fit: contain;
margin-bottom: 10px;
}
/* Heading */
.fbox-content h6 {
font-size: 20px;
font-weight: 700;
color: #000;
margin-bottom: 8px;
}
/* Text */
.fbox-content p {
font-size: 16px;
color: #333;
margin-bottom: 4px;
}
/* Responsive */
@media (max-width: 992px) {
.feature-box {
flex: 1 1 calc(50% - 20px);
}
}
@media (max-width: 576px) {
.feature-box {
flex: 1 1 100%;
}
.fbox-content h6 {
font-size: 1.1rem;
}
}
#footer-3 {
/* background: #ddd; */
background: #17136a;
border-top-right-radius: 20px;
border-top-left-radius: 20px;
}
#footer-3 h6 {
color: #fff !important;
}
.foo-links.clearfix li a {
color: #ffffffa3 !important;
}
.footer-copyright p {
color: #ffffffc2 !important;
}
.bottom-secondary-link.ico-15.text-right.text-end a {
color: #ffffffc2;
text-decoration: none;
}
.custom-footer-divider {
color: #fff;
}
.footer-socials span[class^="flaticon-"]::before,
span[class*=" flaticon-"]::before {
color: #ffffffa3;
}
.reviews-wrapper .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
}
.reviews-wrapper .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.post-desc {
display: none;
}
.about-us img {
border-radius: 20px;
}
.about-us-text {
padding: 0 30px;
}
#project-1 {
padding-top: 50px;
}
.cta-section.cta-section {
position: relative;
background-image: url("/frontend/images/your-banner.jpg");
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.cta-section .banner-overlay {
position: relative;
z-index: 2;
padding: 60px 0;
}
#role-page {
padding-top: 30px;
padding-bottom: 40px;
}
.inner-page-title {
margin-bottom: 10px;
}
.inner-page-title h2 {
font-size: 40px;
}
.service-feature h2 {
position: relative;
padding-left: 15px;
font-size: 1.2rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
margin-bottom: 20px;
margin-top: 20px;
}
.service-feature h2::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.service-feature ul li {
list-style: none;
}
.service-feature .flaticon-check {
padding: 10px 10px;
}
.services-section {
padding: 50px 0;
background-position: center;
background-repeat: repeat;
}
.service-header {
margin-bottom: 30px;
padding-left: 15px;
position: relative;
}
.service-section-title {
font-size: 28px;
font-weight: 700;
color: #0f172a;
text-transform: uppercase;
margin: 0;
line-height: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.service-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.service-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -6px;
}
.service-col {
width: 25%;
padding: 0 9px;
margin-bottom: 30px;
box-sizing: border-box;
}
.service-card {
background: #fff;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
height: 100%;
transition: transform 0.3s ease, box-shadow 0.3s ease;
display: flex;
flex-direction: column;
}
.service-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}
.service-img-wrapper {
height: 200px;
width: 100%;
position: relative;
overflow: hidden;
}
.service-img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.service-card:hover .service-img {
transform: scale(1.05);
}
.service-content {
padding: 10px 15px 20px 15px;
text-align: center;
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
}
.service-name {
margin: 0 0 10px;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.service-name a {
color: #1e293b;
text-decoration: none;
transition: color 0.2s;
}
.service-name a:hover {
color: #6d28d9;
}
.service-divider {
width: 100%;
border-top: 1px dotted #cbd5e1;
margin-bottom: 10px;
}
.service-desc {
font-size: 16px;
color: rgb(51, 51, 51);
line-height: 1.6;
margin: 0;
}
/* BUTTON STYLE */
.service-footer {
text-align: center;
margin-top: 10px;
}
.btn-more-services {
display: inline-block;
padding: 14px 40px;
color: #ffffff;
font-weight: 600;
border-radius: 6px;
text-decoration: none;
transition: all 0.3s ease;
background: linear-gradient(135deg, #5229f2, #a91063);
font-size: 16px;
}
.btn-more-services:hover {
background: linear-gradient(135deg, #5229f2, #a91064da);
color: #fff;
}
/* Tablet (2 columns) */
@media (max-width: 991px) {
.service-col {
width: 50%;
}
}
@media (max-width: 575px) {
.service-col {
width: 100%;
}
.service-img-wrapper {
height: 220px;
}
.service-header {
margin-bottom: 30px;
}
}
#faqs-2 .inner-page-title {
margin-bottom: 20px !important;
}
#faq-sec-title .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
margin-bottom: 20px;
margin-top: 40px;
}
#faq-sec-title .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.faq-content .accordion-thumb {
background: #dddddd57;
box-sizing: border-box;
box-shadow: 2px 2px 2px #ddd;
border-radius: 10px;
padding: 20px 15px;
}
.faq-content .accordion-panel {
padding-top: 10px;
padding-left: 10px;
}
.faq-content .accordion-item {
margin-bottom: 20px;
}
.accordion-thumb {
position: relative;
padding-right: 30px;
cursor: pointer;
}
/* Default icon: PLUS */
.accordion-thumb::after {
content: "+";
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
font-size: 24px;
font-weight: 600;
color: #333;
transition: all 0.3s ease;
}
.accordion-item.active .accordion-thumb::after {
content: "–";
font-size: 28px;
font-weight: 600;
color: #ff4f5a;
}
/* --------------------
Case Studies Cards
-------------------- */
.cs-hero-wrapper {
position: relative;
overflow: hidden;
}
.cs-hero-wrapper img {
display: block;
width: 100%;
transition: transform 0.3s ease;
}
.cs-hero-wrapper:hover img {
transform: scale(1.1);
}
.cs-hover-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
background: rgba(0, 0, 0, 0.5);
border-radius: 50%;
padding: 12px;
transition: all 0.3s ease;
display: flex;
justify-content: center;
align-items: center;
}
.cs-hero-wrapper:hover .cs-hover-icon {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
.cs-hover-icon svg {
width: 32px;
height: 32px;
fill: #fff;
transition: transform 0.3s ease;
}
.cs-hover-icon:hover svg {
transform: scale(1.2);
}
/* --------------------
Responsive
-------------------- */
@media (max-width: 1024px) {
.cs-card {
flex: 1 1 calc(50% - 16px);
}
}
@media (max-width: 768px) {
.cs-card {
flex: 1 1 100% !important;
}
#home-page .cs-card {
flex: 0 0 100% !important;
}
article.cs-card {
height: 415px !important;
}
#service-page-breadcrumb {
margin-top: 63px !important;
}
.wsmobileheader .smllogo {
margin-top: 15px !important;
}
.wsanimated-arrow {
margin-top: 15px !important;
}
.wsmobileheader {
height: 63px !important;
}
.inner-page-hero,
.page-hero-section-overlay {
margin-top: 0px !important;
margin-bottom: 40px !important;
padding-top: 24px !important;
}
#role-page {
padding-top: 50px;
padding-bottom: 0px;
padding-left: 10px;
padding-right: 10px;
}
.products-section {
padding: 30px 20px;
}
.products-section h2 {
margin-bottom: 25px;
}
.custom-section-title {
margin-bottom: 25px;
}
.features-section {
padding: 30px 0;
}
.post-author {
padding: 12px 0px 0px 0px !important;
border-top: 1px solid #dddddd7d;
}
}
@media (max-width: 480px) {
.cs-body {
padding: 8px 12px;
}
.cs-title {
font-size: 16px;
}
.cs-excerpt {
font-size: 15px;
}
.cs-footer {
padding: 8px 12px;
}
}
/*======== Case study single page============*/
.caseStudy-description {
padding-top: 40px;
}
.caseStudy-description h2 {
font-size: 36px;
margin-bottom: 22px !important;
padding-bottom: 20px;
}
.caseStudy-description .caseStudy-title {
margin-bottom: 20px;
}
.caseStudy-priview-img {
margin-bottom: 20px;
}
.caseStudy-txt h5 {
margin-bottom: 10px;
font-size: 30px;
}
.caseStudy-image.caseStudy-preview {
padding-bottom: 10px !important;
}
.caseStudy-image.caseStudy-inner-img.video-preview {
margin-top: 0;
}
.flaticon-next::before {
font-size: 1rem !important;
}
/*==========Post Author ===========*/
.post-card {
display: flex;
flex-direction: column;
height: 100%;
background: #fff;
border-radius: 10px;
overflow: hidden;
}
.post-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 15px;
}
.post-desc {
flex-grow: 1;
}
#who-we-are {
padding: 65px 0;
}
/* ===== Team Section ===== */
.team-section {
padding: 50px 0px 65px 0px;
}
#about-page .team-section {
padding: 50px 0px 65px 0px;
background: #edebf9;
}
.team-section .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
margin-bottom: 10px;
}
.team-section .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.section-subtitle {
font-size: 16px;
color: #555;
max-width: 500px;
padding-left: 15px;
margin-bottom: 20px;
}
/* ===== Team Grid ===== */
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 35px;
}
/* ===== Team Card ===== */
.team-card {
background: #fff;
border-radius: 14px;
padding: 25px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
transition: 0.3s ease;
width: 25%;
}
.team-card:hover {
transform: translateY(-8px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
}
/* Image Container */
.team-image {
width: 140px;
height: 140px;
margin: auto;
overflow: hidden;
border-radius: 50%;
border: 4px solid #eee;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Team Name */
.team-name {
margin-top: 18px;
font-size: 20px;
font-weight: 600;
color: #222;
text-align: center;
}
/* Profession / Role */
.team-role {
font-size: 15px;
color: #777;
margin-top: 5px;
text-align: center;
margin-bottom: 0;
}
.team-section .custom-arrow-btn {
display: none;
}
@media (max-width: 675px) {
.team-card {
width: 100%;
}
}
/* Global */
.mision-vision-about-section {
padding: 60px 0;
background: #ffffff;
}
.row-mission {
display: flex;
flex-wrap: wrap;
gap: 40px;
}
.col-mission {
flex: 1 1 calc(50% - 40px);
min-width: 280px;
}
.mission-ul li {
list-style: initial;
color: #333;
font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial !important;
}
.mission-ul li p{
margin-bottom: 10px;
}
.row-mission .col-mission p {
color: #333;
}
.mision-vision-about-section .title {
position: relative;
padding-left: 15px;
font-size: 1.5rem;
font-weight: bold;
color: #111827;
text-transform: uppercase;
margin-left: 5px;
}
.mision-vision-about-section .title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.text-block {
background: #ffffff;
padding: 30px 35px;
border-radius: 12px;
border: 1px solid #e6e9ef;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
transition: 0.3s ease;
}
.text-block:hover {
transform: translateY(-6px);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}
.title {
font-size: 26px;
font-weight: 700;
margin-bottom: 15px;
color: #222;
letter-spacing: -0.3px;
}
.description {
font-size: 16px;
line-height: 1.6;
color: #555;
}
/* Responsive */
@media (max-width: 768px) {
.row {
flex-direction: column;
}
.col {
flex: 1 1 100%;
}
.text-block {
padding: 25px 28px;
}
.title {
font-size: 22px;
}
}
/* Statistic Section */
.statistic-section {
padding: 20px 0 30px 0;
}
@media (max-width: 1200px) {
.statistic-section {
padding: 80px 0;
}
}
@media (max-width: 992px) {
.statistic-section {
padding: 70px 0;
}
}
.statistic-row {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
gap: 30px;
}
/* Column */
.statistic-col {
flex: 1 1 calc(33.333% - 30px);
max-width: calc(33.333% - 30px);
padding: 0 15px;
box-sizing: border-box;
}
@media (max-width: 768px) {
.statistic-col {
flex: 1 1 calc(50% - 20px);
max-width: calc(50% - 20px);
}
}
@media (max-width: 576px) {
.statistic-col {
flex: 1 1 100%;
max-width: 100%;
}
}
/* Statistic Block */
.statistic-block {
text-align: left;
margin-bottom: 30px;
}
/* Digit */
.statistic-digit h2 {
font-size: 2.75rem;
font-weight: 700;
margin-bottom: 15px;
border-bottom: 2px solid #999;
padding-bottom: 15px;
line-height: 1.2;
}
@media (max-width: 1200px) {
.statistic-digit h2 {
font-size: 2.5rem;
}
}
@media (max-width: 992px) {
.statistic-digit h2 {
font-size: 2.2rem;
}
}
@media (max-width: 576px) {
.statistic-digit h2 {
font-size: 2.25rem;
}
}
/* Text */
.statistic-text h5 {
font-size: 1.1875rem;
font-weight: 700;
margin-top: 10px;
margin-bottom: 0;
}
@media (max-width: 1200px) {
.statistic-text h5 {
font-size: 1.125rem;
}
}
@media (max-width: 992px) {
.statistic-text h5 {
font-size: 1.3rem;
}
}
@media (max-width: 576px) {
.statistic-text h5 {
font-size: 1.3125rem;
}
}
.newsletter-section {
position: relative;
}
/* Overlay */
.newsletter-overlay {
padding: 60px 0;
}
.newsletter-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 30px;
}
.newsletter-col {
flex: 1;
}
.left-col h4 {
font-size: 2.1rem;
font-weight: 700;
color: #000000;
margin: 0;
line-height: 1.3;
}
/* Right Form */
.newsletter-form {
display: flex;
justify-content: flex-end;
}
/* Input Group */
.input-group {
display: flex;
width: 100%;
max-width: 460px;
}
/* Email Input */
.input-group input {
flex: 1;
padding: 14px 15px;
border-radius: 6px 0 0 6px;
border: 1px solid #ccc;
font-size: 1rem;
outline: none;
background-color: #fff;
}
/* Button */
.input-group button {
padding: 14px 20px;
background: linear-gradient(135deg, #5229f2, #a91063);
color: #fff;
border: none;
font-size: 0.95rem;
font-weight: bold;
border-radius: 0 6px 6px 0;
cursor: pointer;
transition: 0.3s;
}
.input-group button:hover {
background: linear-gradient(135deg, #5229f2, #a91063);
}
.newsletter-section .btn {
display: block;
height: 60px;
width: 100%;
}
/* Message */
.form-notification {
color: #ffb5b5;
font-size: 0.9rem;
margin-top: 6px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.newsletter-row {
flex-wrap: wrap;
text-align: center;
}
.newsletter-form {
justify-content: center;
}
.input-group {
flex-direction: column;
}
.input-group input,
.input-group button {
border-radius: 6px;
width: 100%;
}
.input-group button {
margin-top: 10px;
}
#about-page .about-us {
padding-top: 0 !important;
margin-top: 65px !important;
padding-bottom: 0px !important;
}
.about-us-text {
padding: 15px 15px;
}
.mision-vision-about-section {
padding: 50px 0;
background: #f8f9fc;
}
#about-page .statistic-section {
padding: 0px 0;
}
#about-page #statistic-5 .statistic-digit {
margin-inline: 0% !important;
margin-bottom: 0px !important;
padding-bottom: 0px !important;
}
#about-page .statistic-block {
text-align: left;
margin-bottom: 10px;
}
#about-page .statistic-digit h2 {
border-bottom: 2px solid #99999924;
}
#who-we-are {
padding-top: 40px !important;
padding-bottom: 30px !important;
}
.team-section {
padding: 44px 0px;
}
.reviews-wrapper {
padding: 30px 0px;
}
.reviews-wrapper .title {
margin-left: 10px;
}
#about-page .newsletter-row {
display: block;
}
#home-page .hero-section {
margin-top: 64px !important;
padding-top: 35px !important;
padding-bottom: 35px !important;
}
.hero-section .quick-form .input-group-btn {
margin: 5px 0px !important;
}
#home-page .brands-section {
padding-bottom: 50px;
padding-left: 15px;
padding-right: 15px;
}
.features-section {
padding: 30px 11px !important;
}
#home-page .fbox-ico,
.fbox-ico.ico-rounded,
.fbox-ico.ico-square {
margin-bottom: 0px !important;
}
.service-custom-design {
margin-bottom: 20px !important;
}
.features-section h6,
.fbox-txt h5,
.rows-2 .fbox-11 h6,
.fbox-wrapper .row-cols-md-2 h6 {
margin-bottom: 5px !important;
}
.custom-features {
padding-left: 0;
padding-right: 0;
}
.site-button {
margin-top: 15px;
}
#post-slider .header {
padding: 0 6px;
}
.whychose-feature {
padding: 0 12px;
}
.whychose-feature-item {
margin-bottom: 10px;
padding: 25px 15px !important;
}
#cs-slider .header {
padding-left: 7px;
margin-bottom: 0px;
}
.cs-slider {
padding-top: 35px;
}
.button-cta-one {
margin-bottom: 0px !important;
}
.cta-button-two {
border: 2px solid #ddd;
}
#faq-section {
padding-top: 40px;
padding-bottom: 40px;
padding-left: 5px !important;
padding-right: 5px;
}
.service-feature .flaticon-check {
padding: 8px 8px 7px 8px;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 50px;
display: inline-block;
color: #fff;
margin-right: 5px;
line-height: 10px;
}
.service-feature .flaticon-check::before {
font-size: 15px;
}
#plan-details-page .info {
margin-top: 0;
}
#plan-details-page .img-wrap {
padding: 0px;
}
#cart-page #plan-details-page {
margin-bottom: 35px;
}
#site-page-data-table {
padding: 30px 0 40px 0;
}
#site-page-data-table .ms-auto {
margin-left: auto !important;
margin-top: -10px;
}
#site-page-data-table #example_info {
padding-top: 0;
}
#service-page-breadcrumb {
padding: 20px 0;
}
#blog-page {
padding-left: 10px;
padding-right: 10px;
}
.blog-post {
border: 1px solid #ddd;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
margin-bottom: 0 !important;
}
.blog-post-img img {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.blog-post-txt {
padding: 10px;
}
.blog-post-img {
margin-bottom: 8px !important;
}
.page-pagination.theme-pagination {
padding-bottom: 30px !important;
}
.blog-post-meta {
margin-bottom: 15px;
}
.post-content {
padding: 0 15px;
}
#single-post {
padding-bottom: 0px !important;
}
#single-post.inner-page-hero,
.page-hero-section-overlay {
margin-bottom: 20px !important;
}
#single-post p strong a{
color: #a50965 !important;
}
#single-post p a{
color: #a50965 !important;
}
#single-post a{
color: #a50965 !important;
}
.statistic-text h5 {
font-size: 18px !important;
font-weight: 600;
color: #555;
}
#who-we-are {
padding-left: 10px !important;
padding-right: 10px !important;
}
#about-page .brands-section {
padding-left: 10px;
padding-right: 10px;
}
.team-section .title {
margin-left: 0;
}
.section-subtitle {
padding-left: 0px;
margin-top: -5px !important;
}
.team-grid {
gap: 15px;
}
#about-page .team-section {
padding: 50px 0px 50px 0px;
}
#case-study-page .title {
margin-bottom: 15px !important;
}
#cs-slider {
padding-left: 10px;
padding-right: 10px;
}
#caseStudy-details {
padding-top: 0 !important;
padding-left: 10px;
padding-right: 10px;
}
#case-single-page .caseStudy-data {
padding: 0 7px;
}
.case-study-summary {
margin-top: 20px;
text-transform: uppercase;
}
.more-caseStudys h3 {
font-size: 20px !important;
margin-top: 20px;
}
#case-single-page .breadcrumb-title {
font-size: 22px;
}
.caseStudy-description {
padding-top: 30px;
}
.faq-content .accordion-thumb {
padding: 15px 10px !important;
}
#contactForm {
padding: 0 15px;
}
.map-section {
padding-top: 0px !important;
}
.dt-length {
display: inline-block;
}
.dt-search {
display: inline-block;
float: right;
margin-top: -50px;
}
}
.map-section {
padding-top: 5px;
}
#case-study-page .cs-track {
gap: 15px;
padding: 0;
}
#case-study-page .title {
margin-bottom: 15px;
}
.blog-post-img {
margin-bottom: 20px;
}
.blog-post-txt h6 {
margin-top: 10px;
}
#single-post {
padding-top: 120px !important;
padding-bottom: 40px;
}
.single-page-post-title {
font-size: 40px;
font-weight: 700;
line-height: 1.2;
}
#single-post ul{
display: block;
box-sizing: border-box;
overflow: hidden;
}
.post-tag {
color: #a51169;
text-transform: uppercase;
}
.blog-post-meta {
margin-top: 22px;
}
.cta-button-two {
border: 1.5px solid #ddd;
padding: 12px 20px;
}
#plan-details-page {
margin-top: 20px;
}
.custom-arrow-btn {
display: inline-flex;
align-items: center;
position: relative;
padding: 0.75rem 1.5rem;
font-size: 1.125rem;
font-weight: 600;
color: #fff;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 0.5rem;
text-decoration: none;
transition: background-color 0.3s;
margin-top: 30px;
border: none;
}
.custom-arrow-btn:hover {
background-color: #ffffff;
}
.custom-arrow-btn .arrow {
display: inline-block;
width: 12px;
height: 12px;
margin-left: 0.5rem;
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
transform: rotate(-45deg);
transition: transform 0.3s;
}
.custom-arrow-btn:hover .arrow {
transform: rotate(-45deg) translateX(3px);
}
#home-page #site-page-data-table {
padding: 27px 0 40px 0;
}
.dt-length label {
display: none;
}
.get-statred {
background: linear-gradient(135deg, #5229f2, #a91063) !important;
border-color: #5229f2 !important;
}
.whatsapp-float {
position: fixed;
width: 60px;
height: 60px;
bottom: 25px;
right: 25px;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: #fff;
border-radius: 50px;
text-align: center;
font-size: 32px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
transition: 0.3s;
}
.whatsapp-float:hover {
background: linear-gradient(135deg, #5129f2d3, #a91064d4) !important;
transform: scale(1.1);
}
#chat-widget {
position: fixed;
bottom: 20px;
right: 20px;
z-index: 99999;
font-family: Arial, sans-serif;
}
#chat-toggle {
width: 55px;
height: 55px;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
font-size: 26px;
transition: all 0.2s ease;
}
#chat-toggle:hover {
background: linear-gradient(135deg, #5129f2d2, #a91064d7) !important;
}
#chat-window {
width: 360px;
height: 480px;
background: #fff;
border-radius: 12px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.3s ease-in-out;
}
@media (max-width: 600px) {
#chat-window {
width: 330px !important;
}
}
/* Hidden class */
.hidden {
display: none !important;
}
.chat-body {
flex: 1;
padding: 10px;
overflow-y: auto;
font-size: 14px;
background: #f5f5f5;
}
/* Footer */
.chat-footer {
padding: 10px;
border-top: 1px solid #ddd;
background: #fff;
display: flex;
gap: 5px;
}
.chat-footer input {
flex: 1;
padding: 6px;
border-radius: 4px;
border: 1px solid #ccc;
}
.chat-footer button {
padding: 6px 12px;
border-radius: 4px;
border: none;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: white;
cursor: pointer;
}
/* Message styles */
.msg {
margin-bottom: 8px;
clear: both;
}
.msg.user {
text-align: right;
}
.msg.user span {
background: #3d11f6;
color: #fff;
padding: 6px 10px;
border-radius: 15px 0 15px 15px;
display: inline-block;
margin-top: 10px;
}
.msg.bot span {
background: #e4e6eb;
padding: 6px 10px;
border-radius: 0 15px 15px 15px;
display: inline-block;
}
/* Quick questions */
.quick-questions {
margin-bottom: 10px;
}
.quick-btn {
padding: 5px 10px;
margin: 3px;
border-radius: 20px;
border: 1px solid #ccc;
background: #f0f2f5;
cursor: pointer;
font-size: 12px;
}
.quick-btn:hover {
background: #e4e6eb;
}
.support-box {
margin-top: 8px;
padding: 8px;
background: #3f11f622;
border-radius: 6px;
font-size: 13px;
border: 1px solid #3f11f627;
}
.support-box p {
margin-bottom: 10px;
}
.support-box button {
margin-top: 5px;
padding: 6px 10px;
border-radius: 4px;
border: none;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
cursor: pointer;
font-size: 13px;
color: #fff;
}
.support-form form input,
.support-form form select,
.support-form form textarea {
width: 100%;
padding: 6px;
margin-bottom: 6px;
border-radius: 4px;
border: 1px solid #ccc;
font-size: 13px;
}
.support-form form button {
padding: 6px 10px;
border-radius: 4px;
border: none;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: #fff;
cursor: pointer;
font-size: 13px;
}
.chat-header {
padding: 12px;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: #fff;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
}
.chat-header-text {
line-height: 1.2;
}
.chat-header-toggle {
background: transparent;
border: none;
color: #fff;
cursor: pointer;
font-size: 18px;
padding: 0 4px;
}
.chat-header-toggle:hover {
opacity: 0.8;
}
html {
scroll-behavior: smooth;
}
#backToTop {
position: fixed;
right: 2.2%;
bottom: 15%;
padding: 5px 15px;
border-radius: 6px;
cursor: pointer;
font-size: 20px;
background: linear-gradient(135deg, #5229f2, #a91063) !important;
color: #fff;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
display: none;
align-items: center;
justify-content: center;
z-index: 999;
font-weight: bold;
}
#backToTop.show {
display: inline-flex;
}
#backToTop:hover {
opacity: 0.85;
}
.btn--theme {
color: #fff !important;
border: unset;
background: linear-gradient(135deg, #5129f2d2, #a91064d7) !important;
}
/* ====== LAYOUT WRAPPER ====== */
#features-13.why-choose-section {
position: relative;
padding: 60px 0;
background: #f8fafc;
}
.why-choose-wrapper {
display: flex;
flex-wrap: wrap;
gap: 50px;
align-items: flex-start;
}
.why-choose-text {
flex: 0 0 35%;
max-width: 35%;
}
.why-choose-list {
flex: 0 0 60%;
max-width: 60%;
}
/* ====== LEFT TEXT SIDE ====== */
.why-section-id {
display: inline-block;
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: #6366f1;
margin-bottom: 18px;
}
.why-section-title {
font-size: 28px;
line-height: 1.3;
font-weight: bold;
color: #0f172a;
margin-bottom: 18px;
text-transform: uppercase;
position: relative;
padding-left: 15px;
}
.why-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.why-section-desc {
font-size: 15px;
line-height: 1.7;
color: #4b5563;
}
/* ====== RIGHT SIDE: CARDS WRAPPER ====== */
.why-choose-cards {
display: flex;
flex-direction: column;
gap: 18px;
}
/* ====== SINGLE CARD ====== */
.why-card {
display: flex;
align-items: flex-start;
gap: 18px;
padding: 18px 20px;
background: #ffffff;
border-radius: 14px;
border-left: 4px solid #921e87;
box-shadow: 0 10px 22px rgba(15, 23, 42, 0.06);
transition: all 0.18s ease-out;
}
.why-card:hover {
transform: translateY(-3px);
box-shadow: 0 18px 30px rgba(15, 23, 42, 0.1);
}
/* ====== IMAGE / ICON AREA ====== */
.why-card-image {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 16px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #5129f2d2, #a91064d7) !important;
position: relative;
}
.why-card-image img {
width: 80%;
height: 80%;
object-fit: cover;
}
/* fallback: যদি image না থাকে, icon_class দেখাতে চাইলে */
.why-card-image span.icon {
font-size: 26px;
color: #4f46e5;
position: relative;
z-index: 2;
}
/* ====== CARD TEXT ====== */
.why-card-content h5 {
font-size: 20px;
font-weight: 600;
margin: 2px 0 6px;
color: #0f172a;
}
.why-card-content p {
margin: 0;
font-size: 17px;
line-height: 1.5;
color: #333;
}
/* ছোট screen – column এ নামবে */
@media (max-width: 991px) {
.why-choose-wrapper {
flex-direction: column;
}
.why-choose-text,
.why-choose-list {
flex: 0 0 100%;
max-width: 100%;
}
.service-pricing-btn {
width: 50% !important;
}
}
@media (max-width: 600px) {
#features-13.why-choose-section {
padding: 35px 0;
}
.why-section-title {
font-size: 26px;
}
.why-card {
padding: 16px 16px;
}
.why-card-image {
width: 52px;
height: 52px;
}
.service-pricing-btn {
width: 50% !important;
}
#chat-window {
width: 320px !important;
}
.newsletter-section .btn, #newsletter-1 .btn, #newsletter-5.newsletter-section .btn {
margin-top: 10px !important;
}
}
#about-page .tra-menu .wsmainfull {
background-color: #fff !important;
box-shadow: none;
padding: 10px 0 !important;
}
/* Pricing Plan full-width button */
.service-pricing-btn-wrapper {
margin-top: 24px;
margin-bottom: 24px;
}
.service-pricing-btn {
display: block;
width: 18%;
padding: 14px 26px;
border-radius: 999px;
background: linear-gradient(90deg, #5a3bff, #e01675);
color: #ffffff;
text-align: center;
font-weight: 600;
font-size: 16px;
text-decoration: none;
border: none;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
transition: all 0.2s ease-in-out;
margin: 30px auto;
}
.service-pricing-btn:hover {
transform: translateY(-1px);
box-shadow: 0 14px 24px rgba(0, 0, 0, 0.12);
opacity: 0.95;
}
.service-pricing-btn:active {
transform: translateY(0);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
#service-details-page #service-page-breadcrumb {
padding: 40px 0 0px 0;
}
/*================ Contact Section ==================*/
.contact{
padding: 60px 0;
background:
radial-gradient(1200px 600px at 10% 10%, rgba(22,128,251,.18), transparent 60%),
radial-gradient(900px 500px at 90% 20%, rgba(99,102,241,.16), transparent 55%),
linear-gradient(180deg, #070b14 0%, #0b1220 100%);
color: var(--text);
}
.contact .container{
width: min(1100px, 92%);
margin: 0 auto;
}
.contact__header{
text-align: center;
margin-bottom: 34px;
}
.contact__title{
font-size: clamp(28px, 3.2vw, 46px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 14px;
font-weight: 800;
}
.contact__subtitle{
max-width: 760px;
margin: 0 auto;
color: var(--muted);
font-size: 16.5px;
line-height: 1.7;
}
.contact__card {
background: #fff;
border: 1px solid var(--line);
border-radius: 18px;
padding: 26px;
box-shadow: var(--shadow);
/* backdrop-filter: blur(10px); */
}
.contact__form{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.field{
display: flex;
flex-direction: column;
gap: 8px;
}
.field--full{
grid-column: 1 / -1;
}
.field__label {
font-size: 16px;
font-weight: 600;
color: rgb(0, 0, 0);
padding-left: 4px;
}
.field__control {
height: 52px;
border-radius: 12px;
border: 1px solid rgb(237, 237, 237);
background: rgb(255, 255, 255);
color: var(--text);
padding: 0 14px;
outline: none;
transition: border .2s ease, box-shadow .2s ease, background .2s ease;
}
.field__control::placeholder{
color: rgba(169,178,195,.75);
}
.field__control:focus {
border-color: rgba(22, 128, 251, 0);
box-shadow: 0 0 0 4px rgba(22,128,251,.18);
background: rgba(255, 255, 255, 0.7);
}
.field__control:disabled{
opacity: .65;
cursor: not-allowed;
}
.field__textarea{
height: auto;
min-height: 150px;
padding: 12px 14px;
resize: vertical;
}
.contact__actions{
grid-column: 1 / -1;
display: flex;
justify-content: flex-start;
margin-top: 4px;
}
.contact .btn {
appearance: none;
border: 0;
cursor: pointer;
border-radius: 12px;
padding: 13px 18px;
font-weight: 700;
color: #fff;
background: linear-gradient(135deg, #5129f2d2, #a91064d7) !important;
box-shadow: ;
transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn:hover{
transform: translateY(-1px);
filter: brightness(1.04);
}
.btn:active{
transform: translateY(0);
box-shadow: 0 12px 26px rgba(22,128,251,.24);
}
.contact__messages{
grid-column: 1 / -1;
margin-top: 4px;
}
.loading{
display: inline-block;
font-size: 14px;
font-weight: 600;
color: #a43faa;
padding-left: 6px;
}
.alert{
margin-top: 10px;
border-radius: 12px;
padding: 12px 12px;
font-size: 14.5px;
line-height: 1.45;
border: 1px solid transparent;
}
.alert--success {
color: rgba(0, 147, 24, 0.95);
}
.alert--error{
color: rgba(233, 0, 0, 0.95);
}
.contact__notice {
grid-column: 1 / -1;
margin: 18px 0 0;
color: rgb(74, 74, 74);
font-size: 13.5px;
line-height: 1.6;
}
.contact__link{
color: #A43FAA;
text-decoration: underline;
text-underline-offset: 3px;
font-weight: 700;
}
/* Responsive */
@media (max-width: 860px){
.contact__form{ grid-template-columns: 1fr; }
.contact__actions{ justify-content: stretch; }
.contact__card{ padding: 18px; }
}
.field__control::placeholder {
color: #969696;
font-size: 16px; /* light muted color */ /* Firefox fix */
}
/* Firefox */
.field__control::-moz-placeholder {
color: #969696;
font-size: 16px;
}
/* IE / Edge (old) */
.field__control:-ms-input-placeholder {
color: #9aa4b2;
}
.field__control option.select-vaule-title {
color: #9aa4b2;
}
/* Dropdown options color */
.field__control option {
color: #111827; /* option list text (dropdown) */
background: #ffffff; /* dropdown background */
}
/* When select is focused */
.field__control:focus {
color: #3f3f3f;
}
/* Disabled option style (recommended) */
.field__control option[value=""] {
color: #9aa4b2;
}
.seo-section{
background: var(--bg);
padding: clamp(28px, 4vw, 64px) 0;
}
.seo-container{
width: min(1140px, 92%);
margin: 0 auto;
}
/* Layout */
.seo-grid{
display: grid;
grid-template-columns: 1.2fr .8fr;
gap: clamp(18px, 3vw, 44px);
align-items: start;
}
/* Featured post */
.blog-page-featured {
border-radius: var(--radius);
overflow: hidden;
border: dashed 1px #ddd;
padding: 10px;
box-sizing: border-box;
border-radius: 10px;
}
.featured-media{
display:block;
border-radius: var(--radius);
overflow:hidden;
background:#f3f4f6;
}
.featured-media img {
width: 100%;
height: clamp(220px, 26vw, 360px);
object-fit: cover;
display: block;
transform: scale(1);
transition: transform .35s ease;
border-radius: 10px;
}
.blog-page-featured:hover .featured-media img{
transform: scale(1.03);
}
.featured-content{
padding-top: clamp(16px, 2vw, 22px);
}
.featured-title {
margin: 0 0 12px;
font-size: clamp(22px, 3.3vw, 22px);
line-height: 1.08;
letter-spacing: -0.02em;
font-weight: 800;
}
.featured-title a{
color: var(--text);
text-decoration: none;
}
.featured-title a:hover{
text-decoration: underline;
text-decoration-thickness: 3px;
text-underline-offset: 6px;
}
.featured-desc{
margin: 0 0 18px;
color: var(--muted);
font-size: 16px;
line-height: 1.7;
max-width: 62ch;
}
.featured-author{
display:flex;
align-items:center;
gap: 10px;
margin-top: 6px;
}
.featured-author .author-avatar{
width: 34px;
height: 34px;
border-radius: 999px;
object-fit: cover;
border: 2px solid #fff;
box-shadow: 0 8px 20px rgba(12,15,25,.12);
}
.by{
color: var(--muted);
font-size: 14px;
}
.author-name:hover{
opacity:.85;
}
/* Sidebar list */
.sidebar{
display:flex;
flex-direction: column;
gap: 18px;
}
.side-item {
display: grid;
grid-template-columns: 140px 1fr;
gap: 15px;
align-items: center;
text-decoration: none;
color: var(--text);
padding: 10px;
border-radius: 14px;
transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
border: dashed 1px #ddd;
}
.side-item:hover {
background: #fafafa;
box-shadow: 0 0px 5px rgba(12,15,25,.08);
transform: translateY(-2px);
}
.thumb{
border-radius: 14px;
overflow:hidden;
background:#f3f4f6;
aspect-ratio: 16 / 10;
}
.thumb img{
width:100%;
height:100%;
object-fit: cover;
display:block;
}
.side-title {
margin: 0;
font-size: 18px;
line-height: 1.25;
font-weight: 600;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Responsive */
@media (max-width: 980px){
.seo-grid{
grid-template-columns: 1fr;
}
.sidebar{
padding-top: 8px;
}
}
@media (max-width: 520px){
.side-item{
grid-template-columns: 120px 1fr;
gap: 14px;
padding: 8px;
}
.side-title{
font-size: 16px;
}
.featured-desc{
font-size: 15px;
}
}
/*========= Editor Posts ======= */
.editors-picks {
background: var(--bg);
padding: 20px 0 60px 0;
}
.ep-container{
width: min(1140px, 92%);
margin: 0 auto;
}
.ep-header{
margin-bottom: clamp(20px, 3vw, 44px);
}
.ep-title{
font-size: 26px;
font-weight: 700;
margin-bottom: 5px;
color: #222;
letter-spacing: -0.3px;
text-transform: uppercase;
}
.ep-subtitle{
margin: 0;
max-width: 62ch;
color: var(--muted);
font-size: clamp(16px, 1.6vw, 22px);
line-height: 1.6;
}
/* Grid */
.ep-grid{
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: clamp(18px, 2.4vw, 34px) clamp(18px, 5vw, 70px);
}
/* Item */
.ep-item {
display: grid;
grid-template-columns: 150px 1fr;
gap: 22px;
align-items: center;
text-decoration: none;
color: var(--text);
padding: 10px;
border-radius: var(--radius);
transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
border: dashed 1px #ddd;
border-radius: 10px;
}
.ep-item:hover{
background: #fafafa;
box-shadow: var(--shadow);
transform: translateY(-2px);
}
.ep-thumb{
width: 100%;
border-radius: 16px;
overflow: hidden;
background: #f3f4f6;
aspect-ratio: 16 / 9;
}
.ep-thumb img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform: scale(1);
transition: transform .28s ease;
}
.ep-item:hover .ep-thumb img{
transform: scale(1.04);
}
.ep-item-title {
margin: 0;
font-weight: 500;
font-size: 20px;
line-height: 1.4;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Responsive */
@media (max-width: 992px){
.ep-item{ grid-template-columns: 200px 1fr; }
}
@media (max-width: 820px){
.ep-grid{ grid-template-columns: 1fr; }
}
@media (max-width: 520px){
.ep-item{
grid-template-columns: 1fr;
gap: 12px;
padding: 10px;
}
.ep-thumb{
aspect-ratio: 16 / 10;
}
}
#legal-page .tra-menu .wsmainfull {
background-color: white !important;
}
#legal-page .wsmainfull {
padding: 5px !important;
}
/* Medium আইকনের জন্য */
.flaticon-medium::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z'/%3E%3C/svg%3E") no-repeat center;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13.54 12a6.8 6.8 0 01-6.77 6.82A6.8 6.8 0 010 12a6.8 6.8 0 016.77-6.82A6.8 6.8 0 0113.54 12zM20.96 12c0 3.54-1.51 6.42-3.38 6.42-1.87 0-3.39-2.88-3.39-6.42s1.52-6.42 3.39-6.42 3.38 2.88 3.38 6.42M24 12c0 3.17-.53 5.75-1.19 5.75-.66 0-1.19-2.58-1.19-5.75s.53-5.75 1.19-5.75C23.47 6.25 24 8.83 24 12z'/%3E%3C/svg%3E") no-repeat center;
}
.goal-progress-text {
color: #333;
font-size: 17px;
}
.goal-progress-title {
font-size: 24px;
margin-bottom: 10px;
}
.why-choose-text p {
color: #333;
font-size: 17px;
}
.sub-menu li a {
color: #333 !important;
font-size: 17px !important;
font-weight: normal !important;
padding: 8px 10px !important;
border-bottom: dashed 1px #ccc;
}
.sub-menu li:last-child a {
border-bottom: none !important;
}
.wsmenu > .wsmenu-list > li > ul.custom-submenu {
top: 62px;
width: auto;
min-width: 200px;
padding: 12px 10px;
--tw-shadow: 0 2px 3px var(--tw-shadow-color, rgba(96,96,96,0.1));
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
right: 0;
}
.desktoplogo {
display: flex;
align-items: center;
justify-content: center;
height: 59px;
}
.custom-logout-button{
width: 100%;
display: block;
}
/* =========================
FOOTER BASE
========================= */
.footer {
background: #0b0e14;
padding: 60px 0 0px;
color: #ffffff;
}
.footer a {
color: #ffffffa3;
transition: 0.3s;
}
.footer a:hover {
color: #ffffff !important;
}
/* =========================
GRID LAYOUT
========================= */
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 40px;
}
/* =========================
TITLES
========================= */
.footer-title {
font-size: 22px;
font-weight: 700;
margin-bottom: 15px;
color: #ffffff;
}
/* =========================
TEXT & LINKS
========================= */
.footer-text {
font-size: 15px;
line-height: 1.7;
color: #ffffffa3;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 10px;
}
.footer-links a {
font-size: 15px;
}
/* =========================
EMAIL
========================= */
.footer-email {
margin-bottom: 20px;
}
/* =========================
SOCIAL ICONS
========================= */
.footer-socials {
list-style: none;
padding: 0;
display: flex;
gap: 16px;
}
.footer-socials a {
font-size: 18px;
}
.heart {
color: #ff4d6d;
}
/* =========================
DIVIDER
========================= */
.footer-divider {
margin: 30px 0 10px;
border: none;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
/* =========================
FOOTER STYLES
========================= */
.footer {
background: var(--primary-navy);
color: #ffffffa3;
padding: 60px 0 0px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 30px;
margin-bottom: 40px;
}
.footer-col {
padding: 0 10px;
}
.footer-title {
color: var(--white);
font-size: 16px;
font-weight: 700;
margin-bottom: 20px;
font-family: 'Work Sans', sans-serif;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.footer-text {
font-size: 16px;
line-height: 1.6;
color: #ffffffcf;
}
.footer-links {
list-style: none;
padding: 0;
margin: 0;
}
.footer-links li {
margin-bottom: 12px;
}
.footer-links li a {
color: #ffffffcf;
font-size: 16px;
transition: all 0.3s ease;
display: inline-block;
padding-left: 0;
text-decoration: none;
font-weight: 400;
}
.footer-links li a:hover {
color: var(--secondary-orange);
padding-left: 5px;
}
.footer-email {
margin-bottom: 20px;
}
.footer-email a {
color: var(--secondary-orange);
font-size: 16px;
font-weight: 600;
transition: var(--transition);
color: #ffffffcf;
text-decoration: none;
}
.footer-email a:hover {
color: var(--white);
text-decoration: underline;
}
.footer-socials {
display: flex;
gap: 12px;
list-style: none;
padding: 0;
margin: 0;
flex-wrap: wrap;
}
.footer-socials li a {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
color: var(--white);
font-size: 16px;
transition: var(--transition);
}
.footer-socials li a:hover {
background: var(--secondary-orange);
transform: translateY(-3px);
}
.footer-divider {
border-color: rgba(255, 255, 255, 0.1);
margin: 40px 0 30px;
}
/* =========================
FOOTER BOTTOM GRID
========================= */
.footer-bottom-grid {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 20px;
border-top: 1px solid #dddddd4d;
padding-top: 10px;
}
.footer-bottom-left {
text-align: left;
}
.footer-bottom-center {
text-align: center;
}
.footer-bottom-center a {
color: var(--secondary-orange);
font-weight: 600;
transition: var(--transition);
}
.footer-bottom-center a:hover {
color: var(--white);
text-decoration: underline;
}
.footer-bottom-right {
text-align: right;
}
.secure-text {
font-size: 14px;
margin-bottom: 8px;
color: #ffffffa3;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.secure-icon {
display: flex;
align-items: center;
gap: 6px;
}
.payment-img {
max-width: 204px;
height: auto;
float: right;
}
.secure-icon img {
width: 20px !important;
height: 20px;
}
.footer-bottom-left p,
.footer-bottom-center p {
color: #ffffffa3 !important;
font-size: 14px;
margin: 0;
}
/* =========================
RESPONSIVE STYLES
========================= */
@media (max-width: 991px) {
.footer-grid {
grid-template-columns: repeat(2, 1fr);
text-align: center;
gap: 30px 20px;
}
.footer {
padding: 50px 0 20px;
}
.footer-bottom-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 15px;
}
.footer-bottom-left,
.footer-bottom-right {
text-align: center;
}
.payment-img {
margin: 0 auto;
}
.footer-socials {
justify-content: center;
}
}
@media (max-width: 767px) {
.footer-bottom-grid {
grid-template-columns: 1fr;
text-align: center;
gap: 15px;
}
.footer-bottom-left,
.footer-bottom-center,
.footer-bottom-right {
text-align: center;
}
.secure-text {
justify-content: center;
}
.payment-img {
margin: 0 auto;
float: unset;
}
}
@media (max-width: 575px) {
.footer-grid {
grid-template-columns: 1fr;
gap: 25px;
}
.footer-col {
padding: 0;
}
.footer {
padding: 40px 0 20px;
}
.footer-title {
font-size: 15px;
margin-bottom: 15px;
}
.footer-text,
.footer-links li a {
font-size: 13px;
}
.footer-links li {
margin-bottom: 10px;
border-bottom: dashed 1px #dddddd29;
padding-bottom: 10px;
}
.footer-info, .footer-links, .footer-stores-badge {
margin-bottom: 15px !important;
}
.nl-simple.sign-in-signup-btn a {
display: inline-block !important;
float: left;
}
.nl-simple.sign-in-signup-btn {
margin: 10px !important;
}
.btn.r-04.signin-btn {
margin-right: 10px !important;
}
}
#service-details-page h1 {
font-size: 36px;
line-height: 1.4;
}
#service-details-page h2 {
font-size: 30px;
}
#service-details-page h3 {
font-size: 20px;
}
#service-details-page h4 {
font-size: 18px;
}
#service-details-page h5 {
font-size: 12px;
}
blockquote {
border-left: 4px solid #005ED7 !important;
padding: 10px;
font-size: 16px;
font-style: italic;
background: #dddddd4d;
margin-bottom: 15px;
}
#service-details-page .features {
padding: 10px;
}
#service-details-page .feat-text {
font-size: 14px;
text-align: left;
padding: 5px 0;
}
.features {
padding: 10px;
}
.feat-text {
font-size: 14px;
text-align: left;
padding: 5px 0;
}
.features li {
border-bottom: 1px dashed #ddd;
}
.fas.fa-arrow-right.feature-icon {
line-height: unset !important;
}
.product-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.product-header h3 {
margin: 0;
flex-grow: 1;
}
.product-image {
position: relative;
overflow: hidden;
height: 200px;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.category-label {
position: absolute;
top: 10px;
left: 10px;
background-color: #3209F0;
color: white;
padding: 5px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 600;
}
.buy-now-btn-overlay {
position: absolute;
top: 10px;
right: 10px;
background: linear-gradient(135deg, #5229f2, #a91063);
color: white;
padding: 8px 15px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
z-index: 2;
}
.buy-now-btn-overlay:hover {
background-color: #218838 !important;
color: #fff !important;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.product-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.3) 100%);
opacity: 0;
transition: opacity 0.3s;
}
.product-image:hover::after {
opacity: 1;
}
.product-header {
margin-bottom: 15px;
}
.title-price-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 15px;
background: #2D00FF14;
padding: 10px 0;
border-radius: 10px;
}
.title-price-container h3 {
margin: 0;
flex: 1;
font-size: 18px;
line-height: 1.4;
color: #333;
font-weight: 600;
text-align: left;
}
.price-tag {
margin: 0;
text-align: right;
white-space: nowrap;
}
.original-price {
color: #dc3545;
text-decoration: line-through;
font-size: 14px;
margin-right: 8px;
}
.discounted-price {
color: #28a745;
font-weight: 700;
font-size: 20px;
}
.regular-price {
color: #000;
font-size: 20px;
font-weight: 700 !important;
}
.features {
list-style: none;
padding: 0;
margin: 15px 0;
}
.features li {
display: flex;
align-items: flex-start;
margin-bottom: 10px;
padding: 5px 0;
}
.feature-icon {
color: #3209F0;
margin-right: 0px;
margin-top: 3px;
font-size: 14px;
min-width: 16px;
}
.feat-text {
flex: 1;
font-size: 14px;
line-height: 1.5;
color: #555;
}
/*=====================================
Related service section CSS
=========================================*/
.other-services{ padding: 60px 0; background:#fff; }
.os-container{
width:100%;
max-width:1200px;
margin:0 auto;
padding:0 16px;
}
.os-title{
text-align:center;
font-size:32px;
margin:0 0 28px;
}
.os-grid{ display:flex; flex-wrap:wrap; margin:-14px; }
.os-col{ width:100%; padding:14px; box-sizing:border-box; }
@media (min-width:768px){ .os-col{ width:50%; } }
@media (min-width:1024px){ .os-col{ width:25%; } }
/* Card */
.os-card{
display:block;
height:100%;
background:#fff;
border-radius:22px;
overflow:hidden;
text-decoration:none;
color:inherit;
border:1px solid #eef0f4;
box-shadow:0 10px 25px rgba(15,23,42,.10);
transition:transform .2s ease, box-shadow .2s ease;
}
.os-card:hover{
transform:translateY(-4px);
box-shadow:0 16px 35px rgba(15,23,42,.14);
}
.os-media{
height:170px;
background:#f3f4f6;
}
.os-img{
width:100%;
height:100%;
object-fit:cover;
display:block;
}
.os-body {
padding: 14px 18px 20px;
text-align: center;
}
.os-card-title{
margin:0;
font-size:16px;
letter-spacing:.5px;
font-weight:700;
text-transform:uppercase;
}
.os-divider {
width: 100%;
margin: 12px auto 8px;
border-top: 1px dotted #d7dbe3;
}
.os-desc{
margin:0;
font-size:14px;
line-height:1.65;
color:#5b6472;
}
/* CTA Section */
/* Dark overlay like screenshot */
.cta-overlay{
position: relative;
background: rgba(0, 0, 0, 0.66);
}
.cta-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 30px 16px;
}
.cta-content{
text-align: center;
max-width: 920px;
margin: 0 auto;
padding: 20px 0;
}
/* Big heading */
.cta-title{
margin: 0 0 28px;
color: #fff;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.25;
font-size: clamp(30px, 4.2vw, 56px);
font-family: "Plus Jakarta Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
text-shadow: 0 10px 25px rgba(0,0,0,.35);
}
/* Buttons */
.cta-buttons{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 14px;
margin-bottom: 18px;
}
.cta-btn{
display: inline-flex;
align-items: center;
justify-content: center;
height: 46px;
padding: 0 22px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
user-select: none;
white-space: nowrap;
}
/* Primary purple button (like screenshot) */
.cta-btn-primary{
color: #fff;
background: linear-gradient(135deg, #5129f2d2, #a91064d7);
box-shadow: 0 10px 20px rgba(124,58,237,.25);
border: 1px solid rgba(255,255,255,.10);
}
.cta-btn-primary:hover{
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(124,58,237,.32);
}
/* Secondary outlined button */
.cta-btn-outline{
color: #fff;
background: transparent;
border: 2px solid rgba(255,255,255,.55);
}
.cta-btn-outline:hover{
color: #fff !important;
background: linear-gradient(135deg, #5129f2d2, #a91064d7);
}
.cta-btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 14px 26px rgba(124,58,237,.32);
color: #fff !important;
}
/* Description text */
.cta-desc {
color: rgba(255,255,255,.92);
font-size: 20px;
line-height: 1.6;
max-width: 820px;
margin: 25px auto;
text-shadow: 0 8px 18px rgba(0,0,0,.30);
}
.cta-desc p{ margin: 0; } /* if description has */
/* Responsive tweaks */
@media (max-width: 576px){
.cta-section{ padding: 0px 0; }
.cta-title{ line-height: 1.30; margin-bottom: 20px; }
.cta-buttons{
display: flex;
width: 100%;
gap: 12px;
flex-direction: column; /* mobile: stacked buttons */
}
.cta-btn{ width: 100%; max-width: 260px; margin: 0 auto; }
.cta-desc{ font-size: 15px; }
}
/* HERO wrapper */
.hero-7{
position: relative;
z-index: 3;
background-repeat: repeat; /* like screenshot pattern */
background-position: top left;
padding: 95px 0 70px;
}
/* (optional) subtle overlay; keep transparent if you want exact */
.hero-7-overlay{
position: relative;
}
/* row */
.hero-7-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
}
/* left column */
.hero-7-content{
flex: 0 0 58%;
max-width: 58%;
}
.hero-7-title{
margin: 0 0 18px;
font-weight: 800;
letter-spacing: -0.5px;
line-height: 1.25;
font-size: clamp(28px, 3.2vw, 44px);
color: #1f2937;
}
/* description */
.hero-7-desc{
font-size: 18px;
line-height: 1.85;
color: #3b4654;
max-width: 720px;
}
.hero-7-desc p{ margin: 0; } /* if html contains
*/
/* buttons */
.hero-7-buttons{
margin-top: 34px;
display: flex;
gap: 16px;
flex-wrap: wrap;
}
/* button base */
.hero-btn{
display: inline-flex;
align-items: center;
justify-content: center;
height: 54px;
padding: 0 28px;
border-radius: 8px;
font-weight: 700;
text-decoration: none;
transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
user-select: none;
white-space: nowrap;
}
/* Get Plan (outline like screenshot) */
.hero-btn-outline{
background: transparent;
color: #6d28d9;
border: 2px solid #6d28d9;
}
.hero-btn-outline:hover{
transform: translateY(-1px);
box-shadow: 0 10px 22px rgba(109,40,217,.18);
}
/* Contact Us (purple filled like screenshot) */
.hero-btn-primary{
color: #fff;
border: 1px solid rgba(255,255,255,.1);
background: linear-gradient(135deg, #7c3aed, #5b21b6);
box-shadow: 0 12px 24px rgba(124,58,237,.25);
}
.hero-btn-primary:hover{
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(124,58,237,.33);
}
/* right column image */
.hero-7-image{
flex: 0 0 42%;
max-width: 42%;
display: flex;
justify-content: center;
}
.hero-7-img img{
width: 100%;
max-width: 520px;
height: auto;
display: block;
}
/* Responsive */
@media (max-width: 992px){
.hero-7{ padding: 90px 0 60px; }
.hero-7-row{
flex-direction: column;
text-align: left;
}
.hero-7-content,
.hero-7-image{
flex: 0 0 100%;
max-width: 100%;
}
.hero-7-image{ margin-top: 20px; }
}
@media (max-width: 576px){
.hero-7{ padding: 80px 0 55px; }
.hero-7-desc{ font-size: 16px; }
.hero-7-buttons{
gap: 12px;
}
.hero-btn{
width: 100%;
max-width: 280px;
}
}
/* SECTION BACKGROUND (pattern repeat like screenshot) */
.who-we-are{
background-repeat: repeat;
background-position: top left;
padding: 90px 0;
}
/* CONTAINER */
.wwa-container{
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 18px;
}
/* 2 COLUMN LAYOUT */
.wwa-row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 46px;
}
.wwa-col{
flex: 0 0 50%;
max-width: 50%;
}
/* LEFT TEXT */
.wwa-kicker {
display: block;
font-size: 13px;
font-weight: 600;
letter-spacing: .6px;
text-transform: uppercase;
color: #333;
margin-bottom: 20px;
}
.wwa-title {
margin: 0 0 18px;
letter-spacing: -0.5px;
line-height: 1;
color: #1f2937;
font-size: clamp(34px, 3vw, 40px);
}
.wwa-desc {
font-size: 16px;
line-height: 1.8;
color: #2f3947;
max-width: 620px;
}
.wwa-desc p{ margin: 0; } /* in case description contains
*/
/* RIGHT MEDIA */
.wwa-media {
position: relative;
width: 100%;
max-width: 500px;
}
.wwa-img{
width: 100%;
height: auto;
display: block;
border-radius: 22px;
box-shadow: 0 14px 35px rgba(15,23,42,.14);
}
/* VIDEO BUTTON centered */
/* .wwa-video-link{
position: absolute;
inset: 0;
z-index: 2;
display: grid;
place-items: center;
text-decoration: none;
} */
/* .wwa-play-btn{
width: 100px;
height: 100px;
border-radius: 999px;
display: grid;
place-items: center;
background: #6d28d9;
color: #fff;
box-shadow: 0 18px 35px rgba(109,40,217,.35);
transition: transform .2s ease;
position: relative;
} */
.wwa-play-btn{
display: none;
}
/* ring hover effect (like Tailwind before/after vibe) */
/* .wwa-play-btn::before{
content: "";
position: absolute;
inset: -10px;
border-radius: inherit;
background: rgba(255,255,255,.22);
opacity: 0;
transform: scale(.85);
transition: all .35s ease;
}
.wwa-video-link:hover .wwa-play-btn{
transform: scale(.96);
} */
/* .wwa-video-link:hover .wwa-play-btn::before{
opacity: 1;
transform: scale(1);
inset: -22px;
} */
/* .wwa-play-btn .flaticon-play-button{
font-size: 26px;
margin-left: 4px;
} */
/* RESPONSIVE */
@media (max-width: 992px){
.who-we-are{ padding: 80px 0; }
.wwa-row{
flex-direction: column;
gap: 26px;
}
.wwa-col{
flex: 0 0 100%;
max-width: 100%;
}
.wwa-media{
margin: 0 auto;
max-width: 560px;
}
.wwa-desc{ max-width: 100%; }
}
@media (max-width: 576px){
.wwa-kicker{ margin-bottom: 18px; }
.wwa-desc{ font-size: 16px; line-height: 1.85; }
.wwa-play-btn{ width: 86px; height: 86px; }
}
/*============================================
Samrt Strategy Section CSS
==============================================*/
.smart-strategy-section {
padding: 60px 0 40px;
background-color: #fff;
overflow: hidden;
}
.strategy-row {
display: flex;
flex-wrap: wrap;
align-items: unset;
margin: 0 -10px;
}
.strategy-col-img {
width: 41.66%;
padding: 0 15px;
box-sizing: border-box;
}
.strategy-col-text {
width: 58.33%;
padding: 0 15px;
box-sizing: border-box;
}
/* IMAGE STYLING */
.strategy-img-wrapper {
text-align: center;
margin-right: 30px;
}
.strategy-img {
max-width: 100%;
height: auto;
display: block;
border-radius: 10px;
}
.strategy-content {
/* Padding/Margin adjustments if needed */
}
.strategy-subtitle {
display: block;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #64748b;
margin-bottom: 25px;
font-family: 'Plus Jakarta Sans', sans-serif;
display: none;
}
.strategy-title {
font-size: 40px;
font-weight: 700;
color: #0f172a;
line-height: 1.2;
margin: 30px 0 25px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.strategy-desc {
font-size: 18px;
color: #475569;
line-height: 1.7;
margin-bottom: 30px;
}
.strategy-desc p {
margin-bottom: 15px;
}
.strategy-desc p:last-child {
margin-bottom: 0;
}
.strategy-feature-title {
font-size: 24px;
font-weight: 700;
color: #1e293b;
margin-bottom: 20px;
font-family: 'Plus Jakarta Sans', sans-serif;
}
/* LIST STYLING */
.strategy-list {
list-style: none;
padding: 0;
margin: 0;
}
.strategy-list-item {
position: relative;
padding-left: 25px;
margin-bottom: 12px;
font-size: 16px;
color: #475569;
line-height: 1.5;
}
.strategy-list-item::before {
content: "•";
position: absolute;
left: 0;
color: #6d28d9; /* Theme color */
font-weight: bold;
font-size: 18px;
line-height: 1.5;
}
@media (max-width: 1199px) {
.strategy-col-img,
.strategy-col-text {
width: 50%;
}
.strategy-img-wrapper {
margin-right: 0;
}
}
@media (max-width: 991px) {
.strategy-col-img,
.strategy-col-text {
width: 100%;
margin-bottom: 0px;
}
.strategy-col-text {
margin-bottom: 0;
}
.strategy-title {
font-size: 36px;
}
.strategy-section {
padding: 60px 0;
}
.strategy-img-wrapper {
margin-bottom: 0px;
}
.strategy-feature-title {
margin-bottom: 0px;
}
.container.custom-features {
padding: 0 15px;
}
}
/* Small Mobile */
@media (max-width: 576px) {
.strategy-title {
font-size: 30px;
}
.strategy-feature-title {
font-size: 20px;
}
.strategy-desc {
margin-bottom: 0px;
}
.smart-strategy-section {
padding: 40px 0 0;
}
.strategy-title {
font-size: 30px !important;
margin: 30px 0 15px 0;
}
}
/*===========================================
Goal progress section css
=============================================*/
.goal-progress-section {
padding: 50px 0 30px;
background-position: top left;
background-repeat: repeat;
}
.container.custom-features {
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 0px;
}
.gp-header {
margin-bottom: 30px;
padding-left: 15px;
position: relative;
}
.gp-section-title {
font-size: 28px;
font-weight: 700;
color: #0f172a;
text-transform: uppercase;
margin: 0;
line-height: 1;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.gp-section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 6px;
height: 75%;
background: linear-gradient(135deg, #5229f2, #a91063);
border-radius: 2px;
}
.gp-grid {
display: flex;
flex-wrap: wrap;
margin: 0 -8px;
justify-content: center;
}
.gp-col {
width: 33.33%;
padding: 0 9px;
margin-bottom: 30px;
box-sizing: border-box;
}
.gp-card {
background: #ffffff;
border-radius: 20px;
padding: 20px 15px;
text-align: center;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
}
.gp-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}
.gp-img-wrapper {
margin-bottom: 15px;
height: 140px;
display: flex;
align-items: center;
justify-content: center;
}
.gp-img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
display: block;
object-fit: contain;
}
/* TEXT CONTENT */
.gp-content {
flex-grow: 1;
}
.gp-title {
font-size: 22px;
font-weight: 700;
color: #1e293b;
margin: 0 0 15px 0;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.gp-desc {
font-size: 16px;
color: #475569;
line-height: 1.6;
}
.gp-desc p {
margin: 0;
}
@media (max-width: 991px) {
.gp-col {
width: 50%;
}
}
@media (max-width: 767px) {
.gp-col {
width: 100%;
max-width: 450px;
}
.gp-header {
margin-bottom: 20px;
}
.goal-progress-section {
padding: 40px 15px 20px;
}
.gp-section-title {
font-size: 23px;
}
}
.cart-footer{
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
margin-top: 20px;
}
.more-package{
flex: 1;
font-size: 16px;
color: #333;
}
.more-package a{
font-weight: 600;
text-decoration: underline;
color: #9A147B;
}
.totals{
width: 320px;
}
@media (max-width: 768px){
.cart-footer{
flex-direction: column;
align-items: stretch;
}
.totals{
width: 100%;
}
}
/*===============================
About page about section css
==================================*/
#about-page-hero,
#about-page-hero *{
box-sizing: border-box;
}
#about-page-hero .site-container{
width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 0px;
}
#about-page-hero.about-hero {
position: relative;
z-index: 3;
padding: 130px 0 50px;
}
#about-page-hero .about-hero__row{
display: flex;
flex-wrap: wrap;
align-items: center;
margin: 0 -15px;
row-gap: 30px;
}
/* Columns */
#about-page-hero .about-hero__col{
flex: 0 0 50%;
max-width: 50%;
padding: 0 15px;
min-width: 0;
}
/* Image */
#about-page-hero .about-hero__img{
text-align: center;
}
#about-page-hero .about-hero__img img{
max-width: 100%;
height: auto;
display: inline-block;
}
/* Text */
#about-page-hero .about-hero__title{
line-height: 1.15;
margin: 0 0 18px;
font-size: clamp(28px, 3vw, 54px);
color: #111;
}
#about-page-hero .about-hero__desc{
font-size: 16px;
line-height: 1.8;
color: #4a4a4a;
overflow-wrap: anywhere;
}
#about-page-hero .about-hero__desc p{ margin: 0 0 16px; }
@media (max-width: 991px){
#about-page-hero.about-hero{ padding: 60px 0 0px; }
#about-page-hero .about-hero__col{
flex: 0 0 100%;
max-width: 100%;
}
#about-page-hero .about-hero__row {
margin: 0 0px;
}
}
/* Section */
.svc-grid-section {
padding: 60px 0;
background: url('../images/hero-bg-3.png') repeat;
}
/* Grid */
.svc-grid-row{
display: flex;
flex-wrap: wrap;
gap: 26px;
}
/* 3 columns desktop */
.svc-col{
flex: 0 0 calc(33.333% - 17.4px);
}
/* Card */
.svc-card{
background:#fff;
border-radius:18px;
overflow:hidden; /* clips image corners */
box-shadow: 0 10px 26px rgba(15,23,42,.10);
transition: transform .2s ease, box-shadow .2s ease;
height: 100%;
}
.svc-card:hover{
transform: translateY(-4px);
box-shadow: 0 16px 34px rgba(15,23,42,.14);
}
/* Image */
.svc-img-link{ display:block; }
.svc-img{
width:100%;
height: 185px;
object-fit: cover; /* consistent thumbnails */
display:block;
}
/* Body */
.svc-body{
text-align:center;
padding: 18px 18px 20px;
}
.svc-title-link{ text-decoration:none; color:inherit; }
.svc-title{
margin: 6px 0 12px;
font-size: 16px;
font-weight: 800;
letter-spacing: .5px;
text-transform: uppercase;
}
/* Divider like screenshot */
.svc-divider{
border-top: 1px dotted #d7dbe3;
margin: 0 auto 12px;
width: 100%;
}
.svc-desc{
margin:0;
color:#5b6472;
font-size:14px;
line-height:1.7;
}
/* Responsive */
@media (max-width: 991px){
.svc-col{ flex: 0 0 calc(50% - 13px); } /* 2 columns */
}
@media (max-width: 576px){
.svc-col{ flex: 0 0 100%; } /* 1 column */
.svc-img{ height: 210px; }
}
/* ---------- Service Details: layout helpers ---------- */
.sd-center-row{
display: flex;
justify-content: center;
}
.sd-col-full{
width: 100%;
}
/* ---------- Role/Content section spacing ---------- */
.inner-page-hero{
padding: 40px 0 70px;
}
/* Keep your existing typography if you already have global styles */
.role-info p{
line-height: 1.9;
color: #334155;
font-size: 16px;
}
/* Features block */
.service-feature{
margin-top: 28px;
}
.service-feature h2{
font-size: 24px;
font-weight: 800;
margin: 0 0 14px;
color: #0f172a;
}
/* list styling (if your .simple-list exists already, you can skip these) */
.simple-list{
list-style: none;
padding: 0;
margin: 0;
}
.simple-list .list-item{
margin-bottom: 10px;
}
.simple-list .list-item p{
margin: 0;
display: flex;
gap: 10px;
align-items: flex-start;
}
.sd-divider{
border: 0;
height: 1px;
margin: 0;
opacity: .4;
background-image: linear-gradient(
90deg,
rgba(206,211,246,0) 0%,
#bbb 38%,
#bbb 64%,
rgba(206,211,246,0) 99%
);
}
/* ---------- Responsive ---------- */
@media (max-width: 768px){
.inner-page-hero{
padding: 30px 0 55px;
}
.role-info p{
font-size: 15px;
}
#service-page-breadcrumb {
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top-left-radius: 0;
border-top-right-radius: 0;
}
#service-details-page h1 {
font-size: 30px;
line-height: 1.4;
padding: 10px;
}
.breadcrumb-title {
font-size: 30px;
padding: 10px;
}
.contact__actions {
justify-content: end !important;
}
}
/* ==============================
Customer sign up page css
===============================*/
#blog-details-page #main-header {
background-color: #fff !important;
}