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 #E18226;
}
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: #E18226;
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: #E18226;
}
/* ------------------ Theme Button CSS End ------------------ */
/* ------------------ Theme Title CSS Start ------------------ */
.theme-title-wrap span{
color: #E18226;
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: #E18226;
transition: all 0.4s ease;
}
.header-section .nav-item:hover .nav-link::before{
width: 80%;
}
.header-section .nav-link.active{
color: #E18226;
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 #E18226;
}
@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: #E18226;
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: #E18226;
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: #E18226;
}
.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: #E18226;
}
.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: #E18226;
}
.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 #E18226;
}
.social-links li a::before{
position: absolute;
content: '';
top: 0%;
left: 0%;
transform: translate(-50%, -50%);
width: 100%;
height: 100%;
background-color: #E18226;
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: #E18226;
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: #E18226;
}
.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: #E18226;
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: #E18226;
}
.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: #e18226;
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: #E18226;
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: #e18226 !important;
border-bottom: 1px solid #e18226;
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: #E18226;
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: #E18226;
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: #E18226;
}
.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 #e18226;
}
.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 #E18226;
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: #E18226;
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 ------------------------- */