/* Fonts */
:root {
--default-font: "Roboto", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--heading-font: "Raleway", sans-serif;
--nav-font: "Poppins", sans-serif;
}
.navmenu a.active {
color: #001f3f !important; /* Example color */
font-weight: bold;
}
.portfolio-filters li.filter-active a {
color: var(--accent-color);
/* background-color: #1D2F6F; */
padding: 6px 12px;
border-radius: 4px;
}
:root {
--background-color: #ffffff;
--default-color: #666666;
--heading-color: #333333;
--accent-color: #f47920;
--surface-color: #ffffff;
--contrast-color: #ffffff;
}
:root {
--nav-color: #ffffff;
--nav-hover-color: rgb(252, 153, 41);
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #666666;
--nav-dropdown-hover-color: #18d26e;
}
/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-background {
--background-color: #f7f7f7;
--surface-color: #ffffff;
}
.dark-background {
--background-color: #060606;
--default-color: #ffffff;
--heading-color: #ffffff;
--surface-color: #252525;
--contrast-color: #ffffff;
}
/* Smooth scroll */
:root {
scroll-behavior: smooth;
}
/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
color: var(--default-color);
background-color: var(--background-color);
font-family: var(--default-font);
}
a {
color: var(--accent-color);
text-decoration: none;
transition: 0.3s;
}
a:hover {
color: color-mix(in srgb, var(--accent-color), transparent 25%);
text-decoration: none;
}
/*h1,*/
/*h2,*/
/*h3,*/
/*h4,*/
/*h5,*/
/*h6 {*/
/* color: var(--heading-color);*/
/* font-family: var(--heading-font);*/
/*}*/
/* Headings */
h1, h2, h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
margin-bottom: 0.6em;
}
/* Desktop font sizes */
h1 { font-size: 40px; }
h2 { font-size: 30px; }
h3 { font-size: 22px; } /* also for card titles */
p { font-size: 18px; }
.menu a { font-size: 18px; }
button, .btn { font-size: 18px; }
/* Responsive (mobile adjustments) */
@media (max-width: 768px) {
h1 { font-size: 28px; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
p { font-size: 16px; }
.menu a,
button,
.btn { font-size: 18px; } /* same on mobile per your rule */
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.top-nav {
/* background-color: var(--brand); */
background: linear-gradient(45deg, var(--accent-color) 70%, #460ad3 30%);
color: #fff;
padding-top: 5px;
padding-bottom: 5px;
}
.top-nav.active {
display: none;
}
.top-nav .a_bx {
display: inline-block;
margin-bottom: 0;
margin-right: 10px;
cursor: pointer;
text-decoration: none;
color: #fff;
}
.top-nav span,
.top-nav i {
vertical-align: middle;
}
.navbar {
box-shadow: var(--shadow);
}
.social-icons a {
width: 28px;
height: 28px;
display: inline-flex;
color: #fff;
background-color: var(--accent-color);
text-decoration: none;
align-items: center;
justify-content: center;
border-radius: 100px;
}
.social-icons a:hover {
background-color: var(--brand);
color: #fff;
}
@media (max-width: 991px) {
.top-nav {
display: none;
}
}
/* ----------------------------- */
.header {
/* --background-color: rgba(0, 0, 0, 0); */
/*--background-color: rgb(227 220 220 / 56%);*/
--background-color: #fff !important;
--default-color: #ffffff;
--heading-color: #ffffff;
color: var(--default-color);
background-color: #fff;
/* padding: 15px 0; */
padding: 5px 0 0 0;
transition: all 0.5s;
z-index: 997;
}
.header.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 999;
color: #051B2E;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.085);
}
.header .logo {
line-height: 1;
}
.header .logo img {
/* max-height: 32px; */
height: 5.8rem;
margin-right: 8px;
}
.scrolled .header {
box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
/*.main-btn {*/
/* background: var(--accent-color);*/
/* color: var(--contrast-color);*/
/* font-family: var(--heading-font);*/
/* font-weight: 500;*/
/* font-size: 16px;*/
/* letter-spacing: 1px;*/
/* padding: 12px 24px;*/
/* border-radius: 5px;*/
/* transition: 0.3s;*/
/* display: inline-flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/*}*/
/*.main-btn i {*/
/* font-size: 18px;*/
/* margin-left: 5px;*/
/* line-height: 0;*/
/* transition: 0.3s;*/
/*}*/
/*.main-btn:hover i {*/
/* margin-left: 10px;*/
/* color: #fff;*/
/*}*/
/*.main-btn:hover {*/
/* background:*/
/* color-mix(in srgb, var(--accent-color), transparent 20%);*/
/* padding-right: 19px;*/
/* color: #fff;*/
/*}*/
/* Normal button */
.main-btn {
background: var(--accent-color);
color: #fff;
padding: 12px 24px;
border-radius: 6px;
font-weight: 600;
transition: 0.3s ease;
}
/* Glow effect when scrolled */
.scrolled .main-btn {
box-shadow: 0 0 12px rgba(0, 64, 128, 0.35);
border: 2px solid rgba(0, 64, 128, 0.4);
}
/* Global Header on Scroll
------------------------------*/
.scrolled .header {
/* --background-color: rgba(0, 0, 0, 0.9); */
background-color: #fff;
}
.scrolled .navmenu a {
color: var(--nav-dropdown-color);
position: relative;
}
.navmenu a:hover {
color: var(--accent-color);
}
.navmenu a::before {
content: '';
position: absolute;
bottom: 1px;
left: 0;
width: auto;
height: 2px;
background-color: var(--accent-color);
}
.header.active .navmenu a {
color: #051B2E;
}
.header .navmenu a:hover{
color: var(--accent-color);
}
/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
.navmenu {
padding: 0;
}
.navmenu ul {
margin: 0;
padding: 0;
display: flex;
list-style: none;
align-items: center;
}
.navmenu li {
position: relative;
}
.navmenu a,
.navmenu a:focus {
/* color: var(--nav-color); */
color: #060606;
padding: 18px 15px;
font-size: 16px;
font-family: var(--nav-font);
font-weight: 600;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
transition: 0.3s;
}
.navmenu li:last-child a {
padding-right: 0;
}
.navmenu li:hover>a,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-hover-color);
}
.navmenu .dropdown ul {
margin: 0;
padding: 10px 0;
background: var(--nav-dropdown-background-color);
display: block;
position: absolute;
visibility: hidden;
left: 14px;
top: 130%;
opacity: 0;
transition: 0.3s;
border-radius: 4px;
z-index: 99;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu .dropdown ul li {
min-width: 200px;
}
.navmenu .dropdown ul a {
padding: 10px 20px;
font-size: 15px;
text-transform: none;
color: var(--nav-dropdown-color);
}
.navmenu .dropdown ul a i {
font-size: 12px;
}
.navmenu .dropdown ul a:hover,
.navmenu .dropdown ul .active:hover,
.navmenu .dropdown ul li:hover>a {
/* color: var(--nav-dropdown-hover-color); */
color: var(--accent-color);
}
.navmenu .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navmenu .dropdown .dropdown ul {
top: 0;
left: -90%;
visibility: hidden;
}
.navmenu .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
left: -100%;
visibility: visible;
}
}
/* Navmenu - Mobile */
@media (max-width: 1199px) {
.mobile-nav-toggle {
/* color: var(--nav-color); */
color: var(--heading-color);
font-size: 28px;
line-height: 0;
margin-right: 10px;
cursor: pointer;
transition: color 0.3s;
}
.scrolled .mobile-nav-toggle {
color: #060606;
}
.navmenu {
padding: 0;
z-index: 9997;
}
.navmenu ul {
display: none;
list-style: none;
position: absolute;
inset: 60px 20px 20px 20px;
padding: 10px 0;
margin: 0;
border-radius: 6px;
background-color: var(--nav-mobile-background-color);
overflow-y: auto;
transition: 0.3s;
z-index: 9998;
box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-dropdown-color);
padding: 10px 20px;
font-family: var(--nav-font);
font-size: 17px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
}
.navmenu a i,
.navmenu a:focus i {
font-size: 12px;
line-height: 0;
margin-left: 5px;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}
.navmenu a i:hover,
.navmenu a:focus i:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
color: var(--nav-dropdown-hover-color);
}
.navmenu .active i,
.navmenu .active:focus i {
background-color: var(--accent-color);
color: var(--contrast-color);
transform: rotate(180deg);
}
.navmenu .dropdown ul {
position: static;
display: none;
z-index: 99;
padding: 10px 0;
margin: 10px 20px;
background-color: var(--nav-dropdown-background-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
box-shadow: none;
transition: all 0.5s ease-in-out;
}
.navmenu .dropdown ul ul {
background-color: rgba(33, 37, 41, 0.1);
}
.navmenu .dropdown>.dropdown-active {
display: block;
background-color: rgba(33, 37, 41, 0.03);
}
.mobile-nav-active {
overflow: hidden;
}
.mobile-nav-active .mobile-nav-toggle {
color: #fff;
position: absolute;
font-size: 32px;
top: 15px;
right: 15px;
margin-right: 0;
z-index: 9999;
}
.mobile-nav-active .navmenu {
position: fixed;
overflow: hidden;
inset: 0;
background: rgba(33, 37, 41, 0.8);
transition: 0.3s;
}
.mobile-nav-active .navmenu>ul {
display: block;
}
}
/*------------------------ --------------------------------------
# Global Footer
--------------------------------------------------------------*/
/*.footer {*/
/* color: var(--default-color);*/
/*background-color: var(--background-color); */
/*background-image: url(/assets/img/abstract-waves.webp), linear-gradient(90deg, #000 0%, #181717 45%, #000 100%);*/
/* background-size: cover;*/
/* font-size: 14px;*/
/* position: relative;*/
/* background-color: #838383 !important; */
/*}*/
/*.footer p{*/
/* color:#fff !important;*/
/*}*/
/*.footer .footer-top {*/
/* padding-top: 50px;*/
/* border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);*/
/*}*/
/*.footer .footer-about .logo {*/
/* line-height: 1;*/
/*margin-bottom: 25px;*/
/* text-align: center;*/
/* display: flex;*/
/* align-items: flex-start !important;*/
/* flex-direction: column;*/
/*}*/
/*.footer .footer-about .logo img {*/
/*max-height: 80px;*/
/* max-height: 103px;*/
/* margin-right: 6px; */
/*margin-left: 1.5rem;*/
/*}*/
/*.footer .footer-about .logo span.sitename {*/
/* font-size: 1.1rem;*/
/* text-transform: uppercase;*/
/* font-weight: 500;*/
/* letter-spacing: 1px;*/
/* font-family: var(--heading-font);*/
/* color: var(--heading-color);*/
/* text-align: center;*/
/*}*/
/*.footer .footer-about .logo span.shot_font {*/
/* font-size: .6rem;*/
/* text-transform: uppercase;*/
/* color: #eee;*/
/* text-align: center;*/
/* margin-left: 1rem;*/
/*}*/
/*.footer .footer-about p {*/
/* font-size: 14px;*/
/* font-family: var(--heading-font);*/
/* color:#fff !important;*/
/*}*/
/*.footer .social-links a {*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/* width: 40px;*/
/* height: 40px;*/
/* border-radius: 50%;*/
/*background-color: #d4af37 !important; */
/* color: #083d77 !important; */
/* font-size: 24px !important;*/
/* margin-right: 10px;*/
/* transition: 0.3s ease; */
/* border: none !important;*/
/*}*/
/*.footer .social-links a:hover {*/
/* color: var(--accent-color);*/
/* border-color: var(--accent-color);*/
/*}*/
/*.footer h4 {*/
/* font-size: 20px !important;*/
/* font-weight: bold;*/
/* position: relative;*/
/* padding-bottom: 12px;*/
/* color: #fff !important;*/
/*}*/
/*.footer .footer-links {*/
/* margin-bottom: 30px;*/
/*}*/
/*.footer .footer-links ul {*/
/* list-style: none;*/
/* padding: 0;*/
/* margin: 0;*/
/* font-size: 17px;*/
/*}*/
/*.footer .footer-links ul i {*/
/* padding-right: 2px;*/
/* font-size: 12px;*/
/* line-height: 0;*/
/*}*/
/*.footer .footer-links ul li {*/
/* padding: 10px 0;*/
/* display: flex;*/
/* align-items: center;*/
/*}*/
/*.footer .footer-links ul li:first-child {*/
/* padding-top: 0;*/
/*}*/
/*.footer .footer-links ul a {*/
/*color: color-mix(in srgb, var(--default-color), transparent 30%);*/
/* color: #fff !important;*/
/* display: inline-block;*/
/* line-height: 1;*/
/*}*/
/*.footer .footer-links ul a:hover {*/
/* color: var(--accent-color);*/
/*}*/
/* Responsive: stack on mobile */
/*@media (max-width: 768px) {*/
/* .footer .footer-top {*/
/* flex-direction: column;*/
/* text-align: center;*/
/* }*/
/* .footer .footer-column {*/
/* flex: 1 1 100%;*/
/* margin-bottom: 30px;*/
/* }*/
/* .footer .social-links {*/
/* justify-content: center;*/
/* }*/
/*}*/
/*.footer .footer-contact p {*/
/* margin-bottom: 5px;*/
/*}*/
/*.footer .footer-newsletter .newsletter-form {*/
/* margin-top: 30px;*/
/* margin-bottom: 15px;*/
/* padding: 6px 8px;*/
/* position: relative;*/
/* border-radius: 4px;*/
/* border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);*/
/* display: flex;*/
/*background-color: var(--background-color);*/
/* background: #999;*/
/* transition: 0.3s;*/
/*}*/
/*.footer .footer-newsletter .newsletter-form:focus-within {*/
/* border-color: var(--accent-color);*/
/*}*/
/*.footer .footer-newsletter .newsletter-form input[type=email] {*/
/* border: 0;*/
/* padding: 4px;*/
/* width: 100%;*/
/*background-color: var(--background-color);*/
/* background: #999;*/
/* color: var(--default-color);*/
/*}*/
/*.footer .footer-newsletter .newsletter-form input::placeholder{*/
/* color: #fff;*/
/*}*/
/*.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {*/
/* outline: none;*/
/*}*/
/*.footer .footer-newsletter .newsletter-form input[type=submit] {*/
/* border: 0;*/
/* font-size: 16px;*/
/* padding: 0 20px;*/
/* margin: -7px -8px -7px 0;*/
/* background: var(--accent-color);*/
/* color: var(--contrast-color);*/
/* transition: 0.3s;*/
/* border-radius: 0 4px 4px 0;*/
/*}*/
/*.footer .footer-newsletter .newsletter-form input[type=submit]:hover {*/
/* background: color-mix(in srgb, var(--accent-color), transparent 20%);*/
/*}*/
/*.footer .copyright {*/
/* padding: 25px 0;*/
/* border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);*/
/*}*/
/*.footer .copyright p {*/
/* margin-bottom: 0;*/
/*}*/
/*.footer .credits {*/
/* margin-top: 6px;*/
/* font-size: 13px;*/
/*}*/
.footer {
color: var(--default-color);
background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
font-size: 14px;
position: relative;
}
.footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #115999, #d4af37, #115999);
}
.footer p{
color:#fff !important;
}
.footer .footer-top {
padding-top: 50px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .footer-about .logo {
line-height: 1;
text-align: center;
display: flex;
align-items: flex-start !important;
flex-direction: column;
}
.footer .footer-about .logo img {
max-height: 103px;
}
.footer .footer-about .logo span.sitename {
font-size: 1.1rem;
text-transform: uppercase;
font-weight: 500;
letter-spacing: 1px;
font-family: var(--heading-font);
color: #d4af37 !important; /* Gold color for brand name */
text-align: center;
}
.footer .footer-about .logo span.shot_font {
font-size: .6rem;
text-transform: uppercase;
color: #bdc3c7 !important; /* Light gray for tagline */
text-align: center;
margin-left: 1rem;
}
.footer .footer-about p {
font-size: 14px;
font-family: var(--heading-font);
color:#ecf0f1 !important; /* Soft white for better readability */
}
.footer .social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: linear-gradient(135deg, #d4af37, #f4d03f) !important; /* Gold gradient */
color: #2c3e50 !important; /* Dark blue for contrast */
font-size: 18px !important; /* Slightly smaller icons */
margin-right: 10px;
transition: all 0.3s ease;
border: 2px solid transparent !important;
box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}
.footer .social-links a:hover {
background: linear-gradient(135deg, #f4d03f, #d4af37) !important;
color: #1a252f !important;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
border-color: #fff !important;
}
.footer h4 {
font-size: 20px !important;
font-weight: bold;
position: relative;
padding-bottom: 12px;
color: #d4af37 !important; /* Gold color for headings */
}
.footer h4::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 2px;
background: linear-gradient(90deg, #d4af37, transparent);
}
.footer .footer-links {
margin-bottom: 30px;
}
.footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
font-size: 17px;
}
.footer .footer-links ul i {
padding-right: 2px;
font-size: 12px;
line-height: 0;
color: #d4af37; /* Gold color for icons */
}
.footer .footer-links ul li {
padding: 10px 0;
display: flex;
align-items: center;
transition: all 0.3s ease;
border-left: 2px solid transparent;
padding-left: 10px;
}
.footer .footer-links ul li:first-child {
padding-top: 0;
}
.footer .footer-links ul li:hover {
border-left-color: #d4af37;
transform: translateX(5px);
}
.footer .footer-links ul a {
color: #ecf0f1 !important; /* Soft white for links */
display: inline-block;
line-height: 1;
text-decoration: none;
transition: all 0.3s ease;
}
.footer .footer-links ul a:hover {
color: #d4af37 !important; /* Gold on hover */
text-decoration: none;
}
/* Contact Section Enhancement */
.footer .footer-contact p {
margin-bottom: 5px;
color: #bdc3c7 !important; /* Light gray for contact text */
}
.footer .footer-contact a {
color: #ecf0f1 !important;
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.footer .footer-contact a:hover {
color: #d4af37 !important;
text-decoration: underline;
}
/* Newsletter Enhancement */
.footer .footer-newsletter .newsletter-form {
margin-top: 30px;
margin-bottom: 15px;
padding: 8px;
position: relative;
border-radius: 8px;
border: 2px solid rgba(212, 175, 55, 0.3);
display: flex;
background: rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
}
.footer .footer-newsletter .newsletter-form:focus-within {
border-color: #d4af37;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.2);
}
.footer .footer-newsletter .newsletter-form input[type=email] {
border: 0;
padding: 8px 12px;
width: 100%;
background: transparent;
color: #fff !important;
font-size: 14px;
}
.footer .footer-newsletter .newsletter-form input::placeholder {
color: #bdc3c7 !important;
}
.footer .footer-newsletter .newsletter-form input[type=email]:focus-visible {
outline: none;
}
.footer .footer-newsletter .newsletter-form input[type=submit] {
border: 0;
font-size: 16px;
padding: 8px 20px;
margin: -8px -8px -8px 0;
background: linear-gradient(135deg, #d4af37, #f4d03f);
color: #2c3e50 !important;
transition: all 0.3s ease;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
}
.footer .footer-newsletter .newsletter-form input[type=submit]:hover {
background: linear-gradient(135deg, #f4d03f, #d4af37);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}
/* Copyright Section */
.footer .copyright {
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
}
.footer .copyright p {
margin-bottom: 0;
color: #bdc3c7 !important;
}
.footer .credits {
margin-top: 6px;
font-size: 13px;
color: #95a5a6 !important;
}
/* Responsive Design */
@media (max-width: 768px) {
.footer .footer-top {
flex-direction: column;
text-align: center;
}
.footer .footer-column {
flex: 1 1 100%;
margin-bottom: 30px;
}
.footer .social-links {
justify-content: center;
}
.footer h4::after {
left: 50%;
transform: translateX(-50%);
}
.footer .footer-links ul li {
justify-content: center;
border-left: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer .footer-links ul li:hover {
border-left-color: transparent;
border-bottom-color: #d4af37;
transform: translateY(-2px);
}
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 999999;
overflow: hidden;
background: var(--background-color);
transition: all 0.3s ease-out;
}
#preloader:before {
content: "";
position: fixed;
top: calc(50% - 30px);
left: calc(50% - 30px);
border: 6px solid #ffffff;
border-color: var(--accent-color) transparent var(--accent-color) transparent;
border-radius: 50%;
width: 60px;
height: 60px;
animation: animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 15px;
z-index: 99999;
background-color: var(--accent-color);
width: 40px;
height: 40px;
border-radius: 4px;
transition: all 0.4s;
}
.scroll-top i {
font-size: 24px;
color: var(--contrast-color);
line-height: 0;
}
.scroll-top:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
color: var(--contrast-color);
}
.scroll-top.active {
visibility: visible;
opacity: 1;
}
/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
[data-aos-delay] {
transition-delay: 0 !important;
}
}
/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
color: var(--default-color);
background-color: var(--background-color);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 160px 0 80px 0;
text-align: center;
position: relative;
height: 80vh;
}
.page-title:before {
content: "";
background-color: color-mix(in srgb, var(--background-color), transparent 50%);
position: absolute;
inset: 0;
}
.page-title h1 {
font-size: 42px;
font-weight: 700;
margin-bottom: 10px;
}
.page-title .breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
justify-content: center;
padding: 0;
margin: 0;
font-size: 16px;
font-weight: 400;
}
.page-title .breadcrumbs ol li+li {
padding-left: 10px;
}
.page-title .breadcrumbs ol li+li::before {
content: "/";
display: inline-block;
padding-right: 10px;
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: var(--default-color);
background-color: var(--background-color);
padding: 42px 0;
scroll-margin-top: 85px;
overflow: clip;
}
@media (max-width: 1199px) {
section,
.section {
scroll-margin-top: 66px;
}
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
text-align: center;
padding-bottom: 40px !important;
position: relative;
}
.section-title h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
position: relative;
}
.section-title h2:before {
content: "";
position: absolute;
display: block;
width: 160px;
height: 1px;
background: color-mix(in srgb, var(--default-color), transparent 60%);
left: 0;
right: 0;
bottom: 1px;
margin: auto;
}
.section-title h2::after {
content: "";
position: absolute;
display: block;
width: 60px;
height: 3px;
background: var(--accent-color);
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.section-title p {
margin-bottom: 0;
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
padding: 0;
}
.hero .swiper-button-next,
.hero .swiper-button-prev {
display: none !important;
position: inherit !important;
}
.hero .carousel {
width: 100%;
min-height: 100vh;
padding: 0;
margin: 0;
background-color: var(--background-color);
position: relative;
}
@keyframes zoomIn {
from {
transform: scale(1);
}
to {
transform: scale(1.2);
}
}
.hero img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
animation: zoomIn 5s infinite alternate ease-in-out;
}
.hero .carousel-item {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.hero .carousel-item:before {
/* content: "";
background: color-mix(in srgb, var(--background-color), transparent 30%);
position: absolute;
inset: 0;
z-index: 2; */
}
.hero .carousel-item::before {
content: "";
background-color: color-mix(in srgb, var(--background-color), transparent 30%);
position: absolute;
inset: 0;
}
.hero .carousel-container {
position: absolute;
inset: 200px 64px 64px 64px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
z-index: 3;
}
.hero h2 {
margin-bottom: 30px;
font-size: 48px;
font-weight: 700;
animation: fadeInDown 1s both;
}
@media (max-width: 768px) {
.hero h2 {
font-size: 30px;
}
}
.hero p {
animation: fadeInDown 1s both 0.2s;
}
@media (min-width: 1024px) {
.hero h2,
.hero p {
max-width: 60%;
}
}
.hero .btn-get-started {
color: var(--contrast-color);
background: var(--accent-color);
font-family: var(--heading-font);
font-weight: 500;
font-size: 15px;
letter-spacing: 1px;
display: inline-block;
padding: 8px 32px;
border-radius: 50px;
transition: 0.5s;
margin: 10px;
animation: fadeInUp 1s both 0.4s;
}
.hero .btn-get-started:hover {
/*background: color-mix(in srgb, var(--accent-color), transparent 20%);*/
background-color: #001f3f; /* Navy background */
color: white;
font-family: 'Montserrat', sans-serif;
padding: 15px 40px;
}
.hero .carousel-control-prev,
.hero .carousel-control-next {
width: 10%;
transition: 0.3s;
opacity: 0.5;
}
.hero .carousel-control-prev:focus,
.hero .carousel-control-next:focus {
opacity: 0.5;
}
.hero .carousel-control-prev:hover,
.hero .carousel-control-next:hover {
opacity: 0.9;
}
.hero .carousel-control-prev span {
background: #666;
}
.hero .carousel-control-next span {
background: #666;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
width: 3rem;
height: 3rem !important;
border-radius: 50%;
background-color: #FF5733 !important;
display: flex;
align-items: center;
justify-content: center;
}
@media (min-width: 1024px) {
.hero .carousel-control-prev,
.hero .carousel-control-next {
width: 5%;
}
}
.hero .carousel-control-next-icon,
.hero .carousel-control-prev-icon {
background: none;
font-size: 28px;
line-height: 1;
}
.hero .carousel-indicators {
list-style: none;
}
.hero .carousel-indicators li {
cursor: pointer;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
@keyframes fadeInDown {
from {
opacity: 0;
transform: translate3d(0, -100%, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* */
.premium_designer{
/*background-image: url(/assets/img/abstract-waves.webp), linear-gradient(90deg, #864d21 0%, #5c2626c9 45%, #a2340c 100%);*/
/*background-size: cover;*/
/*background-position: center;*/
background: rgba(0,0,0,0.1);
}
.premium_designer .content_box {
padding: 10px 15px;
}
.premium_designer .content_box .title {
/* background: linear-gradient(to right, #4c47e3, #ff5722); */
font-size: 1.6rem;
font-weight: 700;
/*color: #fff;*/
color: #111;
text-align: center;
padding: 15px 0;
position: relative;
border: 1px dotted #fff;
}
.premium_designer .content_box .title::before{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
width: 1px;
height: 15px;
background-color: #fff;
}
.premium_designer .content_box .p {
padding: 1rem;
/*color: #e4e0e0;*/
color: #555;
border: 1px dotted #f6efef;
margin-top: 1rem;
/*animation: rotateTop 5s ease-in-out infinite;*/
transform-origin: top center;
}
.premium_designer .content_box .p h3{
/*color: #fff;*/
}
@keyframes rotateTop {
0% { transform: rotate(0deg); }
25% { transform: rotate(-5deg); }
50% { transform: rotate(5deg); }
75% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}
.premium_designer .content_box .p p {
font-size: 1.25rem;
}
.premium_designer .premium_slider {
padding: 1rem;
height: 27rem;
}
.premium_Swiper{
padding-left: 10px;
}
.premium_designer .premium_slider .swiper-slide .image {
width: 100%;
height: 22rem;
margin-top: 3rem;
}
.premium_designer .premium_slider .swiper-slide .image img {
width: 100%;
height: 100%;
border-radius: 20px 20px;
object-fit: cover;
/* clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%); */
/* border: 4px solid var(--accent-color); */
box-shadow: 0 0 5px 4px #2f2f2f77;
}
.premium_designer .premium_slider .swiper-button-next,
.premium_designer .premium_slider .swiper-button-prev {
/* background-color: var(--accent-color); */
color: #fff;
width: 2.5rem;
height: 2.5rem;
border-radius: 50%;
}
.premium_designer .premium_slider .swiper-button-next:hover,
.premium_designer .premium_slider .swiper-button-prev:hover{
background-color: #051B2E;
}
.premium_designer .premium_slider .swiper-button-next:after,
.premium_designer .premium_slider .swiper-button-prev:after{
font-size: 1.2rem;
}
@media (max-width: 991px) {
.premium_designer .premium_slider .swiper-slide .image {
width: 100%;
height: 20rem;
clip-path: initial;
}
.premium_designer .content_box .title{
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
border: 1px solid ;
}
.premium_designer .content_box .p{
animation: none;
box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px inset, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px inset;
border: 1px solid ;
}
}
@media (max-width: 768px) {
.premium_designer .content_box .title,
.premium_designer .content_box .p{
box-shadow: none;
border: none ;
}
}
/* --------------------------------------------------sk----------- */
.template-page-poros-world .image-with-text__grid.image-with-text__grid--reverse.image-with-text__grid--heading-center.image-with-text__grid--image_right:before {
content: '';
position: absolute;
top: 0;
left: 47%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background: #000;
}
.template-page-poros-world .image-with-text__grid.image-with-text__grid--reverse.image-with-text__grid--heading-center.image-with-text__grid--image_right::after {
content: '';
position: absolute;
bottom: 0px;
left: 47%;
transform: translateX(-50%);
width: 1.5rem;
height: 1.5rem;
background: #fff;
border: 1px solid #000;
border-radius: 50%;
}
.template-page-poros-world .image-with-text__grid.image-with-text__grid--heading-center.image-with-text__grid--image_left:before {
content: '';
position: absolute;
top: 0;
left: 47%;
transform: translateX(-50%);
width: 1px;
height: 100%;
background: #000;
}
.template-page-poros-world .image-with-text__grid.image-with-text__grid--heading-center.image-with-text__grid--image_left::after {
content: '';
position: absolute;
bottom: 0px;
left: 47%;
transform: translateX(-50%);
width: 1.5rem;
height: 1.5rem;
background: #fff;
border: 1px solid #000;
border-radius: 50%;
}
/* */
/*our journey section start css on about page*/
.journey-section {
position: relative;
/*background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);*/
}
.section-heading {
font-weight: 750;
color: #1a1a1a;
font-size:2.3rem;
}
.journey-wrapper .journey-box {
position: relative;
background-color: #fff;
padding: 30px 20px 50px;
border-radius: 15px;
border: 1.5px solid #eee;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}
.journey-icon-wrap {
width: 60px;
height: 60px;
border: 2px dashed #c8102e;
border-radius: 50%;
margin: 0 auto 15px;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
color: #c8102e;
}
.journey-line {
position: absolute;
left: 50%;
transform: translateX(-50%);
width: 2px;
background-color: #c8102e;
height: 100px;
}
.journey-line.start {
top: 100%;
border-left: 4px solid #c8102e;
border-bottom-left-radius: 60px;
border-bottom-right-radius: 60px;
height: 60px;
}
.journey-line.middle {
top: 100%;
border-top: 4px solid #c8102e;
border-bottom: 4px solid #c8102e;
border-radius: 0 0 60px 60px;
height: 60px;
}
.journey-line.end {
top: 100%;
border-top: 4px solid #c8102e;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
height: 60px;
transform: translateX(-50%) rotate(180deg);
}
.journey-box h5 {
font-weight: 700;
margin-top: 15px;
color: #222;
}
.journey-box p {
font-size: 0.95rem;
color: #555;
}
/* Responsive spacing */
@media (max-width: 767px) {
.journey-line {
display: none;
}
}
/* --------------------vision-mission-section ---------- */
.vision-mission-section .vision-mission-box {
border: 1px solid var(--accent-color);
border-radius: 10px;
padding: 10px;
height: 15rem;
}
.our-ethics-section {
/*background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);*/
}
.ethics-box {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 32px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
backdrop-filter: blur(10px);
transition: transform 0.3s ease;
}
.ethics-box:hover {
transform: translateY(-5px);
}
.ethics-box .icon-wrap i {
font-size: 3.5rem;
color: #ff6f3c;
}
.ethics-box p {
color: #000000;
font-size: 1.1rem;
line-height: 1.8;
}
.value-btn {
background-color: #c8102e;
color: #fff;
font-weight: 700;
padding: 15px 20px;
border-radius: 10px;
text-align: center;
transition: 0.3s ease;
}
.value-btn:hover {
background-color: #f47920;
transform: translateY(-4px);
}
/* Dot Grid (Right Side) */
.dot-grid {
position: absolute;
top: 46px;
left: -5px;
width: 40px;
height: 93%;
background-image: radial-gradient(red 1.5px, transparent 1.5px);
background-size: 10px 10px;
z-index: 1;
opacity: 0.6;
}
@media (max-width: 768px) {
.dot-grid {
display: none;
}
}
/*our footprints about page*/
.footprint-title{
font-size:2.3rem;
font-weight:700;
}
.footprint-section{
/*background-image: linear-gradient(to top, #a8edea 0%, #fed6e3 100%);*/
background: rgba(0,0,0,0.1);
}
/*why us section css start about page*/
.why-choose-us-section {
background-color: #fff;
position: relative;
overflow: hidden;
}
.section-title2 {
font-weight: 750;
color: #1a1a1a;
font-size:2.3rem;
text-align: left;
padding-bottom: 40px;
position: relative;
}
.why-features-wrapper {
gap: 24px;
flex-wrap: wrap;
}
.why-feature-circle {
width: 160px;
height: 160px;
border: 2px dashed #c8102e;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
color: #c8102e;
font-weight: 600;
font-size: 0.95rem;
position: relative;
transition: all 0.3s ease;
background-color: #fff;
}
.why-feature-circle:hover {
box-shadow: 0 0 15px rgba(200, 16, 46, 0.2);
transform: scale(1.05);
}
.why-feature-main-circle {
width: 160px;
height: 160px;
background-color: #c8102e;
color: #fff;
border-radius: 50%;
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
margin-left: 30px;
position: relative;
}
.why-feature-main-circle::before {
content: "";
position: absolute;
left: -50px;
top: 50%;
width: 46px;
height: 2.4px;
background-color: #000;
transform: translateY(-50%);
}
/* Responsive */
@media (max-width: 768px) {
.why-feature-main-circle {
margin-left: 0;
margin-top: 18px;
}
.why-feature-main-circle::before {
display: none;
}
}
/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services {
padding: 40px 0 10px 0;
}
.featured-services .service-item {
position: relative;
height: 100%;
margin-bottom: 30px;
}
.featured-services .service-item .icon {
margin-right: 20px;
}
.featured-services .service-item .icon i {
color: var(--accent-color);
font-size: 40px;
line-height: 0;
transition: 0.3s;
}
.featured-services .service-item:hover .icon i {
color: var(--accent-color);
}
.featured-services .service-item .title {
color: var(--heading-color);
font-weight: 700;
margin-bottom: 10px;
font-size: 20px;
transition: 0.3s;
}
.featured-services .service-item .description {
font-size: 15px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
margin-bottom: 10px;
}
.featured-services .service-item .readmore {
display: flex;
align-items: center;
color: color-mix(in srgb, var(--default-color), transparent 50%);
transition: 0.3s;
font-weight: 700;
font-size: 14px;
}
.featured-services .service-item .readmore i {
margin-left: 8px;
}
.featured-services .service-item:hover .title,
.featured-services .service-item:hover .readmore,
.featured-services .service-item:hover .icon i {
color: var(--accent-color);
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .content .who-we-are {
text-transform: uppercase;
margin-bottom: 15px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.about .content h3 {
font-size: 2rem;
font-weight: 700;
}
.about .content ul {
list-style: none;
padding: 0;
}
.about .content ul li {
padding-bottom: 10px;
}
.about .content ul i {
font-size: 1.25rem;
margin-right: 4px;
color: var(--accent-color);
}
.about .content p:last-child {
margin-bottom: 0;
}
.about .content .read-more {
background: var(--accent-color);
color: var(--contrast-color);
font-family: var(--heading-font);
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
padding: 12px 24px;
border-radius: 5px;
transition: 0.3s;
display: inline-flex;
align-items: center;
justify-content: center;
}
.about .content .read-more i {
font-size: 18px;
margin-left: 5px;
line-height: 0;
transition: 0.3s;
}
.about .content .read-more:hover {
background: color-mix(in srgb, var(--accent-color), transparent 20%);
padding-right: 19px;
}
.about .content .read-more:hover i {
margin-left: 10px;
}
.about .about-images img {
border-radius: 10px;
transition: transform .3s linear;
}
@keyframes fadeInZoom {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
.about-images img {
animation: fadeInZoom 1s ease-in-out linear;
}
/* -----------------new about ----------------- */
/* // feature-area start */
.rts-feature-area {
position: relative;
/* background-color: #060606;
color: #fff; */
}
.rts-feature-area .section-title h2{
/* color: #fff; */
}
.rts-feature-area .bg-white-feature .who-we-are{
/* color: #fff; */
}
.rts-feature-area .bg-white-feature h3{
/* color: #fff; */
}
.rts-feature-area .bg-white-feature ul li{
font-size: 1.2rem;
}
.rts-title-area.feature::after {
content: "Features";
left: 32%;
transform: translateX(-50%);
z-index: -1;
height: 109px;
top: -18%;
}
.feature-left-area {
display: flex;
justify-content: flex-end;
padding-right: 83px;
animation: jump-2 5s linear infinite;
}
.bg-white-feature {
overflow: hidden;
position: relative;
z-index: 1;
border-bottom: 5px solid var(--color-primary);
padding: 0 150px;
}
.bg-white-feature::after {
position: absolute;
content: "";
height: 763px;
width: 763px;
background-image: url(https://themewant.com/products/html/bizcoz/assets/images/feature/shape/01.png);
left: -15%;
top: -50%;
z-index: -1;
animation: rotateIt 20s linear infinite;
}
.padding-controler {
@media screen and (max-width: 1366px) {
padding: 0 !important;
}
}
.feature-title {
/* @media #{$laptop-device} {
font-size: 30px;
} */
position: relative;
}
.feature-one-wrapper {
display: flex;
flex-wrap: wrap;
/*
@media #{$smlg-device} {
padding-bottom: 50px;
} */
}
.single-feature-one {
display: flex;
align-items: center;
padding: 15px 29px;
background: #fff;
border: 1px solid #EEEEEE;
border-radius: 15px;
max-width: max-content;
margin-right: 25px;
margin-bottom: 25px;
cursor: pointer;
transition: .3s;
/* @media #{$laptop-device} {
padding: 8px 12px;
margin-right: 10px;
margin-bottom: 10px;
} */
/* @media #{$small-mobile} {
margin-right: 15px;
margin-bottom: 15px;
} */
&:hover {
box-shadow: 0px 9px 18px #1810100d;
}
i {
padding: 5px;
background: var(--color-primary);
border-radius: 50%;
color: #fff;
margin-right: 15px;
font-size: 14px;
line-height: 12px;
}
p {
color: #1C2539;
font-weight: 700;
/* @media #{$laptop-device} {
font-size: 14px;
} */
}
}
@media (max-width: 550px) {
.feature-left-area {
justify-content: center;
padding-right: 0;
height: 20rem;
}
.bg-white-feature {
padding: 0 10px;
}
}
/* -------------------- services section---- */
.section-title02 .sm-title {
position: relative;
font-weight: 800;
text-transform: uppercase;
font-size: 14px;
color: navy;
display: inline-block;
padding-left: 15px;
letter-spacing: 2px;
margin-bottom: 0.5rem;
}
.section-title02 h2 {
font-weight: 750;
font-family: 'Plus Jakarta Sans', sans-serif;
letter-spacing: -0.01em;
color: #051B2E;
margin-bottom: 2rem;
text-align:center;
}
.border-color-light-black {
border-color: rgba(0, 0, 0, 0.085) !important;
}
.card-style06 .card-body {
padding: 40px 30px 40px 30px;
overflow: hidden;
position: relative;
}
.card-style06 .card-body::before {
content: '';
width: 85px;
height: 85px;
position: absolute;
background-color: rgb(252, 251, 249);
box-shadow: 0 -14px 9px 5px rgb(252, 153, 41);
border-radius: 50%;
bottom: -150px;
right: -23%;
transform: translateX(-50%) !important;
transition: background-color .3s ease;
}
.card-style06 .card-body:hover::before {
bottom: -40px;
right: -23%;
}
.card-style06 .card-body:hover {
background-color: rgb(32, 216, 237);
color: #fff;
backdrop-filter: blur(10px);
}
.card-style06 .card-body .service-img {
margin: 0 auto 25px;
position: relative;
}
.card-style06 .card-body .service-img img {
width: 70px;
height: 100%;
}
.card-style06 .card-body ul{
list-style: none;
text-align: left;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.card-style06 .card-body .icon-circle {
width: 85px;
height: 85px;
position: absolute;
background-color: rgba(255, 204, 83, 0.2);
border-radius: 50%;
top: 0;
left: 50%;
transform: translateX(-50%) !important;
transition: background-color .3s ease;
}
.card-style06 .card-body:hover .icon-circle {
background-color: rgb(252, 251, 249);
box-shadow: 0 20px 10px 5px rgb(252, 153, 41);
top: -48px;
left: -7%;
}
.card-style06 .card-body:hover .h5 a {
color: #051B2E;
font-weight: 700;
}
.card-style06 .card-btn {
background: transparent;
display: flex;
flex-direction: column;
text-align: center;
overflow: hidden;
width: 100%;
justify-content: center;
position: relative;
border-radius: 0;
}
.card-style06:hover .card-btn .main-butn .main-text {
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
.card-style06 .card-btn .main-butn {
font-weight: 700;
padding: 10px 0;
border-bottom: 1px solid #dee2e6;
border-top: 1px solid #dee2e6;
font-size: 14px;
text-transform: uppercase;
}
.card-style06 .card-btn .main-butn .main-text {
-webkit-transition: all .3s linear;
transition: all .3s linear;
display: block;
}
.card-style06 .card-btn .hover-butn {
position: absolute;
left: 0;
top: 100%;
width: 100%;
height: 100%;
-webkit-transition: all .3s linear;
transition: all .3s linear;
background-color: #0c3246;
display: flex;
justify-content: center;
align-items: center;
}
.card-style06 .card-btn .hover-butn a {
padding: 0 0 2px;
position: relative;
border: 0;
letter-spacing: 0;
background-color: transparent;
font-size: 14px;
font-weight: 700;
display: inline-block;
width: auto;
-webkit-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
color: #fff;
}
.card-style06:hover .card-btn .hover-butn {
top: 0;
}
/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
/* .stats {
background-image: {{asset('img/hero-carousel/hero-carousel-4.jpg')}};
} */
.stats .stats-item {
padding: 30px;
width: 100%;
background-color: #fff;
border-radius: 10px;
animation: jump-2 5s linear infinite;
}
.stats:nth-child(2) .stats-item {
animation-delay: 8s;
}
.stats .stats-item span {
font-size: 48px;
display: block;
color: var(--accent-color);
font-weight: 700;
}
.stats .stats-item p {
color: color-mix(in srgb, var(--default-color), transparent 40%);
padding: 0;
margin: 0;
font-family: var(--heading-font);
font-size: 15px;
font-weight: 600;
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
background-color: var(--surface-color);
padding: 30px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
transition: 0.3s;
}
.services .service-item .icon {
font-size: 36px;
line-height: 0;
margin-right: 30px;
color: var(--accent-color);
}
.services .service-item .title {
font-weight: 700;
margin-bottom: 15px;
font-size: 20px;
}
.services .service-item .title a {
color: var(--heading-color);
}
.services .service-item .description {
line-height: 24px;
font-size: 14px;
margin: 0;
}
.services .service-item:hover {
border-color: var(--accent-color);
}
.services .service-item:hover .title a {
color: var(--accent-color);
}
/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
padding: 80px 0;
position: relative;
clip-path: inset(0);
background-color: #f7f7f7;
}
.call-to-action img {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.call-to-action:before {
content: "";
/*background: color-mix(in srgb, var(--background-color), transparent 50%);*/
background: #ffffffb3;
position: absolute;
inset: 0;
z-index: 2;
}
.call-to-action .container {
position: relative;
z-index: 3;
}
.call-to-action h3 {
font-size: 32px;
font-weight: 800;
color: var(--accent-color);
}
.call-to-action p {
color: black;
font-weight:500;
}
.call-to-action .cta-btn {
font-family: var(--heading-font);
font-weight: 600;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 40px;
border-radius: 5px;
transition: 0.5s;
margin: 10px;
border: 2px solid black;
color: black;
}
.call-to-action .cta-btn:hover {
background: var(--accent-color);
border: 2px solid var(--accent-color);
}
/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
.portfolio .portfolio-filters {
padding: 0;
margin: 0 auto 20px auto;
list-style: none;
text-align: center;
}
.portfolio .portfolio-filters li {
cursor: pointer;
display: inline-block;
padding: 0;
font-size: 16px;
font-weight: 600;
margin: 0 10px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 5px;
transition: all 0.3s ease-in-out;
}
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
color: var(--accent-color);
}
.portfolio .portfolio-filters li:first-child {
margin-left: 0;
}
.portfolio .portfolio-filters li:last-child {
margin-right: 0;
}
@media (max-width: 575px) {
.portfolio .portfolio-filters li {
font-size: 14px;
margin: 0 5px;
}
}
.portfolio .portfolio-item {
position: relative;
}
.portfolio .portfolio-item .portfolio-info {
background-color: color-mix(in srgb, var(--surface-color), transparent 10%);
opacity: 0;
position: absolute;
left: 30px;
right: 30px;
bottom: 0;
z-index: 3;
transition: all ease-in-out 0.3s;
padding: 15px;
}
.portfolio .portfolio-item .portfolio-info h4 {
font-size: 18px;
font-weight: 600;
padding-right: 50px;
}
.portfolio .portfolio-item .portfolio-info p {
color: color-mix(in srgb, var(--default-color), transparent 30%);
font-size: 14px;
margin-bottom: 0;
/*padding-right: 50px;*/
}
.portfolio .portfolio-item .portfolio-info .preview-link,
.portfolio .portfolio-item .portfolio-info .details-link {
position: absolute;
right: 50px;
font-size: 24px;
top: calc(50% - 14px);
color: color-mix(in srgb, var(--default-color), transparent 30%);
transition: 0.3s;
line-height: 0;
}
.portfolio .portfolio-item .portfolio-info .preview-link:hover,
.portfolio .portfolio-item .portfolio-info .details-link:hover {
color: var(--accent-color);
}
.portfolio .portfolio-item .portfolio-info .details-link {
right: 14px;
font-size: 28px;
}
.portfolio .portfolio-item:hover .portfolio-info {
opacity: 1;
bottom: 20px;
padding:25px;
}
/*--------------------------------------------------------------
# project Section and page
--------------------------------------------------------------*/
.project_section.portfolio .portfolio-filters li {
padding: 8px 15px;
}
.project_section.portfolio .portfolio-filters li.filter-active {
border: 1px solid var(--accent-color);
}
.project_section.portfolio .portfolio-item {
position: relative;
overflow: hidden;
}
.project_section.portfolio .portfolio-item .portfolio-info {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/* border: 1px solid #060606; */
flex-direction: column;
text-align: center;
display: flex;
justify-content: center;
}
.project_section.portfolio .portfolio-item .portfolio-info h4{
padding-right: 0;
}
.project_section.portfolio .portfolio-item .portfolio-info .preview-link {
position: initial;
}
.project_section.portfolio .portfolio-item .portfolio-info .content {
position: absolute;
top: 50%;
left: 57%;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
width: 100%;
}
.project_section.portfolio .portfolio-item .portfolio-info .content a {
margin: 10px 0;
}
.project_section.portfolio .portfolio-item .portfolio-info .content a i {
padding: 10px;
font-size: 1.5rem;
background-color: #060606;
border-radius: 10px;
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .section-header {
margin-bottom: 40px;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
/* overflow: hidden; */
}
.testimonials .testimonial-item {
text-align: center;
/* background-color: #051B2E; */
box-shadow: 0 0 10px 10px rgba(0, 0, 0, 0.085);
border-radius: 10px;
padding: 10px;
}
.testimonials .testimonial-item .testimonial-img {
width: 120px;
border-radius: 50%;
/* border: 4px solid var(--background-color); */
border: 4px solid rgb(195, 195, 201);
margin: 0 auto;
position: relative;
box-shadow: 0 0px 0px 5px #dfdddd;
}
.testimonials .testimonial-item .testimonial-img {}
.testimonials .testimonial-item h3 {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px 0;
/* color: #fff; */
}
.testimonials .testimonial-item h4 {
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
margin: 0 0 15px 0;
}
.testimonials .testimonial-item .stars {
margin-bottom: 15px;
}
.testimonials .testimonial-item .stars i {
color: #ffc107;
margin: 0 1px;
}
.testimonials .testimonial-item .quote-icon-left,
.testimonials .testimonial-item .quote-icon-right {
color: color-mix(in srgb, var(--accent-color), transparent 50%);
font-size: 26px;
line-height: 0;
}
.testimonials .testimonial-item .quote-icon-left {
display: inline-block;
left: -5px;
position: relative;
}
.testimonials .testimonial-item .quote-icon-right {
display: inline-block;
right: -5px;
position: relative;
top: 10px;
transform: scale(-1, -1);
}
.testimonials .testimonial-item p {
font-style: italic;
margin: 0 auto 15px auto;
}
.testimonials .swiper-wrapper {
height: auto;
}
.testimonials .swiper-pagination {
margin-top: 20px;
position: relative;
}
.testimonials .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
opacity: 1;
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
@media (min-width: 992px) {
.testimonials .testimonial-item p {
width: 80%;
}
}
/* -------------------Gallery_section start---------- */
.Gallery_section .gallery_Swiper .gallery-content{
height: 20rem;
}
.Gallery_section .gallery_Swiper .gallery-content img{
width: 100%;
height: 100%;
}
.Gallery_section_all .gallery-content{
height: 14.4rem;
width: 100%;
position: relative;
border-radius: 10px;
overflow: hidden;
}
.Gallery_section_all .gallery-content img{
width: 100%;
height: 100%;
}
/*----------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
/*.team-section {*/
/* padding: 80px 0;*/
/* background: #f9f9ff;*/
/*}*/
/*.section-heading {*/
/* text-align: center;*/
/* margin-bottom: 50px;*/
/*}*/
/*.section-subtext {*/
/* color: #6c757d;*/
/* max-width: 600px;*/
/* margin: 15px auto 0;*/
/*}*/
/*.team-grid {*/
/* display: grid;*/
/* grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));*/
/* gap: 30px;*/
/* padding: 20px;*/
/*}*/
/*.team-card {*/
/* position: relative;*/
/* overflow: hidden;*/
/* border-radius: 15px;*/
/* transition: transform 0.3s ease;*/
/*}*/
/*.team-card:hover {*/
/* transform: translateY(-10px);*/
/*}*/
/*.member-profile {*/
/* position: relative;*/
/* overflow: hidden;*/
/* border-radius: 15px;*/
/* box-shadow: 0 10px 30px rgba(0,0,0,0.1);*/
/*}*/
/*.member-image {*/
/* width: 100%;*/
/* height: 350px;*/
/* object-fit: cover;*/
/* transition: transform 0.3s ease;*/
/*}*/
/*.member-overlay {*/
/* position: absolute;*/
/* top: 0;*/
/* left: 0;*/
/* width: 100%;*/
/* height: 100%;*/
/* background: rgba(0, 98, 204, 0.8);*/
/* opacity: 0;*/
/* transition: opacity 0.3s ease;*/
/* display: flex;*/
/* align-items: center;*/
/* justify-content: center;*/
/* text-align: center;*/
/* padding: 20px;*/
/*}*/
/*.team-card:hover .member-overlay {*/
/* opacity: 1;*/
/*}*/
/*.member-details {*/
/* transform: translateY(20px);*/
/* transition: transform 0.3s ease;*/
/*}*/
/*.team-card:hover .member-details {*/
/* transform: translateY(0);*/
/*}*/
/*.member-name {*/
/* color: #fff;*/
/* font-size: 1.5rem;*/
/* margin-bottom: 5px;*/
/*}*/
/*.member-role {*/
/* color: rgba(255,255,255,0.8);*/
/* font-size: 0.9rem;*/
/* margin-bottom: 15px;*/
/*}*/
/*.member-socials {*/
/* display: flex;*/
/* justify-content: center;*/
/* gap: 15px;*/
/*}*/
/*.social-link {*/
/* color: #fff;*/
/* font-size: 1.2rem;*/
/* transition: transform 0.2s ease;*/
/*}*/
/*.social-link:hover {*/
/* transform: translateY(-3px);*/
/* color: #ffd700;*/
/*}*/
/*@media (max-width: 768px) {*/
/* .team-grid {*/
/* grid-template-columns: repeat(2, 1fr);*/
/* gap: 15px;*/
/* }*/
/* .member-image {*/
/* height: 250px;*/
/* }*/
/*}*/
/*@media (max-width: 480px) {*/
/* .team-grid {*/
/* grid-template-columns: 1fr;*/
/* }*/
/*}*/
.ezy__team7-item.ezy__team7-item1 {
width: 17rem;
height: 21rem;
overflow: hidden;
border-radius: 0.5rem;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ezy__team7-item {
width: 18rem;
height: 12.6rem;
overflow: hidden;
border-radius: 0.5rem;
position: relative;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.ezy__team7-content h4{
color: white;
font-size: inherit;
}
.ezy__team7-item1 .ezy__team7-content h4{
color: white;
font-size: 1.5rem;
}
.ezy__team7-item.ezy__team7-item1 img {
width: 17rem;
height: 29.6rem;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.ezy__team7-item img {
width: 12.4rem;
height: 13.2rem;
object-fit: fill;
display: block;
transition: transform 0.3s ease;
}
.ezy__team7-item:hover img {
transform: scale(1.05);
}
.ezy__team7-content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
width: 100%;
color: #fff;
opacity: 0;
transform: translateY(100%);
transition: all 0.4s ease;
padding: 1rem;
height:100%;
padding-top:47%;
}
.ezy__team7-item:hover .ezy__team7-content {
opacity: 1;
transform: translateY(0);
}
.ezy__team7-social-links a {
color: #fff;
font-size: 0.9rem;
transition: color 0.3s;
}
.ezy__team7-social-links a:hover {
color: #0d6efd;
}
.ezy__team7-heading {
font-weight: bold;
font-size: 2.4rem;
}
.ezy__team7-sub-heading {
color: #555;
}
.all_team_name{
position: relative;
}
.all_team_name:before{
content: '';
position: absolute;
top: 0;
left: -30px;
width: 2px;
height: 100%;
background: #dc3545;
}
@media(max-width: 991px){
.all_team_name{
margin-top: 1rem;
}
.all_team_name:before{
display: none;
}
.all_team_name .ezy__team7-item{
width: auto;
height: auto;
}
.Director{
display: flex;
flex-wrap:wrap;
/*justify-content: center; */
}
}
/* --------------------swiper_blogs --------------- */
.home_blogs.blog-posts article {
height: 36rem;
}
.swiper_blogs {
padding: 0 0 3rem 1rem;
}
/*--------------------------------------------------------------
# clients Section
--------------------------------------------------------------*/
.clients .swiper_client {
padding-bottom: 3rem;
}
.clients .swiper_client .swiper-pagination {
bottom: -.3rem;
}
.swiper-pagination-bullet {
width: 12px;
height: 12px;
}
.swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq .faq-container .faq-item {
background-color: var(--surface-color);
position: relative;
padding: 20px;
margin-bottom: 15px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
border-radius: 12px;
overflow: hidden;
}
#faq .img-container {
height:32rem;
}
.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}
.faq .faq-container .faq-item h3 {
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 18px; /* updated font size */
line-height: 24px;
margin: 0 40px 0 0;
transition: 0.3s;
cursor: pointer;
display: flex;
align-items: center;
}
.faq .faq-container .faq-item h3 .num {
color: var(--accent-color);
padding-right: 10px;
}
.faq .faq-container .faq-item h3:hover {
color: gold;
}
.faq .faq-container .faq-item .faq-content {
display: grid;
grid-template-rows: 0fr;
transition: 0.3s ease-in-out;
visibility: hidden;
opacity: 0;
}
.faq .faq-container .faq-item .faq-content p {
font-family: 'Lato', sans-serif;
font-size: 16px; /* updated font */
color: #444;
margin-bottom: 0;
overflow: hidden;
}
.faq .faq-container .faq-item .faq-toggle {
position: absolute;
top: 20px;
right: 20px;
font-size: 16px;
line-height: 0;
transition: 0.3s;
cursor: pointer;
}
.faq .faq-container .faq-item .faq-toggle:hover {
color: #caa500;
}
.faq .faq-container .faq-active h3 {
color: gold;
}
.faq .faq-container .faq-active .faq-content {
grid-template-rows: 1fr;
visibility: visible;
opacity: 1;
padding-top: 10px;
}
.faq .faq-container .faq-active .faq-toggle {
transform: rotate(90deg);
color:gold;
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-item i {
font-size: 20px;
color: var(--accent-color);
font-size: 36px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
transition: all 0.3s ease-in-out;
}
.contact .info-item h3 {
font-size: 24px;
font-weight: 700;
margin: 20px 0;
}
.contact .info-item p {
padding: 0;
margin-bottom: 0;
font-size: 14px;
}
@media (min-width: 992px) {
.contact .info-item.info-item-borders {
border-left: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
}
.contact .php-email-form {
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
padding: 30px;
margin-top: 30px;
}
@media (max-width: 575px) {
.contact .php-email-form {
padding: 20px;
}
}
.contact .php-email-form input[type=text],
.contact .php-email-form input[type=email],
.contact .php-email-form textarea {
font-size: 14px;
padding: 10px 15px;
box-shadow: none;
border-radius: 0;
color: var(--default-color);
background-color: color-mix(in srgb, var(--background-color), transparent 50%);
border-color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.contact .php-email-form input[type=text]:focus,
.contact .php-email-form input[type=email]:focus,
.contact .php-email-form textarea:focus {
border-color: var(--accent-color);
}
.contact .php-email-form input[type=text]::placeholder,
.contact .php-email-form input[type=email]::placeholder,
.contact .php-email-form textarea::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 70%);
}
.contact .php-email-form button[type=submit] {
color: var(--contrast-color);
background: var(--accent-color);
border: 0;
padding: 10px 30px;
transition: 0.4s;
border-radius: 50px;
}
.contact .php-email-form button[type=submit]:hover {
background: color-mix(in srgb, #001f3f, transparent 20%) !important;
}
/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.ezy__blog6 {
/* Bootstrap variables */
--bs-body-color: #28303b;
--bs-body-bg: #fff;
/* easy frontend variables */
--ezy-theme-color: rgb(13, 110, 253);
--ezy-theme-color-rgb: 13, 110, 253;
--ezy-card-bg: #fff;
--ezy-card-shadow: 0 25px 41px rgba(89, 88, 109, 0.15);
background-color: var(--bs-body-bg);
padding: 40px 0;
}
@media (min-width: 768px) {
.ezy__blog6 {
padding: 50px 0;
}
}
/* Gray Block Style */
.gray .ezy__blog6,
.ezy__blog6.gray {
/* Bootstrap variables */
--bs-body-bg: rgb(246, 246, 246);
/* easy frontend variables */
--ezy-card-bg: #fff;
--ezy-card-shadow: 0px 8px 44px rgba(182, 198, 222, 0.48);
}
/* Dark Gray Block Style */
.dark-gray .ezy__blog6,
.ezy__blog6.dark-gray {
/* Bootstrap variables */
--bs-body-color: rgb(241, 241, 241);
--bs-body-bg: rgb(30, 39, 53);
/* easy frontend variables */
--ezy-card-bg: rgb(11, 23, 39);
--ezy-card-shadow: none;
}
/* Dark Block Style */
.dark .ezy__blog6,
.ezy__blog6.dark {
/* Bootstrap variables */
--bs-body-color: rgb(255, 255, 255);
--bs-body-bg: rgb(11, 23, 39);
/* easy frontend variables */
--ezy-card-bg: rgb(30, 39, 53);
--ezy-card-shadow: none;
}
/* heading and sub-heading */
.ezy__blog6-heading {
font-weight: 700;
font-size: 32px;
line-height: 1;
color: var(--bs-body-color);
}
.ezy__blog6-sub-heading {
color: var(--bs-body-color);
font-size: 18px;
font-weight: 500;
line-height: 26px;
opacity: 0.8;
}
@media (min-width: 991px) {
.ezy__blog6-heading {
font-size: 40px;
}
}
.ezy__blog6-post {
border-radius: 10px;
background-color: transparent;
}
.ezy-blog6-banner {
border-radius: 10px;
height:14.2rem;
box-shadow: var(--ezy-card-shadow);
}
.ezy__blog6-calendar {
background-color: var(--ezy-card-bg);
color: var(--bs-body-color);
font-weight: 900;
font-size: 18px;
line-height: 22px;
border-radius: 10px;
position: absolute;
bottom: 10px;
left: 10px;
opacity: 0.85;
}
.ezy__blog6-author {
color: var(--bs-body-color) !important;
font-weight: 300;
font-size: 14px;
line-height: 24px;
margin-bottom: 0;
}
.ezy__blog6-title {
font-weight: 500;
margin-top: 0 !important;
color: var(--bs-body-color);
}
.ezy__blog6-description {
color: var(--bs-body-color);
opacity: 0.6;
}
.ezy__blog6-btn {
padding: 12px 30px;
font-weight: bold;
color: #ffffff;
background-color: var(--ezy-theme-color);
border-color: var(--ezy-theme-color);
}
.ezy__blog6-btn:hover {
color: #ffffff;
background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
}
.ezy__blog6-btn-read-more {
padding: 7px 20px;
color: var(--bs-body-color);
border-color: var(--ezy-theme-color);
}
.ezy__blog6-btn-read-more:hover {
background-color: rgba(var(--ezy-theme-color-rgb), 0.9);
color: #ffffff;
}
.ezy__blog6-author a {
color: var(--ezy-theme-color);
}
/*--------------------------------------------------------------
# Blog Pagination Section
--------------------------------------------------------------*/
.blog-pagination {
padding-top: 0;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-pagination ul {
display: flex;
padding: 0;
margin: 0;
list-style: none;
}
.blog-pagination li {
margin: 0 5px;
transition: 0.3s;
}
.blog-pagination li a {
color: var(--accent-color);
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1px solid var(--accent-color);
}
.blog-pagination li a.active,
.blog-pagination li a:hover {
background: var(--accent-color);
color: var(--contrast-color);
}
.blog-pagination li a.active a,
.blog-pagination li a:hover a {
color: var(--contrast-color);
}
/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
padding-bottom: 30px;
}
.blog-details .article {
background-color: var(--surface-color);
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.blog-details .post-img {
margin: -30px -30px 20px -30px;
overflow: hidden;
}
.blog-details .title {
color: var(--heading-color);
font-size: 28px;
font-weight: 700;
padding: 0;
margin: 30px 0;
}
.blog-details .content {
margin-top: 20px;
}
.blog-details .content h3 {
font-size: 22px;
margin-top: 30px;
font-weight: bold;
}
.blog-details .content blockquote {
overflow: hidden;
background-color: color-mix(in srgb, var(--default-color), transparent 95%);
padding: 60px;
position: relative;
text-align: center;
margin: 20px 0;
}
.blog-details .content blockquote p {
color: var(--default-color);
line-height: 1.6;
margin-bottom: 0;
font-style: italic;
font-weight: 500;
font-size: 22px;
}
.blog-details .content blockquote:after {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background-color: var(--accent-color);
margin-top: 20px;
margin-bottom: 20px;
}
.blog-details .meta-top {
margin-top: 20px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-details .meta-top ul {
display: flex;
flex-wrap: wrap;
list-style: none;
align-items: center;
padding: 0;
margin: 0;
}
.blog-details .meta-top ul li+li {
padding-left: 20px;
}
.blog-details .meta-top i {
font-size: 16px;
margin-right: 8px;
line-height: 0;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.blog-details .meta-top a {
color: color-mix(in srgb, var(--default-color), transparent 40%);
font-size: 14px;
display: inline-block;
line-height: 1;
}
.blog-details .meta-bottom {
padding-top: 10px;
border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.blog-details .meta-bottom i {
color: color-mix(in srgb, var(--default-color), transparent 40%);
display: inline;
}
.blog-details .meta-bottom a {
color: color-mix(in srgb, var(--default-color), transparent 40%);
transition: 0.3s;
}
.blog-details .meta-bottom a:hover {
color: var(--accent-color);
}
.blog-details .meta-bottom .cats {
list-style: none;
display: inline;
padding: 0 20px 0 0;
font-size: 14px;
}
.blog-details .meta-bottom .cats li {
display: inline-block;
}
.blog-details .meta-bottom .tags {
list-style: none;
display: inline;
padding: 0;
font-size: 14px;
}
.blog-details .meta-bottom .tags li {
display: inline-block;
}
.blog-details .meta-bottom .tags li+li::before {
padding-right: 6px;
color: var(--default-color);
content: ",";
}
.blog-details .meta-bottom .share {
font-size: 16px;
}
.blog-details .meta-bottom .share i {
padding-left: 5px;
}
/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
padding: 10px 0;
}
.blog-comments .comments-count {
font-weight: bold;
}
.blog-comments .comment {
margin-top: 30px;
position: relative;
}
.blog-comments .comment .comment-img {
margin-right: 14px;
}
.blog-comments .comment .comment-img img {
width: 60px;
}
.blog-comments .comment h5 {
font-size: 16px;
margin-bottom: 2px;
}
.blog-comments .comment h5 a {
font-weight: bold;
color: var(--default-color);
transition: 0.3s;
}
.blog-comments .comment h5 a:hover {
color: var(--accent-color);
}
.blog-comments .comment h5 .reply {
padding-left: 10px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.blog-comments .comment h5 .reply i {
font-size: 20px;
}
.blog-comments .comment time {
display: block;
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
margin-bottom: 5px;
}
.blog-comments .comment.comment-reply {
padding-left: 40px;
}
/*--------------------------------------------------------------
# Comment Form Section
--------------------------------------------------------------*/
.comment-form {
padding-top: 10px;
}
.comment-form form {
background-color: var(--surface-color);
margin-top: 30px;
padding: 30px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.comment-form form h4 {
font-weight: bold;
font-size: 22px;
}
.comment-form form p {
font-size: 14px;
}
.comment-form form input {
background-color: var(--surface-color);
color: var(--default-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
font-size: 14px;
border-radius: 4px;
padding: 10px 10px;
}
.comment-form form input:focus {
color: var(--default-color);
background-color: var(--surface-color);
box-shadow: none;
border-color: var(--accent-color);
}
.comment-form form input::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.comment-form form textarea {
background-color: var(--surface-color);
color: var(--default-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
border-radius: 4px;
padding: 10px 10px;
font-size: 14px;
height: 120px;
}
.comment-form form textarea:focus {
color: var(--default-color);
box-shadow: none;
border-color: var(--accent-color);
background-color: var(--surface-color);
}
.comment-form form textarea::placeholder {
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.comment-form form .form-group {
margin-bottom: 25px;
}
.comment-form form .btn-primary {
border-radius: 4px;
padding: 10px 20px;
border: 0;
background-color: var(--accent-color);
color: var(--contrast-color);
}
.comment-form form .btn-primary:hover {
color: var(--contrast-color);
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider .swiper-slide{
height: 30rem;
}
.portfolio-details .portfolio-details-slider img {
width: 100%;
height: 100%;
}
.portfolio-details .portfolio-details-slider .swiper-pagination {
margin-top: 20px;
position: relative;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
width: 12px;
height: 12px;
background-color: color-mix(in srgb, var(--default-color), transparent 85%);
opacity: 1;
}
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color);
}
.portfolio-details .portfolio-info {
background-color: var(--surface-color);
padding: 30px;
box-shadow: 0px 0 30px rgba(0, 0, 0, 0.1);
}
.portfolio-details .portfolio-info h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
padding-bottom: 20px;
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
}
.portfolio-details .portfolio-info ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.portfolio-details .portfolio-info ul li+li {
margin-top: 10px;
}
.portfolio-details .portfolio-description {
padding-top: 30px;
}
.portfolio-details .portfolio-description h2 {
font-size: 26px;
font-weight: 700;
margin-bottom: 20px;
}
.portfolio-details .portfolio-description p {
padding: 0;
color: color-mix(in srgb, var(--default-color), transparent 30%);
}
/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .services-list {
background-color: var(--surface-color);
padding: 10px 30px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
margin-bottom: 20px;
}
.service-details .services-list a {
display: block;
line-height: 1;
padding: 8px 0 8px 15px;
border-left: 3px solid color-mix(in srgb, var(--default-color), transparent 70%);
margin: 20px 0;
color: color-mix(in srgb, var(--default-color), transparent 20%);
transition: 0.3s;
}
.service-details .services-list a.active {
color: var(--heading-color);
font-weight: 700;
border-color: var(--accent-color);
}
.service-details .services-list a:hover {
border-color: var(--accent-color);
}
.service-details .services-img {
margin-bottom: 20px;
}
.service-details h3 {
font-size: 26px;
font-weight: 700;
}
.service-details h4 {
font-size: 20px;
font-weight: 700;
}
.service-details p {
font-size: 15px;
}
.service-details ul {
list-style: none;
padding: 0;
font-size: 15px;
}
.service-details ul li {
padding: 5px 0;
display: flex;
align-items: center;
}
.service-details ul i {
font-size: 20px;
margin-right: 8px;
color: var(--accent-color);
}
/* -------------clients ---------- */
.clients .image {
border: 1px solid #ddd;
background-color: #ddd;
margin: 0 10px;
height: 10rem;
}
.clients .image img {
width: 100%;
height: 100%;
object-fit: fill;
}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
/* Add your styles here */
}
/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widgets-container {
background-color: var(--surface-color);
padding: 30px;
margin: 60px 0 30px 0;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
.widget-title {
color: var(--heading-color);
font-size: 20px;
font-weight: 700;
padding: 0;
margin: 0 0 20px 0;
}
.widget-item {
margin-bottom: 40px;
}
.widget-item:last-child {
margin-bottom: 0;
}
.search-widget form {
background: var(--background-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 75%);
padding: 3px 10px;
position: relative;
border-radius: 50px;
transition: 0.3s;
}
.search-widget form input[type=text] {
border: 0;
padding: 4px 10px;
border-radius: 4px;
width: calc(100% - 40px);
background-color: var(--background-color);
color: var(--default-color);
}
.search-widget form input[type=text]:focus {
outline: none;
}
.search-widget form button {
background: none;
color: var(--default-color);
position: absolute;
top: 0;
right: 0;
bottom: 0;
border: 0;
font-size: 16px;
padding: 0 16px;
transition: 0.3s;
line-height: 0;
}
.search-widget form button i {
line-height: 0;
}
.search-widget form button:hover {
color: var(--accent-color);
}
.search-widget form:is(:focus-within) {
border-color: var(--accent-color);
}
.categories-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.categories-widget ul li {
padding-bottom: 10px;
}
.categories-widget ul li:last-child {
padding-bottom: 0;
}
.categories-widget ul a {
color: color-mix(in srgb, var(--default-color), transparent 20%);
transition: 0.3s;
}
.categories-widget ul a:hover {
color: var(--accent-color);
}
.categories-widget ul a span {
padding-left: 5px;
color: color-mix(in srgb, var(--default-color), transparent 50%);
font-size: 14px;
}
.recent-posts-widget .post-item {
display: flex;
margin-bottom: 15px;
}
.recent-posts-widget .post-item:last-child {
margin-bottom: 0;
}
.recent-posts-widget .post-item img {
width: 80px;
margin-right: 15px;
}
.recent-posts-widget .post-item h4 {
font-size: 15px;
font-weight: bold;
margin-bottom: 5px;
}
.recent-posts-widget .post-item h4 a {
color: var(--default-color);
transition: 0.3s;
}
.recent-posts-widget .post-item h4 a:hover {
color: var(--accent-color);
}
.recent-posts-widget .post-item time {
display: block;
font-style: italic;
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 50%);
}
.tags-widget ul {
list-style: none;
padding: 0;
margin: 0;
}
.tags-widget ul li {
display: inline-block;
}
.tags-widget ul a {
background-color: color-mix(in srgb, var(--default-color), transparent 94%);
color: color-mix(in srgb, var(--default-color), transparent 30%);
border-radius: 50px;
font-size: 14px;
padding: 5px 15px;
margin: 0 6px 8px 0;
display: inline-block;
transition: 0.3s;
}
.tags-widget ul a:hover {
background: var(--accent-color);
color: var(--contrast-color);
}
.tags-widget ul a span {
padding-left: 5px;
color: color-mix(in srgb, var(--default-color), transparent 60%);
font-size: 14px;
}
/*coming soon blog page*/
.ezy__comingsoon5 {
/* Bootstrap variables */
--bs-body-color: #262830;
--bs-body-bg: #fff;
/* Easy Frontend variables */
--ezy-theme-color: rgb(13, 110, 253);
--ezy-theme-color-rgb: 13, 110, 253;
--ezy-svg-color: #5bccc7;
background-color: var(--bs-body-bg);
display: flex;
align-items: flex-end;
padding: 35px 0 0;
position: relative;
z-index: 1;
}
@media (min-width: 768px) {
.ezy__comingsoon5 {
padding: 50px 0 0;
}
}
/* Gray Block Style */
.gray .ezy__comingsoon5,
.ezy__comingsoon5.gray {
/* Bootstrap variables */
--bs-body-bg: rgb(246, 246, 246);
}
/* Dark Gray Block Style */
.dark-gray .ezy__comingsoon5,
.ezy__comingsoon5.dark-gray {
/* Bootstrap variables */
--bs-body-color: #ffffff;
--bs-body-bg: rgb(30, 39, 53);
/* Easy Frontend variables */
--ezy-svg-color: rgb(11, 23, 39);
}
/* Dark Block Style */
.dark .ezy__comingsoon5,
.ezy__comingsoon5.dark {
/* Bootstrap variables */
--bs-body-color: #ffffff;
--bs-body-bg: rgb(11, 23, 39);
/* Easy Frontend variables */
--ezy-svg-color: rgb(30, 39, 53);
}
/* heading and sub-heading */
.ezy__comingsoon5-heading {
font-weight: 700;
font-size: 32px;
line-height: 1;
color: var(--bs-body-color);
}
@media (min-width: 768px) {
.ezy__comingsoon5-heading {
font-size: 45px;
}
}
.ezy__comingsoon5-sub-heading {
font-size: 18px;
line-height: 30px;
color: var(--bs-body-color);
opacity: 0.8;
}
.ezy__comingsoon5 svg {
display: none;
z-index: -1;
color: var(--ezy-svg-color);
}
@media (min-width: 567px) {
.ezy__comingsoon5 svg {
display: block;
z-index: -1;
}
}