/* 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: "Montserrat", sans-serif;
--nav-font: "Open Sans", sans-serif;
}
:root {
--background-color: #ffffff;
--default-color: #444444;
--heading-color: #222222;
--accent-color: #d8311b;
--surface-color: #ffffff;
--contrast-color: #ffffff;
}
:root {
--nav-color: #222222;
--nav-hover-color: #d8311b;
--nav-mobile-background-color: #ffffff;
--nav-dropdown-background-color: #ffffff;
--nav-dropdown-color: #222222;
--nav-dropdown-hover-color: #d8311b;
}
.light-background {
--background-color: #f5f9ff;
--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;
}
p{text-align: justify;}
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);
}
/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
display: none;
background: #df1529;
color: #ffffff;
text-align: left;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .sent-message {
display: none;
color: #ffffff;
background: #059652;
text-align: center;
padding: 15px;
margin-bottom: 24px;
font-weight: 600;
}
.php-email-form .loading {
display: none;
background: var(--surface-color);
text-align: center;
padding: 15px;
margin-bottom: 24px;
}
.php-email-form .loading:before {
content: "";
display: inline-block;
border-radius: 50%;
width: 24px;
height: 24px;
margin: 0 10px -6px 0;
border: 3px solid var(--accent-color);
border-top-color: var(--surface-color);
animation: php-email-form-loading 1s linear infinite;
}
@keyframes php-email-form-loading {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
color: var(--default-color);
transition: all 0.5s;
z-index: 997;
background-color: var(--background-color);
}
.header .topbar {
background-color: var(--accent-color);
height: 40px;
padding: 0 30px;
font-size: 14px;
transition: all 0.5s;
width: 100%;
}
.header .topbar>div {
width: 100%;
}
.header .topbar .contact-info i {
font-style: normal;
color: var(--contrast-color);
}
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
padding-left: 5px;
color: var(--contrast-color);
}
@media (max-width: 575px) {
.header .topbar .contact-info i a,
.header .topbar .contact-info i span {
font-size: 13px;
}
}
.header .topbar .contact-info i a {
line-height: 0;
transition: 0.3s;
}
.header .topbar .contact-info i a:hover {
color: var(--contrast-color);
text-decoration: underline;
}
.header .topbar .social-links a {
color: #ffffff;
line-height: 0;
transition: 0.3s;
margin-left: 20px;
}
.header .topbar .social-links a:hover {
color: var(--contrast-color);
}
.header .branding {
background-color: var(--background-color);
min-height: 60px;
padding: 10px 30px;
}
.header .logo {
line-height: 1;
padding: 10px 10px !important;
}
.header .logo img {
/* max-height: 36px; */
margin-right: 8px;
}
.header .logo h1 {
font-size: 30px;
margin: 0;
font-weight: 700;
color: var(--heading-color);
}
.header .nav_wrap {
display: flex;
align-items: center;
}
.scrolled .header {
box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}
.scrolled .header .topbar {
height: 0;
visibility: hidden;
overflow: hidden;
}
.header .btn-getstarted,
.header .btn-getstarted:focus {
color: var(--contrast-color);
background: var(--accent-color);
font-size: 14px;
padding: 8px 25px;
margin: 0 0 0 30px;
border-radius: 50px;
transition: 0.3s;
}
.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 15%);
}
@media (max-width: 1200px) {
.header .btn-getstarted {
order: 2;
margin: 0 15px 0 0;
padding: 6px 15px;
}
.header .navmenu {
order: 3;
}
}
/*--------------------------------------------------------------
# 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;
margin-left: 10px;
}
.navmenu a,
.navmenu a:focus {
color: var(--nav-color);
padding: 18px 12px;
font-size: 15px;
font-family: var(--nav-font);
font-weight: 600;
display: flex;
align-items: center;
justify-content: space-between;
white-space: nowrap;
transition: 0.3s;
text-transform: uppercase;
}
.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) !important;
}
.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);
}
.navmenu .dropdown:hover>ul {
opacity: 1;
top: 100%;
visibility: visible;
}
.navmenu .dropdown .dropdown ul {
top: 0;
right: -90%;
visibility: hidden;
left: auto;
}
.navmenu .dropdown .dropdown:hover>ul {
opacity: 1;
top: 0;
right: -100%;
visibility: visible;
left: auto;
}
}
/* Navmenu - Mobile */
@media (max-width: 1199px) {
.mobile-nav-toggle {
color: var(--nav-color);
font-size: 28px;
line-height: 0;
margin-right: 10px;
cursor: pointer;
transition: color 0.3s;
}
.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: #ffffff;
font-size: 14px;
padding-bottom: 0px;
position: relative;
}
.footer .footerbg {
background-color: #f3f9ff;
}
.footer .footer-newsletter {
background-color: color-mix(in srgb, var(--accent-color), transparent 96%);
padding: 50px 0;
}
.footer .footer-newsletter h4 {
font-size: 24px;
}
.footer .footer-newsletter .newsletter-form {
margin-top: 30px;
margin-bottom: 15px;
padding: 6px 8px;
position: relative;
background-color: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
display: flex;
transition: 0.3s;
border-radius: 4px;
}
.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(--surface-color);
color: var(--default-color);
}
.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 .footer-top {
padding-top: 50px;
}
.footer .social-links a {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 4px;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 50%);
font-size: 16px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
margin-right: 10px;
transition: 0.3s;
}
.footer .social-links a:hover {
color: var(--accent-color);
border-color: var(--accent-color);
}
.footer h4 {
font-size: 16px;
font-weight: bold;
position: relative;
padding-bottom: 12px;
}
.footer .footer-links {
margin-bottom: 30px;
}
.footer .footer-links ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer .footer-links ul i {
margin-right: 3px;
font-size: 12px;
line-height: 0;
color: var(--accent-color);
}
.footer .footer-links ul li {
padding: 7px 0;
display: flex;
align-items: center;
}
.footer .footer-links ul li:first-child {
padding-top: 0;
}
.footer .footer-links ul a {
display: inline-block;
color: color-mix(in srgb, var(--default-color), transparent 20%);
line-height: 1;
}
.footer .footer-links ul a:hover {
color: var(--accent-color);
}
.footer .footer-about a {
color: var(--heading-color);
font-size: 14px;
font-weight: 400;
font-family: var(--heading-font);
}
.footer .footer-contact p {
margin-bottom: 5px;
}
.footer .copyright {
padding-top: 25px;
padding-bottom: 25px;
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 .hero-waves {
display: block;
width: 100%;
height: 60px;
position: relative;
}
.footer .wave1 use {
animation: move-forever1 10s linear infinite;
animation-delay: -2s;
fill: #4b92c7;
opacity: 0.6;
}
.footer .wave2 use {
animation: move-forever2 8s linear infinite;
animation-delay: -2s;
fill: #4b92c7;
opacity: 0.4;
}
.footer .wave3 use {
animation: move-forever3 6s linear infinite;
animation-delay: -2s;
fill: #f3f9ff;
}
@keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
}
100% {
transform: translate(-90px, 0%);
}
}
@keyframes move-forever2 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
@keyframes move-forever3 {
0% {
transform: translate(-90px, 0%);
}
100% {
transform: translate(85px, 0%);
}
}
/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
overflow: hidden;
background-color: var(--background-color);
transition: all 0.6s ease-out;
width: 100%;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
#preloader div {
width: 13px;
height: 13px;
background-color: var(--accent-color);
border-radius: 50%;
animation-timing-function: cubic-bezier(0, 1, 1, 0);
position: absolute;
left: 50%;
}
#preloader div:nth-child(1) {
left: calc(50% + 8px);
animation: animate-preloader-1 0.6s infinite;
}
#preloader div:nth-child(2) {
left: calc(50% + 8px);
animation: animate-preloader-2 0.6s infinite;
}
#preloader div:nth-child(3) {
left: calc(50% + 32px);
animation: animate-preloader-2 0.6s infinite;
}
#preloader div:nth-child(4) {
left: calc(50% + 56px);
animation: animate-preloader-3 0.6s infinite;
}
@keyframes animate-preloader-1 {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
@keyframes animate-preloader-3 {
0% {
transform: scale(1);
}
100% {
transform: scale(0);
}
}
@keyframes animate-preloader-2 {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(24px, 0);
}
}
/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
position: fixed;
visibility: hidden;
opacity: 0;
right: 15px;
bottom: 55px;
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 {
--background-color: color-mix(in srgb, var(--default-color), transparent 96%);
color: var(--default-color);
background-color: var(--background-color);
padding: 25px 0;
position: relative;
}
.page-title h1 {
font-size: 24px;
font-weight: 600;
}
.page-title .breadcrumbs ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
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 70%);
}
/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
color: var(--default-color);
background-color: var(--background-color);
padding: 60px 0;
scroll-margin-top: 78px;
/* overflow: clip; */
}
@media (max-width: 1199px) {
section,
.section {
scroll-margin-top: 60px;
}
}
/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
text-align: center;
padding-bottom: 60px;
position: relative;
}
.section-title h2 {
font-size: 13px;
letter-spacing: 1px;
font-weight: 700;
padding: 8px 20px;
margin: 0;
background: color-mix(in srgb, var(--accent-color), transparent 90%);
color: var(--accent-color);
display: inline-block;
text-transform: uppercase;
border-radius: 50px;
font-family: var(--default-font);
}
.section-title p {
color: var(--heading-color);
margin: 10px 0 0 0;
font-size: 32px;
font-weight: 700;
font-family: var(--heading-font);
}
.section-title p .description-title {
color: var(--accent-color);
}
/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
width: 100%;
min-height: 65vh;
position: relative;
padding: 0px 0;
display: flex;
align-items: center;
justify-content: center;
/* background: url("../img/hero-bg.jpg") top left;
background-size: cover; */
}
.hero img {
width: 100%;
}
.hero:before {
content: "";
/* background: color-mix(in srgb, var(--background-color), transparent 30%); */
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
.hero .container {
position: absolute;
/* inset: 0; */
display: block;
width: 100%;
/* height: 100%; */
object-fit: cover;
z-index: 1;
}
.hero h1 {
margin: 0;
font-size: 48px;
font-weight: 700;
line-height: 56px;
color: #fff;
text-shadow: 5px 5px #3a3b3c;
}
.hero h1 span {
color: var(--accent-color);
}
.hero p {
color: #fff;
margin: 5px 0 30px 0;
font-size: 20px;
font-weight: 400;
font-size: 14px;
}
.hero p a {
color: #fff;
}
.hero p a:hover {
color: #ff0000;
}
.hero .btn-get-started {
color: var(--contrast-color);
background: var(--accent-color);
font-family: var(--heading-font);
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 30px;
border-radius: 4px;
transition: 0.5s;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.hero .btn-get-started:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 15%);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.hero .btn-watch-video {
font-size: 16px;
transition: 0.5s;
margin-left: 25px;
color: var(--default-color);
font-weight: 600;
}
.hero .btn-watch-video i {
color: var(--accent-color);
font-size: 32px;
transition: 0.3s;
line-height: 0;
margin-right: 8px;
}
.hero .btn-watch-video:hover {
color: var(--accent-color);
}
.hero .btn-watch-video:hover i {
color: color-mix(in srgb, var(--accent-color), transparent 15%);
}
.hero .animated {
animation: up-down 2s ease-in-out infinite alternate-reverse both;
}
@media (max-width: 640px) {
.hero h1 {
font-size: 28px;
line-height: 36px;
}
.hero p {
font-size: 18px;
line-height: 24px;
margin-bottom: 30px;
}
.hero .btn-get-started,
.hero .btn-watch-video {
font-size: 13px;
}
}
/* @keyframes up-down {
0% {
transform: translateY(10px);
}
100% {
transform: translateY(-10px);
}
} */
/*--------------------------------------------------------------
# Featured Services Section
--------------------------------------------------------------*/
.featured-services .service-item {
background-color: var(--surface-color);
box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1);
padding: 50px 30px;
transition: all 0.3s ease-in-out;
height: 100%;
position: relative;
z-index: 1;
}
.featured-services .service-item:before {
content: "";
position: absolute;
background: var(--accent-color);
inset: 100% 0 0 0;
transition: all 0.3s;
z-index: -1;
}
.featured-services .service-item .icon {
margin-bottom: 10px;
}
.featured-services .service-item .icon i {
color: var(--accent-color);
font-size: 36px;
transition: ease-in-out 0.3s;
}
.featured-services .service-item h4 {
font-weight: 700;
margin-bottom: 15px;
font-size: 20px;
}
.featured-services .service-item h4 a {
color: var(--heading-color);
transition: ease-in-out 0.3s;
}
.featured-services .service-item p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
transition: ease-in-out 0.3s;
}
.featured-services .service-item:hover h4 a,
.featured-services .service-item:hover .icon i,
.featured-services .service-item:hover p {
color: var(--contrast-color);
}
.featured-services .service-item:hover:before {
background: var(--accent-color);
inset: 0;
border-radius: 0px;
}
/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
background: url(../images/bee-bg.png) no-repeat 50% 0% #f5f9ff;
background-size: cover;
padding: 77px 0;
}
.about .about-content h3 {
font-weight: 400;
font-size: 40px;
margin-bottom: 40px;
}
.about .about-content p {
color: #000;
font-size: 16px;
line-height: 1.5;
margin-bottom: 24px;
/* font-family: Gilroy, sans-serif; */
line-height: 28px;
}
.about .about-content ul {
list-style: none;
padding: 0;
}
.about .about-content ul li {
display: flex;
align-items: flex-start;
margin-bottom: 35px;
}
.about .about-content ul li:first-child {
margin-top: 35px;
}
.about .about-content ul i {
background: var(--surface-color);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 64px;
height: 64px;
font-size: 24px;
margin-right: 15px;
color: var(--accent-color);
border-radius: 50px;
}
.about .about-content ul h4 {
font-size: 18px;
font-weight: 600;
}
.about .about-content ul p {
font-size: 15px;
}
.about .about-content p:last-child {
margin-bottom: 0;
}
.pleasure__gallery {
grid-column-gap: 20px;
grid-row-gap: 20px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(8, 1fr);
height: 515px;
padding-left: 35px;
width: 100%;
}
.pleasure__gallery .gallery-item {
border-radius: 15px;
overflow: hidden;
position: relative;
}
.pleasure__gallery .item-1 {
grid-area: 1 / 2 / 4 / 3;
}
.pleasure__gallery .item-2 {
grid-area: 4 / 2 / 9 / 3;
}
.pleasure__gallery .item-3 {
grid-area: 2 / 1 / 8 / 2;
}
.pleasure__gallery .item-4 {
grid-area: 3 / 3 / 7 / 4;
}
.object-fit>img {
height: 100%;
left: 50%;
-o-object-fit: cover;
object-fit: cover;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
.object-fit {
background-position: 50%;
background-size: cover;
}
.about .btn-get-started {
color: var(--contrast-color);
background: var(--accent-color);
font-family: var(--heading-font);
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 30px;
border-radius: 4px;
transition: 0.5s;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.about .btn-get-started:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 15%);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.about .image {
/* position: absolute;
top: 0%;
right: 0px;
height: 706px;
width: auto; */
position: absolute;
top: 4%;
right: 0px;
height: 720px;
width: auto;
}
.about_inner {
position: relative;
padding: 60px 0px;
}
.about_inner h1 {
font-size: 55px;
color: #222222;
padding-bottom: 30px;
}
.about_inner .compny_discription {
position: relative;
z-index: 3;
}
.about_inner .compny_discription h2 {
font-size: 2.5rem;
margin: 20px -185px 10px 0;
color: #222222;
}
.about_inner .compny_discription h3 {
font-size: 28px;
padding-bottom: 20px;
color: #d9331d;
}
.about_inner .compny_discription p {
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 26px;
text-align: justify;
margin: 0px 20px 20px 0;
}
.about_inner .about_img {}
.about_inner .about_img img {
width: 100%;
position: relative;
z-index: 2;
}
.about_inner .about_img:before {
content: "";
width: 292px;
height: 715px;
background-image: none;
margin: -40px auto 0 -180px;
background-color: #fcdfc6;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
.about_inner .about_img:after {
content: "";
width: 562px;
height: 381px;
margin: -351px 50px 0 auto;
background: url(../images/grid-line.png) no-repeat 50% 0%;
position: absolute;
bottom: -65px;
right: 0;
z-index: 1;
background-size: 100%;
}
.about_inner .scroll_tab {
position: relative;
max-height: 510px;
overflow: auto;
}
.what_wedo_inner {
position: relative;
padding: 60px 0px 90px;
}
.what_wedo_inner .compny_discription {
position: relative;
z-index: 3;
padding-top: 90px;
padding-left: 20px;
}
.what_wedo_inner .compny_discription h2 {
font-size: 2.5rem;
margin: 0px 0px 20px 0;
color: #222222;
}
.what_wedo_inner .compny_discription h3 {
font-size: 28px;
padding-bottom: 20px;
color: #d9331d;
}
.what_wedo_inner .compny_discription p {
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 26px;
text-align: justify;
margin: 0px 20px 20px 0;
}
.what_wedo_inner .about_img {}
.what_wedo_inner .about_img img {
width: 100%;
position: relative;
z-index: 2;
padding-left: 30px;
}
.what_wedo_inner .about_img:before {
content: "";
width: 816px;
height: 665px;
background-image: none;
margin: 60px auto 0 -180px;
background-color: #fcdfc6;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.what_wedo_inner .about_img:after {
content: "";
width: 590px;
height: 799px;
/*margin: -351px 50px 0 auto;*/
background: url(../images/grid-line.png) no-repeat 50% 0%;
position: absolute;
top: 70px;
left: 0;
z-index: 1;
background-size: 100%;
}
.our_history_inner {
position: relative;
padding: 60px 0px 100px;
}
.our_history_inner .compny_discription {
position: relative;
z-index: 3;
padding-top: 90px;
padding-left: 20px;
}
.our_history_inner .compny_discription h2 {
font-size: 2.5rem;
margin: 0px 0px 20px 0;
color: #222222;
}
.our_history_inner .compny_discription h3 {
font-size: 28px;
padding-bottom: 20px;
color: #d9331d;
}
.our_history_inner .compny_discription p {
font-size: 16px;
margin-top: 20px;
margin-bottom: 20px;
line-height: 26px;
text-align: justify;
margin: 0px 20px 20px 0;
}
.our_history_inner .about_img {}
.our_history_inner .about_img img {
width: 90%;
position: relative;
z-index: 2;
padding-right: 30px;
padding-top: 100px;
}
.our_history_inner .about_img:before {
content: "";
width: 79%;
height: 570px;
background-image: none;
margin: 50px auto 0 0px;
background-color: #f2f2f2;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.our_history_inner .about_img:after {
content: "";
width: 373px;
height: 492px;
/*margin: -351px 50px 0 auto;*/
background: url(../images/grid-line.png) no-repeat 50% 0%;
position: absolute;
top: 0px;
right: 0;
z-index: 1;
background-size: cover;
}
.our_history_inner .scroll_tab {
position: relative;
max-height: 390px;
overflow: auto;
}
.u-bg-default:before {
content: "";
width: 418px;
height: 560px;
background-image: none;
margin: 60px auto 0 0px;
background-color: #fcdfc6;
position: absolute;
right: 50px;
top: 80px;
}
.scroll_tab {
position: relative;
max-height: 410px;
overflow: auto;
}
.vision-value {
background: transparent;
padding: 80px 0px;
margin-bottom: 100px;
}
.vision-value h2 {
font-size: 2.5rem;
margin: 0px 0px 20px 0;
color: #222222;
text-align: center;
}
.vision-value .icon-box {
position: relative;
margin: 0 auto;
width: 200px;
height: 200px;
background: var(--contrast-color);
color: #333;
border: 6px solid #cdcdcd;
border-radius: 100%;
margin-bottom: 20px;
padding: 35px 15px;
font-size: 18px;
line-height: 28px;
transition: ease-in-out 0.3s;
text-align: center;
box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 28%);
}
.vision-value .icon-box .ico-img img {
width: 40px;
padding-bottom: 10px;
}
.vision-value .icon-box:after {
content: "";
width: 279px;
height: 317px;
/*margin: -351px 50px 0 auto;*/
background: url(../images/left-circle-bg.png) no-repeat 50% 0%;
position: absolute;
top: -55px;
right: -42px;
z-index: -1;
background-size: 100%;
}
.vision-value .value-head {
position: relative;
top: -70px;
text-align: center;
}
.vision-value h4 {
text-align: center;
background: #ccc;
display: inline-block;
padding: 10px 30px;
border-radius: 10px;
font-size: 30px;
}
.missiontxt {
min-height: 299px;
height: auto;
max-width: 1098px;
width: 100%;
margin: 50px auto;
text-align: center;
background: #ffffff;
padding: 30px;
border-radius: 20px;
box-shadow: 0px 5px 25px 0px rgb(0 0 0 / 28%);
}
.missiontxt img {
width: 100px;
}
.missiontxt h3 {
font-weight: 400;
font-size: 2.25rem;
line-height: 1.1;
margin-top: 20px;
margin-bottom: 20px;
/* margin: 67px 60px 0; */
}
.missiontxt p {
font-size: 1.5rem;
margin: 40px 60px;
}
/*--------------------------------------------------------------
# Vision Mission Section
--------------------------------------------------------------*/
.core_value {}
.core_value h3 {
font-size: 45px;
text-align: right;
}
.core_value h3 span {
font-size: 50px;
font-weight: 700;
color: #c50d11;
}
.core_value p {
font-size: 26px;
text-align: right;
}
.value_txt {
padding-left: 50px;
position: relative;
}
.value_txt h3 {
font-size: 45px;
text-align: left;
}
.value_txt h3 span {
font-size: 50px;
font-weight: 700;
color: #c50d11;
}
.value_txt:before {
content: "";
border: 1px solid #ff0000;
width: 1px;
height: 250px;
position: absolute;
top: 0px;
left: 15px;
}
.value_txt ul {
list-style: none;
padding: 0;
margin: 0px;
}
.value_txt ul li {
display: flex;
align-items: flex-start;
margin-bottom: 15px;
display: inline-block;
padding: 0px 15px;
width: 24%;
text-align: left;
vertical-align: top;
margin-top: 35px;
font-size: 18px;
line-height: 24px;
position: relative;
}
.value_txt ul li:first-child {
margin-top: 35px;
}
.value_txt ul i {
display: inline-block;
flex-shrink: 0;
line-height: 64px;
margin-bottom: 15px;
color: var(--accent-color);
border-radius: 50px;
text-align: left;
}
.value_txt ul i img {
width: 100%;
}
.value_txt ul h4 {
font-size: 18px;
font-weight: 600;
}
.value_txt ul p {
font-size: 15px;
}
.value_txt p:last-child {
margin-bottom: 0;
}
.value_txt ul li:after {
content: "";
height: 95px;
background-color: #e9e9ed;
padding: 1px;
-ms-transform: rotate(8deg);
-webkit-transform: rotate(8deg);
transform: rotate(8deg);
position: absolute;
right: 0px;
top: 0px;
width: 1px;
}
.value_txt ul li:last-child:after {
padding: 0px;
background-color: #fff;
}
.card-shadow {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.card-shadow:before {
content: " ";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.2) 27%, rgba(0, 0, 0, 0.65) 90%);
}
.card-box-a .img-a,
.card-box-a .img-b,
.card-box-b .img-a,
.card-box-b .img-b {
transition: 0.8s all ease-in-out;
width: 100%;
object-fit: cover;
height: 260px;
}
.card-box-a,
.card-box-b,
.card-box-d {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
height: 100%;
}
.card-overlay {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.card-body-a .droplinks{
display:none;
transition: all 0.5s ease-in;
}
.card-body-a .droplinks a{
display:block;
transition: all 0.5s ease-in;
}
.card-box-a:hover .droplinks{
display:block;
transition: all 0.5s ease-in;
}
.card-overlay-a-content {
transition: all 0.5s ease-in;
position: absolute;
width: 100%;
bottom: 0px;
z-index: 2;
}
.card-header-a .card-title-a {
color: #ffffff;
margin-bottom: 0;
text-transform: uppercase;
padding: 0rem 1rem 0.5rem 1rem;
font-weight: 700;
font-size: 24px;
}
.card-header-a .card-title-a a {
color: #ffffff;
text-decoration: none;
}
.card-box-a:hover .img-a,
.card-box-a:hover .img-b,
.card-box-b:hover .img-a,
.card-box-b:hover .img-b {
transform: scale(1.2);
}
.card-body-a {
z-index: 2;
transition: all 0.5s ease-in;
padding: 0rem 1rem 2rem 1rem;
}
.card-body-a a {
color: #ffffff;
}
.card-box-a:hover .card-body-a {
padding-bottom: 1rem;
}
.card-box-a:hover .card-overlay-a-content {
bottom: 50px;
}
.our_business {
background: url(../images/banner-fmcg1.jpg) repeat 50% 0%;
background-size: 15%;
/*min-height: 120vh; */
width: 100%;
padding: 60px 20px;
position: relative;
background: #ebf4fd;
}
.our_business .overlay {
/* position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0; */
/* background-color: rgba(0, 0, 0, 0.5); */
background-color: rgb(0 0 0 / 12%);
}
.our_business .image-content-box {
/* max-width: 1000px; */
width: 100%;
padding: 24px;
position: relative;
/* left: 50%;
top: 50%;
transform: translate(-50%, -50%); */
right: initial;
border-radius: 7px;
background: #FCFAF8;
box-shadow: 0px 25px 60px rgba(0, 0, 0, .16);
}
.card-shadow .img-box-a img {}
.our_business .image-content-box h3 {
font-size: 38px;
font-weight: 500;
line-height: 1.1;
color: #222222;
letter-spacing: 0px;
text-align: center;
}
.our_business .image-content-box p {
font-size: 16px;
font-weight: 400;
color: #222222;
letter-spacing: 0.32px;
margin-bottom: 35px;
opacity: 1;
text-align: center;
}
.our_business .image-content-box h3 span {
font-size: 42px;
font-weight: 700;
color: #c50d11;
}
/*--------------------------------------------------------------
# Features-Location Section
--------------------------------------------------------------*/
.house_hold_products {}
.house_hold_products h1 {
font-size: 3.5rem;
color: #222222;
}
.features-location {
padding-top: 80px;
padding-bottom: 80px;
}
.features-location .features-item+.features-item {
margin-top: 80px;
}
@media (max-width: 640px) {
.features-location .features-item+.features-item {
margin-top: 40px;
}
}
.features-location .features-item h3 {
font-size: 30px;
color: #000000;
margin-bottom: 0px;
}
.features-location .features-item h4 {
font-size: 40px;
color: #0e3862;
line-height: 45px;
}
.features-location .features-item .shopping_icons {
display: flex;
}
.features-location .features-item .shopping_icons a {
text-align: center;
border-right: 1px solid #ccc;
}
.features-location .features-item .shopping_icons a:last-child {
border-right: 0px solid #ccc;
}
.features-location .features-item .shopping_icons span {
font-size: 12px;
}
.features-location .features-item p:last-child {
margin-bottom: 0;
}
.features-location .features-item .more-btn {
background: #c93531;
padding: 10px 25px;
margin-top: 25px;
border-radius: 50px;
color: #fff;
display: inline-block;
z-index: 9;
position: relative;
transition: 0.3s;
}
.features-location .features-item .more-btn:hover {
background: #038dc8;
}
.features-location .features-item .more-btn i {
padding-left: 10px;
}
.location-w3 .states {
position: absolute;
right: 0;
top: 0;
font-size: 35px;
padding: 10px;
background: #c93531;
height: 100%;
writing-mode: vertical-lr;
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
text-align: center;
color: #fff;
line-height: 35px;
}
.location-w3 img {
width: 100%;
object-fit: cover;
height: 450px;
border-radius: 10px;
}
.location-w3 .states.lft {
left: 0;
right: auto;
}
.features-location .features-item ul {
list-style: none;
padding: 0;
}
.features-location .features-item .pro-brand-slider .owl-item {
border-right: 0px solid #d6d6d6;
}
.features-location .features-item .pro-brand-slider .owl-item:last-child {
border-right: 0px solid #0e3862;
}
.features-location .features-item .pro-brand-slider .count-bx {
margin-top: 20px;
padding: 0px 6px 0 6px;
display: block;
text-align: center;
vertical-align: top;
}
.pro-brand-slider .owl-nav {
position: absolute;
top: 50%;
transform: translateY(-50px);
left: 0;
right: 0;
opacity: 1;
transition: all .3s;
}
.pro-brand-slider.owl-theme .owl-nav [class*=owl-]:hover {
background: #c53834 !important;
}
.pro-brand-slider .owl-nav button.owl-prev span.bi.bi-chevron-left.fa-2x{font-size: 24px;line-height: 1;vertical-align: middle;}
.pro-brand-slider .owl-nav button.owl-next span.bi.bi-chevron-right.fa-2x{font-size: 24px;line-height: 1;vertical-align: middle;}
.pro-brand-slider .owl-prev,
.pro-brand-slider .owl-next {
width: 30px;
height: 30px;
transform: translateY(-50%);
}
.pro-brand-slider .owl-prev {
left: -20px;
}
.pro-brand-slider .owl-next {
right: -20px;
}
.features-location .features-item .pro-brand-slider .count-bx p {
text-transform: uppercase;
padding-top: 5px;
font-size: 14px;
margin-bottom: 0;
line-height: 18px;
text-align: center;
}
.features-location .features-item .pro-brand-slider .count-bx a {
font-size: 11px;
}
.features-location .features-item .pro-brand-slider i {
flex-shrink: 0;
font-size: 30px;
color: #0e3862;
margin-right: 0px;
text-align: center;
}
.features-location .features-item .pro-brand-slider i img {
width: 100px;
border-radius: 100px;
text-align: center;
display: inline-block;
border: 1px solid #ccc;
}
.features-location .features-item ul h5 {
font-size: 25px;
color: #038dc8;
margin: 0px;
}
.features-location .features-item p:last-child {
margin-bottom: 0;
}
.features-location .features-item ul p {
font-size: 13px;
margin-bottom: 0px;
padding-bottom: 0px;
color: #0e3862;
}
.features-location .features-item .cover-bor1 {
right: 0;
left: auto;
margin: 0px -100px 0 0px !important;
z-index: 9;
}
.features-location .features-item .cover-bor {
position: relative;
left: 0px;
top: 30px;
background: #fff;
padding: 50px 50px;
border-radius: 10px;
margin: 0px 0px 0 -100px;
transform: scale(1);
-webkit-box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
-moz-box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0 50px 0 rgba(0, 0, 0, .1);
}
.features-location .features-item .establish {
margin-top: 35px;
width: 100%;
display: block;
}
.footware_products {
padding-top: 50px;
padding-bottom: 50px;
}
.footware_products .about-content h3 {
font-size: 32px;
line-height: 42px;
letter-spacing: 0;
text-transform: none;
font-style: normal;
}
.footware_products .about-content h3 span {
font-size: 42px;
font-weight: 700;
color: #c50d11;
}
.footware_products .about-content ul {
list-style: none;
padding: 0;
}
.footware_products .about-content ul li {
display: flex;
align-items: flex-start;
margin-bottom: 35px;
}
.footware_products .about-content ul li:first-child {
margin-top: 35px;
}
.footware_products .about-content ul i {
background: var(--surface-color);
box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.1);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 64px;
height: 64px;
font-size: 24px;
margin-right: 15px;
color: var(--accent-color);
border-radius: 50px;
}
.footware_products .about-content ul h4 {
font-size: 18px;
font-weight: 600;
}
.footware_products .about-content ul p {
font-size: 15px;
}
.footware_products .about-content p {
margin: 25px 0 15px 0;
font-size: 14px;
line-height: 24px;
letter-spacing: 0.5px;
text-align: justify;
font-family: "Museo Sans 500 Medium", sans-serif;
color: #000000;
font-weight: 500;
}
.footware_products .about-content p:last-child {
margin-bottom: 0;
}
.z-index-minus-1 {
z-index: -1;
}
.bottom-minus-50px {
bottom: -50px;
}
.right-minus-50px {
right: -50px;
}
[data-top-bottom] {
transition: transform .65s cubic-bezier(.23, 1, .32, 1);
}
.sml-txt {
font-size: 14px;
background: -webkit-linear-gradient(right, rgb(44 173 237), rgba(255, 255, 255, 0.0));
background: linear-gradient(to right, rgb(42 174 242), rgba(255, 255, 255, 0.0));
border-radius: 100px !important;
color: #000000;
padding: 0px 25px;
font-weight: 700 !important;
line-height: 42px;
display: inline-block !important;
margin-bottom: 20px !important;
}
/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .progress {
height: 60px;
display: block;
background: none;
border-radius: 0;
}
.skills .progress .skill {
color: var(--heading-color);
padding: 0;
margin: 0 0 6px 0;
text-transform: uppercase;
display: block;
font-weight: 600;
font-family: var(--heading-font);
}
.skills .progress .skill .val {
float: right;
font-style: normal;
}
.skills .progress-bar-wrap {
background: color-mix(in srgb, var(--default-color), transparent 90%);
height: 10px;
}
.skills .progress-bar {
width: 1px;
height: 10px;
transition: 0.9s;
background-color: var(--accent-color);
}
/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats i {
background-color: var(--accent-color);
color: var(--contrast-color);
border: 6px solid var(--surface-color);
width: 64px;
height: 64px;
font-size: 24px;
border-radius: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.stats .stats-item {
background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
margin-top: -32px;
padding: 40px 30px 35px 30px;
width: 100%;
position: relative;
text-align: center;
border-radius: 4px;
z-index: 0;
}
.stats .stats-item span {
font-size: 36px;
display: block;
font-weight: 700;
}
.stats .stats-item p {
padding: 0;
margin: 0;
font-family: var(--heading-font);
font-size: 16px;
}
/*--------------------------------------------------------------
# Clients Section
--------------------------------------------------------------*/
.clients {
padding: 25px 0;
}
.clients .swiper {
padding: 10px 0;
}
.clients .swiper-wrapper {
height: auto;
}
.clients .swiper-slide img {
transition: 0.3s;
}
.clients .swiper-slide img:hover {
transform: scale(1.1);
}
/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-item {
background-color: var(--surface-color);
text-align: center;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
padding: 80px 20px;
transition: border ease-in-out 0.3s;
height: 100%;
}
.services .service-item .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: var(--accent-color);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: 0.3s;
}
.services .service-item .icon i {
color: var(--contrast-color);
font-size: 28px;
transition: ease-in-out 0.3s;
}
.services .service-item h3 {
font-weight: 700;
margin: 10px 0 15px 0;
font-size: 22px;
transition: 0.3s;
}
.services .service-item p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.services .service-item:hover {
border-color: var(--accent-color);
}
.services .service-item:hover h3 {
color: var(--accent-color);
}
/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials {
padding: 80px 0;
position: relative;
}
.testimonials:before {
content: "";
background: color-mix(in srgb, var(--background-color), transparent 30%);
position: absolute;
inset: 0;
z-index: 2;
}
.testimonials .testimonials-bg {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.testimonials .container {
position: relative;
z-index: 3;
}
.testimonials .testimonials-carousel,
.testimonials .testimonials-slider {
overflow: hidden;
}
.testimonials .testimonial-item {
text-align: center;
}
.testimonials .testimonial-item .testimonial-img {
width: 100px;
border-radius: 50%;
border: 6px solid color-mix(in srgb, var(--default-color), transparent 85%);
margin: 0 auto;
}
.testimonials .testimonial-item h3 {
font-size: 20px;
font-weight: bold;
margin: 10px 0 5px 0;
}
.testimonials .testimonial-item h4 {
font-size: 14px;
margin: 0 0 15px 0;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.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(--default-color), transparent 40%);
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;
background-color: color-mix(in srgb, var(--default-color), transparent 50%);
opacity: 0.5;
}
.testimonials .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--default-color);
opacity: 1;
}
@media (min-width: 992px) {
.testimonials .testimonial-item p {
width: 80%;
}
}
/*--------------------------------------------------------------
# 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: 8px 20px 10px 20px;
margin: 0;
font-size: 15px;
font-weight: 500;
line-height: 1;
margin-bottom: 5px;
border-radius: 4px;
transition: all 0.3s ease-in-out;
font-family: var(--heading-font);
}
.portfolio .portfolio-filters li:hover,
.portfolio .portfolio-filters li.filter-active {
color: var(--contrast-color);
background-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 0 10px 0;
}
}
.portfolio .portfolio-item {
position: relative;
overflow: hidden;
}
.portfolio .portfolio-item .portfolio-info {
opacity: 0;
position: absolute;
left: 12px;
right: 12px;
bottom: -100%;
z-index: 3;
transition: all ease-in-out 0.5s;
background: color-mix(in srgb, var(--background-color), transparent 10%);
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: 0;
}
/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
background-color: var(--surface-color);
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
overflow: hidden;
border-radius: 5px;
}
.team .team-member .member-img {
position: relative;
overflow: hidden;
}
.team .team-member .social {
position: absolute;
left: 0;
bottom: 0;
right: 0;
height: 40px;
opacity: 0;
transition: ease-in-out 0.3s;
background: color-mix(in srgb, var(--background-color), transparent 20%);
display: flex;
align-items: center;
justify-content: center;
}
.team .team-member .social a {
transition: color 0.3s;
color: var(--heading-color);
margin: 0 10px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.team .team-member .social a i {
line-height: 0;
}
.team .team-member .social a:hover {
color: var(--accent-color);
}
.team .team-member .social i {
font-size: 18px;
margin: 0 2px;
}
.team .team-member .member-info {
padding: 25px 15px;
text-align: center;
}
.team .team-member .member-info h4 {
font-weight: 700;
margin-bottom: 5px;
font-size: 18px;
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.team .team-member .member-info span {
display: block;
font-size: 13px;
font-weight: 400;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.team .team-member .member-info p {
font-style: italic;
font-size: 14px;
line-height: 26px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
.team .team-member:hover .social {
opacity: 1;
}
/*--------------------------------------------------------------
# Pricing Section
--------------------------------------------------------------*/
.pricing .pricing-item {
background-color: var(--surface-color);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
text-align: center;
border-radius: 5px;
position: relative;
overflow: hidden;
}
.pricing .pricing-item h3 {
font-weight: 400;
margin: -20px -20px 20px -20px;
padding: 20px 15px;
font-size: 16px;
font-weight: 600;
color: color-mix(in srgb, var(--default-color), transparent 20%);
background: color-mix(in srgb, var(--default-color), transparent 95%);
}
.pricing .pricing-item h4 {
font-size: 36px;
font-weight: 600;
font-family: var(--heading-font);
}
.pricing .pricing-item h4 sup {
font-size: 20px;
top: -15px;
left: -3px;
}
.pricing .pricing-item h4 span {
color: color-mix(in srgb, var(--default-color), transparent 40%);
font-size: 16px;
font-weight: 300;
}
.pricing .pricing-item ul {
padding: 15px 0;
list-style: none;
text-align: center;
line-height: 20px;
font-size: 14px;
}
.pricing .pricing-item ul li {
padding-bottom: 16px;
}
.pricing .pricing-item ul i {
color: var(--accent-color);
font-size: 18px;
padding-right: 4px;
}
.pricing .pricing-item ul .na {
color: color-mix(in srgb, var(--default-color), transparent 40%);
text-decoration: line-through;
}
.pricing .btn-wrap {
background: color-mix(in srgb, var(--default-color), transparent 95%);
margin: 0 -20px -20px -20px;
padding: 20px 15px;
text-align: center;
}
.pricing .btn-buy {
background: var(--accent-color);
color: var(--contrast-color);
display: inline-block;
padding: 8px 35px 10px 35px;
border-radius: 4px;
transition: none;
font-size: 14px;
font-weight: 400;
font-family: var(--heading-font);
font-weight: 600;
transition: 0.3s;
}
.pricing .btn-buy:hover {
background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
.pricing .featured h3 {
background: var(--accent-color);
color: var(--contrast-color);
}
.pricing .advanced {
background: var(--accent-color);
color: var(--contrast-color);
width: 200px;
position: absolute;
top: 18px;
right: -68px;
transform: rotate(45deg);
z-index: 1;
font-size: 14px;
padding: 1px 0 3px 0;
}
/*--------------------------------------------------------------
# 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: 5px;
overflow: hidden;
}
.faq .faq-container .faq-item:last-child {
margin-bottom: 0;
}
.faq .faq-container .faq-item h3 {
font-weight: 600;
font-size: 18px;
line-height: 24px;
margin: 0 30px 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: 5px;
}
.faq .faq-container .faq-item h3:hover {
color: var(--accent-color);
}
.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 {
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: var(--accent-color);
}
.faq .faq-container .faq-active {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
}
.faq .faq-container .faq-active h3 {
color: var(--contrast-color);
}
.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: var(--accent-color);
}
/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact {}
.contact h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 10px;
}
.contact h2 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 2.125rem;
font-size: 1.6rem;
color: var(--dark-gray);
}
.contact .vendor-img {
padding-right: 50px;
}
.contact .vendor-img img {
width: 100%
}
.contact .info-item {
background-color: var(--surface-color);
padding: 20px 0 30px 0;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.contact .info-item i {
font-size: 20px;
color: var(--accent-color);
width: 56px;
height: 56px;
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
transition: all 0.3s ease-in-out;
border-radius: 50%;
border: 2px dotted color-mix(in srgb, var(--accent-color), transparent 40%);
}
.contact .info-item h3 {
font-size: 20px;
font-weight: 600;
margin: 10px 0;
}
.contact .info-item p {
padding: 0;
margin-bottom: 0;
font-size: 14px;
}
.contact .php-email-form {
background-color: var(--surface-color);
padding: 25px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
}
.contact .php-email-form h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 5px;
}
.contact .php-email-form p {
font-size: 14px;
}
.main-cpt {
display: flex;
align-items: center;
gap: 15px 15px;
}
.main-cpt a img {
width: 20px;
}
.main-cpt input {
width: 125px;
}
.main-cpt span {
font-size: 13px;
}
@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 select,
.contact .php-email-form textarea {
font-size: 12px;
padding: 10px 15px;
box-shadow: none;
border-radius: 0;
color: var(--default-color);
background-color: var(--surface-color);
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 select: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 select::placeholder,
.contact .php-email-form textarea::placeholder {
color: #979797;
}
.contact .php-email-form select {
color: #979797;
-webkit-appearance: auto;
-moz-appearance: auto;
appearance: auto;
}
.contact .php-email-form option {
color: #000;
}
.contact .php-email-form option:first-child {
color: #979797;
}
.contact .php-email-form button[type=submit] {
color: var(--contrast-color);
background: var(--accent-color);
border: 0;
padding: 8px 25px;
transition: 0.4s;
border-radius: 5px;
font-size: 14px;
}
.contact .php-email-form button[type=submit]:hover {
background: color-mix(in srgb, var(--accent-color), transparent 20%);
}
/*--------------------------------------------------------------
# Corporate Office Section
--------------------------------------------------------------*/
.corporate_office h2 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.513rem;
color: var(--dark-gray);
}
.corporate_office .address-box {
background-color: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
height: 100%;
padding: 30px;
transition: 0.3s;
border-radius: 10px;
display: flex;
}
.corporate_office .address-box .icon {
font-size: 32px;
border-radius: 10px;
position: relative;
margin-right: 25px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 72px;
height: 72px;
flex-shrink: 0;
}
.corporate_office .address-box .icon img {
width: 100%;
}
.corporate_office .address-box h3 {
color: #d8311b;
font-weight: 600;
font-size: 20px;
transition: 0.3s;
}
.corporate_office .address-box p {
margin-bottom: 0;
color: #000000;
transition: 0.3s;
font-size: 14px;
text-align: left;
}
.corporate_office .address-box .read-more {
display: inline-flex;
align-items: center;
margin-top: 10px;
transition: 0.3s;
font-size: 14px;
}
.corporate_office .address-box .read-more i {
margin-left: 6px;
font-size: 18px;
}
.corporate_office .address-box.item-cyan .icon {
color: #0dcaf0;
border: 1px solid #0dcaf0;
background: rgba(13, 202, 240, 0.1);
}
.corporate_office .address-box.item-orange .icon {
color: #fd7e14;
border: 1px solid #fd7e14;
background: rgba(253, 126, 20, 0.1);
}
.corporate_office .address-box.item-teal .icon {
color: #20c997;
border: 1px solid #20c997;
background: rgba(32, 201, 151, 0.1);
}
.corporate_office .address-box.item-red .icon {
color: #df1529;
border: 1px solid #df1529;
background: rgba(223, 21, 4, 0.1);
}
.corporate_office .address-box.item-indigo .icon {
color: #6610f2;
border: 1px solid #6610f2;
background: rgba(102, 16, 242, 0.1);
}
.corporate_office .address-box.item-pink .icon {
color: #f3268c;
border: 1px solid #f3268c;
background: rgba(243, 38, 140, 0.1);
}
.corporate_office .address-box:hover {
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
}
.corporate_office .address-box:hover h3 {
color: var(--heading-color);
}
/*--------------------------------------------------------------
# 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);
}
/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider img {
width: 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%);
}
/* -- histort page -- */
.two_column_section .mrt_top {
margin-top: 40px;
}
.history_section {
padding: 0px 0;
}
.history_section .header_banner #sync3 .owl-item .item {
background-size: cover;
background-position: center;
}
.history_section div#sync4 {
position: absolute;
bottom: 0px;
z-index: 5;
padding: 15px 10% 0px;
background: #ccc;
top: auto;
}
.history_section div#sync4 .item {
text-align: center;
display: flex;
justify-content: center;
background-image: url(../images/ruler.png);
background-position: bottom left;
background-repeat: repeat-x;
background-size: 100%;
}
.history_section #sync4 .owl-item .jslide-years {
position: relative;
margin: 25px 0px 0px;
}
.history_section #sync4 .owl-item .jslide-years,
.history_section #sync4 .owl-item .jslide-years .text {
width: 110px;
height: 100px;
}
.history_section #sync4 .owl-item .jslide-years .text {
background: #FFF;
border-radius: 0%;
position: relative;
/*display: flex;
justify-content: center;
align-items: center;*/
cursor: pointer;
border-left: 2px solid #000000;
z-index: 2;
width: 100%;
height: 100px;
/*-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);*/
background: transparent;
}
.history_section #sync4 .owl-item .jslide-years p {
color: #1f1160;
font-size: 24px;
margin: 0;
font-weight: 800;
line-height: 25px;
/*-webkit-transform: skew(340deg);
-moz-transform: skew(0deg);
-o-transform: skew(340deg);*/
}
.history_section #sync4 .owl-item .jslide-years .log {
width: 50px;
border-radius: 50px;
background: #fff;
margin-left: 20px;
}
.history_section #sync4 .owl-item .jslide-years .log img {
width: 50px;
}
.history_section .owl-carousel .owl-stage .owl-item .text:before {
/*content: '';
width: 8px;
height: 8px;
position: absolute;
left: 24px;
background: #d0d0d0;
border-radius: 50px;*/
}
.history_section .owl-carousel .owl-stage .owl-item:nth-child(odd) .text:before {
top: 7px;
}
.history_section .owl-carousel .owl-stage .owl-item:nth-child(even) .text:before {
bottom: 7px;
}
.history_section #sync4.owl-carousel .owl-stage .owl-item:nth-child(even) {
margin-top: 0px;
}
.history_section .owl-carousel.owl-drag .owl-item:nth-child(even) .jslide-years:after {
transform: rotate(-28deg);
bottom: 83%;
}
.history_section .owl-carousel.owl-drag .owl-item:nth-child(odd) .jslide-years:after {
transform: rotate(29deg);
top: 78%;
}
.history_section .header_banner .owl-item:nth-child(odd).active.current .jslide-years:after {
transform: rotate(29deg) scale(0.7) translate(-52px, 15px) !important;
}
.history_section .header_banner .owl-item:nth-child(even).active.current .jslide-years:after {
transform: rotate(-29deg) scale(0.7) translate(-61px, -13px) !important;
}
.history_section .owl-carousel.owl-drag .owl-item .jslide-years:after {
border-color: rgb(214 150 0 / 74%) !important;
}
.history_section .owl-carousel.owl-drag .owl-item.active.current~.owl-item .jslide-years:after {
border-color: #FFF !important;
}
.history_section .owl-carousel.owl-drag .owl-item.active.current .jslide-years .text {
border-color: rgb(214 150 0 / 74%) !important;
}
.history_section .owl-carousel.owl-drag .owl-item.active.current~.owl-item .jslide-years .text {
border-color: #000000 !important;
}
.history_section .owl-carousel.owl-drag .owl-item.active.current .jslide-years .text::before {
background: rgb(214 150 0 / 74%) !important;
}
.history_section #sync4 .owl-nav button.owl-prev,
.history_section #sync4 .owl-nav button.owl-next {
position: absolute;
top: 65px;
opacity: 1;
background: transparent !important;
cursor: pointer;
color: rgb(225 177 66) !important;
font-size: 50px;
}
.history_section #sync4 .owl-nav button.owl-prev {
left: 2%;
}
.history_section #sync4 .owl-nav button.owl-next {
right: 2%;
}
.history_section #sync4 .owl-nav button.owl-next:hover {
color: #CCC;
}
.history_section #sync4 .owl-nav button.owl-prev:hover,
.history_section #sync4 .owl-nav button.owl-next:hover {
color: #c10901 !important;
}
.history_section #sync4 .owl-nav button.owl-prev.disabled,
.history_section #sync4 .owl-nav button.owl-next.disabled {
display: none;
}
.history_section #sync4 .owl-nav button.owl-next,
.history_section #sync4 .owl-nav button.owl-prev {
width: 42px;
height: 42px;
background: #e1b142 !important;
color: #FFF !important;
border-radius: 50%;
line-height: 45px !important;
padding: 0 !important;
font-size: 16px;
transition: all 0.4s ease;
opacity: 0.5;
}
.history_section #sync4 .owl-nav button.owl-next i,
.history_section #sync4 .owl-nav button.owl-prev i {
line-height: inherit;
font-size: inherit;
}
.history_section #sync4 .owl-nav button.owl-next:hover,
.history_section #sync4 .owl-nav button.owl-prev:hover {
background: var(--secondary-color) !important;
color: #FFF !important;
opacity: 1;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(1, 1);
}
to {
-webkit-transform: scale(1.2, 1.2);
}
}
@keyframes zoom {
from {
transform: scale(1.2, 1.2);
}
to {
transform: scale(1, 1);
}
}
.history_section .owl-carousel .owl-item.active img {
-webkit-animation: zoom 20s;
animation: zoom 20s;
padding: 0;
width: 100%;
}
.history_section .header_banner #sync3 .item video,
.history_section .header_banner #sync3 .owl-item .item {
height: calc(100vh - 73px);
}
.history_section #sync4 .owl-item .jslide-years:after {
content: '';
width: 148px;
height: 2px;
border-bottom: 0px dashed #fff;
position: absolute;
left: calc(50% + 24px);
}
.history_section .header_banner .active.current .jslide-years {
transform: scale(1.5);
padding-left: 12px;
}
.history_section .header_banner .active.current .jslide-years p {
color: #d8311b !important;
}
.history_section .header_banner #sync4 .owl-item .jslide-years {
transition: all 0.5s ease;
}
.history_section .sectionContent {
position: absolute;
margin: 0;
width: 42rem;
top: 20%;
left: 12.25%;
z-index: 2;
padding: 20px;
border-radius: 20px;
transition: background-color 2s ease-out 100ms;
-webkit-transform: background-color 2s ease-out 100ms;
-ms-transform: background-color 2s ease-out 100ms;
-o-transform: background-color 2s ease-out 100ms;
-moz-transform: background-color 2s ease-out 100ms;
background: rgb(0 0 0 / 45%);
}
.history_section .yearTypo {
display: inline-block;
}
.history_section .heroHeading {
font-size: 6rem;
color: rgba(255, 255, 255, 0);
-webkit-text-stroke: 2.2px #e2a330;
margin: 0 0 20px;
line-height: 5rem;
}
.history_section .bannerPara {
margin-top: 0rem;
font-size: 2rem;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.45;
letter-spacing: normal;
color: #fff;
}
.history_section .header_banner .sectionContent .bannerPara p {
font-size: 16px;
line-height: 25px;
margin-bottom: 15px;
color: #FFF;
}
.history_section .header_banner .sectionContent .bannerPara h2 {
color: #ffffff;
}
.history_section .header_banner .bannerReadingTxt ul {
list-style-type: disc;
padding-left: 35px;
}
.history_section .header_banner .bannerReadingTxt ul li {
font-size: 18px;
line-height: 25px;
margin-bottom: 15px;
}
:root {
--dark-green: #d8311b;
--dark-yellow: #e89a3d;
--extra-light-brown: #fdf0d7;
--light-brown: #ecd5ab;
--dark-brown: #000000;
}
.swiper-container-video {
width: 100%;
height: 100%;
}
.swiper-container-video .swiper-slide {
font-size: 18px;
color: #fff;
-webkit-box-sizing: border-box;
box-sizing: border-box;
padding: 40px 60px 90px;
}
.swiper-container-video .parallax-bg {
position: absolute;
left: 0;
top: 0;
width: 130%;
height: 100%;
-webkit-background-size: cover;
background-size: cover;
background-position: center;
}
.swiper-container-video .swiper-slide .subtitle {
padding-left: 60px;
}
.colored-container {
width: 100%;
height: 100%;
position: relative;
background: #f1f1f1;
overflow: hidden;
background: url(../images/flower-bg.png) repeat 50% 0% #f5f9ff;
background-size: 20%;
}
.colored-container h2 {
position: relative;
font-size: 38px;
font-weight: 500;
line-height: 1.1;
color: #222222;
letter-spacing: 0px;
text-align: center;
padding-top: 50px;
}
.colored-container h2 span {
font-size: 42px;
font-weight: 700;
color: #c50d11;
}
.colored-container:before {
content: '';
position: absolute;
top: 0;
left: 0;
background: #4b92c7;
width: 50%;
height: 100%;
background: url(../images/floer-bg-preview.png) repeat 50% 0% #4b92c7;
background-size: 40%;
}
.swiper-container-video .slidebox {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-left: -76px;
}
.swiper-container-video .bordered-img {
width: 350px;
position: relative;
}
.bordered-img img {
width: 100%;
height: 100%;
padding: 2px;
}
.bordered-img:before,
.bordered-img:after {
content: '';
border: 8px solid #fff;
width: 100%;
height: 100%;
position: absolute;
display: block;
}
.bordered-img:after {
border-color: var(--dark-green);
top: 0;
/* left: 2px; */
width: 29%;
right: -8px;
border-left-width: 0;
}
.swiper-container-video .title {
font-size: 50px;
/* text-transform: uppercase; */
position: relative;
font-family: "Satisfy", cursive;
letter-spacing: 3px;
color: var(--dark-yellow);
font-weight: 400;
margin-left: 18px;
}
.swiper-container-video .title>span {
color: var(--dark-brown);
margin-right: 15px;
}
.swiper-container-video .tag-box {
--size: 110px;
background: var(--dark-yellow);
color: var(--dark-brown);
border: 5px solid #fff;
width: var(--size);
height: var(--size);
position: absolute;
left: -95px;
top: 70px;
font-size: 30px;
text-transform: uppercase;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
box-shadow: 0 0 22px #00000029;
}
.swiper-container-video .swiper-slide .subtitle {
font-size: 18px;
color: #333;
font-weight: 300;
padding: top;
margin: 15px 0;
margin-bottom: 50px;
}
.swiper-container-video .content-box {
position: absolute;
left: 63%;
width: 300px;
top: 25%;
text-align: right;
}
.swiper-container-video .btn.btn-main {
background: var(--dark-green);
color: #fff;
font-size: 16px;
font-weight: 400;
outline: none;
border: none;
position: relative;
padding: 15px 40px;
border-radius: 0;
}
.swiper-container-video .btn.btn-main:before {
content: '';
width: 5px;
background: var(--dark-brown);
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.swiper-container-video .slider-nav-wrapper {
width: 10%;
position: absolute;
top: 92%;
margin: auto;
left: 0;
right: 0;
}
.swiper-container-video .swiper-button-next,
.swiper-container-video .swiper-button-prev {
position: absolute;
top: 50%;
z-index: 10;
cursor: pointer;
background-position: center;
background-repeat: no-repeat;
background: var(--dark-yellow);
padding: 0px;
background-repeat: no-repeat;
width: 45px;
height: 45px;
border-radius: 50%;
background-position: center;
padding: 3px;
box-shadow: bord;
box-sizing: border-box;
background-size: 17px !important;
}
.swiper-container-video .swiper-button-next,
.swiper-container-video .swiper-button-prev {}
.swiper-container-video .swiper-button-next:after,
.swiper-container-video .swiper-button-prev:after {
font-size: 20px;
color: #fff;
}
/* Pulsating Play Button
------------------------------*/
.pulsating-play-btn {
width: 94px;
height: 94px;
background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
border-radius: 50%;
display: block;
position: relative;
overflow: hidden;
}
.pulsating-play-btn:before {
content: "";
position: absolute;
width: 120px;
height: 120px;
animation-delay: 0s;
animation: pulsate-play-btn 2s;
animation-direction: forwards;
animation-iteration-count: infinite;
animation-timing-function: steps;
opacity: 1;
border-radius: 50%;
border: 5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
top: -15%;
left: -15%;
background: rgba(198, 16, 0, 0);
}
.pulsating-play-btn:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 100;
transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19);
}
.pulsating-play-btn:hover:before {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-40%) translateY(-50%);
width: 0;
height: 0;
border: none;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 15px solid #fff;
z-index: 200;
animation: none;
border-radius: 0;
}
.pulsating-play-btn:hover:after {
border-left: 15px solid var(--accent-color);
transform: scale(20);
}
@keyframes pulsate-play-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}
/*--------------------------------------------------------------
# News Section
--------------------------------------------------------------*/
.news-media {}
.news-media .news-title {
text-align: center;
}
.news-media .news-title h2 {
position: relative;
font-size: 38px;
font-weight: 500;
line-height: 1.1;
color: #222222;
letter-spacing: 0px;
}
.news-media .news-title h2 span {
font-size: 42px;
font-weight: 700;
color: #c50d11;
}
.news-media .news-title p {
font-size: 16px;
font-weight: 400;
color: #222222;
letter-spacing: 0.32px;
margin-bottom: 45px;
opacity: 1;
text-align: center;
}
.pbmit-blog-style-1 .pbmit-featured-wrapper {
position: relative;
display: block;
clip-path: polygon(6.726% 0%, 93.274% 0%, 93.274% 0%, 94.364% 0.119%, 95.399% 0.464%, 96.364% 1.015%, 97.245% 1.755%, 98.029% 2.664%, 98.701% 3.723%, 99.249% 4.915%, 99.657% 6.219%, 99.912% 7.617%, 100% 9.091%, 100% 66.97%, 100% 66.97%, 99.732% 70.984%, 98.988% 73.969%, 97.863% 76.111%, 96.447% 77.599%, 94.835% 78.618%, 93.119% 79.355%, 91.39% 79.998%, 89.742% 80.733%, 88.268% 81.747%, 87.061% 83.227%, 87.061% 83.227%, 86.147% 85.185%, 85.483% 87.323%, 84.946% 89.551%, 84.409% 91.777%, 83.749% 93.91%, 82.839% 95.86%, 81.556% 97.535%, 79.775% 98.844%, 77.369% 99.696%, 74.215% 100%, 6.726% 100%, 6.726% 100%, 5.636% 99.881%, 4.601% 99.536%, 3.636% 98.985%, 2.755% 98.245%, 1.971% 97.336%, 1.299% 96.277%, 0.751% 95.085%, 0.343% 93.781%, 0.088% 92.383%, 0% 90.909%, 0% 9.091%, 0% 9.091%, 0.088% 7.617%, 0.343% 6.219%, 0.751% 4.915%, 1.299% 3.723%, 1.971% 2.664%, 2.755% 1.755%, 3.636% 1.015%, 4.601% 0.464%, 5.636% 0.119%, 6.726% 0%);
}
.pbmit-blog-style-1 .pbmit-featured-wrapper img {
position: relative;
width: 100%;
border-radius: 30px;
}
.news-media .img {
position: relative;
display: block;
clip-path: polygon(6.726% 0%, 93.274% 0%, 93.274% 0%, 94.364% 0.119%, 95.399% 0.464%, 96.364% 1.015%, 97.245% 1.755%, 98.029% 2.664%, 98.701% 3.723%, 99.249% 4.915%, 99.657% 6.219%, 99.912% 7.617%, 100% 9.091%, 100% 66.97%, 100% 66.97%, 99.732% 70.984%, 98.988% 73.969%, 97.863% 76.111%, 96.447% 77.599%, 94.835% 78.618%, 93.119% 79.355%, 91.39% 79.998%, 89.742% 80.733%, 88.268% 81.747%, 87.061% 83.227%, 87.061% 83.227%, 86.147% 85.185%, 85.483% 87.323%, 84.946% 89.551%, 84.409% 91.777%, 83.749% 93.91%, 82.839% 95.86%, 81.556% 97.535%, 79.775% 98.844%, 77.369% 99.696%, 74.215% 100%, 6.726% 100%, 6.726% 100%, 5.636% 99.881%, 4.601% 99.536%, 3.636% 98.985%, 2.755% 98.245%, 1.971% 97.336%, 1.299% 96.277%, 0.751% 95.085%, 0.343% 93.781%, 0.088% 92.383%, 0% 90.909%, 0% 9.091%, 0% 9.091%, 0.088% 7.617%, 0.343% 6.219%, 0.751% 4.915%, 1.299% 3.723%, 1.971% 2.664%, 2.755% 1.755%, 3.636% 1.015%, 4.601% 0.464%, 5.636% 0.119%, 6.726% 0%);
}
.news-media .img img {
transition: 0.6s;
position: relative;
width: 100%;
border-radius: 30px;
}
.news-media .details {
background: color-mix(in srgb, var(--surface-color), transparent 5%);
padding: 30px 0px;
/* margin: -100px 30px 0 30px; */
transition: all ease-in-out 0.3s;
position: relative;
/* text-align: center;
border-radius: 8px;
box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);*/
}
.news-media .details .icon {
margin: 0;
width: 50px;
height: 50px;
background: var(--accent-color);
color: var(--contrast-color);
border: 4px solid var(--contrast-color);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0px;
font-size: 20px;
transition: ease-in-out 0.3s;
position: absolute;
top: -50px;
right: calc(0% - 0px);
}
.news-media .details span {
font-size: 14px;
}
.news-media .details span i {
color: #d8311b;
}
.news-media .details h3 {
font-weight: 700;
margin: 10px 0 15px 0;
font-size: 18px;
transition: ease-in-out 0.3s;
}
.news-media .details p {
color: color-mix(in srgb, var(--default-color), transparent 10%);
line-height: 21px;
font-size: 14px;
margin-bottom: 0;
}
.news-media .service-item:hover .details h3 {
color: var(--accent-color);
}
.news-media .service-item:hover .details .icon {
background: var(--surface-color);
border: 2px solid var(--accent-color);
color: #333333;
}
.news-media .service-item:hover .details .icon i {
color: var(--accent-color);
}
.news-media .service-item:hover .img img {
transform: scale(1.2);
}
.button {
display: flex;
align-items: center;
padding: 10px 15px;
position: relative;
cursor: pointer;
/* button */
/* bg button */
}
.button .link {
background-color: transparent;
font-size: 16px;
letter-spacing: 2px;
color: #333333;
position: relative;
transition: all 0.3s ease-in-out;
cursor: pointer;
border: 0;
padding-left: 20px;
left: 0;
line-height: auto;
overflow: hidden;
/*line*/
/*arrow*/
}
.button .link:before {
content: "";
background-color: #d43522;
width: 3px;
height: 100%;
position: absolute;
z-index: 2;
left: 0px;
top: 0px;
border-radius: 50px;
transition: all 0.3s ease-in-out;
}
.button .link:after {
content: "";
width: 15px;
height: 15px;
display: flex;
align-items: center;
background-color: transparent;
position: absolute;
border: solid 3px #d43522;
border-left: 0;
border-bottom: 0;
top: calc(50% - 8px);
border-radius: 2px;
transform: translateX(-42px) rotate(45deg);
transition: all 0.3s 0.2s ease-in-out;
}
.button:before {
content: "";
background-color: #f1f1f1;
width: 0;
height: 100%;
position: absolute;
right: 0;
top: 0px;
border-radius: 3px;
transition: all 0.4s 0.3s ease-in-out;
}
.button:hover:before {
width: 100%;
height: 100%;
left: 0;
bottom: 0px;
}
.button:hover .link {
padding-left: 50px;
}
.button:hover .link:before {
left: 18px;
transform: rotate(90deg);
}
.button:hover .link:after {
transform: translate(-33px) rotate(45deg);
}
/*---Gallery-----*/
/* sliders container */
#owlCarousel,
.owl-stage-outer,
.owl-stage,
.owl-item-bg,
.owl-item {
height: 100%;
min-height: 200px;
}
#owlCarousel {
width: 100%;
overflow: hidden;
position: relative;
border-radius: 30px;
}
#owlCarousel:hover .owl-nav {
opacity: 1;
}
/* slider container */
.owl-item {
display: inline-block;
width: 100%;
overflow: hidden;
-webkit-backface-visibility: hidden;
/* -webkit-transform: translateZ(0) scale(1.0, 1.0); */
}
.owl-item .owl-item-bg {
width: 100%;
display: inline-block;
position: relative;
background-size: 100% 100%;
background-position: center center;
}
/* previus/next slider control container */
.owl-nav {
position: absolute;
top: 50%;
transform: translateY(-80px);
left: 0;
right: 0;
opacity: 0;
transition: all .3s;
}
/* previus/next slider control*/
.owl-prev,
.owl-next {
width: 60px;
height: 60px;
line-height: 60px;
position: absolute;
top: 50%;
transform: translateY(50%);
/* border-radius: 4px; */
overflow: hidden;
transition: all 1s ease
}
/* previus slider control*/
.owl-prev {
left: 10px;
}
/* next slider control*/
.owl-next {
right: 10px;
}
/* slider controls thump image and icon */
.owl-prev-thump,
.owl-prev-icon,
.owl-next-thump,
.owl-next-icon {
height: 100%;
}
/* slider controls thump image */
.owl-prev-thump,
.owl-next-thump {
width: 100%;
display: none;
background-size: cover;
transition: all 1s ease-in-out;
image-rendering: -webkit-optimize-contrast;
}
/* slider previous/next controls icon */
.owl-prev-icon,
.owl-next-icon {
width: 40%;
height: 100%;
/* background-color: rgba(0,0,0,.4); */
position: absolute;
top: 0;
padding-top: 14%;
text-align: center;
transition: all 1s ease;
}
/* slider previous/next fontawsome icon */
.owl-prev-icon:before,
.owl-next-icon:before {
font-family: bootstrap-icons !important;
color: rgba(255, 255, 255, .7);
font-size: 30px;
transition: all 1s ease;
border: 1px solid #ffffff;
border-radius: 50px;
padding: 5px;
}
/* left arrow */
.owl-prev-icon:before {
content: '\F284';
}
/* right arrow */
.owl-next-icon:before {
content: '\F285';
}
.owl-prev-icon {
/* left: 0; */
}
.owl-next-icon {
right: 22px
}
/*-----------
nav hover
------------*/
/* prevent animation when disabling loop mode
.owl-next:not(.disabled):hover
*/
.owl-prev:hover,
.owl-next:hover {
/* animation: navShadow 4s ease-in-out infinite; */
}
.owl-prev:hover .owl-prev-icon,
.owl-next:hover .owl-next-icon {
width: 40%;
}
@keyframes navShadow {
0%,
100% {
box-shadow: 0px 0px 1px 0 #f1f1f1;
}
50% {
box-shadow: 0px 0px 5px 0 #f1f1f1
}
}
.owl-prev.disabled:hover,
.owl-next.disabled:hover {
animation: none;
}
.owl-prev.disabled:hover .owl-prev-icon,
.owl-next.disabled:hover .owl-next-icon {
width: 50%;
}
/*-----------------------------------
Owl content styling
-----------------------------------*/
.slide-content {
position: absolute;
right: 3%;
top: 35%;
width: 45%;
height: auto;
padding: 40px 40px 40px;
text-align: center;
/* transform: translate(-50%,-50%) rotate3d(1, 0, 0, -90deg); */
transform-origin: top;
border-radius: 10px;
background-color: rgba(0, 0, 0, .4);
/* -webkit-clip-path: polygon(0 0 , 100% 0 , 90% 100% , 10% 100% ); */
color: #fff;
/* font-size: 2em; */
}
.slide-content,
.slide-content h3,
.slide-content h2,
.slide-content p,
.slide-content h3:before,
.slide-content h3:after {
transition: all 2s ease;
}
.slide-content h3 {
position: relative;
display: inline-block;
text-transform: uppercase;
color: rgba(255, 255, 255, .95);
/* transform: translate3d(-100%, 0,1px); */
}
.slide-content h3:before,
.slide-content h3:after {
content: '';
display: block;
width: 70px;
height: 2px;
position: absolute;
top: 49%;
background-color: #f1f1f1;
}
.slide-content h3:before {
left: -90px;
/* transform: translate3d(-700%, 0, 1px) */
}
.slide-content h3:after {
right: -90px;
/* transform: translate3d(700%, 0, 1px) */
}
.slide-content h2 {
color: #f9f9f9;
/* font-size: 1.3em; */
margin-top: 15px;
margin-bottom: 20px;
text-transform: uppercase;
/* transform: translate3d(100%, 0,1px); */
}
.slide-content p {
font-size: 14px;
/* padding: 0 190px; */
line-height: 1.4em;
letter-spacing: 1px;
color: #ffffff;
/* transform: translate3d(0, 400%,1px); */
}
/* animate content */
.owl-carousel .owl-item {
/* height:100vh */
}
#owlCarousel .owl-dots {
position: absolute;
bottom: 0px;
}
.owl-item.active .slide-content {
transform: translate(-20%, 0%) rotate3d(1, 0, 0, 0);
transition-delay: .7s
}
.owl-item.active h3,
.owl-item.active h2,
.owl-item.active p,
.owl-item.active h3:before,
.owl-item.active h3:after {
transform: translate3d(0, 0, 1px);
transition-delay: 1s
}
.home-main-sliders {
padding: 60px 0px;
position: relative;
}
.home-main-sliders h5 {
/* outline */
-webkit-text-stroke: 1px #ededed;
-webkit-text-fill-color: transparent;
/* fallback */
color: #ededed;
/* for demo purpose */
font-family: 'Roboto', sans-serif;
font-weight: 900;
font-size: 210px;
text-align: center;
position: absolute;
bottom: 0;
width: 100%;
margin-bottom: 90px;
/* line-height: 146px; */
display: none;
}
.home-main-sliders h2 {
font-size: 38px;
font-weight: 500;
line-height: 1.1;
color: #222222;
letter-spacing: 0px;
text-align: center;
}
.home-main-sliders h2 span {
font-size: 42px;
font-weight: 700;
color: #c50d11;
}
.home-main-sliders p {
font-size: 16px;
font-weight: 400;
color: #222222;
letter-spacing: 0.32px;
margin-bottom: 45px;
opacity: 1;
text-align: center;
}
.homepage-shop-by-concern-section .section_title_shop_by_concern {
text-align: center;
font-weight: 400;
font-size: 2.188vw;
line-height: 2.188vw;
margin-bottom: 30px;
color: #000;
letter-spacing: .02em
}
.card_image_wrapper {
max-width: 289px;
position: relative
}
.homepage-shop-by-concern-section .swiper-slide {
width: 18.0625vw;
margin-right: 38px
}
.homepage-shop-by-concern-section .card_image_wrapper {
animation-duration: .75s;
animation-timing-function: cubic-bezier(0, 0, .2, 1);
animation-delay: inherit;
animation-direction: normal;
animation-fill-mode: forwards;
animation-name: homepage-shop-by-concern-animation
}
@keyframes homepage-shop-by-concern-animation {
0% {
opacity: 0;
transform: scale(.97) translateY(6%)
}
to {
opacity: 1;
transform: scale(1) translateY(0)
}
}
.homepage-shop-by-concern-section .swiper-slide .card_image_wrapper {
transform: translateY(20px);
transition: transform .15s ease-in-out, padding-top .15s ease-in-out;
padding-top: 17px;
line-height: 0
}
.homepage-shop-by-concern-section .swiper-slide-prev .card_image_wrapper,
.homepage-shop-by-concern-section .swiper-slide-next .card_image_wrapper,
.homepage-shop-by-concern-section .swiper-slide-active .card_image_wrapper {
padding-top: unset;
transform: translateY(0)
}
.homepage-shop-by-concern-section .swiper-slide-active {
width: 273.4px;
transition-duration: 0ms;
z-index: 15;
transform: translate3d(calc(-2491px + -.0417469%), calc(0px + .00192678%), 0) rotateX(0) rotateY(0) rotate(-.00449583deg) scale(1);
opacity: 1;
transform-origin: center 410%;
margin-right: 0px
}
.homepage-shop-by-concern-section .swiper-slide-prev {
width: 273.4px;
transition-duration: 0ms;
z-index: 14;
transform: translate3d(calc(-1246px - 64.9165%), calc(0px + 2.99615%), 0) rotateX(0) rotateY(0) rotate(-6.99101deg) scale(1);
opacity: 1;
transform-origin: center 410%;
margin-right: 38px
}
.homepage-shop-by-concern-section .swiper-slide-next {
width: 273.4px;
transition-duration: 0ms;
z-index: 14;
transform: translate3d(calc(-1868px + 64.9165%), calc(0px + 2.99615%), 0) rotateX(0) rotateY(0) rotate(6.99101deg) scale(1);
opacity: 1;
transform-origin: center 410%;
margin-right: 38px
}
.homepage-shop-by-concern-section .mobile_card_image {
display: none
}
.card_image_wrapper img {
width: 100%;
height: auto
}
.homepage-shop-by-concern-section .overlay-text-container {
display: none
}
.homepage-shop-by-concern-section .overlay-text-container .overlay-text p {
font-weight: 500;
font-size: 1.45vw;
line-height: 1.65vw;
color: #fff;
margin: 0;
text-align: center
}
.homepage-shop-by-concern-section .swiper-slide-active .overlay-text-container {
position: absolute;
display: block;
z-index: +99;
top: 50%;
transform: translate(-50%, -50%);
left: 50%
}
.homepage-shop-by-concern-section .overlay-logo {
position: absolute;
display: block;
z-index: +99;
top: 50%;
transform: translate(-50%, 65%);
left: 50%;
background: #ffffff;
border-radius: 100px;
width: 110px;
height: 110px;
padding: 5px;
}
.homepage-shop-by-concern-section .swiper-slide-active .overlay-logo img {
filter: brightness(100%);
width: 98%;
order-radius: 50px;
}
.homepage-shop-by-concern-section .swiper-slide-active img {
filter: brightness(.4)
}
.homepage-shop-by-concern-section .card_image_wrapper img {
border-radius: 10px
}
.homepage-shop-by-concern-section .card_image_wrapper .overlay-logo img {
border-radius: 50px
}
.homepage-shop-by-concern-section .slide_shop_by_concern:hover .overlay-text-container {
position: absolute;
display: block;
z-index: +99;
top: 50%;
transform: translate(-50%, -50%);
left: 50%
}
.homepage-shop-by-concern-section .slide_shop_by_concern:hover img {
filter: brightness(.4)
}
.homepage-shop-by-concern-section .slide_shop_by_concern:hover .overlay-logo img {
filter: brightness(100%)
}
.shop-by-concern-slider-section {
padding-bottom: calc(26.66667px + 6.33333vw)
}
.homepage-shop-by-concern-section .both-concern-button {
position: absolute;
display: flex;
gap: 30px;
left: 50%;
top: 85%;
width: 120px;
height: 50px;
flex-direction: row;
align-items: center;
flex-wrap: nowrap;
transform: translate(-50%)
}
.homepage-shop-by-concern-section .both-concern-button .swiper-button-next,
.swiper-button-prev {
left: unset;
right: unset
}
.homepage-shop-by-concern-section .both-concern-button .swiper-button-next.swiper-custom-btn,
.homepage-shop-by-concern-section .both-concern-button .swiper-button-prev.swiper-custom-btn {
position: static;
display: block;
width: unset;
margin: unset
}
.homepage-shop-by-concern-section .both-concern-button .swiper-button-next.swiper-custom-btn svg,
.homepage-shop-by-concern-section .both-concern-button .swiper-button-prev.swiper-custom-btn svg {
width: 38.33px;
height: 38.33px;
border: 1px solid #000;
padding: 5px;
border-radius: 50px;
}
.homepage-shop-by-concern-section .swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
content: ""
}
.homepage-shop-by-concern-section .swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
content: ""
}
.home-main-slider-new-img-mb {
display: none !important;
}
@media only screen and (max-width: 767px) {
.card_image_wrapper {
max-width: 180px
}
.homepage-shop-by-concern-section .swiper-slide-next+.swiper-slide .card_image_wrapper {
padding-top: 0
}
.homepage-shop-by-concern-section .mobile_card_image {
display: block
}
.home-main-slider-new-img-mb {
display: block !important;
}
.homepage-shop-by-concern-section .desktop_card_image {
display: none
}
.homepage-shop-by-concern-section .section_title_shop_by_concern {
font-size: 26px;
line-height: 26px;
letter-spacing: .02em
}
.homepage-shop-by-concern-section .overlay-text-container .overlay-text p {
font-size: 16px;
line-height: 18px
}
.homepage-shop-by-concern-section .both-concern-button .swiper-button-next.swiper-custom-btn svg,
.homepage-shop-by-concern-section .both-concern-button .swiper-button-prev.swiper-custom-btn svg {
width: 27.8px;
height: 27.8px
}
.homepage-shop-by-concern-section .both-concern-button {
/* gap: 14px; */
top: 80%
}
.homepage-shop-by-concern-section .swiper-slide-active .overlay-text-container {
position: absolute;
display: block;
z-index: +99;
top: 50%;
transform: translate(-50%, -50%);
left: 50%
}
}
.absolute-middle-center {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9;
text-align: center !important;
width: 100%;
}
.absolute-middle-center img {
max-width: 100%;
height: auto;
}
.top-img-one {
position: absolute !important;
top: 50% !important;
transition: transform .65s cubic-bezier(.23, 1, .32, 1);
left: -141px;
transform: translateY(11.3433px);
width: 300px;
}
.top-img-two {
width: 170px !important;
right: 20px;
top: 0;
position: absolute !important;
transform: translateY(18.9512px);
}
.top-img-three {
left: 50%;
top: 50%;
position: absolute;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.footware_in_products {}
.footware_in_products h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.footware_in_products .about-content {}
.footware_in_products .about-content h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.footware_in_products .about-content p {
font-size: 16px;
line-height: 30px;
font-weight: 400;
}
.brand_box {
padding: 80px 0px;
}
.brand_box .pf-img-box img {
border-radius: 20px;
}
.brand_box .pf-img-box .first-img {
padding-right: 20px;
}
.brand_box .pf-img-box .second-img {
padding-left: 20px;
}
.brand_box .icon-box {
padding: 30px 20px;
transition: ease-in-out 0.3s;
border: 1px solid #fff;
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.brand_box .icon-box:hover {
border-color: #3aaadf;
background: rgb(0 0 0 / 58%);
transition: ease-in-out 0.3s;
}
.brand_box .icon-box:hover h3 {
color: #3aaadf;
transition: ease-in-out 0.3s;
}
.brand_box .icon-box i img {
height: auto;
position: relative;
}
.call-to-action {
background-color: transparent;
}
.call-to-action .container {
padding-top: 80px;
padding-bottom: 80px;
border-radius: 15px;
overflow: hidden;
position: relative;
clip-path: inset(0 round 15px);
}
.call-to-action .container img {
position: fixed;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
border-radius: 15px;
overflow: hidden;
}
.call-to-action .container:before {
content: "";
background: rgba(0, 0, 0, 0.5);
position: absolute;
inset: 0;
z-index: 2;
}
.call-to-action .container .contents {
position: relative;
z-index: 3;
}
.call-to-action h3 {
color: #ffffff;
font-size: 28px;
font-weight: 700;
margin-bottom: 20px;
transition: ease-in-out 0.3s;
}
.call-to-action p {
color: #fff;
margin-bottom: 20px;
}
.call-to-action .cta-btn {
font-weight: 500;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 12px 40px;
border-radius: 5px;
transition: 0.5s;
margin: 10px;
border: 2px solid #ffffff;
color: #ffffff;
}
.call-to-action .cta-btn:hover {
background: #ff0000;
border: 2px solid #ff0000;
}
@keyframes pulsate-btn {
0% {
transform: scale(0.6, 0.6);
opacity: 1;
}
100% {
transform: scale(1, 1);
opacity: 0;
}
}
.renewable-energy {
background: url(../images/renwal-energy-bg.jpg) top center;
background-size: cover;
}
.renewable-energy h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.renewable-energy .about-content {
padding-bottom: 170px;
}
.renewable-energy .about-content h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.renewable-energy .about-content p {
font-size: 22px;
line-height: 30px;
font-weight: 400;
}
.renewable-energy-intro {
overflow: visible;
padding: 0px 0px 0px;
}
.renewable-energy-intro .map-bg {
background: #f7ece8;
}
.renewable-energy-intro .contentboxbottom {
padding: 50px;
position: relative;
top: 0px;
overflow: hidden;
/* background-image: linear-gradient(47deg, #00376a, #85bcf9); */
background: #dddddd;
border: 1px dashed #ccc;
box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08);
margin-bottom: 20px;
}
.renewable-energy-intro .contentboxbottom:after {
content: "";
position: absolute;
right: -18px;
bottom: 0px;
background: url(../images/solar-bg.png) bottom center;
width: 431px;
height: 351px;
opacity: 0.5;
}
.renewable-energy-intro .graph {
position: relative;
top:-170px;
left: 0;
}
.renewable-energy-intro .contentboxbottom p {
font-size: 17px;
line-height: 27px;
font-weight: 400;
z-index: 1;
position: relative;
color: #212529;
margin-bottom: 25px;
}
.renewable-energy-intro .energy_source h3{
font-size: 28px;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 16px;
}
.renewable-energy-intro .energy_source h4{
font-size: 24px;
font-weight: 500;
color: var(--heading-color);
margin-bottom: 16px;
}
.renewable-energy-intro .energy_source ul{
padding:0px;
margin:0px;
margin-bottom: 20px;
}
.renewable-energy-intro .energy_source li{
list-style:none;
font-size: 16px;
line-height: 27px;
font-weight: 400;
z-index: 1;
position: relative;
color: #212529;
padding-bottom: 15px;
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 0px;
}
.renewable-energy-intro .energy_source li p{
margin-bottom:0px;
}
.renewable-energy-intro .energy_source li i {
color: var(--accent-color);
font-size: 16px;
flex-shrink: 0;
}
.real-estate-wrap {
background: url(../images/contents_bg.jpg) top center;
background-size: cover;
}
.real-estate-wrap h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.real-estate-wrap .about-content {
padding-bottom: 170px;
}
.real-estate-wrap .about-content h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.real-estate-wrap .about-content p {
font-size: 22px;
line-height: 30px;
font-weight: 400;
}
.real-estate-wrap-intro {
overflow: visible;
padding: 0px 0px 130px;
}
.real-estate-wrap-intro .map-bg {
background: #f7ece8;
}
.real-estate-wrap-intro .contentboxbottom {
padding: 50px;
position: relative;
top: -190px;
overflow: hidden;
background-image: linear-gradient(47deg, #00376a, #85bcf9);
}
.real-estate-wrap-intro .contentboxbottom:after {
content: "";
position: absolute;
right: -18px;
bottom: 0px;
background: url(../images/solar-bg.png) bottom center;
width: 431px;
height: 351px;
opacity: 0.5;
}
.real-estate-wrap-intro .contentboxbottom p {
font-size: 17px;
line-height: 30px;
font-weight: 400;
color: #fff;
z-index: 1;
position: relative;
}
.btn_box01 {
position: relative;
width: 300px;
background: #00194C;
text-align: center;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.btn_box01 a {
display: inline-block;
position: relative;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 20px 0;
color: #FFF;
font-size: 1.6rem;
text-decoration: none;
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
-webkit-transition-delay: .2s;
-o-transition-delay: .2s;
transition-delay: .2s;
}
.map_box img{
border: 1px dashed #ccc;
box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.08);
}
.esg_ehs{
}
.esg_ehs .about-content h3 {
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
font-weight: 700 !important;
}
.esg_ehs .about-content p {
font-size: 15px;
line-height: 1.75;
font-weight: 400;
}
.esg_ehs .about-content p:last-child {
margin-bottom:0px;
}
.esg_ehs .about-content h4{
margin-bottom: 25px;
font-size: 30px;
color: var(--dark-gray);
font-weight: 600 !important;
}
.esg_ehs .about-content ul{
padding-left: 20px;
}
.esg_ehs .about-content ul li{
color: #4b92c7;
font-size: 18px;
font-weight: 500;
line-height: 1.75;
}
.esg_ehs .rightimg{
position:relative;
z-index: 1;
}
.esg_ehs .rightimg img{position:relative;}
.esg_ehs .rightimg::before{
background-color: #b89d4f;
opacity: 0.15 !important;
-webkit-transform: rotate(-12.5deg);
transform: rotate(-12.5deg);
left: 0;
right: 0;
bottom: 0;
}
.esg_ehs .rightimg::before {
content: '';
display: block;
position: absolute;
border: 1px solid #b89d4f;
top: 0;
left: 0;
right: 7.5%;
bottom: 7.5%;
z-index: 0;
opacity: 0.3;
}
/*--------------------------------------------------------------
# Sustainability Section
--------------------------------------------------------------*/
.sustainability_focus {
padding: 60px 0;
overflow: hidden;
background:#f8f0e9;
}
.sustainability_focus .about-book-img {
position: relative;
border-radius: 10px;
overflow: hidden;
transition: transform 0.3s ease;
}
.sustainability_focus .about-book-img img {
width: 100%;
height: auto;
display: block;
}
.sustainability_focus .about-book-img .book-details {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: color-mix(in srgb, var(--surface-color), transparent 10%);
backdrop-filter: blur(10px);
padding: 20px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
}
.sustainability_focus .about-book-img .book-details .detail-item {
display: flex;
align-items: center;
gap: 10px;
}
.sustainability_focus .about-book-img .book-details .detail-item i {
font-size: 20px;
color: var(--accent-color);
}
.sustainability_focus .about-book-img .book-details .detail-item div {
display: flex;
flex-direction: column;
}
.sustainability_focus .about-book-img .book-details .detail-item div span {
font-size: 12px;
color: color-mix(in srgb, var(--default-color), transparent 30%);
margin-bottom: 2px;
}
.sustainability_focus .about-book-img .book-details .detail-item div p {
font-size: 14px;
font-weight: 600;
margin: 0;
color: var(--heading-color);
}
.sustainability_focus .about-book-img:hover {
transform: translateY(-10px);
}
@media (max-width: 768px) {
.sustainability_focus .about-book-img {
max-width: 450px;
margin: 0 auto;
}
}
.sustainability_focus .about-book-content h2 {
font-size: 28px;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 16px;
}
.sustainability_focus .about-book-content .book-category {
display: flex;
gap: 15px;
margin-bottom: 24px;
flex-wrap: wrap;
}
.sustainability_focus .about-book-content .book-category span {
font-size: 16px;
color: var(--accent-color);
display: flex;
align-items: center;
gap: 6px;
}
.sustainability_focus .about-book-content .book-category span i {
font-size: 16px;
}
.sustainability_focus .about-book-content p {
color: var(--default-color);
margin-bottom: 20px;
line-height: 1.6;
}
.sustainability_focus .about-book-content p:last-child {
margin-bottom:0px;
}
.sustainability_focus .about-book-content .highlights {
margin-top: 30px;
margin-bottom: 30px;
}
.sustainability_focus .about-book-content .highlights h3 {
font-size: 20px;
color: var(--heading-color);
margin-bottom: 16px;
font-weight: 600;
}
.sustainability_focus .about-book-content .highlights ul {
list-style: none;
padding: 0;
margin: 0;
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
display: block;
}
.sustainability_focus .about-book-content .highlights ul li {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 5px;
padding-bottom: 5px;
border-bottom: 1px solid #ccc;
width: 90%;
}
.sustainability_focus .about-book-content .highlights ul li i {
color: var(--accent-color);
font-size: 16px;
flex-shrink: 0;
}
.sustainability_focus .about-book-content .highlights ul li span {
color: var(--default-color);
line-height: 1.5;
}
.sustainability_focus .about-book-content .about-book-cta {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--accent-color);
color: var(--contrast-color);
padding: 12px 28px;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
}
.sustainability_focus .about-book-content .about-book-cta i {
transition: transform 0.3s ease;
}
.sustainability_focus .about-book-content .about-book-cta:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
transform: translateY(-3px);
}
.sustainability_focus .about-book-content .about-book-cta:hover i {
transform: translateX(5px);
}
@media (max-width: 992px) {
.sustainability_focus .about-book-content h2 {
font-size: 28px;
}
}
@media (max-width: 768px) {
.sustainability_focus .about-book-content {
text-align: center;
margin-top: 20px;
}
.sustainability_focus .about-book-content .book-category {
justify-content: start;
}
.sustainability_focus .about-book-content .highlights ul li {
text-align: left;
}
.vender_row_reverse {
flex-direction: inherit !important;
}
}
.rows{
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/*--------------------------------------------------------------
# Why SOKA Section
--------------------------------------------------------------*/
.why_soka {
padding: 80px 0;
overflow: hidden;
background:#f7f7f7;
}
.why_soka h2{margin-bottom:60px; text-align:center;}
.why_soka h3 {
font-size: 24px;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 15px;
position: relative;
display: block;
}
.why_soka h3 span{color:#2482bf;}
.why_soka p {
color: var(--default-color);
font-size: 15px;
line-height: 1.6;
margin-bottom: 0;
}
.why_soka .soka-card {
background-color: var(--surface-color);
padding: 30px;
border-radius: 10px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
height: 100%;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.why_soka .soka-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 40px;
background-color: var(--accent-color);
transition: height 0.3s ease;
}
.why_soka .soka-card .soka-icon {
margin-bottom: 20px;
width: 60px;
height: 60px;
border-radius: 50%;
background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
display: flex;
align-items: center;
justify-content: center;
}
.why_soka .soka-card .soka-icon i {
font-size: 24px;
color: var(--accent-color);
}
.why_soka .soka-card h3 {
font-size: 20px;
font-weight: 600;
margin-bottom: 15px;
color: var(--heading-color);
}
.why_soka .soka-card p {
color: var(--default-color);
font-size: 15px;
line-height: 1.6;
margin-bottom: 0;
}
.why_soka .soka-card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}
.why_soka .soka-card:hover::before {
height: 70px;
}
.why_soka .soka-chapters {
margin-top: 0px;
background-color: var(--surface-color);
padding: 40px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.why_soka .soka-chapters h3 {
font-size: 24px;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 30px;
position: relative;
display: inline-block;
}
.why_soka .soka-chapters h3::after {
content: "";
position: absolute;
bottom: -10px;
left: 0;
width: 50%;
height: 2px;
background-color: var(--accent-color);
}
.why_soka .soka-chapters .chapters-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 25px;
}
@media (max-width: 768px) {
.why_soka .soka-chapters .chapters-grid {
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
}
.why_soka .soka-chapters .chapters-grid .chapter-item {
text-align: left;
padding: 20px;
border-radius: 8px;
transition: all 0.3s ease;
background-color: color-mix(in srgb, var(--background-color), transparent 5%);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.why_soka .soka-chapters .chapters-grid .chapter-item .chapter-number {
font-size: 18px;
font-weight: 700;
color: var(--accent-color);
display: block;
margin-bottom: 10px;
}
.why_soka .soka-chapters .chapters-grid .chapter-item .chapter-number img{
width:80px;
}
.why_soka .soka-chapters .chapters-grid .chapter-item h4 {
font-size: 16px;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 10px;
}
.why_soka .soka-chapters .chapters-grid .chapter-item p {
font-size: 14px;
color: var(--default-color);
margin-bottom: 0;
}
.why_soka .soka-chapters .chapters-grid .chapter-item:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}
@media (max-width: 992px) {
.why_soka .section-intro h2 {
font-size: 28px;
}
.why_soka .soka-chapters {
padding: 30px;
}
}
@media (max-width: 768px) {
.why_soka .section-intro h2 {
font-size: 24px;
}
.why_soka .soka-card {
padding: 25px;
}
.why_soka .soka-card .soka-icon {
width: 50px;
height: 50px;
}
.why_soka .soka-card .soka-icon i {
font-size: 20px;
}
.why_soka .soka-card h3 {
font-size: 18px;
}
.why_soka .soka-chapters {
padding: 25px;
}
.why_soka .soka-chapters h3 {
font-size: 22px;
}
}
/*--------------------------------------------------------------
# Our Commitment Section
--------------------------------------------------------------*/
.commitment {
padding: 80px 0;
background-color: var(--background-color);
overflow: hidden;
}
.commitment h2{text-align:center;padding-bottom: 25px;}
.commitment .book-excerpt-wrapper {
position: relative;
}
.commitment .book-page-design {
background-color: var(--surface-color);
padding: 50px 40px;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
@media (max-width: 768px) {
.commitment .book-page-design {
padding: 40px 25px;
}
}
.commitment .book-page-design:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), transparent 20%) 100%);
}
.commitment .book-page-design .page-number {
position: absolute;
top: 20px;
right: 30px;
font-size: 14px;
font-weight: 600;
color: color-mix(in srgb, var(--default-color), transparent 40%);
font-family: var(--heading-font);
}
.commitment .book-page-design .chapter-title {
text-align: center;
font-family: var(--heading-font);
font-size: 20px;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 30px;
position: relative;
}
.commitment .book-page-design .chapter-title span{
color: #2482bf;
}
.commitment .book-page-design .chapter-title:after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background-color: color-mix(in srgb, var(--accent-color), transparent 30%);
}
.commitment .book-page-design .excerpt-content {
line-height: 1.8;
color: var(--default-color);
}
.commitment .book-page-design .excerpt-content p {
margin-bottom: 20px;
text-align: justify;
text-align: center;
}
.commitment .book-page-design .excerpt-content .first-letter:first-letter {
font-size: 3.5em;
float: left;
line-height: 0.8;
margin-right: 10px;
color: var(--accent-color);
font-weight: 600;
}
.commitment .book-page-design .excerpt-content .dialogue {
padding-left: 20px;
border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
font-style: italic;
}
.commitment .book-page-design .page-decoration {
position: absolute;
bottom: 20px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
}
.commitment .book-page-design .page-decoration:after {
content: "✦";
font-size: 18px;
color: color-mix(in srgb, var(--accent-color), transparent 30%);
}
.commitment .cta-wrapper {
margin-top: 30px;
}
.commitment .cta-wrapper .btn-read-more {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--surface-color);
color: var(--accent-color);
padding: 12px 28px;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.commitment .cta-wrapper .btn-read-more i {
transition: transform 0.3s ease;
}
.commitment .cta-wrapper .btn-read-more:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
transform: translateY(-3px);
}
.commitment .cta-wrapper .btn-read-more:hover i {
transform: translateX(5px);
}
@media (max-width: 992px) {
.commitment .section-header h2 {
font-size: 28px;
}
}
@media (max-width: 768px) {
.commitment {
padding: 60px 0;
}
.commitment .section-header h2 {
font-size: 24px;
}
.commitment .book-page-design .chapter-title {
font-size: 18px;
}
.commitment .book-page-design .excerpt-content .first-letter:first-letter {
font-size: 3em;
}
}
/*--------------------------------------------------------------
# Baker By Chance Section
--------------------------------------------------------------*/
.baker .baker-item {
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.baker .baker-item+.baker-item {
margin-top: 100px;
}
@media (max-width: 768px) {
.baker .baker-item+.baker-item {
margin-top: 40px;
}
}
.baker .baker-item h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.baker .baker-item h4{
font-weight: 600 !important;
margin-bottom: 15px;
font-size: 30px;
color: var(--dark-gray);
}
.baker .baker-item p{
font-size: 16px;
line-height: 30px;
font-weight: 400;
color:#212529;
margin-bottom:25px;
}
.padding-right{padding-right:30px;}
.baker .baker-item .btn-get-started {
background-color: var(--accent-color);
color: var(--contrast-color);
padding: 8px 20px 10px 20px;
border-radius: 50px;
}
.baker .baker-item .btn-get-started:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 10%);
}
.baker .baker-item ul {
list-style: none;
padding: 0;
}
.baker .baker-item ul li {
padding-bottom: 10px;
display: flex;
align-items: flex-start;
}
.baker .baker-item ul li:last-child {
padding-bottom: 0;
}
.baker .baker-item ul i {
font-size: 16px;
padding-right: 8px;
color: var(--accent-color);
}
.baker .baker-item img {
border: 6px solid var(--surface-color);
box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.baker .baker-item .baker-img-bg {
position: relative;
min-height: 500px;
}
@media (max-width: 640px) {
.baker .baker-item .baker-img-bg {
min-height: 300px;
}
}
.baker .baker-item .baker-img-bg img {
position: absolute;
inset: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.baker .baker-item .image-stack {
display: grid;
position: relative;
grid-template-columns: repeat(12, 1fr);
}
.baker .baker-item .image-stack .stack-back {
grid-column: 4/-1;
grid-row: 1;
width: 100%;
z-index: 1;
}
.baker .baker-item .image-stack .stack-front {
grid-row: 1;
grid-column: 1/span 8;
margin-top: 20%;
width: 100%;
z-index: 2;
}
/*--------------------------------------------------------------
# eazly Features Section
--------------------------------------------------------------*/
.eazly .features-image {
position: relative;
min-height: 500px;
justify-content: center;
align-items: center;
display: flex;
}
.eazly .features-image img {
position: absolute;
inset: 0;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
z-index: 1;
}
.eazly .container {
position: relative;
z-index: 3;
}
.eazly h3 {
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
color:#ffffff;
}
.eazly h3 span{color:#d8311b;}
.eazly .mission_txt p{
font-size: 20px;
font-weight: 400;
margin-bottom: 20px;
color:#ffffff;
}
.eazly .right_contentbx h3 {
font-size: 40px;
font-weight: 700;
margin-bottom: 20px;
color:#000000;
}
.eazly .icon-box {
margin-top: 30px;
}
.eazly .icon-box i {
color: var(--accent-color);
margin-right: 15px;
font-size: 24px;
line-height: 1.2;
}
.eazly .icon-box h4 {
font-weight: 600;
margin-bottom: 10px;
font-size: 18px;
}
.eazly .icon-box p {
line-height: 24px;
font-size: 16px;
margin-bottom: 0;
text-align: left;
}
/**
====================================================================
Why choose Section
====================================================================
***/
.whychoose-section {
position: relative;
padding: 60px 0 60px;
}
.whychoose-section h2{
font-size: 40px;
font-weight: 700;
margin-bottom: 25px;
color: #000000;
padding-left:0px;
}
@media (max-width: 991.98px) {
.whychoose-section {
padding: 90px 0 90px;
}
}
.whychoose-section .sec-title .text {
margin-top: 20px;
}
.whychoose-section .image-column .inner-column {
position: relative;
margin-right: -370px;
margin-left: 27px;
}
@media (max-width: 1199.98px) {
.whychoose-section .image-column .inner-column {
margin-right: 0;
margin-top: 40px;
}
}
.whychoose-section .image-column .inner-column .image-box .image:before {
position: absolute;
left: -35px;
top: 25px;
bottom: 25px;
width: 36px;
background-image: url(../images/pattern-1.png);
content: "";
}
.whychoose-section .image-column .inner-column .image-box .image img {
width: 100%;
}
.whychoose-section .image-column .inner-column .image-box .float-text {
position: absolute;
left: -145px;
top: 50%;
font-size: 16px;
letter-spacing: 0.15em;
text-align: center;
color: var(--theme-color-dark);
line-height: 25px;
padding: 15px 40px;
background-color: #ffffff;
text-transform: uppercase;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
width: 295px;
}
.whychoose-section .accordion-box {
position: relative;
padding:0px;
}
.whychoose-section .accordion-box .block {
position: relative;
background-color: hsl(0, 0%, 96.86%);
margin-bottom: 20px;
overflow: hidden;
}
.whychoose-section .accordion-box .block:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#0e0e0e), to(#f36810));
background: linear-gradient(#0e0e0e, #fb6406);
}
.whychoose-section .accordion-box .block .acc-btn {
position: relative;
font-size: 18px;
background-color: hsl(0, 0%, 96.86%);
color: var(--theme-color-dark);
font-weight: 600;
padding: 12px 12px 5px;
border: none;
overflow: hidden;
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.whychoose-section .accordion-box .block .acc-btn:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#0e0e0e), to(#f36810));
background: linear-gradient(#0e0e0e, #fb6406);
}
.whychoose-section .accordion-box .block .acc-btn span {
margin-right: 8px;
}
.whychoose-section .accordion-box .block .acc-btn .icon {
position: absolute;
right: 7px;
top: 7px;
height: 54px;
width: 54px;
font-size: 14px;
line-height: 54px;
text-align: center;
background-color: var(--theme-color-light);
color: var(--theme-color-dark);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
}
.whychoose-section .accordion-box .block .acc-btn .icon:hover {
color: var(--theme-color1);
}
.whychoose-section .accordion-box .block .acc-btn.active {
background-color: hsl(0, 0%, 96.86%);
color: var(--theme-color1);
}
.whychoose-section .accordion-box .block .acc-btn.active .icon {
background-color: var(--theme-color1);
color: var(--theme-color-light);
}
.whychoose-section .accordion-box .block .acc-btn.active .icon:before {
content: "\f106";
}
.whychoose-section .accordion-box .block .acc-content {
position: relative;
display: none;
}
.whychoose-section .accordion-box .block .acc-content .content {
position: relative;
padding: 0px 15px 15px 15px;
}
.whychoose-section .accordion-box .block .acc-content .content .text {
display: block;
font-size: 16px;
line-height: 24px;
color: #808287;
margin-bottom: 0;
}
.whychoose-section .accordion-box .block .acc-content.current {
display: block;
}
.whychoose-section .accordion-box.style-two .block {
-webkit-box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 0px 10px rgba(0, 0, 0, 0.1);
}
.whychoose-section .accordion-box.style-two .block .acc-btn {
background-color: var(--theme-color-light);
}
.whychoose-section .accordion-box.style-two .block .acc-btn.active {
background-color: var(--theme-color-light);
}
.whychoose-section .accordion-box.style-two .block .acc-content .content {
background-color: var(--theme-color-light);
}
.whychoose-section .botomeline h4{
font-size: 28px;
font-weight: 600;
margin-bottom: 25px;
color: #000000;
padding-left: 0px;
}
.whychoose-section .botomeline h5{
font-size: 20px;
font-weight: 600;
margin-bottom: 25px;
color: #000000;
padding-left: 0px;
}
.sinh-saloon{
background-color: #fffaf8;
}
.sinh-saloon h2 {
font-size: 32px;
font-weight: 700;
color: var(--heading-color);
margin-bottom: 16px;
}
.sinh-saloon h3 {
font-size: 24px;
color: var(--heading-color);
margin-bottom: 16px;
font-weight: 600;
}
.sinh-saloon p{
color: var(--default-color);
margin-bottom: 20px;
line-height: 1.6;
}
.sinh-saloon .highlights ul {
list-style: none;
padding: 0;
margin: 0;
margin-bottom:25px;
}
.sinh-saloon .highlights ul li {
margin-bottom: 7px;
border-bottom: 1px solid #ebebeb;
padding-bottom: 7px;
font-size:15px;
}
.sinh-saloon .highlights ul li i {
color: var(--accent-color);
font-size: 20px;
flex-shrink: 0;
}
.sinh-saloon .highlights ul li span {
color: var(--default-color);
line-height: 1.5;
}
.experience .experience-design {
background-color: var(--surface-color);
padding: 50px 40px;
border-radius: 10px;
box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.experience .experience-design:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(90deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), transparent 20%) 100%);
}
.experience .experience-design .chapter-title {
text-align: center;
font-size: 24px;
font-weight: 600;
color: var(--heading-color);
margin-bottom: 30px;
position: relative;
}
.experience .experience-design .chapter-title:after {
content: "";
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background-color:
color-mix(in srgb, var(--accent-color), transparent 30%);
}
.experience .experience-design .excerpt-content {
line-height: 1.8;
color: var(--default-color);
}
.experience .experience-design p {
margin-bottom: 24px;
text-align: justify;
line-height: 1.8;
color: var(--default-color);
}
/*------------------------------
# selling_products Section
----------------------------------*/
.selling_products{}
.selling_products .member {
background-color: var(--surface-color);
box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.1);
text-align: center;
border-radius: 15px;
padding: 12px;
overflow: hidden;
margin: 15px;
}
.selling_products .selling-img{overflow: hidden;border-radius: 15px;}
.selling_products .member img {
border-radius: 15px;
overflow: hidden;
transition: 0.3s;
}
.selling_products .member:hover img {
transform: scale(1.1);
}
.selling_products .member .member-content {
padding: 0 20px 30px 20px;
}
.selling_products .member h4 {
font-weight: 600;
margin-top: 16px;
margin-bottom: 2px;
font-size: 16px;
}
.selling_products .member span {
font-style: italic;
display: block;
font-size: 14px;
color: color-mix(in srgb, var(--default-color), transparent 40%);
}
/*--------------------------------------------------------------
# REACH Section
--------------------------------------------------------------*/
.reach {background:#f2ebe9;}
.reach h2{
font-size: 36px;
display: block;
font-weight: 600;
text-align:center;
margin-bottom:25px;
}
.reach i {
background-color: var(--accent-color);
color: var(--contrast-color);
border: 6px solid var(--surface-color);
width: 64px;
height: 64px;
font-size: 30px;
border-radius: 50px;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 1;
}
.reach .reach-item {
background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
margin-top: -32px;
padding: 40px 30px 35px 30px;
width: 100%;
position: relative;
text-align: center;
border-radius: 4px;
z-index: 0;
min-height: 135px;
}
.reach .reach-item span {
font-size: 36px;
display: block;
font-weight: 700;
}
.reach .reach-item p {
padding: 0;
margin: 0;
text-align: center;
font-size: 18px;
text-transform: uppercase;
}
.social_media_bx{}
.social_media_bx h2{
font-size: 36px;
display: block;
font-weight: 600;
text-align:center;
}
.social_media_bx p{
text-align: center;
font-size: 18px;
text-transform: uppercase;
margin-bottom:25px;
}
.csr-policy {
padding-top: 0px;
position: relative;
padding-bottom: 0;
}
.csr-policy .lft_img {
position: relative;
top: -60px;
padding: 5px;
border: 5px solid #ffffff;
}
.lft-sml-img {
position: relative;
width: 40%;
top: -100px;
right: 0px;
}
.border-end-1{border-right:1px solid #ccc;}
.csr-policy h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.csr-policy .about-content {
padding: 60px;
background: #efefef;
}
.csr-policy .about-content h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.csr-policy .about-content p {
font-size: 16px;
line-height: 28px;
font-weight: 400;
}
.csr-policy-intro {
overflow: visible;
padding: 0px 0px 130px;
}
.csr-policy-intro .map-bg {
background: #f7ece8;
}
.csr-policy-intro .contentboxbottom {
padding: 50px;
position: relative;
top: -190px;
overflow: hidden;
background-image: linear-gradient(47deg, #00376a, #85bcf9);
}
.csr-policy-intro .contentboxbottom:after {
content: "";
position: absolute;
right: -18px;
bottom: 0px;
background: url(../images/solar-bg.png) bottom center;
width: 431px;
height: 351px;
opacity: 0.5;
}
.csr-policy-intro .contentboxbottom p {
font-size: 17px;
line-height: 30px;
font-weight: 400;
color: #fff;
z-index: 1;
position: relative;
}
.csr-policy-detail {}
.csr-policy-detail .graybox {
background: #d9d8d8;
padding: 40px;
}
.csr-policy-detail img {
width: 100%;
}
.csr-policy-detail h2 {
margin-bottom: 25px;
line-height: 3.125rem;
color: #222222;
font-weight: 500;
font-size: 40px;
text-align: center;
}
.csr-policy-detail h2 span {
font-weight: 700;
color: #c50d11;
}
.csr-policy-detail h3 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 28px;
color: #000000;
}
.csr-policy-detail .gallery_area {
padding: 15px;
background: #f1f1f1;
border-radius: 15px;
}
.csr-policy-detail .csrCareWrapper {
padding: 1.5rem;
background: #fff;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
height: 100%;
}
.csr-policy-detail .csrCareWrapper h3 {
font-weight: 400;
font-size: 24px;
line-height: 120%;
color: #267ab9;
margin-bottom: 10px;
}
.csr-policy-detail .csrCareWrapper .contents p {
font-size: 16px;
line-height: 30px;
font-weight: 400;
color: #fff;
z-index: 1;
position: relative;
}
.csr-policy-detail .csrCareWrapper .scrl-height {
height: 260px;
}
.csr-policy-detail .csrCareWrapper .contents ul {
list-style: none;
padding: 0;
}
.csr-policy-detail .csrCareWrapper .contents ul li {
padding-bottom: 15px;
position: relative;
font-size: 14px;
padding-left: 30px;
line-height: 24px;
}
.csr-policy-intro .csrCareWrapper .contents ul i {
font-size: 1.25rem;
margin-right: 4px;
color: #388da8;
}
.csr-policy-detail .csrCareWrapper .contents ul li::before {
content: "\f26b";
display: inline-block;
font-family: bootstrap-icons !important;
font-style: normal;
font-weight: normal !important;
font-variant: normal;
text-transform: none;
line-height: 1;
position: absolute;
left: 3px;
top: 5px;
color: #388da8;
vertical-align: -.125em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.csr-policy-detail .portfolio-item {}
.csr-policy-detail .portfolio-item .menu-img {
padding: 5px;
}
.animal_husbandry ul {
margin: 0px;
padding: 0px;
}
.animal_husbandry ul li {
border: 1px solid #ffffff;
padding: 15px;
margin-bottom: 15px;
list-style: none;
font-size: 17px;
display: flex;
align-items: center;
}
.animal_husbandry ul li i {
width: 70px;
margin-right: 15px;
}
.animal_husbandry ul li i img {
width: 70px;
border: 1px solid #ffffff;
padding: 10px;
border-radius: 50px;
}
/*--------------------------------------------------------------
# Baked Quality Section
--------------------------------------------------------------*/
.baked_quality {
padding: 80px 0;
position: relative;
overflow: hidden;
}
.baked_quality .contents h2 {
font-size: 38px;
font-weight: 600;
line-height: 1.2;
margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
.baked_quality .contents h2 {
font-size: 28px;
}
}
.baked_quality .contents .lead {
font-size: 18px;
margin-bottom: 2rem;
color: #000;
}
.baked_quality .cta-buttons {
display: flex;
gap: 1rem;
margin-bottom: 3rem;
}
@media (max-width: 576px) {
.hero .cta-buttons {
flex-direction: column;
}
}
.baked_quality .cta-buttons .btn {
padding: 0.8rem 2rem;
font-size: 1rem;
font-weight: 500;
border-radius: 50px;
transition: all 0.3s ease;
}
.baked_quality .cta-buttons .btn.btn-primary {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--contrast-color);
}
.baked_quality .cta-buttons .btn.btn-primary:hover {
background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
border-color: color-mix(in srgb, var(--accent-color), transparent 15%);
transform: translateY(-2px);
}
.baked_quality .cta-buttons .btn.btn-outline {
border: 2px solid color-mix(in srgb, var(--accent-color), transparent 70%);
color: var(--accent-color);
background: transparent;
}
.baked_quality .cta-buttons .btn.btn-outline:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
transform: translateY(-2px);
}
.baked_quality .hero-stats {
display: flex;
gap: 3rem;
margin-top: 2rem;
}
@media (max-width: 576px) {
.baked_quality .hero-stats {
flex-direction: column;
gap: 1.5rem;
}
}
.baked_quality .hero-stats .stat-item .stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--heading-color);
line-height: 1;
}
.baked_quality .hero-stats .stat-item .stat-label {
font-size: 0.9rem;
color: color-mix(in srgb, var(--default-color), transparent 30%);
margin-top: 0.5rem;
display: block;
}
.baked_quality .hero-image {
position: relative;
padding: 0rem;
}
.baked_quality .hero-image img {
position: relative;
z-index: 2;
}
.baked_quality .hero-image .shape-1,
.baked_quality .hero-image .shape-2 {
position: absolute;
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
z-index: 1;
}
.baked_quality .hero-image .shape-1 {
width: 300px;
height: 300px;
background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
top: -20px;
right: -20px;
animation: morphShape 15s linear infinite;
}
.baked_quality .hero-image .shape-2 {
width: 200px;
height: 200px;
background-color: color-mix(in srgb, var(--heading-color), transparent 90%);
bottom: -20px;
left: -20px;
animation: morphShape 20s linear infinite reverse;
}
@media (max-width: 991px) {
.baked_quality {
text-align: center;
padding: 60px 0;
}
.baked_quality .cta-buttons {
justify-content: center;
}
.baked_quality .hero-stats {
justify-content: center;
}
.baked_quality .hero-image {
margin-top: 3rem;
}
}
@keyframes morphShape {
0% {
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}
25% {
border-radius: 58% 42% 75% 25%/76% 46% 54% 24%;
}
50% {
border-radius: 50% 50% 33% 67%/55% 27% 73% 45%;
}
75% {
border-radius: 33% 67% 58% 42%/63% 68% 32% 37%;
}
100% {
border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
}
}
/*--------------------------------------------------------------
# Services 2 Section
--------------------------------------------------------------*/
.services-2 {
overflow: visible;
margin-bottom: 60px;
background: #4b92c7;
position: relative;
background: url(../images/healthcare-bg.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
}
.services-2 .section-title {
text-align: left;
}
.services-2 .section-title h2 {
color: color-mix(in srgb, var(--contrast-color), transparent 50%);
text-transform: uppercase;
font-size: 20px;
}
.services-2 .section-title p {
color: var(--contrast-color);
}
.services-2 .services-carousel-wrap {
position: relative;
/* margin-bottom: -200px; */
z-index: 1;
}
.services-2 .swiper-wrapper {
height: auto;
}
.services-2 .services-carousel-wrap h2 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 28px;
color: #ffffff;
}
.services-2 .service-item {
position: relative;
/* overflow: hidden; */
border-radius: 20px;
/* background:#fff;
box-shadow: 0px 0 25px 0 rgba(0, 0, 0, 0.1); */
height: 100%;
}
.services-2:before {
content: "";
background-color: color-mix(in srgb, #060606, transparent 70%);
top: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
position: absolute;
opacity: 1;
visibility: visible;
z-index: 1;
transition: 0.3s all ease;
}
.services-2 .service-item img {
transition: 0.5s all ease;
transform: scale(1);
width: 100%;
opacity: 0.15;
}
.services-2 .service-item .service-item-contents {
z-index: 9;
position: relative;
top: 0px;
left: 0px;
right: 0px;
transition: 0.3s all ease;
transform: translateY(0%);
opacity: 1;
visibility: visible;
}
.services-2 .service-item .service-item-contents .service-item-category {
color: var(--accent-color);
text-transform: uppercase;
}
.services-2 .service-item .service-item-contents .service-item-title {
color: #52b5ff;
margin-bottom: 15px;
font-size: 22px;
}
.services-2 .service-item .service-item-contents p{
color: #fff;
position:relative;
padding-left: 34px;
}
.services-2 .service-item .service-item-contents p:before {
background-color: #5bb4fc;
block-size: 1.3rem;
border-radius: 50%;
content: "";
inline-size: 1.3rem;
inset-block-start: 0.1rem;
inset-inline-start: calc(1.5rem / 2 - 1.3rem / 2);
position: absolute;
z-index: 3;
}
.services-2 .service-item .service-item-contents p:after {
background: #5bb4fc;
content: "";
inline-size: 0.0625rem;
inset-block: calc(1.031rem + 0.05rem* 2) 0;
inset-inline-start: calc(1.6rem / 2 - 0.0625rem);
position: absolute;
z-index: 1;
}
.services-2 .service-item:hover:before {
opacity: 1;
visibility: visible;
}
.services-2 .service-item:hover .service-item-contents {
transform: translateY(0%);
opacity: 1;
visibility: visible;
}
.services-2 .service-item:hover img {
transform: scale(1);
}
/*--------------------------------------------------------------
# Core CSR Section
--------------------------------------------------------------*/
.core-csr-area .core-csr{
padding: 60px 0 60px;
border: 1px solid #cccccc;
border-radius: 30px;
background: #f1f1f1;
}
.core-csr-area h2 {
margin-bottom: 25px;
line-height: 3.125rem;
color: #222222;
font-weight: 500;
font-size: 40px;
text-align: center;
}
.core-csr-area h2 span {
font-weight: 700;
color: #c50d11;
}
.core-csr-area .icon-box {
padding: 20px 15px;
transition: ease-in-out 0.3s;
border: 1px solid color-mix(in srgb, #444444, transparent 70%);
height: 100%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 15px;
background: #fff;
}
.core-csr-area .icon-box i {
font-size: 32px;
line-height: 1;
color: #c11518;
}
.core-csr-area .icon-box i img{width:50px;}
.core-csr-area .icon-box h3 {
font-weight: 400;
margin: 10px 0 0 0;
padding: 0;
line-height: 1;
font-size: 14px;
line-height: 18px;
}
.core-csr-area .icon-box h3 a {
color: #333333;
transition: ease-in-out 0.3s;
}
.core-csr-area .icon-box:hover {
border-color: #c11518;
}
.core-csr-area .icon-box:hover h3 a {
color: #c11518;
}
@media (max-width: 768px) {
.core-csr-area h2 {
font-size: 32px;
}
.core-csr-area p {
font-size: 18px;
}
}
/*--------------------------------------------------------------
# Water & Sanitation Section
--------------------------------------------------------------*/
.water-sanitation h2 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 28px;
color: #000000;
}
.water-sanitation .service-item {
background-color: var(--surface-color);
text-align: left;
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
padding: 30px 20px;
transition: border ease-in-out 0.3s;
height: 100%;
}
.water-sanitation .service-item .icon {
margin: 0 auto;
width: 64px;
height: 64px;
background: var(--accent-color);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: 0.3s;
}
.water-sanitation .service-item .icon i {
color: var(--contrast-color);
font-size: 28px;
transition: ease-in-out 0.3s;
}
.water-sanitation .service-item h3 {
font-weight: 700;
margin: 10px 0 15px 0;
font-size: 22px;
transition: 0.3s;
}
.water-sanitation .service-item p {
line-height: 24px;
font-size: 14px;
margin-bottom: 0;
}
.water-sanitation .service-item:hover {
border-color: var(--accent-color);
}
.water-sanitation .service-item:hover h3 {
color: var(--accent-color);
}
.water-sanitation .section-title h2 {
color: var(--accent-color);
font-size: 20px;
}
.water-sanitation .contents .service-item {
background-color: var(--surface-color);
padding: 20px 30px;
/* border-top: 0px solid color-mix(in srgb, var(--default-color), transparent 90%);
border-left: 0px solid color-mix(in srgb, var(--default-color), transparent 90%); */
position: relative;
}
.water-sanitation .contents .service-item .number {
position: absolute;
right: 10px;
top: 10px;
font-weight: 400;
color: color-mix(in srgb, var(--default-color), transparent 80%);
}
.water-sanitation .contents .service-item .service-item-icon {
position: relative;
margin-bottom: 5px;
color: var(--accent-color);
}
.water-sanitation .contents .service-item .service-item-icon img {
width: 85px;
}
.water-sanitation .contents .service-item .service-item-icon:before {
position: absolute;
content: "";
transform: rotate(45deg);
z-index: -1;
left: -20px;
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-right: 40px solid var(--accent-color);
display: none;
}
.water-sanitation .contents .service-item .service-item-icon>span {
color: var(--default-color);
font-size: 4rem;
}
.water-sanitation .contents .service-item .service-item-content .service-heading {
font-size: 20px;
color: var(--default-color);
font-weight: 400;
}
.water-sanitation .contents .service-item .service-item-content p {
font-size: 15px;
}
@media (min-width: 769px) {
.water-sanitation .contents [class^=col-]:nth-child(4n+4) .service-item {
border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.water-sanitation .contents [class^=col-]:nth-last-child(-n+4) .service-item {
/* border-bottom: 0px solid color-mix(in srgb, var(--default-color), transparent 90%); */
}
}
@media (max-width: 768px) {
.water-sanitation .contents [class^=col-]:nth-child(2n+2) .service-item {
border-right: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
.water-sanitation .contents [class^=col-]:last-child .service-item,
.water-sanitation .contents [class^=col-]:nth-last-child(2) .service-item {
border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}
}
@media (max-width: 576px) {
.water-sanitation .contents [class^=col-] .service-item {
border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
margin-bottom: 10px;
}
}
.environmental-sustainability-pg {
background: url(../images/environmental-policy.jpg);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
position: relative;
}
.environmental-sustainability-pg:before {
content: "";
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
background: rgb(26 64 13 / 75%);
}
.environmental-sustainability-pg .head {
position: relative;
text-align: center;
padding-bottom: 20px;
}
.environmental-sustainability-pg .head h2 {
color: #fff;
margin: 10px 0 12px 0;
font-size: 32px;
font-weight: 700;
}
.environmental-sustainability-pg .head p {
color: #fff;
}
.environmental-sustainability-pg .discription {
position: relative;
}
.environmental-sustainability-pg .discription i {
background: rgb(78 109 30);
color: #ffffff;
/* box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1); */
width: 100px;
height: 100px;
font-size: 36px;
border-radius: 50px;
border: 1px dashed #668539;
display: inline-flex;
align-items: center;
justify-content: center;
position: absolute;
z-index: 1;
border-bottom: 0;
left:70px;
top: 50%;
transform: translate(-50%, -50%);
}
.environmental-sustainability-pg .discription i img{height: 68px;}
.environmental-sustainability-pg .discription .icon {
background-color: var(--surface-color);
color: var(--accent-color);
margin: 0 auto;
width: 80px;
height: 80px;
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
transition: 0.3s;
font-size: 32px;
transition: ease-in-out 0.3s;
box-shadow: 0px 0 25px rgba(0, 0, 0, 0.1);
}
.environmental-sustainability-pg .discription .right-ico{left: auto;right: -30px;}
.ps-7{padding-left:130px !important;}
.pe-7{padding-right:130px !important;}
.environmental-sustainability-pg .discription .txt {
padding: 25px 30px 25px 30px;
background: rgb(114 139 76 / 26%);
border:1px dashed #82ad43;
position: relative;
margin-top: 0px;
border-radius: 100px 100px 100px 100px;
height: 100%;
/* height: 100%;
margin-top: 20px;*/
}
.environmental-sustainability-pg .discription p {
color: #fff;
text-align: justify;
margin-bottom:0px;
padding: 0px 25px;
}
/* .environmental-sustainability-pg .discription .row:before {
height:1px;
width:100%;
content: "";
position: absolute;
z-index: 3;
top: 38%;
border-bottom:1px dashed #f1f1f1;
}
.environmental-sustainability-pg .discription .row:after {
content: "";
position: absolute;
height:100%;
width:1px;
z-index: 1;
left: 50%;
border-right:1px dashed #f1f1f1;
} */
.education-pg {}
.education-pg h2 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 30px;
}
.education-pg img {
border-radius: 230px 230px 0px 0px;
}
.education-pg .service-card {
height: 100%;
padding: 30px;
background: var(--surface-color);
border-radius: 10px;
transition: all 0.3s ease;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}
.education-pg .service-card .icon {
width: 70px;
height: 70px;
margin-right: 20px;
background: color-mix(in srgb, #0b82fd, transparent 90%);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50px;
color: #0d83fd;
font-size: 28px;
transition: all 0.3s ease;
line-height: 1;
}
.education-pg .service-card h3 {
font-size: 22px;
font-weight: 700;
margin-bottom: 15px;
}
.education-pg .service-card p {
margin-bottom: 0px;
color: color-mix(in srgb, var(--default-color), transparent 25%);
font-size: 15px;
line-height: 1.6;
}
.education-pg .service-card:hover {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.08);
}
.education-pg .service-card:hover .icon {
background: #ffe7e7;
color: #fff;
}
.disaster-relief {
background: #f1f1f1;
}
.disaster-relief .relief-text h2 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 30px;
}
.disaster-relief .relief-text ul {
padding: 0px;
margin: 0px;
}
.disaster-relief .relief-text ul li {
list-style: none;
padding-bottom: 15px;
padding-left: 35px;
position: relative;
}
.disaster-relief .relief-text ul li:before {
background-color: #d8311b;
block-size: 1.3rem;
border-radius: 50%;
content: "";
inline-size: 1.3rem;
inset-block-start: 0.1rem;
inset-inline-start: calc(1.5rem / 2 - 1.3rem / 2);
position: absolute;
z-index: 3;
}
.disaster-relief .relief-text ul li:after {
background: #d8311b;
content: "";
inline-size: 0.0625rem;
inset-block: calc(1.031rem + 0.05rem* 2) 0;
inset-inline-start: calc(1.6rem / 2 - 0.0625rem);
position: absolute;
z-index: 1;
}
/*--------------------------------------------------------------
# rural-development Section
--------------------------------------------------------------*/
.rural-development .features-item {
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.rural-development .features-item+.features-item {
margin-top: 100px;
}
@media (max-width: 640px) {
.rural-development .features-item+.features-item {
margin-top: 40px;
}
}
.rural-development .features-item h3 {
font-weight: 700;
font-size: 26px;
margin-bottom: 25px;
}
.rural-development .features-item ul {
list-style: none;
padding: 0;
}
.rural-development .features-item ul li {
padding-bottom: 10px;
display: flex;
align-items: center;
}
.rural-development .features-item ul li:last-child {
padding-bottom: 0;
}
.rural-development .features-item ul i {
font-size: 20px;
padding-right: 4px;
color: var(--accent-color);
}
.rural-development .features-item p{
border-left: 2px solid #ff0000;
padding-left: 20px;
}
.rural-development .features-item p:last-child {
margin-bottom: 0;
}
.promotion-sports {
background: #103a62;
}
.promotion-sports p {
color: #ffffff;
border-bottom: 1px solid #4b92c7;
padding-bottom: 20px;
position:relative;
padding-left:55px;
}
.promotion-sports p:before {
background: url(../images/sports-equipmen.png);
block-size: 1.3rem;
width:35px;
height:35px;
border-radius: 0%;
content: "";
/* inline-size: 1.3rem; */
inset-block-start: 0.1rem;
inset-inline-start: calc(1.5rem / 2 - 1.3rem / 2);
position: absolute;
z-index: 3;
left: 0;
background-size: 100%;
background-repeat: no-repeat;
}
.promotion-sports p:after {
/* background: #5bb4fc;
content: "";
inline-size: 0.0625rem;
inset-block: calc(1.031rem + 0.05rem* 2) 0;
inset-inline-start: calc(1.6rem / 2 - 0.0625rem);
position: absolute;
z-index: 1; */
}
.promotion-sports h2 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 30px;
color: #fff;
}
.miscellaneous {
background: url(../images/shape-one.png);
overflow: hidden;
background-repeat: no-repeat;
background-position: bottom -510px right -270px;
padding-bottom: 120px;
}
.miscellaneous h2 {
font-weight: 600 !important;
margin-bottom: 25px;
font-size: 30px;
}
.miscellaneous .single-service-top {
display: flex;
align-items: center;
}
.miscellaneous .single-service {
background-color: white;
box-shadow: 0px 12px 42px rgba(69, 38, 177, 0.1), 11px 6px 25px rgba(69, 38, 177, 0.1);
padding: 30px;
border-top: 5px solid #4b92c7;
border-radius: 0 0 20px 20px;
z-index: 1;
position: relative;
height: 100%;
}
.miscellaneous .single-service-top .title {
max-width: 160px;
margin-left: 0px;
color: #bed7ff;
line-height: 1.5;
font-weight: 700;
font-size: 50px;
}
.miscellaneous .single-service-text {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #54545f;
margin-top: 0px;
margin-bottom: 0px;
}
.btn-style-one {
border-color: #d13421;
background: #d43522;
background: linear-gradient(135deg, #d33522 0%, #b94335 45%, #dd6152 66%);
border: 0px;
border-radius: 27px;
padding: 20px 45px;
line-height: 1;
font-size: 16px;
position: relative;
color: #fff;
transition: 0.5s;
}
.btn-style-one:hover {
color: #212529;
background: linear-gradient(135deg, #e16354 0%, #bf4738 45%, #b73525 66%);
transition: 0.5s;
}
.btn-style-one::before {
/* content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #d43522;
opacity: 0;
border-radius: 27px;
z-index: 1; */
}
.btn-style-one:hover::before {
/* opacity: 1;
transition: 0.5s;
color: #000; */
}
.activity_gallery {}
.activity_gallery .gallery_card .gallery_image:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80vw;
height: 200%;
background-color: #d8311b;
opacity: .6;
transform-origin: 0 100%;
transform: rotate(90deg);
transition: all .35s;
-webkit-transform-origin: 0 100%;
-webkit-transform: rotate(90deg);
-webkit-transition: all .35s;
}
/* .activity_gallery .gallery_card .gallery_image:after {
transform: rotate(67deg);
-webkit-transform: rotate(75deg);
} */
.activity_gallery .gallery_card .gallery_image > img {
object-fit: contain;
height: 277px;
border-radius: 20px 20px 0px 0px;
}
.activity_gallery .gallery_card .gallery_image span {
position: absolute;
right: 15px;
bottom: 15px;
z-index: 2;
font-weight: 500;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
transform: translate3d(0, 50px, 0);
transition: all .35s;
transition-delay: .15s;
color: #FFF;
display: flex;
align-items: center;
gap: 0 8px;
}
/* .activity_gallery .gallery_card .gallery_image span {
transform: translate3d(0, 0, 0);
} */
.activity_gallery .gallery_card .gallery_content p {
font-size: 16px;
text-align: center;
font-weight: 400;
margin: 0;
color: #FFF;
}
.activity_gallery .gallery_card {
background: #ffffff;
height: 100%;
border-radius: 15px;
}
/*--------------------------------------------------------------
# Services 2 Section
--------------------------------------------------------------*/
.gallery-sliderb {
overflow: visible;
margin-bottom: 200px;
background: #dfdfdf;
background: url(../images/infra-bg.jpg) no-repeat top center;
}
.gallery-sliderb .section-title {
text-align: left;
}
.gallery-sliderb .section-title h2 {
color: color-mix(in srgb, var(--contrast-color), transparent 50%);
text-transform: uppercase;
font-size: 20px;
}
.gallery-sliderb h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.gallery-sliderb .section-title p {
color: var(--contrast-color);
}
.gallery-sliderb .services-carousel-wrap {
position: relative;
margin-bottom: -200px;
}
.gallery-sliderb .swiper-wrapper {
height: auto;
}
.gallery-sliderb .service-item {
position: relative;
overflow: hidden;
}
.gallery-sliderb .service-item:before {
content: "";
background-color: color-mix(in srgb, #080808, transparent 50%);
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
opacity: 0;
visibility: hidden;
z-index: 1;
transition: 0.3s all ease;
}
.gallery-sliderb .service-item img {
transition: 0.5s all ease;
transform: scale(1);
}
.gallery-sliderb .service-item .service-item-contents {
z-index: 9;
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
transition: 0.3s all ease;
transform: translateY(100%);
opacity: 0;
visibility: hidden;
}
.gallery-sliderb .service-item .service-item-contents .service-item-category {
color: var(--accent-color);
text-transform: uppercase;
}
.gallery-sliderb .service-item .service-item-contents .service-item-title {
color: var(--contrast-color);
margin-bottom: 0;
font-size: 18px;
}
.gallery-sliderb .service-item:hover:before {
opacity: 1;
visibility: visible;
}
.gallery-sliderb .service-item:hover .service-item-contents {
transform: translateY(0%);
opacity: 1;
visibility: visible;
}
.swiper-container {
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
list-style: none;
padding: 0;
z-index: 1;
display: block;
}
.gallery-sliderb .service-item:hover img {
transform: scale(1.2);
}
.gallery-sliderb .swiper-button-next::after,
.gallery-sliderb .swiper-button-prev::after {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
padding: 1rem;
width: 2rem;
height: 2rem;
opacity: 0.75;
border-radius: 50%;
color: #000000;
background: #ffffff;
}
.gallery-sliderb .navigation-prev,
.gallery-sliderb .navigation-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 9;
width: 46px;
height: 46px;
background: var(--contrast-color);
background-color: none;
border: none;
transition: 0.3s all ease;
}
.gallery-sliderb .navigation-prev i,
.gallery-sliderb .navigation-next i {
font-size: 2rem;
}
.gallery-sliderb .navigation-prev:hover,
.gallery-sliderb .navigation-next:hover {
background-color: var(--accent-color);
color: var(--contrast-color);
}
.gallery-sliderb .swiper-button-prev {
left: 10px;
}
.gallery-sliderb .swiper-button-next {
right: 10px;
}
.gallery-sliderb .swiper-container {
padding-bottom: 40px;
}
.gallery-sliderb .swiper-pagination {
bottom: 0px;
}
.gallery-sliderb .swiper-pagination .swiper-pagination-bullet {
border-radius: 0;
width: 20px;
height: 4px;
background-color: color-mix(in srgb, #000000, transparent 80%) !important;
opacity: 1;
}
.gallery-sliderb .swiper-pagination .swiper-pagination-bullet-active {
background-color: var(--accent-color) !important;
}
/*--------------------------------------------------------------
# Video Gallery Section
--------------------------------------------------------------*/
.box {
position: relative;
height: 100%;
/* line-height: 270px; */
overflow: hidden;
background-position: center center !important;
background-size: cover !important;
background-repeat: no-repeat !important;
border: 5px solid #ffffff;
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
}
.box__bottom,
.box__top,
.box__left,
.box__right {
position: absolute;
width: inherit;
height: inherit;
text-align: center;
line-height: inherit;
transition: transform 0.4s ease;
}
.box__bottom:before,
.box__top:before,
.box__left:before,
.box__right:before {
position: absolute;
content: "";
width: 100%;
height: 100%;
transform: rotate(45deg);
}
.box__bottom:hover,
.box__top:hover,
.box__left:hover,
.box__right:hover {
transform: translateX(0);
z-index: 1;
}
.box__bottom:hover:before,
.box__top:hover:before,
.box__left:hover:before,
.box__right:hover:before {
width: 100%;
height: 100%;
transform: none;
}
.box__right {
background: rgba(0, 0, 0, 0.43);
transform: translateX(100%);
}
.box__right:before {
right: 100%;
bottom: 0;
transform-origin: 100% 100%;
}
.box__right:hover~.box__center {
transform: translateX(-100%);
}
.box__left {
background: rgba(0, 0, 0, 0.43);
transform: translateX(-100%);
}
.box__left:before {
left: 100%;
transform-origin: 0 0;
}
.box__left:hover~.box__center {
transform: translateX(100%);
}
.box__top {
background: rgba(0, 0, 0, 0.43);
transform: translateY(-100%);
}
.box__top:before {
top: 100%;
right: 0;
transform-origin: 100% 0;
}
.box__top:hover~.box__center {
transform: translateY(100%);
}
.box__bottom {
background: rgba(0, 0, 0, 0.43);
transform: translateY(100%);
}
.box__bottom:before {
bottom: 100%;
left: 0;
transform-origin: 0 100%;
}
.box__bottom:hover~.box__center {
transform: translateY(-100%);
}
.media-films {
padding: 60px 0;
}
.media-films h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.film-container {
height: auto;
width: 100%;
position: relative;
}
.film-container .single-film {
width: 100%;
height: auto;
float: left;
padding: 0px 0px;
position: relative;
z-index: 4;
background: #0c101b;
}
.film-container .single-film:nth-child(1) {
top: 0%;
left: 0%;
transition: all ease 0.8s;
}
.film-container .single-film:nth-child(2) {
top: 0%;
left: 33%;
transition: all ease 0.8s;
}
.film-container .single-film:nth-child(3) {
top: 0%;
left: 66%;
transition: all ease 0.8s;
}
.film-container .single-film:nth-child(4) {
top: 55%;
left: 0%;
transition: all ease 0.8s;
}
.film-container .single-film:nth-child(5) {
top: 55%;
left: 33%;
transition: all ease 0.8s;
}
.film-container .single-film:nth-child(6) {
top: 55%;
left: 66%;
transition: all ease 0.8s;
}
.film-container .single-film .play-video {
transition: all ease 0.8s;
opacity: 1;
background: #0c101b;
}
.film-container .single-film .play-video .vimg {
width: 100%;
height: 100%;
transition: all ease 0.8s;
}
.film-container .single-film .play-video .vimg img {
width: 100%;
}
.film-container .single-film .box-pay-icon {
display: block;
opacity: 1;
z-index: 9;
}
.film-container .single-film .video-tag-close {
transition: all ease 0.5s;
position: absolute;
top: 0px;
right: 9px;
font-size: 28px;
color: #fff;
cursor: pointer;
opacity: 0;
background: #0c101b;
width: 35px;
height: 35px;
text-align: center;
line-height: 36px;
}
.film-container .single-film .box {
width: 100%;
transition: all ease 0.8s;
}
/* .film-container .single-film .box .play-movie-icon {
color: #fff;
font-size: 45px;
line-height: 0;
font-weight: bold;
} */
.film-container .single-film .box .play-movie-icon {
color: #fff;
font-size: 45px;
line-height: 0;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.film-container .single-film .film-information {
width: 100%;
float: left;
margin-top: 6%;
transition: all ease 0.8s;
}
.film-container .single-film .film-information p {
width: 100%;
float: left;
color: #fff;
font-size: 13px;
margin: 0;
line-height: 17px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.film-container .single-film.single-film-animate {
left: 33% !important;
top: 33% !important;
transition: all ease 0.8s;
bottom: 33%;
right: 33%;
transition: all ease 0.8s;
}
.film-container .single-film.single-film-animate .film-information {
opacity: 0;
transition: all ease 0.8s;
}
.film-container .single-film.single-film-animate .box-pay-icon {
transition: all ease 0.8s;
display: none !important;
}
.film-container .single-film.single-film-active {
z-index: 6;
}
.film-container .single-film.video-min {
transition: all ease 0.8s;
display: block;
opacity: 1;
}
.film-container .single-film.video-min .vimg {
margin: 0 auto !important;
height: 0% !important;
width: 0% !important;
margin-left: 40% !important;
margin-top: 20% !important;
overflow: hidden !important;
}
.film-container .single-film.single-film-in {
z-index: 6;
transition: all ease 0.8s;
right: 0 !important;
left: 0 !important;
top: 0 !important;
bottom: 0 !important;
height: auto !important;
width: 100% !important;
}
.film-container .single-film.single-film-in .box {
height: 100% !important;
transition: all ease 0.8s;
width: 100% !important;
overflow: visible;
}
.film-container .single-film.single-film-in .play-video {
transition: all ease 0.8s;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: 0 auto;
text-align: center;
opacity: 1 !important;
}
.film-container .single-film.single-film-in .play-video .vimg {
transition: all ease 0.8s;
width: 100%;
height: 100%;
}
.film-container .single-film.single-film-in:hover .video-tag-close {
transition: all ease 0.8s;
opacity: 1;
}
.media {}
.media h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.media .media_box {
width: 100%;
float: left;
padding: 0px 0;
box-sizing: border-box;
position: relative;
}
.media .media_box .img {
position: relative;
display: block;
clip-path: polygon(6.726% 0%, 93.274% 0%, 93.274% 0%, 94.364% 0.119%, 95.399% 0.464%, 96.364% 1.015%, 97.245% 1.755%, 98.029% 2.664%, 98.701% 3.723%, 99.249% 4.915%, 99.657% 6.219%, 99.912% 7.617%, 100% 9.091%, 100% 66.97%, 100% 66.97%, 99.732% 70.984%, 98.988% 73.969%, 97.863% 76.111%, 96.447% 77.599%, 94.835% 78.618%, 93.119% 79.355%, 91.39% 79.998%, 89.742% 80.733%, 88.268% 81.747%, 87.061% 83.227%, 87.061% 83.227%, 86.147% 85.185%, 85.483% 87.323%, 84.946% 89.551%, 84.409% 91.777%, 83.749% 93.91%, 82.839% 95.86%, 81.556% 97.535%, 79.775% 98.844%, 77.369% 99.696%, 74.215% 100%, 6.726% 100%, 6.726% 100%, 5.636% 99.881%, 4.601% 99.536%, 3.636% 98.985%, 2.755% 98.245%, 1.971% 97.336%, 1.299% 96.277%, 0.751% 95.085%, 0.343% 93.781%, 0.088% 92.383%, 0% 90.909%, 0% 9.091%, 0% 9.091%, 0.088% 7.617%, 0.343% 6.219%, 0.751% 4.915%, 1.299% 3.723%, 1.971% 2.664%, 2.755% 1.755%, 3.636% 1.015%, 4.601% 0.464%, 5.636% 0.119%, 6.726% 0%);
}
.media .media_box img {
display: block;
width: 100%;
transition: 0.6s;
border-radius: 25px 25px 0px 0px;
}
.media .media_box:hover .img img {
transform: scale(1.2);
transition: 0.6s;
}
.media .media_box .date {
position: absolute;
top: 10px;
left: 10px;
background: #d8311b;
padding: 4px 18px;
box-sizing: border-box;
z-index: 9;
font-weight: 100;
border-radius: 50px;
}
.media .media_box .event {
background: #e1b770;
}
.media .media_box .date .txt {
font-size: 14px;
font-family: Assistant, sans-serif;
font-weight: 200;
color: #fff;
text-align: left;
line-height: 23px;
}
.media .media_box .date .txt span {
font-size: 22px;
}
.media .media_box .detail {
position: relative;
bottom: 0;
right: 0;
/* background: #eaeaea; */
width: 100%;
padding: 20px 20px 20px 20px;
box-sizing: border-box;
border-radius: 0px 0px 20px 20px;
}
.media .media_box .detail .icon {
margin: 0;
width: 50px;
height: 50px;
background: var(--accent-color);
color: var(--contrast-color);
border: 4px solid var(--contrast-color);
border-radius: 50px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0px;
font-size: 20px;
transition: ease-in-out 0.3s;
position: absolute;
top: -50px;
right: calc(0% - 0px);
}
.media .media_box:hover .detail .icon {
background: var(--surface-color);
border: 2px solid var(--accent-color);
color: #333333;
}
.media .media_box .detail h4 {
font-size: 16px;
font-family: Assistant, sans-serif;
font-weight: 600;
color: #000;
text-align: left;
padding-bottom: 5px;
line-height: 24px;
}
.media .media_box .detail p {
font-size: 12px;
font-family: Assistant, sans-serif;
font-weight: 600;
color: #333;
text-align: left;
padding-bottom: 5px;
line-height: 18px;
margin: 0;
}
.media .media_box .detail a {
font-size: 14px;
font-family: Assistant, sans-serif;
font-weight: 600;
color: #000;
text-align: left;
padding-bottom: 5px;
line-height: 18px;
text-decoration: none;
}
.media .media_box .detail a:hover {
color: #1a5890;
}
.media .selectdropdown {
display: flex;
width: 100%;
margin-bottom: 30px;
color: #000;
flex-wrap: wrap;
gap: 6px 15px;
align-items: center;
justify-content: right;
}
.selectdropdown_filter {
width: 150px;
text-align: right;
}
.selectdropdown_filter label {
font-size: 14px;
}
.media .custom-select {
background: #d8311b;
color: #fff;
padding: 7px 10px;
border: #d8311b;
border-radius: 0px;
width: 150px;
font-size: 13px;
text-transform: capitalize;
cursor: pointer;
outline: none;
}
.career_text_box_wrapper {
margin-top: 40px;
}
.career_text_box {
padding: 30px 30px;
background: #f1f1f1;
display: flex;
align-items: center;
min-height: 240px;
}
.career_text_box h2 {
margin-bottom: 15px;
font-size: 30px;
font-weight: 400 !important;
}
.career_text_box p {
margin-bottom: 0;
}
.career_row_reverse {
flex-direction: column-reverse;
display: flex;
flex-wrap: wrap;
}
.career_img_box img {
display: none;
}
.career_img_box {
background-position: center;
background-size: cover;
background-repeat: no-repeat;
min-height: 300px;
}
.caution h2 {
margin-bottom: 25px;
}
.caution ul {
margin: 0px;
padding: 0px;
margin-bottom: 30px;
}
.caution ul li {
color: #333333;
position: relative;
list-style: none;
vertical-align: top;
font-size: 16px;
padding-bottom: 10px;
padding-left: 32px;
border-bottom: 1px dashed #b5b5b5;
margin-bottom: 10px;
}
.caution ul li:before {
content: "\F272";
font: normal normal normal 14px / 1 FontAwesome;
font-family: bootstrap-icons !important;
width: 18px;
height: 18px;
background-color: #4b92c7;
font-size: 12px;
padding: 5px 4px;
line-height: 8px;
border-radius: 50px;
text-align: center;
color: #fff;
display: inline-block;
vertical-align: top;
position: absolute;
left: 0px;
top: 0px;
}
.theme_btn span.icon {
width: 40px;
height: 40px;
/* background: #062842; */
display: flex;
color: #FFF;
border-radius: 50%;
justify-content: center;
align-items: center;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}
.theme_btn span {
z-index: 1;
position: relative;
}
.theme_btn {
display: flex;
align-items: center;
gap: 8px;
text-transform: uppercase;
font-weight: 700;
color: #d8311b;
position: relative;
padding-right: 20px;
width: fit-content;
}
.theme_btn:before {
content: '';
width: 40px;
height: 40px;
position: absolute;
top: 0;
left: 0;
background: #d8311b;
border-radius: 50px;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
z-index: 0;
}
.theme_btn:hover {
color: #FFF;
}
.theme_btn:hover:before,
.theme_btn.big:hover:before {
width: 100%;
}
.committed_section {
padding: 60px 0;
}
.committed_section h2 {
font-weight: 500;
font-size: 40px;
margin-bottom: 15px;
}
.committed_section h2 span {
font-weight: 700;
color: #c50d11;
}
.committed_section h3 {
margin-top: 10px;
margin-bottom: 40px;
}
.committed_section ul {
display: flex;
flex-wrap: wrap;
padding: 0;
margin: 0;
list-style: none;
justify-content: center;
}
.committed_section ul li {
width: 50%;
padding: 0 10px;
}
.committed_section ul li>div {
position: relative;
}
.committed_section ul li span {
background: #d8311b;
padding: 10px 20px;
font-size: 18px;
color: #FFF;
border-radius: 5px;
display: inline-block;
position: relative;
right: 15px;
bottom: 15px;
line-height: 1.12;
}
.committed_section ul li div img {
width: 100%;
border-radius: 26px;
box-shadow: 0 11px 15px 0 rgb(0 0 0 / 30%);
}
@media (min-width:768px) {
.theme_btn.big {
padding-right: 30px;
}
.theme_btn.big span.icon {
width: 48px;
height: 48px;
font-size: 22px;
}
.theme_btn.big:before {
width: 48px;
height: 48px;
}
}
.traingle{
position: relative;
max-width: 620px;
top: 50%;
left:50%;
transform: translate(-50%, -50%);
display: flex;
justify-content: space-between;
align-items: center;
}
.triangle-left {
width: 395px;
border-top: solid 170px rgb(75 146 199);
border-left: solid 0px transparent;
border-right: solid 170px #00000000;
margin-right: -156px;
}
.triangle-right {
width: 395px;
border-top: solid 0px rgb(212 53 34);
border-left: solid 170px transparent;
border-bottom: solid 170px rgb(193 21 24);
}
.traingle p{
position: absolute;
color: #fff;
font-size: 23px;
margin-bottom: 0;
}
.traingle .triangle-left p{
top: 20px;
left: 20px;
text-align:left;
}
.traingle .triangle-right p{
bottom: 20px;
right: 20px;
text-align:right;
}
.ht-200{height:200px;}
/*--------------------------------------------------------------
# Form Tabs Section
--------------------------------------------------------------*/
.form_tabs {
overflow: hidden;
}
.form_tabs .nav-tabs {
margin-bottom: 15px;
}
.form_tabs .nav-link {
border-bottom: 0;
padding: 12px 15px 12px 15;
transition: 0.3s;
color: var(--default-color);
font-weight: 400;
font-size: 15px;
}
.form_tabs .nav-link:hover {
color: var(--accent-color);
}
.form_tabs .nav-link.active {
color: var(--accent-color);
background-color: var(--background-color);
}
.form_tabs .tab-pane.active {
animation: fadeIn 0.5s ease-out;
}
.form_tabs .details h3 {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
.form_tabs .details p {
color: color-mix(in srgb, var(--default-color), transparent 20%);
}
.form_tabs .details p:last-child {
margin-bottom: 0;
}
.solve-fifty-fifty {}
.solve-fifty-fifty .image-right {
flex: 1;
display: flex;
align-items: center;
position: relative;
}
.solve-fifty-fifty .image-right .smaller-img {
align-self: flex-end;
mask-image: url(..//images/Image_drop_small.svg);
-webkit-mask-image: url(../images/Image_drop_small.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: bottom center;
mask-position: bottom center;
width: 38%;
aspect-ratio: 1 / 1.5;
height: auto;
-o-object-fit: cover;
object-fit: cover;
}
.solve-fifty-fifty .image-right .larger-img {
mask-image: url(../images/Image_drop_big.svg);
-webkit-mask-image: url(../images/Image_drop_big.svg);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: bottom center;
mask-position: bottom center;
-webkit-mask-size: contain;
mask-size: contain;
width: 67%;
height: auto;
aspect-ratio: 1 / 1.5;
-o-object-fit: cover;
object-fit: cover;
}
.solve-fifty-fifty h1 {
font-size: 3.5rem;
color: #222222;
margin-bottom: 50px;
}
.solve-fifty-fifty .about-content h3 {
font-weight: 700 !important;
margin-bottom: 25px;
line-height: 3.125rem;
font-size: 2.813rem;
color: var(--dark-gray);
}
.solve-fifty-fifty .about-content p {
font-size: 16px;
line-height: 30px;
font-weight: 400;
}
.fot-img {
position: relative;
bottom: -60px;
left: -50px;
}
.prod_slide {
background: #ccc;
padding-bottom: 0px;
background: url(../images/green-bg.jpg) bottom center;
background-size: cover;
}
.ice-cream-dairy{
background: url(../images/footer-bg.png) bottom center;
background-size: cover;
background-repeat:no-repeat;
}
.prod_slide .pro-text{
display: flex;
flex-wrap: wrap;
align-content: center;
height: 100%;
}
.prod_slide .par-txt {
color: #000;
font-size: 15px;
line-height: 20px;
position: relative;
text-align:left;
display: none;
}
.prod_slide .pro-text h2{
color: #672e21;
font-size: 50px;
line-height: 50px;
letter-spacing: 0;
width: 100%;
text-align:left;
font-weight: 700;
}
.prod_slide .pro-text p {
color: #672e21 !important;
width: 100%;
font-size: 18px !important;
line-height: 25px !important;
padding-bottom: 0px;
text-align: left;
font-weight: bold;
margin-bottom: 0px;
}
.prod_slide .pro-text .heart-text{
position: relative;
padding: 0 20px 0 50px;
color: #000000;
font-size: 15px;
line-height: 25px;
margin: 20px 0;
width: 100%;
text-align: left;
text-align:left;
}
.prod_slide .swiper-slide img{width:80% !important;}
.prod_slide .pro-text .heart-text:before{
content: '';
height: 40px;
width: 40px;
background: url(../images/heart-icon.png) no-repeat;
position: absolute;
left: 0;
top: 0;
background-size: 100% 100%;
}
.ice-cream-dairy .animation-container{
position: absolute !important;
margin-top: -410px !important;
right: 0;
}
.prod_slide .animation-container {
position: relative;
margin-top: -250px;
}
.prod_slide .swiper-container {
position: relative;
overflow: hidden;
width: 100%;
right: 0px;
/*margin: 0 auto;*/
}
.prod_slide .swiper {
position: relative;
width: 100%;
z-index: 2;
}
.prod_slide .swiper-slide {
width: 10rem;
height: 26rem;
display: flex;
flex-direction: column;
align-items: self-start;
position: relative;
border-radius: 12px;
/*box-shadow: -1px 5px 15px #0000001f;*/
text-align: center;
opacity: 1;
transition: opacity 0.4s ease-in;
}
.prod_slide .swiper-slide span {
display: inline-block;
background: #9926e1;
border-radius: 0 50px 50px 0;
text-transform: capitalize;
padding: 12px 20px;
letter-spacing: 0.5px;
font-weight: 500;
position: absolute;
top: 2em;
left: 0;
color: #fff;
}
.prod_slide .swiper-slide img {
width: 100%;
}
.prod_slide .swiper-slide h3 {
color: #fff;
font-size: 1.3rem;
line-height: 1.4;
margin-bottom: 0.625rem;
letter-spacing: 0.8px;
position: relative;
word-wrap: break-word;
}
@media screen and (min-width: 800px) {
.prod_slide .swiper-slide h3 {
font-size: 1.8rem;
}
}
.prod_slide .swiper-slide p {
color: #fff;
line-height: 1.6;
font-size: 0.8rem;
}
.prod_slide .swiper-slide .slide-content {
position: absolute;
bottom: 0;
left: 50%;
transform: translate(-50%, -10px);
width: 90%;
}
.prod_slide .swiper-slide-active {
display: grid;
opacity: 1;
}
.prod_slide .swiper-pagination {
position: relative;
bottom: -0.313rem;
text-align: center;
margin-top: 35px;
width: auto;
}
.prod_slide .swiper-pagination-bullet {
border-radius: 0;
width: 1.5rem;
height: 0.25rem;
background: #fff;
}
.prod_slide .swiper-pagination-bullet-active {
background: #fff;
}
.prod_slide .circle {
position: absolute;
bottom: -5em;
left: -8em;
width: clamp(150px, 40vw, 400px);
height: clamp(150px, 40vw, 400px);
background: black;
border-radius: 50%;
z-index: 1;
opacity: 0.7;
}
/*--------------------------------------------------------------
# RSPL History Section Section
--------------------------------------------------------------*/
.rspl_history {
/* background: #4b92c7; */
background: url('../images/bee-bg.png') no-repeat 50% 0% #f5f9ff;
background-size: cover;
}
.rspl_history .title {
font-size: 38px;
font-weight: 500;
line-height: 1.1;
color: #222222;
letter-spacing: 0px;
text-align: center;
}
.rspl_history .title span {
font-size: 42px;
font-weight: 700;
color: #c50d11;
}
.timeline {
width: 100%;
position: relative;
margin-top: 20px;
}
.timeline-nav {
opacity: 1 !important;
}
.timeline-nav__item {
width: auto;
height: auto;
background: transparent;
padding: 15px 25px !important;
position: relative;
line-height: 50px;
outline: none;
cursor: pointer;
-webkit-text-stroke: 1px #7a7c7f;
-webkit-text-fill-color: transparent;
color: #000;
font-weight: 500;
font-size: 30px;
text-align: center;
bottom: 0;
}
/* .timeline-nav__item::before {
content: "";
position: absolute;
top: 65px;
left: 50%;
transform: translateX(-50%);
width: 15px;
height: 15px;
border-radius: 100%;
background-color: #000;
transition: 0.2s;
} */
.timeline-nav__item.slick-current {
color: #c11518;
opacity: 1;
-webkit-text-stroke: 2px #c11518;
}
.timeline-nav__item.slick-current::before {
background-color: #c11518;
}
.timeline-wrapper {
position: relative;
width: 100%;
height: 580px;
margin: 0px auto;
margin-top: 20px;
}
@media (max-width: 500px) {
.timeline-wrapper {
height: 1000px;
max-height: 900px;
}
}
.timeline-slider {
height: 100%;
}
.timeline .slick-list {
height: 100%;
}
@media (min-width: 1080px) {
/* .timeline .slick-list {
padding: 0 220px !important;
} */
}
.timeline .slick-track {
height: 100%;
}
.timeline-slide {
position: relative;
overflow: hidden;
background-repeat: no-repeat;
outline: none;
background-size: auto 400px, cover;
background-position: top;
margin: 0 5px;
width: 85%;
z-index: 1;
padding: 20px 14px;
height: auto !important;
}
/* .timeline-slide:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 52, 113, 0.8);
z-index: 2;
} */
.timeline-slide__content {
z-index: 5;
position: absolute;
top: 220px;
background: rgb(0 0 0 / 74%);
width: 80%;
left: 50%;
transform: translate(-50%, 0px);
padding: 40px;
opacity: 0;
transition: opacity 1s;
}
@media (max-width: 500px) {
.timeline-slide__content {
width: 100%;
}
}
.timeline-year {
z-index: 5;
font-size: 25px;
color: #ffffff;
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
padding: 0px;
border-radius: 50%;
right: auto;
background: #4493ca;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 24%);
}
.timeline-title {
color: #dd1800;
font-size: 40px;
line-height: 40px;
font-weight: 700;
margin-bottom: 20px;
}
.timeline-text {
font-size: 15px;
line-height: 24px;
color: #333;
margin-bottom: 10px;
}
.timeline-slide__content p {
color: #ffffff;
}
.timeline .slick-current:after {
background-color: rgba(0, 52, 113, 0);
}
.timeline .slick-current .timeline-year {
opacity: 1;
}
.timeline .slick-current .timeline-slide__content {
opacity: 1;
}
.timeline-slider .timeline-slide {
filter: blur(5px);
}
.timeline-slider .timeline-slide.slick-current.slick-active {
filter: blur(0px);
}
.timeline_custom_row {
display: flex;
flex-wrap: wrap;
position: relative;
border-radius: 50px 0;
overflow: hidden;
box-shadow: 0 4px 16px 0 rgb(0 0 0 / 24%);
}
.timeline_custom_row .img_box {
width: 50%;
background-size: cover;
background-position: top center;
}
.timeline_custom_row .content_box {
width: 50%;
padding: 50px 60px 50px 70px;
background: #e0e0e057;
position: relative;
min-height: 545px;
display: flex;
flex-direction: column;
justify-content: center;
}
.about .section-title {
padding-bottom: 25px;
}
.timeline-nav__item>div {
position: relative;
z-index: 8;
}
.shadow_effect {
display: flex;
width: 50px;
height: 50px;
border-radius: 50%;
padding: 0;
align-items: center;
justify-content: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: -1;
}
.shadow_effect:before,
.shadow_effect:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
}
.timeline-nav__item.slick-current .shadow_effect:before {
z-index: 0;
background: #e5b4b7;
animation: pulse-border 1500ms ease-out infinite;
}
.shadow_effect:after {
z-index: 1;
background: rgb(68 147 202 / 44%);
transition: all 200ms;
}
.timeline-nav__item.slick-current .shadow_effect:after {
/* background: #c11518; */
background: transparent;
}
.timeline-nav__item.slick-current .shadow_effect:after {
background: #e5b4b7;
}
.timeline-nav__item.slick-current .shadow_effect {
display: none;
}
.timeline-nav__item.slick-current .timeyear {
-webkit-text-fill-color: #c11518;
animation: text-shadow 1500ms ease-out infinite;
}
@keyframes text-shadow {
0% {
text-shadow: 0 0 0 #c11518;
}
50% {
text-shadow: 0 0 15px #c11518;
}
100% {
text-shadow: 0 0 0px #c11518;
}
}
.timeline-year span {
position: relative;
z-index: 2;
}
.timeline-year:before,
.timeline-year:after {
content: "";
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
z-index: -1;
}
.timeline-year:before {
z-index: 0;
background: #4493ca;
animation: pulse-border2 1500ms ease-out infinite;
}
.timeline-year:after {
/* z-index: 1; */
background: #4493ca;
transition: all 200ms;
}
@keyframes pulse-border {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.6);
opacity: 0;
}
}
@keyframes pulse-border2 {
0% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
opacity: 1;
}
100% {
transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.6);
opacity: 0;
}
}
.timeline-slider .slick-arrow,
.timeline-nav .slick-arrow {
border: 1px solid #000000;
width: 50px;
height: 50px;
border-radius: 50%;
background: transparent;
position: absolute;
top: 50%;
z-index: 9;
background-size: 30px;
background-position: center;
background-repeat: no-repeat;
transition: all 0.5s ease;
opacity: 0.6;
}
.timeline-slider .slick-arrow:hover {
opacity: 1;
}
.timeline-slider {
position: relative;
}
.timeline-slider .pull-left,
.timeline-nav .pull-left {
left: -1%;
background-image: url('../images/icons/prev.png');
}
.timeline-slider .pull-right,
.timeline-nav .pull-right {
right: -1%;
background-image: url('../images/icons/next.png');
}
.timeline-nav .pull-left {
left: 15px;
top: 0;
}
.timeline-nav .pull-right {
right: 15px;
top: 0;
}
.timeline-slider .pull-left.slick-arrow.slick-disabled{
display:none !important;
}
.timeline-slider .pull-right.slick-arrow.slick-disabled{
display:none !important;
}
#lblProcessForm {
color: red;
font-size: 12px;
}
#lblProcessForm span {
color: green;
}
.updt_format{width:100%;}
.updt_format .accordion { font-weight:600; padding:5px 0px 3px 20px; width: 100%; text-align:left; border-top:1px solid #cacaca; background: #0095db; position:relative; margin-bottom:10px; min-height:37px;}
.updt_format .accordion i{ position:absolute; top:0px; right:0px; font-size:16px; color:#fff; background:#c02121; padding:10px;}
.updt_format .panel {padding: 20px 0; color:#000; overflow: hidden; display:block; margin-bottom:20px; }
.updt_format h5{font-size:18px; line-height:22px; color:#fff; margin-bottom:5px; font-family: 'Raleway', sans-serif; font-weight: 400;}
.updt_format .panel h4 { margin-bottom: 20px; font-size: 18px; color: #0096db; line-height: 24px; padding-bottom: 8px; border-bottom: 1px solid #ccc; font-family: 'Raleway', sans-serif; font-weight: 600;}
.updt_format .panel .inner_bx { margin-bottom: 40px; width:100%; display:block; }
.press_pdf{min-height:180px; margin-bottom: 5px;}
.press_pdf_images img { width: 30px;}
.imgar{width:auto !important;}
.fl_outer .fl_inner ul.arbx{width:100%; margin-top: 13px;padding: 0;}
.fl_outer .fl_inner ul.arbx li{width:100%; background:url(https://www.isgec.com/images/pdf2.png) no-repeat top 2px left; padding-left:30px; margin-bottom:10px; background-size: 20px; font-size: 16px; line-height: 33px; list-style: none;}
.fl_outer .fl_inner ul.arbx li a{color:#000; text-decoration:none; }
.fl_outer .fl_inner ul.arbx li a:hover{color:#c02121;}
.fl_outer .fl_inner ul.arbx2{width:100%;}
.fl_outer .fl_inner ul.arbx2 li{width:100%; background:url(https://www.isgec.com/images/icon-audio.png) no-repeat top 2px left; padding-left:30px; margin-bottom:10px; background-size: 25px; font-size: 16px; line-height: 33px; list-style: none;}
.fl_outer .fl_inner ul.arbx2 li a{color:#000; text-decoration:none; }
.fl_outer .fl_inner ul.arbx2 li a:hover{color:#c02121;}
.harrow{vertical-align: middle; margin-top: -4px; display: inline-block;}
.margin-space{border-solid: 1px solid #bdd0eb; margin-bottom:20px;}
.fl_date {
font-size: 14px;
line-height: 20px;
color: #565656;
font-family: 'Raleway', sans-serif;
margin-top: 8px;
font-wight:700;
}
.updt_format .panel h3{font-size: 18px; }
@media screen and (max-width: 800px){
.fl_inner{width:50%!important;}
.updt_format .panel h3{font-size: 16px;}
}
@media screen and (max-width: 350px){
.fl_inner{width:100%!important;}
.updt_format .panel h3{font-size: 16px; }
}
.buss-heading{background-color:#0095db;font-size: 14px;float: right; padding: 0px 10px; font-weight: 600;color: #fff;}
.buss-heading a{cursor: pointer;color:#fff;text-decoration:none;}
.buss-heading2{background-color:#c02121;font-size: 14px;float: right; padding: 0px 10px; font-weight: 600;color: #fff;margin-right:15px;}
.buss-heading2 a{cursor: pointer;color:#fff;text-decoration:none;}
.fl_outer{ margin-top:10px; }
.fl_outer .fl_inner{padding:0 20px; border-right:1px solid #bdd0eb; box-sizing:border-box; margin-bottom:40px;}
.fl_outer .fl_inner.border_right_none{border-right:none; padding-right:0;}
.fl_down{margin-top:8px;}
.fl_outer .fl_down a{ background:#bce3f9 url(https://www.isgec.com/images/icon-pdf.gif) no-repeat top 8px right 12px; font-family: 'Raleway', sans-serif; font-size:13px; line-height:18px; text-decoration:none; color:#000; border-radius:3px; border:1px solid #bdd0eb; padding:3px 29px 3px 15px; box-sizing:border-box; display:inline-block; transition: all .7s;
-webkit-transition: all .7s; }
.fl_outer .fl_down a:hover{ background:#808080 url(https://www.isgec.com/images/icon-pdf.gif) no-repeat top 8px right 12px; color:#fff;}
.fl_title{ font-family: 'Raleway', sans-serif; font-size:16px; color:#343434; margin-top:8px;}
.fl_date{ font-size:14px; line-height:20px; color:#565656; font-family: 'Raleway', sans-serif; margin-top:8px;}
/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
/* Add your styles here */
}
.custom_btn {
color: var(--contrast-color);
background: var(--accent-color);
font-family: var(--heading-font);
font-weight: 400;
font-size: 16px;
letter-spacing: 1px;
display: inline-block;
padding: 10px 30px;
border-radius: 4px;
transition: 0.5s;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
border: none;
}
.custom_btn:hover {
color: var(--contrast-color);
background: color-mix(in srgb, var(--accent-color), transparent 15%);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}
.aboutbox_img {
padding-right: 25px;
}
.aboutbox_img img {
width: 100%;
}
.about_conent_discription h2 {
font-weight: 500;
font-size: 40px;
margin-bottom: 15px;
}
.about_conent_discription h2 span {
font-weight: 700;
color: #c50d11;
}
.about_conent_discription p.big {
font-size: 22px;
font-weight: 400;
line-height: 1.3;
}
ul.about_tags {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 0 17px;
flex-wrap: wrap;
}
ul.about_tags li {
padding: 25px 15px;
color: #000000;
font-size: 20px;
width: 32.333%;
border-radius: 7px;
text-align: center;
border: 2px solid #CCC;
}
ul.about_tags li span {
font-size: 40px;
font-weight: 600;
}
ul.about_tags li p {
margin: 0;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 15px;
text-align: center;
}
.what_we_do_section {
background: url(../images/bee-bg.png) no-repeat 50% 0% #f5f9ff;
background-size: cover;
}
.what_we_do_section img {
max-width: 100%;
border-radius: 10px;
}
.what_we_do_section span.whatwedo_readmore,
.what_we_do_section span.whatwedo_less {
color: #c50d11;
font-weight: 600;
cursor: pointer;
}
.what_we_do_section .what_we_do_more {
display: none;
}
.our_history_section {
background-image: url('../images/rspl_office.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
position: relative;
}
.our_history_section:before {
content: '';
background: #000;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.7;
}
.our_history_section .container {
position: relative;
z-index: 5;
}
.our_history_section p {
color: #FFF;
}
.our_history_section h2 {
color: #FFF;
}
.mission_vision_section .mision {
display: flex;
align-items: center;
gap: 0 37px;
margin-bottom: 50px;
background: #d8311b;
padding: 30px;
border-radius: 10px;
box-shadow: 0 6px 19px 0 rgb(0 0 0 / 34%);
}
.mission_vision_section .mision h2 {
text-align: right;
margin: 0;
color: #FFF;
line-height: 1.1;
}
.mission_vision_section .mision h2 span {
color: #ffffff;
}
.mission_vision_section .mision p {
font-size: 24px;
margin: 0;
color: #FFF;
}
.mission_vision_section .mision .about_conent_discription {
border-right: 2px solid #FFF;
padding-right: 35px;
}
.mission_vision_section {
background: #f3f9ff;
}
.mission_vision_section .core_value_box {
text-align: center;
}
.mission_vision_section .core_value_box .ico-img {
width: 100px;
height: 100px;
display: inline-block;
margin-bottom: 23px;
background: #ffffff;
padding: 23px;
border-radius: 50%;
box-shadow: 0 6px 19px 0 rgb(0 0 0 / 19%);
}
.mission_vision_section .core_value_box .ico-img img {
width: 100%;
}
.mission_vision_section .core_value_box p {
font-size: 17px;
text-align: center;
font-weight: 500;
line-height: 1.2;
}
.about_pg .footer .hero-waves {
background: #f3f9ff;
}
.gallery_card_row {
gap: 20px 0;
}
.gallery_card .gallery_image {
position: relative;
overflow: hidden;
border-radius: 20px 20px 0px 0px;
box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
transition: transform 0.3s ease-in-out;
}
.gallery_card .gallery_image:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80vw;
height: 200%;
background-color: #d8311b;
opacity: .6;
transform-origin: 0 100%;
transform: rotate(90deg);
transition: all .35s;
-webkit-transform-origin: 0 100%;
-webkit-transform: rotate(90deg);
-webkit-transition: all .35s;
}
.gallery_card:hover .gallery_image:after {
transform: rotate(67deg);
-webkit-transform: rotate(75deg);
}
.gallery_card .gallery_image > img {
width: 100%;
display: block;
background: #f1f1f1;
}
.gallery_card .gallery_content {
padding: 10px;
box-shadow: -2px 2px 10px 0px rgba(68, 68, 68, 0.4);
transition: transform 0.3s ease-in-out;
background: #fff;
border-radius: 0px 0px 15px 15px;
}
.gallery_card .gallery_content p {
font-size: 18px;
text-align: center;
font-weight: 400;
margin: 0;
color: #000 !important;
}
.gallery_card .gallery_image span {
position: absolute;
right: 15px;
bottom: 15px;
z-index: 2;
font-weight: 500;
text-transform: uppercase;
font-size: 13px;
letter-spacing: 1px;
transform: translate3d(0, 50px, 0);
transition: all .35s;
transition-delay: .15s;
color: #FFF;
display: flex;
align-items: center;
gap: 0 8px;
}
.gallery_card .gallery_image span img {
width: 21px;
display: inline;
}
.gallery_card:hover .gallery_image span {
transform: translate3d(0, 0, 0);
}
.gallerycart{padding:5px 0px;transition: 0.6s;}
.gallerycart .imgs{
position: relative;
display: block;
clip-path: polygon(6.726% 0%, 93.274% 0%, 93.274% 0%, 94.364% 0.119%, 95.399% 0.464%, 96.364% 1.015%, 97.245% 1.755%, 98.029% 2.664%, 98.701% 3.723%, 99.249% 4.915%, 99.657% 6.219%, 99.912% 7.617%, 100% 9.091%, 100% 66.97%, 100% 66.97%, 99.732% 70.984%, 98.988% 73.969%, 97.863% 76.111%, 96.447% 77.599%, 94.835% 78.618%, 93.119% 79.355%, 91.39% 79.998%, 89.742% 80.733%, 88.268% 81.747%, 87.061% 83.227%, 87.061% 83.227%, 86.147% 85.185%, 85.483% 87.323%, 84.946% 89.551%, 84.409% 91.777%, 83.749% 93.91%, 82.839% 95.86%, 81.556% 97.535%, 79.775% 98.844%, 77.369% 99.696%, 74.215% 100%, 6.726% 100%, 6.726% 100%, 5.636% 99.881%, 4.601% 99.536%, 3.636% 98.985%, 2.755% 98.245%, 1.971% 97.336%, 1.299% 96.277%, 0.751% 95.085%, 0.343% 93.781%, 0.088% 92.383%, 0% 90.909%, 0% 9.091%, 0% 9.091%, 0.088% 7.617%, 0.343% 6.219%, 0.751% 4.915%, 1.299% 3.723%, 1.971% 2.664%, 2.755% 1.755%, 3.636% 1.015%, 4.601% 0.464%, 5.636% 0.119%, 6.726% 0%);
}
.gallerycart .imgs img {
display: block;
width: 100%;
transition: 0.6s;
border-radius: 25px 25px 0px 0px;
}
.gallerycart .caption{
position: relative;
padding: 10px;
}
.gallerycart .icon{
width: 50px;
height: 50px;
color: var(--contrast-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
position: absolute;
top: -50px;
right: calc(0% + 0px);
margin: 0px;
background: var(--accent-color);
border: 4px solid var(--contrast-color);
border-radius: 50px;
transition: 0.3s ease-in-out;
}
.gallerycart:hover .caption .icon {
color: rgb(51, 51, 51);
background: var(--surface-color);
border: 2px solid var(--accent-color);
}
.gallerycart:hover .imgs img {
transform: scale(1.2);
transition: 0.6s;
}
.gallerycart .imgs span{
position: absolute;
bottom: 10px;
left: 20px;
background: rgb(255 0 0 / 81%);
padding: 5px 30px;
color: #ffffff;
border-radius: 50px;
}
.gallerycart.csr .imgs img{
object-fit: contain;
height: 277px;
width: 100%;
background:#f1f1f1;
}
.swiper1-gllery .swiper-pagination{
bottom: 0px !important;
}
.swiper1-gllery .swiper-pagination-bullet-active{
background: #d43522;
}
.swiper-button-prev, .swiper-rtl .swiper-button-next,
.swiper-button-prev {
left: var(--swiper-navigation-sides-offset, 10px);
right: auto;
}
.swiper1-gllery .swiper-button-next::after, .swiper1-gllery .swiper-button-prev::after {
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 800;
padding: 1rem;
width: 2rem;
height: 2rem;
opacity: 0.75;
border-radius: 50%;
color: hsl(0deg 0% 100%);
background: hsl(210deg 20.47% 6.54%);
}
.thank_you_section {
text-align: center;
padding: 150px 0;
}
.thank_you_section .button_btn {
background: #d8311b;
font-size: 16px;
padding: 9px 30px;
border-radius: 50px;
font-weight: 400;
color: #FFF;
display: inline-block;
margin-top: 16px;
}
.letters_section .about_conent_discription,
.awards_section .about_conent_discription {
margin-bottom: 40px;
}
.letters_section .letters_row {
gap: 45px 0;
}
.letter_caver {
text-align: center;
background: #ffffff;
padding: 25px 20px;
padding-bottom: 40px;
height: 100%;
border-radius: 7px;
position: relative;
box-shadow: 0 0 20px 0 rgb(0 0 0 / 14%);
transition: all 0.5s ease;
}
.letter_caver:hover {
transform: translateY(-10px);
}
.letter_caver img {
width: 65px;
display: inline-block;
margin-bottom: 16px;
}
.letter_caver h4 {
text-align: center;
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
}
.letter_caver p {
text-align: center;
font-size: 14px;
margin: 0;
color: #666;
}
.letter_caver span {
font-weight: 600;
font-size: 23px;
position: absolute;
right: 50%;
bottom: -15px;
width: 40px;
height: 40px;
background: #c50d11;
color: #FFF;
line-height: 40px;
border-radius: 50%;
display: inline-block;
margin-right: -20px;
}
.awards_section {
/* padding-top: 20px; */
}
.awards_section .awards_row {
gap: 40px 0;
}
.even-list-wrapper {
background: #fff;
transition: .5s
border-radius: 20px 20px 0px 0px;
}
.even-list-wrapper:hover .event-list-wrapper-top .tribe-events-event-date {left: 0px;transition: .5s}
.even-list-wrapper .event-list-wrapper-top {
position: relative;
overflow:hidden;
border-radius: 20px 20px 0px 0px;
}
.even-list-wrapper .event-list-wrapper-top .tribe-events-event-image {
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.even-list-wrapper .event-list-wrapper-top .tribe-events-event-image img {
width: 100%;
}
.even-list-wrapper .event-list-wrapper-top .tribe-events-event-date {
position: absolute;
top: 0;
left: -75px;
width: 75px;
height: 100%;
margin: 0;
padding: 50px 0 0 20px;
color: #fff;
background: rgb(212 53 34 / 64%);
font-weight: 700;
transition: .5s;
display:none;
}
.even-list-wrapper .event-list-wrapper-top .tribe-events-event-date img{
transform: rotate(270deg);
position: absolute;
width: 146px;
left: -35px;
top: 90px;
}
.tribe-events-event-date .dd {
display: block;
font-size: 2em;
line-height: 30px;
}
.tribe-events-event-date .mm, .tribe-events-event-date .yy {
display: block;
font-size: 1em;
word-break: initial;
}
.event-list-wrapper-bottom {
position: relative;
height: 115px;
}
.wraper-bottom-left {
padding: 15px 92px 15px 20px;
}
.wraper-bottom-left h2.tribe-events-list-event-title {
display: block;
overflow: hidden;
margin: 0 0 7px;
font-size: 14px;
line-height: inherit;
/*white-space: nowrap;*/
text-transform: uppercase;
text-overflow: ellipsis;
}
.wraper-bottom-left h2.tribe-events-list-event-title a {
border-bottom: none;
color: #2e3e40;
}
.wraper-bottom-left .tribe-events-event-meta {
margin: 0;
padding: 0;
border: none;
background: none;
font-size: 1em;
}
.author.location .tribe-events-venue-details {
overflow: hidden;
margin: 0;
padding: 0;
border: none;
font-size: 12px;
font-style: normal;
line-height: inherit;
white-space: nowrap;
text-overflow: ellipsis;
}
.author.location .time-details {
margin: 0;
padding: 0;
font-size: 12px;
font-weight: 400;
font-style: normal;
line-height: inherit;
}
.wraper-bottom-right {
position: absolute;
top: 0;
right: 0;
width: 90px;
height: 100%;
margin: 0;
padding: 10px 5px;
background: #d43522;
text-align: center;
border-radius: 0px 0px 20px 0px;
}
.wraper-bottom-right a.more-link {
border-bottom: none;
color: #fff;
}
.wraper-bottom-right a.more-link i {
font-size: 1.6667em;
}
.wraper-bottom-right a.more-link .cost {
display: inline-block;
padding-top: 0px;
font-size: 1.3em;
font-weight: 700;
}
/*--------------------------------------------------------------
# awards_section Section
--------------------------------------------------------------*/
.awards_section .service-item {
background-color: var(--surface-color);
border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
height: 100%;
padding:15px;
transition: 0.3s;
border-radius: 10px;
display: flex;
align-items: center;
}
.awards_section .service-item .icon {
font-size: 32px;
border-radius: 10px;
position: relative;
margin-right: 15px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 195px;
height: auto;
flex-shrink: 0;
vertical-align: top;
}
.awards_section .service-item h3 {
color: color-mix(in srgb, var(--heading-color), transparent 25%);
font-weight: 700;
font-size: 18px;
transition: 0.3s;
}
.awards_section .service-item p {
margin-bottom: 0;
color: color-mix(in srgb, var(--default-color), transparent 40%);
transition: 0.3s;
}
.awards_section .service-item .read-more {
display: inline-flex;
align-items: center;
margin-top: 10px;
transition: 0.3s;
font-size: 14px;
}
.awards_section .service-item .read-more i {
margin-left: 10px;
}
/* .awards_section .service-item.item-cyan .icon {
color: #0dcaf0;
border: 1px solid #0dcaf0;
background: rgba(13, 202, 240, 0.1);
}
.awards_section .service-item.item-orange .icon {
color: #fd7e14;
border: 1px solid #fd7e14;
background: rgba(253, 126, 20, 0.1);
}
.awards_section .service-item.item-teal .icon {
color: #20c997;
border: 1px solid #20c997;
background: rgba(32, 201, 151, 0.1);
}
.awards_section .service-item.item-red .icon {
color: #df1529;
border: 1px solid #df1529;
background: rgba(223, 21, 4, 0.1);
}
.awards_section .service-item.item-indigo .icon {
color: #6610f2;
border: 1px solid #6610f2;
background: rgba(102, 16, 242, 0.1);
}
.awards_section .service-item.item-pink .icon {
color: #f3268c;
border: 1px solid #f3268c;
background: rgba(243, 38, 140, 0.1);
} */
.awards_section .service-item:hover {
box-shadow: 0px 2px 25px rgba(0, 0, 0, 0.1);
}
.awards_section .service-item:hover h3 {
color: var(--heading-color);
}
.awards_section .service-item:hover p {
color: color-mix(in srgb, var(--default-color), transparent 10%);
}
.award_card img {
max-width: 100%;
margin-bottom: 20px;
}
.award_card h4 {
font-weight: 600;
font-size: 22px;
margin: 0;
}
.award_card span.year {
font-size: 16px;
font-weight: 300;
color: #d8311b;
}
@media (max-width: 1599px) {
.timeline_custom_row .content_box {
padding: 30px 30px 30px 60px;
min-height: 500px;
}
.timeline-text {
line-height: 26px;
}
.timeline-title {
font-size: 34px;
line-height: 34px;
margin-bottom: 15px;
}
/* .timeline .slick-list {
padding: 0 110px !important;
} */
.timeline-year {
padding: 0;
font-size: 30px;
width: 100px;
height: 100px;
line-height: 100px;
}
.timeline-slider .pull-left {
left:-1%;
}
.timeline-slider .pull-right {
right: -1%;
}
.navmenu li {
margin-left: 0;
}
}
@media (max-width: 1299px) {
.navmenu a,
.navmenu a:focus {
padding: 18px 10px;
}
}
@media (max-width: 1200px) {
.timeline_custom_row .img_box {
width: 100%;
padding-top: 83%;
}
.timeline_custom_row .content_box {
width: 100%;
min-height: 400px;
padding: 60px 30px 30px 30px
}
.timeline-wrapper {
height: auto;
max-height: max-content;
}
.timeline-year {
top: 0;
left: 50%;
}
.timeline-title {
font-size: 27px;
line-height: 30px;
}
/* .timeline .slick-list {
padding: 0 30px !important;
} */
.timeline-nav__item {
padding: 10px 8px !important;
line-height: 38px;
font-size: 28px;
}
}
@media (max-width: 992px) {
.form_tabs .nav-link {
/* border: 0; */
padding: 15px;
}
.form_tabs .nav-link.active {
color: var(--accent-color);
background-color: var(--background-color);
}
.about-content {
position: relative;
}
.about .image {
top: 25%;
width: 59%;
height: auto;
}
.core_value h3 {
font-size: 40px;
}
.core_value p {
font-size: 20px;
}
.value_txt h3 {
font-size: 40px;
}
.value_txt ul i {
display: block;
margin-bottom: 7px;
}
.value_txt ul i img {
width: 68%;
}
.value_txt ul li {
font-size: 14px;
line-height: 18px;
margin-top: 15px;
}
.value_txt ul li:first-child {
margin-top: 15px;
}
.our_business .image-content-box {
max-width: 850px;
}
.home-main-sliders h5 {
font-size: 160px;
}
.swiper-container-video .content-box {
left: 67%;
}
.swiper-container-video .slider-nav-wrapper {
width: 12%;
}
.news-media .details {
padding: 20px 20px;
margin: -50px 15px 0 15px;
height: 100%;
}
.news-media .details h3 {
font-size: 16px;
}
.hero {
min-height: auto;
}
.about .image {
position: relative;
top: 0%;
width: 100%;
}
.core_value h3 {
text-align: center;
}
.core_value p {
text-align: center;
}
.value_txt h3 {
text-align: center;
}
.value_txt:before {
width: 100%;
height: 1px;
}
.value_txt {
padding-left: 0px;
padding-top: 25px;
}
.value_txt ul li {
text-align: center;
}
.value_txt ul i {
text-align: center;
}
.our_business .image-content-box .mid-match {
width: 100%;
}
.homepage-shop-by-concern-section .overlay-logo {
transform: translate(-50%, 22%);
}
.swiper-container-video .content-box {
left: 70%;
}
.features-location .features-item .cover-bor {
margin: 0px 0px 0 0px;
}
.features-location .features-item .cover-bor1 {
margin: 0px 0px 0 0px !important;
}
.features-location .features-item+.features-item .order-md-2 {
order: 1 !important;
}
.features-location .features-item .cover-bor {
top: 0px;
}
.features-location .features-item ul li {
margin-top: 0px;
}
.footware_in_products h1 {
font-size: 2.5rem;
}
.footware_in_products .about-content {
margin-top: 50px;
}
.brand_box {
padding: 60px 0px;
}
.call-to-action .container {
padding: 80px 50px;
}
.renewable-energy h1 {
font-size: 2.5rem;
}
.renewable-energy-intro .graph {
position: relative;
top: 0px;
}
.renewable-energy-intro .contentboxbottom {
top: 0px;
}
.renewable-energy .about-content {
padding-bottom: 70px;
}
.real-estate-wrap h1 {
font-size: 2.5rem;
}
.film-container .row>* {
width: 50%;
}
.media h1 {
font-size: 2.5rem;
}
.csr-policy .about-content {
padding: 60px 15px;
}
.csr-policy h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.csr-policy .about-content h3 {
font-size: 2.5rem;
line-height: 2.5rem;
}
.csr-policy-detail h2 {
line-height: 2.5rem;
font-size: 2.5rem;
}
.csr-policy-detail .csrCareWrapper .scrl-height {
height: auto;
}
.gallery-sliderb h3 {
line-height: 2.5rem;
font-size: 2.5rem;
}
.csr-policy .lft_img {
top: 60px;
}
.contact h1 {
font-size: 2.5rem;
}
.about_inner .compny_discription h2 {
font-size: 2.5rem;
margin: 90px 0px 10px 0;
}
.what_wedo_inner .compny_discription h2 {
font-size: 2.5rem;
}
.our_history_inner .compny_discription h2 {
font-size: 2.5rem;
}
.vision-value h2 {
font-size: 2.5rem;
}
.missiontxt h3 {
font-size: 2.1rem;
}
.about_inner h1 {
font-size: 3.1rem;
}
.our_history_inner .about_img:before {
left: -70px;
}
.timeline-nav {
padding: 0 40px;
}
.timeline .slick-list {
padding: 0 0px !important;
}
.timeline-nav .slick-arrow {
width: 30px;
height: 30px;
background-size: 17px;
top: 16px;
}
.shadow_effect {
width: 35px;
height: 35px;
}
.timeline-slider .slick-arrow {
top: auto;
bottom: 0;
width: 40px;
height: 40px;
background-size: 25px;
}
.timeline-slider .pull-left {
left: 50%;
margin-left: -50px;
}
.timeline-slider .pull-right {
right: 50%;
margin-right: -50px;
}
}
@media (max-width: 820px) {
.our_history_inner .scroll_tab {
max-height: 100%;
}
.about_inner .scroll_tab {
max-height: 100%;
}
.scroll_tab {
max-height: 100%;
}
.our_history_inner {
padding: 60px 0px 60px;
}
.vision-value {
padding: 60px 0px;
margin-bottom: 0px;
}
.vision-value .icon-box {
margin-bottom: 70px;
}
.what_wedo_inner .compny_discription p {
margin: 0px 0px 20px 0;
}
.our_history_inner .compny_discription p {
margin: 0px 0px 20px 0;
}
.what_wedo_inner {
padding: 60px 0px 60px;
}
.about_inner .compny_discription {
margin-top: 90px;
}
.our_history_inner .compny_discription {
padding-left: 0px;
padding-top: 40px;
}
.timeline_custom_row .content_box {
padding: 30px 30px 30px 30px;
}
.timeline-year {
font-size: 15px;
width: 60px;
height: 60px;
line-height: 60px;
top: 0px;
}
}
@media (max-width: 769px) {
.value_txt {
padding-left: 0px;
text-align: center;
padding-top: 25px;
}
.value_txt:before {
width: 100%;
height: 1px;
left: 0px;
}
.value_txt ul i img {
width: 50%;
}
.core_value h3 {
text-align: center;
}
.core_value p {
text-align: center;
}
.our_business .image-content-box {
position: relative;
left: 0px;
top: 0px;
transform: none;
}
.value_txt ul li {
text-align: center;
}
.value_txt ul i {
text-align: center;
}
.home-main-sliders h5 {
font-size: 136px;
}
.swiper-container-video .bordered-img {
width: 275px;
}
.swiper-container-video .slider-nav-wrapper {
width: 15%;
}
.homepage-shop-by-concern-section .overlay-logo {
width: 80px;
height: 80px;
transform: translate(-50%, 40%);
}
.card-shadow .img-box-a img {}
.image-content-box .mid-match.col-md-6 {
flex: 0 0 auto;
width: 100%;
}
.our_business {
padding: 60px 0;
}
.about .image {
position: relative;
top: 0%;
width: 100%;
}
.about_inner h1 {
font-size: 40px;
}
.about_inner .scroll_tab {
max-height: none;
height: auto;
}
.about_inner .compny_discription p {
margin: 0px 0px 20px 0;
}
.about_inner .about_img:before {
width: 292px;
height: 475px;
margin: -40px auto 0 -80px;
}
.what_wedo_inner .about_img:before {
width: 396px;
height: 415px;
top: -109px;
}
.scroll_tab {
max-height: none;
height: auto;
}
.vision-value h2 {
font-size: 2.5rem;
}
.vision-value .icon-box {
margin-bottom: 55px;
}
.missiontxt p {
margin: 40px 0px;
}
.rspl_history .title,
.rspl_history .title span {
font-size: 32px;
}
}
@media (max-width: 576px) {
.header .branding {
padding: 10px 15px;
}
.footer .footer-links {
margin-bottom: 15px;
width: 50%;
}
.home-main-sliders h5 {
font-size: 85px;
}
.swiper-container-video .slidebox {
margin-left: 0px;
display: block;
}
.swiper-container-video .bordered-img {
width: 100%;
}
.swiper-container-video .content-box {
left: 0%;
position: relative;
width: 100%;
text-align: left;
}
.swiper-container-video .tag-box {
left: -35px;
}
.swiper-container-video .title {
margin-left: 0px;
}
.swiper-container-video .swiper-slide .subtitle {
padding-left: 0px;
margin-bottom: 30px;
}
.swiper-container-video .slider-nav-wrapper {
width: 24%;
top: 95%;
}
.news-media .img img {
width: 100%;
}
.footer .copyright p {
text-align: center;
}
.footer .credits {
text-align: center !important;
}
.value_txt ul li {
width: 48%;
}
.value_txt h3,
.value_txt h3 span {
font-size: 30px;
}
.core_value h3,
.core_value h3 span {
font-size: 30px;
}
.rspl_history .title,
.rspl_history .title span {
font-size: 30px;
}
.section-title p {
font-size: 30px;
}
.about .about-content h3 {
font-size: 30px;
margin-bottom: 20px;
}
.about .about-content p {
text-align: justify;
}
.what_wedo_inner .about_img:after {
width: 320px;
height: 409px;
}
.what_wedo_inner .compny_discription h2 {
font-size: 2.5rem;
}
.about_inner .about_img:after {
width: 360px;
height: 381px;
bottom: -65px;
}
.about_inner .compny_discription h2 {
font-size: 2.5rem;
margin: 90px 0px 10px 0;
}
.our_history_inner .about_img img {
width: 100%;
}
.our_history_inner .about_img:before {
width: 79%;
height: 400px;
}
.our_history_inner .about_img:after {
width: 373px;
height: 482px;
}
.our_history_inner .compny_discription h2 {
font-size: 2.5rem;
}
.u-bg-default:before {
width: 438px;
height: 400px;
top: -100px;
}
.vision-value {
padding: 60px 0px;
margin-bottom: 60px;
}
.what_wedo_inner .compny_discription {
padding-left: 0px;
}
.what_wedo_inner .compny_discription p {
margin: 0px 0px 20px 0;
}
.our_history_inner .compny_discription {
padding-left: 0px;
padding-top: 90px;
}
.our_history_inner .compny_discription p {
margin: 0px 0px 20px 0;
}
.our_history_inner {
padding: 60px 0px 60px;
}
.features-location .features-item .cover-bor {
padding: 50px 0px;
margin: 0px 0px 0 0px;
}
.features-location .features-item .cover-bor1 {
margin: 0px 0px 0 0px !important;
}
.house_hold_products h1 {
font-size: 2.5rem;
}
.features-location .features-item ul li {
width: 32%;
}
.features-location .features-item ul p {
font-size: 16px;
}
.features-location .features-item h4 {
font-size: 28px;
}
.features-location .features-item ul li {
margin-bottom: 20px;
}
.footware_in_products h1 {
font-size: 2.5rem;
}
.footware_in_products .about-content {
margin-top: 80px;
}
.footware_in_products .about-content h3 {
font-size: 2.5rem;
}
.footware_in_products {
padding-bottom: 0px;
}
.solve-fifty-fifty h1 {
font-size: 2.5rem;
}
.solve-fifty-fifty .about-content {
margin-top: 40px;
}
.fot-img {
position: relative;
bottom: 0px;
left: 0px;
}
.animation-container {
margin-top: 0px;
}
.prod_slide .animation-container {
margin-top: 0px;
}
.renewable-energy h1 {
font-size: 2.5rem;
}
.renewable-energy .about-content h3 {
line-height: 2.5rem;
font-size: 2.5rem;
}
.renewable-energy .about-content {
padding-bottom: 0px;
}
.renewable-energy-intro .contentboxbottom {
position: relative;
top: 0px;
padding: 30px 15px;
}
.renewable-energy-intro .graph {
position: relative;
top: 0;
}
/* .renewable-energy {
background-position: center right -385px;
} */
.real-estate-wrap h1 {
font-size: 2.5rem;
}
.real-estate-wrap .about-content h3 {
font-size: 2.5rem;
}
.real-estate-wrap .about-content p {
font-size: 18px;
}
.film-container .row>* {
width: 100%;
}
.media h1 {
font-size: 2.5rem;
line-height: 2.5rem;
}
.media .selectdropdown {
justify-content: center;
}
.media .selectdropdown {
flex-wrap: initial;
}
.csr-policy .about-content {
padding: 60px 15px;
}
.csr-policy h1 {
font-size: 2.5rem;
margin-bottom: 10px;
}
.csr-policy .about-content h3 {
font-size: 2.1rem;
line-height: 2.5rem;
}
.csr-policy-detail h2 {
line-height: 2.1rem;
font-size: 2.1rem;
}
.csr-policy-detail .csrCareWrapper .scrl-height {
height: auto;
}
.csr-policy-detail .csrCareWrapper {
padding: 24px 15px;
}
.csr-policy-detail .csrCareWrapper h3 {
font-size: 20px;
}
.gallery-sliderb h3 {
line-height: 2.1rem;
font-size: 2.1rem;
}
.csr-policy .lft_img {
top: 60px;
}
.contact h1 {
font-size: 2.5rem;
}
.contact h2 {
font-size: 2.1rem;
}
.contact .info-item {
text-align: center;
padding: 20px 15px 30px 15px;
}
.corporate_office h2 {
font-size: 2.1rem;
}
.corporate_office .address-box {
padding: 15px;
}
.top-img-two {
width: 120px !important;
right: 20px;
}
.top-img-one {
left: -42px;
width: 188px;
}
.absolute-middle-center img {
width: 80%;
}
.footware_in_products .about-content p {
text-align: justify;
}
.header .logo {
padding: 0px !important;
}
.header .logo img {
max-height: 36px;
}
.home-main-sliders {
padding: 60px 0px 30px;
}
.timeline-slide {
margin: 0 0px;
padding: 20px 8px;
}
.timeline_custom_row .img_box {
width: 100%;
height: 345px;
}
.timeline_custom_row {
display: block;
width: 100%;
border-radius: 0px 0;
}
.timeline_custom_row .content_box {
width: 100%;
min-height: auto;
display: block;
padding: 30px 15px 30px 15px;
}
.timeline-title {
font-size: 25px;
line-height: 30px;
}
.timeline .slick-list {
padding: 0 0px !important;
}
.timeline-year {
transform: translate(-50%, -85%);
left: 50%;
}
.section-title p {
font-size: 27px;
}
.esg_ehs .about-content h3{
font-size: 2.413rem;
}
.baker .baker-item .image-stack{
display:block;
}
.appicon img{height: 50px;}
.baker .baker-item h3{
font-size: 2.413rem;
}
.services-2 .service-item.pe-5{
padding-right: 0rem !important;
}
.environmental-sustainability-pg .discription .txt{
border-radius: 5px 5px 5px 5px;
padding: 30px 0px 30px !important
}
.environmental-sustainability-pg .discription i{
position: relative;
transform: translate(0%, 0%);
top: auto;
left: auto;
}
.education-pg .service-card{
display: block !important;
padding: 15px;
}
.education-pg .service-card .icon{margin-right: 20px;margin-bottom: 20px;}
.traingle p{
font-size: 18px;
max-width: 200px;
}
.baker .baker-item .btn-get-started{padding: 8px 17px 10px 17px;}
}
@media (max-width: 400px) {
.home-main-sliders h5 {
font-size: 70px;
line-height: 50px;
}
.swiper-container-video .slider-nav-wrapper {
width: 35%;
}
.swiper-container-video .title {
font-size: 42px;
}
}
@media (max-width:360px) {
.swiper-container-video .slider-nav-wrapper {
width: 35%;
}
}