html {
overflow-x: hidden;
}
body {
margin: 0;
padding: 0;
font-family: "Manrope", sans-serif;
font-weight: 400;
color: #000;
font-size: 16px;
}
p {
color: #000;
font-size: 16px;
}
button {
box-shadow: none;
border: none;
}
section {
padding: 70px 0;
}
a {
text-decoration: none;
color: #000;
}
ul {
list-style: none;
padding-left: 0;
}
ul li {
font-family: "Manrope", sans-serif;
font-weight: 400;
color: #2f3032;
font-size: 16px;
}
.form-control {
padding: .7rem .75rem;
}
.form-control:focus {
box-shadow: none;
border: 1px solid #cea339;
}
label {
font-weight: 500;
}
.bg-color-dark-blue {
background-color: #023465;
}
.bg-color-black {
background-color: #292929;
}
.bg-color-gray {
background-color: #f2f5f7;
}
/* ------------------ Theme Button CSS Start ------------------ */
.top-inquiry-wrap a {
background-color: #cea339;
color: #fff;
padding: 7px 15px;
border-radius: 5px;
font-size: 15px;
}
.theme-btn {
padding: 10px 25px;
font-size: 15px;
font-weight: 500;
color: #fff;
border-radius: 5px;
display: inline-block;
}
.theme-btn.btn-bg-blue {
background-color: #023465;
}
.theme-btn.btn-bg-primary {
background-color: #cea339;
}
/* ------------------ Theme Button CSS End ------------------ */
/* ------------------ Theme Title CSS Start ------------------ */
.theme-title-wrap span {
color: #cea339;
border-radius: 30px;
font-weight: 600;
text-transform: capitalize;
font-size: 15px;
margin-bottom: 5px;
display: inline-block;
width: fit-content;
letter-spacing: 1px;
}
.theme-title-wrap .theme-main-title {
font-size: 40px;
font-weight: 700;
}
/* ------------------ Theme Title CSS End ------------------ */
/* ------------------ Top Left Square Box CSS Start ------------------ */
.top-left-square-box-shape {
position: relative;
}
.top-left-square-box-shape::before {
position: absolute;
content: '';
top: 0;
left: 0;
background-image: url(../images/shape/square-box-pattern-left-top.png);
background-position: left top;
background-size: contain;
background-repeat: no-repeat;
width: 100%;
height: 100%;
}
/* ------------------ Top Left Square Box CSS End ------------------ */
/* ------------------ Bottom Right Square Box CSS Start ------------------ */
.right-bottom-square-box-shape {
position: relative;
overflow: hidden;
}
.right-bottom-square-box-shape::before {
position: absolute;
content: '';
bottom: -52px;
right: -100px;
background-image: url(../images/shape/square-box-pattern-right-bottom.png);
background-position: right bottom;
background-size: contain;
background-repeat: no-repeat;
width: 70%;
height: 70%;
opacity: 0.8;
}
/* ------------------ Bottom Right Square Box CSS End ------------------ */
/* ------------------ Header Section CSS Start ------------------ */
/* Top Header CSS Start */
.topbar-header {
position: relative;
z-index: 1;
}
/* .topbar-header::before{
position: absolute;
content: '';
right: 0;
width: 33.5%;
height: 100%;
background-color: #217F4A;
z-index: -1;
} */
.topbar-header {
padding: 5px 0;
background-color: #023465;
}
.topbar-header ul {
list-style: none;
padding-left: 0;
display: flex;
flex-wrap: wrap;
margin-bottom: 0;
}
.topbar-header ul li {
align-items: center;
margin-right: 20px;
flex-wrap: wrap;
justify-content: center;
}
.topbar-header ul li:last-child {
margin-right: 0;
}
.topbar-header ul li img {
width: 17px;
margin-right: 7px;
filter: brightness(0) invert(1);
}
.topbar-header ul li p,
.topbar-header ul li a {
margin-bottom: 0;
font-size: 15px;
font-weight: 400;
color: #fff;
/* margin-right: 8px;
margin-left: 8px; */
display: inline-flex;
}
.topbar-header ul li a {
position: relative;
padding: 0 5px;
}
.topbar-header ul li a::before {
position: absolute;
content: '\002C';
bottom: 0;
right: -2px;
font-size: 20px;
}
.topbar-header ul li a:last-child::before {
content: '';
}
/* Top Header CSS End */
.header-topbar-right {
padding: 5px 0;
}
.header-topbar-right .top-inquiry-wrap a img {
width: 15px;
height: 15px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.navbar-brand img {
max-width: 200px;
width: 100%;
}
.header-section .nav-item {
margin-right: 20px;
}
.header-section .nav-link {
position: relative;
color: #000;
text-transform: capitalize;
font-size: 17px;
padding: 28px 5px;
}
.header-section .nav-link::before {
position: absolute;
content: '';
top: 0px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 3px;
background-color: #cea339;
transition: all 0.4s ease;
}
.header-section .nav-item:hover .nav-link::before {
width: 80%;
}
.header-section .nav-link.active {
color: #cea339;
font-weight: 500;
}
.header-section .nav-link.active::before {
width: 80%;
}
.dropdown-toggle::after {
display: none;
}
.dropdown-arrow img {
width: 10px;
filter: brightness(0);
}
/* ------------------ Header Section CSS End ------------------ */
/* ------------------------- Home Main Slider section CSS Start ------------------------- */
.home-slider .carousel-item::before {
position: absolute;
content: "";
height: calc(100% - 0px);
width: 100%;
left: 0;
top: 0;
background: radial-gradient(95.51% 264.21% at 92.63% 41.85%, #217f4a00 0%, #000000b4 99.98%, #000000ec 99.99%);
transition: background-color 300ms ease-in-out;
z-index: 1;
}
/* Smooth transition for carousel slides */
.home-slider .carousel-inner .carousel-item {
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
}
.home-slider .carousel-item>video,
.home-slider .carousel-item>img {
aspect-ratio: 1 / 0.435;
object-fit: cover;
width: 100%;
object-fit: cover;
/* filter: grayscale(100%); */
}
/* Zoom-in effect for active slide */
.home-slider .carousel-item.active img {
transform: scale(1.07);
/* transition: transform 5s ease-in-out; */
}
/* Reset zoom for inactive slides */
.home-slider .carousel-item img {
transform: scale(1);
transition: transform 8s ease-in-out;
}
.banner-caption {
z-index: 9;
}
.banner-caption .main-title {
color: #fff;
font-size: 65px;
font-weight: 700;
line-height: normal;
text-transform: capitalize;
}
.banner-caption .main-title span {
font-weight: 400;
}
.banner-caption .banner-desc {
color: #fff;
font-size: 20px;
line-height: normal;
}
.carousel-control-next,
.carousel-control-prev {
position: unset;
opacity: 1;
}
#carouselExampleCaptions .owl-nav {
position: absolute;
top: 50%;
right: 50px;
transform: translateY(-50%) !important;
display: block;
z-index: 9;
}
#carouselExampleCaptions .owl-nav button {
width: 45px;
height: 45px;
background-color: #fff !important;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
margin: 8px 0px;
opacity: 0.5;
transition: all 0.4s ease;
}
#carouselExampleCaptions .owl-nav button:hover {
opacity: 1;
}
#carouselExampleCaptions .owl-nav button img {
width: 13px;
height: 13px;
object-fit: contain;
}
.goBottom-btn {
display: inline-block;
width: 54px;
height: 94px;
line-height: 95px;
border-radius: 27px;
border: 1px dashed #fff;
background-color: transparent;
position: absolute;
bottom: 20px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
-webkit-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
}
.goBottom-btn:hover {
border: 1px dashed #cea339;
}
@keyframes arryUpDown {
0% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
}
.animation__arryUpDown {
-webkit-animation: arryUpDown 2s ease infinite alternate;
animation: arryUpDown 2s ease infinite alternate;
}
/* ------------------------- Home Main Slider section CSS End ------------------------- */
/* ------------------------- About Us section CSS Start ------------------------- */
.counter-wrap-box {
position: relative;
box-shadow: 0px 3px 8px #00000029;
background-color: #fff;
border-radius: 10px;
padding: 25px;
z-index: 1;
}
.counter-wrap-box::before {
position: absolute;
content: '';
bottom: 10px;
right: 10px;
width: 10px;
height: 10px;
background-color: #cea339;
transition: all 0.4s ease;
z-index: -1;
}
.counter-wrap-box:hover::before {
bottom: 10px;
right: 10px;
width: 100%;
height: 100%;
border-radius: 10px;
}
.counter-wrap-box .icon-wrap {
margin-bottom: 20px;
}
.counter-wrap-box .icon-wrap img {
width: 60px;
height: 60px;
object-fit: contain;
transition: all 0.4s ease;
}
.counter-wrap-box:hover .icon-wrap img {
filter: brightness(0) invert(1);
}
.counter-wrap-box .counter-text h2 {
font-weight: 700;
transition: all 0.4s ease;
}
.counter-wrap-box:hover .counter-text p {
transition: all 0.4s ease;
}
.counter-wrap-box:hover .counter-text h2,
.counter-wrap-box:hover .counter-text p {
color: #fff;
}
.aboutus-wrapper .aboutus-img2 {
margin-top: 80px;
}
.aboutus-wrapper .aboutus-img1 img,
.aboutus-wrapper .aboutus-img2 img {
border-radius: 10px;
aspect-ratio: 1 / 1.5;
object-fit: cover;
}
/* ------------------------- About Us section CSS End ------------------------- */
/* ------------------------- Our Products section CSS Start ------------------------- */
.our-products-wrap-box {
background-color: #E8E9EA;
}
.our-products-wrap-box .products-img-wrap {
overflow: hidden;
}
.our-products-wrap-box .products-img-wrap img {
aspect-ratio: 1 / 1.02;
object-fit: contain;
transition: all 0.4s ease;
transform: scale(1);
padding: 0 30px 30px 30px;
}
.our-products-wrap-box:hover .products-img-wrap img {
transform: scale(1.05);
}
.products-name {
font-size: 17px;
color: #000;
font-weight: 700;
padding: 15px;
z-index: 3;
}
.btn-with-arrow a {
position: relative;
color: #fff;
font-size: 15px;
font-weight: 500;
background-color: #023465;
padding: 12px 15px;
display: block;
}
.btn-with-arrow a::before {
position: absolute;
content: '';
top: 50%;
right: 0;
margin-right: 20px;
transform: translateY(-50%) !important;
background-image: url(../images/icon/right-btn-arrow.png);
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
filter: brightness(0) invert(1);
transition: all 0.4s ease;
}
.btn-with-arrow:hover a::before {
margin-right: 15px;
}
/* ------------------------- Our Products section CSS End ------------------------- */
/* ------------------------- Industry We Serve section CSS Start ------------------------- */
.industry-we-serve-section {
position: relative;
background-image: url(../images/aboutus/industry-we-serve-bg.jpeg);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.industry-we-serve-section::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #023465;
opacity: 0.9;
z-index: -1;
}
.industry-we-serve-box {
position: relative;
z-index: 3;
}
.industry-we-serve-box::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to top, #000000e3 0%, rgba(178, 34, 34, 0) 60%);
z-index: 1;
}
.industry-we-serve-box .industry-we-serve-img-wrap {
overflow: hidden;
}
.industry-we-serve-box .industry-we-serve-img-wrap img {
aspect-ratio: 1/1.3;
object-fit: cover;
transform: scale(1);
transition: all 0.3s ease;
}
.industry-we-serve-box:hover .industry-we-serve-img-wrap img {
transform: scale(1.05);
}
.industry-we-serve-box .industry-we-serve-title {
width: 100%;
padding: 0 15px 15px;
z-index: 3;
}
.industry-we-serve-box .industry-we-serve-title h2 {
position: relative;
text-align: center;
font-size: 23px;
font-weight: 700;
color: #fff;
padding-bottom: 10px;
}
.industry-we-serve-box .industry-we-serve-title h2::before {
position: absolute;
content: '';
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 20%;
height: 3px;
background-color: #cea339;
transition: all 0.4s ease;
}
.industry-we-serve-box:hover .industry-we-serve-title h2::before {
width: 40%;
}
/* ------------------------- Industry We Serve section CSS End ------------------------- */
/* ------------------------- Our Testimonials CSS Start ------------------------- */
.our-testimonials-section {}
.our-testimonials-section .owl-item {
padding: 0 5px;
}
.our-testimonials-wrap-box {
box-shadow: 0px 3px 10px #00000014;
border-radius: 6px;
padding: 40px 25px;
margin-top: 20px;
background-color: #fff;
}
.our-testimonials-wrap-box .desc p {
font-size: 16px;
}
.our-testimonials-name h2 {
font-size: 18px;
color: #023465;
font-weight: 600;
margin-bottom: 0;
}
.our-testimonials-name p {
margin-bottom: 0;
font-weight: 600;
font-size: 15px;
color: #cea339;
}
.our-testimonials-section .owl-stage-outer {
padding: 10px 0;
}
.our-testimonials-section .owl-dots {
text-align: center;
margin-top: 30px;
}
.our-testimonials-section .owl-dots .owl-dot span {
width: 10px;
height: 10px;
display: block;
background-color: #DDDDDD;
border-radius: 50%;
}
.our-testimonials-section .owl-dots .owl-dot.active span {
width: 30px;
border-radius: 10px;
background-color: #cea339;
}
.our-testimonials-section .owl-dot {
margin: 0 2px !important;
}
.our-testimonials-section .left-quote-icon {
left: 20px;
transform: translateY(-50%);
background-color: #023465;
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 2px;
}
.our-testimonials-section .left-quote-icon img {
width: 25px;
height: 25px;
object-fit: contain;
filter: brightness(0) invert(1);
}
/* ------------------------- Our Testimonials CSS End ------------------------- */
/* ------------------------- Our Brand Section CSS Start ------------------------- */
.our-brand-section {}
.our-brand-section .slide-transtion {
-webkit-transition-timing-function: linear;
transition-timing-function: linear;
}
.our-brand-section .slide-transtion .swiper-slide {
width: auto;
}
.our-brand-section .ot-brand-img {
border: 1px solid #dadae2;
border-radius: 5px;
padding: 10px 20px;
background-color: #ffffff;
}
.our-brand-section .ot-brand-img img {
width: 150px;
height: 70px;
object-fit: contain;
}
/* ------------------------- Our Brand Section CSS End ------------------------- */
/* ------------------------- Footer Section CSS Start ------------------------- */
.footer-section {
background-color: #023465;
}
.footer-section .main-footer {
padding: 70px 0;
}
.f-about-com-info {
max-width: 335px;
width: 100%;
}
.f-logo img {
max-width: 240px;
width: 100%;
background-color: #fff;
padding: 7px 20px;
}
.f-title {
font-size: 20px;
font-weight: 600;
color: #fff;
margin-bottom: 20px;
}
.f-links li,
.f-con-info li {
margin-bottom: 10px;
}
.f-links li a,
.f-con-info li a,
.f-con-info li p,
.f-about-comp p {
color: #CFCFCF;
margin-bottom: 0;
font-size: 15px;
transition: all 0.4s ease;
}
.f-links li:hover a,
.f-con-info li:hover a,
.f-con-info li:hover p {
color: #cea339;
}
.f-con-info li img {
width: 18px;
height: 18px;
object-fit: contain;
margin-top: 5px;
margin-right: 10px;
}
.bottom-footer {
border-top: 1px solid #154a7f;
padding: 20px 0;
}
.bottom-footer p {
font-size: 14px;
color: #CFCFCF;
}
.bottom-footer img {
width: 18px;
filter: brightness(0) invert(0.9);
float: right;
transition: all 0.4s ease;
}
.bottom-footer img:hover {
filter: none;
}
.f-con-info li img {
width: 20px;
height: 20px;
object-fit: contain;
margin-top: 5px;
margin-right: 10px;
}
.social-links {
display: flex;
}
.social-links li {
margin: 0 4px;
}
.social-links li a {
position: relative;
width: 35px;
height: 35px;
display: block;
border: 1px solid #fff;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.4s ease;
}
.social-links li a:hover {
border: 1px solid #cea339;
}
.social-links li a::before {
position: absolute;
content: '';
top: 0%;
left: 0%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: #cea339;
transform: scale(0);
transition: all 0.4s ease;
border-radius: 50%;
}
.social-links li a img {
width: 15px;
height: 15px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.social-links li a:hover::before {
background-color: #cea339;
transform: scale(1);
}
/* ------------------------- Footer Section CSS End ------------------------- */
/* ------------------------- Inner Banner Section CSS End ------------------------- */
.inner-banner-section {
position: relative;
padding: 100px 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 1;
}
.inner-banner-section::before {
position: absolute;
content: '';
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
opacity: 0.5;
z-index: -1;
}
.inner-banner-section .page-title {
font-size: 40px;
color: #fff;
margin-bottom: 20px;
font-weight: 700;
}
.inner-banner-section .breadcrumb {
margin-bottom: 0;
}
.inner-banner-section .breadcrumb-item a,
.inner-banner-section .breadcrumb-item {
color: #fff;
}
.inner-banner-section .breadcrumb-item.active {
color: #cea339;
}
.inner-banner-section .breadcrumb-item+.breadcrumb-item::before {
color: #fff;
}
.vision-mission-wrap ul {
border-bottom: 1px solid #ebe8e8;
padding-bottom: 5px;
}
.vision-mission-wrap .nav-item {
margin: 0 15px;
}
.vision-mission-wrap .nav-item:first-child {
margin-left: 0;
}
.vision-mission-wrap .nav-link {
position: relative;
font-size: 18px;
font-weight: 500;
color: #000;
padding: 0;
transition: all 0.4s ease;
}
.vision-mission-wrap .nav-link::before {
position: absolute;
content: '';
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #cea339;
transition: all 0.4s ease;
transform-origin: right;
}
.vision-mission-wrap .nav-link:hover::before {
width: 100%;
}
.vision-mission-wrap .nav-link.active {
background-color: transparent;
color: #cea339;
}
.vision-mission-wrap .nav-link.active::before {
width: 100%;
}
.vision-mission-section .vision-mission-items {
border-bottom: 1px solid #dbd8d8;
padding: 20px 0;
}
.vision-mission-section .vision-mission-items:first-child {
padding-top: 0;
}
.vision-mission-section .vision-mission-items:last-child {
padding-bottom: 0;
border-bottom: 0;
}
.vision-mission-section .vision-mission-images-wrap img {
border-radius: 10px;
aspect-ratio: 1 / 0.75;
object-fit: cover;
}
.vision-mission-section .vision-mission-icon {
width: 60px;
height: 60px;
object-fit: contain;
}
.vision-mission-section h2 {
margin-bottom: 0;
font-size: 28px;
font-weight: 600;
color: #023465;
padding: 10px 0;
}
.vision-mission-section .vision-mission-items p {
margin-bottom: 0;
}
/* ------------------------- Inner Banner Section CSS End ------------------------- */
/* ------------------------- Our Esteem Associate Section CSS Start ------------------------- */
.clientele-col {
border-right: 1px solid #c2c2c2;
border-bottom: 1px solid #c2c2c2;
}
.clientele-logo-box {
padding: 25px;
}
.clientele-logo-box img {
aspect-ratio: 1/0.7;
object-fit: contain;
transition: all 0.4s ease;
transform: scale(0.9);
}
.clientele-logo-box:hover img {
filter: unset;
transform: scale(1);
}
/* ------------------------- Our Esteem Associate Section CSS End ------------------------- */
/* ------------------------- Blog Section CSS Start ------------------------- */
.blog-wrap-box {
border: 1px solid #e9e9e9;
border-radius: 10px;
}
.blogs-img-wrap {
position: relative;
overflow: hidden;
}
.blogs-img-wrap img {
border-radius: 10px 10px 0 0;
transition: 0.5s;
}
.blog-date {
position: absolute;
bottom: 0;
right: 0;
background: #cea339;
margin-bottom: 0;
padding: 5px 10px;
color: #fff;
font-weight: 500;
font-size: 15px;
}
.blog-wrap-box .blogs-img-wrap img:nth-child(1) {
transform: translatex(50%) scalex(2);
opacity: 0;
filter: blur(10px);
}
.blog-wrap-box .blogs-img-wrap img:nth-child(2) {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
object-fit: cover;
}
.blog-wrap-box:hover .blogs-img-wrap img:nth-child(1) {
transform: translatex(0) scalex(1);
opacity: 1;
filter: blur(0);
}
.blog-wrap-box:hover .blogs-img-wrap img:nth-child(2) {
transform: translatex(-50%) scalex(2);
opacity: 0;
filter: blur(10px);
}
.blogs-text-wrap .blog-date {
color: #000;
font-weight: 500;
}
.blogs-text-wrap h2 {
font-size: 20px;
color: #000000;
font-weight: 600;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
/* number of lines to show */
line-clamp: 2;
-webkit-box-orient: vertical;
}
.blog-detail-wrapper .blog-img img {
border-radius: 10px;
}
.blog-detail-title {
font-size: 30px;
color: #cea339;
font-weight: 700;
margin-bottom: 25px;
}
.blog-detail-desc h1,
.blog-detail-desc h2,
.blog-detail-desc h3,
.blog-detail-desc h4,
.blog-detail-desc h5,
.blog-detail-desc h6 {
font-size: 22px;
color: #023465;
font-weight: 700;
margin: 10px 0 15px;
}
.blog-detail-desc ul li p strong {
font-size: 15px;
color: #023465;
font-weight: 700;
margin-right: 5px;
}
.blog-detail-desc ul li h1,
.blog-detail-desc ul li h2,
.blog-detail-desc ul li h3,
.blog-detail-desc ul li h4,
.blog-detail-desc ul li h5,
.blog-detail-desc ul li h6 {
font-size: 18px;
color: #000;
font-weight: 600;
margin-bottom: 3px;
}
.blog-detail-desc ul li {
position: relative;
padding-left: 25px;
}
.blog-detail-desc ul li::before {
position: absolute;
content: '';
top: 5px;
left: 0;
background-image: url(../images/icon/right-arrow-icon.png);
background-size: contain;
background-repeat: no-repeat;
width: 17px;
height: 13px;
}
/* ------------------------- Blog Section CSS End ------------------------- */
/* ------------------------- Contact Us Section CSS Start ------------------------- */
.contactus-detail-wrap {
background-color: #023465;
border: 1px solid #e4e4e4;
padding: 30px 20px;
}
.contactus-detail-wrap .theme-main-title {
font-size: 25px;
color: #cea339 !important;
border-bottom: 1px solid #cea339;
padding-bottom: 5px;
width: fit-content;
}
.contact-form-wrapper .theme-main-title {
font-size: 25px;
color: #000;
border-bottom: 1px solid #cecece;
padding-bottom: 5px;
width: fit-content;
}
.contact-form-wrapper .theme-main-title .contactus-detail-items {
padding: 20px 0;
border-bottom: 1px solid #e4e4e4;
}
.contactus-detail-items {
padding: 20px 0;
border-bottom: 1px solid #ffffff3b;
}
.contactus-detail-items:last-child {
border-bottom: 0;
}
.contactus-detail-items .icon {
width: 45px;
height: 45px;
background-color: #cea339;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.contactus-detail-items .icon img {
width: 22px;
height: 22px;
object-fit: contain;
filter: brightness(0) invert(1);
}
.contactus-detail-items .title {
font-weight: 700;
font-size: 20px;
color: #fff;
}
.contactus-detail-items p,
.contactus-detail-items a {
word-break: break-all;
color: #fff;
}
.contactus-detail-items a {
position: relative;
padding: 0 5px;
display: inline-block;
}
.contactus-detail-items a::before {
position: absolute;
content: '\002C';
bottom: 0;
right: -2px;
font-size: 20px;
}
.contactus-detail-items a:last-child::before {
content: '';
}
.contact-form-wrapper {
box-shadow: 0px 0px 60px 30px #00000008;
background-color: #fff;
padding: 40px;
border-radius: 0 10px 10px 0;
height: 100%;
}
/* ------------------------- Contact Us Section CSS End ------------------------- */
/* ------------------------- Products Detail CSS Starts ------------------------- */
.product-detail-img-wrap {
position: relative;
background-color: #f6f7f9;
padding: 40px;
}
/* .product-detail-img-wrap::before{
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 90%;
height: 90%;
background-color: transparent;
border: 2px solid #023465;
z-index: -1;
} */
.products-detail-tabs-wrap ul {
border-bottom: 1px solid #ebe8e8;
padding-bottom: 5px;
}
.products-detail-tabs-wrap .nav-item {
margin: 0 15px;
}
.products-detail-tabs-wrap .nav-item:first-child {
margin-left: 0;
}
.products-detail-tabs-wrap .nav-link {
position: relative;
font-size: 18px;
font-weight: 500;
color: #000;
padding: 0;
transition: all 0.4s ease;
}
.products-detail-tabs-wrap .nav-link::before {
position: absolute;
content: '';
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background-color: #cea339;
transition: all 0.4s ease;
transform-origin: right;
}
.products-detail-tabs-wrap .nav-link:hover::before {
width: 100%;
}
.products-detail-tabs-wrap .nav-link.active {
background-color: transparent;
color: #cea339;
}
.products-detail-tabs-wrap .nav-link.active::before {
width: 100%;
}
/* ------------------------- Products Detail CSS End ------------------------- */
/* ------------------------- Product Subcategory CSS Start ------------------------- */
.product-subcategory-img-wrap {
position: relative;
z-index: 1;
padding-left: 25px;
padding-bottom: 25px;
}
.product-subcategory-img-wrap::before {
position: absolute;
content: '';
bottom: 0;
left: 0;
width: 95%;
height: 95%;
background-color: transparent;
z-index: -1;
border: 2px solid #cea339;
}
.product-subcategory-img-wrap img {
background-color: #f6f7f9;
padding: 25px;
}
/* ------------------------- Product Subcategory CSS End ------------------------- */
/* ------------------------- Sidebar Inquiry Form CSS Start ------------------------- */
.close-btn-wrap {
position: absolute;
top: 10px;
right: 10px;
}
.close-btn-wrap a {
width: 35px;
height: 35px;
border: 2px solid #cea339;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn-wrap a img {
width: 15px;
height: 15px;
object-fit: contain;
}
.sidebar-form-title {
font-size: 25px;
}
.sidebar-contact {
position: fixed;
top: 0;
right: -35%;
width: 35%;
height: 100%;
padding: 40px;
background: #ffffff;
/* box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px; */
transition: 0.5s;
z-index: 1055;
/* Higher than Bootstrap offcanvas & header */
}
.sidebar-contact.active {
right: 0;
box-shadow: rgba #2123261a (33, 35, 38, 0.1) 10px 0px 10px 10px;
}
/*.sidebar-toggle-btn {
position: absolute;
top: 50%;
left: -48px;
transform: translateY(-50%);
background: #cea339;
width: 48px;
height: 200px;
border-radius: 10px 0 0 10px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border: none;
} */
.sidebar-toggle-btn span {
transform: rotate(-90deg);
color: #ffffff;
font-size: 14px;
font-weight: 500;
white-space: nowrap;
letter-spacing: 1px;
}
.sidebar-toggle-btn.active {
background: #c82333;
}
.sidebar-contact .scroll {
max-height: 100%;
overflow-y: auto;
overflow-x: hidden;
}
/* ------------------------- Sidebar Inquiry Form CSS Start ------------------------- */
/* ------------------------- Sticky Whatsaap icon CSS Start ------------------------- */
.sticky-whatsaaps-icon {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9;
}
.sticky-whatsaaps-icon img {
width: 55px;
}
/* ------------------------- Sticky Whatsaap icon CSS End ------------------------- */
/* ------------------------- Specification Charts CSS Start ------------------------- */
.specification-wrapper .accordion-item {
background-color: transparent;
border: 1px solid #e9e8e8;
margin-bottom: 15px;
}
.specification-wrapper .accordion-item:first-child {
border-top: 1px solid #e9e8e8;
}
.specification-wrapper .accordion-item:last-child {
border-bottom: 1px solid #e9e8e8;
}
.specification-wrapper .accordion-button {
background-color: #edf1f4;
padding: 15px 15px;
border-bottom: 1px solid #02346547;
background-color: #023465;
}
.specification-wrapper .accordion-button h2 {
font-size: 18px;
margin-bottom: 0;
font-weight: 800;
text-transform: uppercase;
color: #fff;
}
.specification-wrapper .accordion-button::after {
filter: brightness(0) invert(1);
}
.specification-wrapper .accordion-button:focus {
box-shadow: none;
}
.specification-wrapper .accordion-button:not(.collapsed) {
background-color: #023465;
}
.specification-wrapper .accordion-button:not(.collapsed) h2 {
color: #fff;
}
.specification-wrapper .accordion-button:not(.collapsed)::after {
filter: brightness(0) invert(1);
}
.specification-wrapper table thead th {
background-color: #f3f6f8;
}
.specification-wrapper table thead th,
.specification-wrapper table tbody td {
text-align: center;
text-wrap-mode: nowrap;
}
/* ------------------------- Specification Charts CSS End ------------------------- */
.specification-wrapper .accordion-button {
color: white;
font-weight: 600;
font-size: 20px;
}