/* Start Here */
html{
overflow-x: hidden;
}
body{
margin: 0;
padding: 0;
}
body{
overflow-x: hidden;
}
/* header */
header {
background: var(--transparent);
color: var(--white);
padding: 10px 0;
position: absolute;
width: 100%;
z-index: 9999;
}
.logo-set{
width: 100%;
height: 120px;
}
.navbar-expand-lg .navbar-collapse {
margin-top: 28px;
}
.navbar-nav .nav-link {
color: var(--white);
padding: 10px 20px;
transition: color 0.3s;
}
li.nav-item {
padding: 0 20px;
}
.navbar-nav a.nav-link {
font-size: 18px;
}
.navbar-nav .nav-link:hover {
color: var(--main-color);
}
.navbar-nav .nav-link.active {
color: var(--main-color);
}
.btn-one {
background:var(--main-color);
color:var(--white);
padding: 10px 20px;
border-radius: 50px;
text-decoration: none;
transition: background 0.3s;
}
.btn-one:hover {
background: #b4463a;
}
.navbar-toggler {
border: none;
color:var(--white);
}
.navbar-toggler:focus {
outline: none;
box-shadow: none;
}
.offcanvas.show:not(.hiding), .offcanvas.showing {
background: transparent;
z-index: 999999;
}
.offcanvas-header {
background: #ffffffde;
}
.offcanvas-body {
background: #000000db;
}
/* header */
/* hero section */
.hero-back{
background:url(../images/background/hero-back.webp);
height: 800px;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.hero-slide .slick-list.draggable {
margin: 0;
}
.set-pad{
padding: 260px 0 200px;
}
.hero-back h1{
color:var(--white);
margin: 20px 0;
}
.span-text{
color: var(--main-color);
}
.hero-back p{
color:var(--white);
margin: 20px auto 40px;
width: 70%;
}
/* about sec */

.about-set{
padding: 70px 0;
}

img{
max-width: 100%;
}

h4{
color: var(--main-color);
font-size: 20px;
}
.set-abt {
border-radius: 0 30px 0 30px;
}
.about-set h2{
color: var(--black);
font-weight: 600;
}
.about-set p {
margin: 20px 0;
}
h2{
color: var(--main-color);
margin: 0 0 20px 0;
}
.btn-two {
border: 1px solid var(--white);
padding: 10px 24px;
border-radius: 50px;
text-decoration: none;
background: var(--transparent);
color: var(--white);
transition: 0.2s;
}
.btn-two:hover {
border: 0px solid var(--white);
background: var(--main-color);
color: var(--white);
transition: 0.1s;
}

/* services set */

.services-set{
padding: 90px 0;
background: #F7F7F7;
}
.title-text{
text-align: center;
margin: 0 auto 30px auto;
}
.title-text p{
width: 70%;
margin: auto;
}

/* service box */
.outer-box{
padding: 20px 0;
margin: 20px 10px;
}
.slick-next:before, .slick-prev:before {
opacity: 1;
color: #fff;
background: var(--main-color);
padding: 7px 10px 10px 10px;
border-radius: 50px;
}

.slick-list.draggable {
margin: 0 20px 0 40px;
}

.slick-dots li button:before {
font-size: 24px;
opacity: 0.25;
color: #cf362c;
}
.set-tab-port .slick-next {
right: auto;
margin: 0 19px 0;
}
.set-tab-port .slick-next, .set-tab-port .slick-prev {
top: -4%;
}
.set-tab-port .slick-next {
left: -7px;
top: 54%;
}
.set-tab-port .slick-prev {
left: 10px;
}
.inner-box{
background: var(--white);
border-radius: 20px;
}
.inner-box img{
height: 200px;
width: 100%;
border-radius: 20px 20px 0 0;
}
.inner-box .content{
padding: 20px 10px;
}
.inner-box .content h5{
font-size: 16px;
}
.inner-box .content p{
font-size: 14px;
height: 120px;
}



/* cta banner */
.cta-sec-1-set{
background: url(../images/background/cta-bg.webp);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment:fixed ;
}
.overlay-set{
padding: 150px 0;
background: #00000067;
}
.overlay-set h2, h3{
color: var(--white);
}
.overlay-set h3{
margin-bottom: 30px;
}

/* timeline-set */
.timeline-set{
padding: 70px 0;
}

.timeline-set p{
width: 70%;
margin: auto;
margin-bottom: 60px;
}
.timeline-set .content{
margin:auto;
height: 300px;
}
.timeline-set .content h3{
color: var(--black);
margin: auto;
}

.timeline-set .content p{
width: 100%;
margin: auto;
}
/* num grid */
.num-grid {
display: inline-grid;
margin: auto 0 auto 60px;
}
.num-set{
background: var(--main-color);
color: var(--white);
padding: 5px 11px 5px 12px;
border-radius: 50px;
}
.ver-line{
background: #8E8E8E;
width: 2px;
height: 220px;
margin: 20px auto;
}

/* timeline-grid-set */
.timeline-grid-set{
padding: 90px 0;
background: #131927;
clip-path: polygon(0 0, 100% 0, 100% 5%, 100% 100%, 5% 100%, 0 95%);
}
.timeline-grid-set h3{
margin: 10px 0;
font-size: 22px;
}
.timeline-grid-set h2 {
color: var(--white);
margin: 0 0 20px 0;
}
.timeline-grid-set h3 {
color: var(--main-color);
}
.timeline-grid-set p {
color: var(--white);
margin: 0 auto 30px;
width: 70%;
}
.time-box {
margin: 10px;
border: 1px solid #ffffff21;
padding: 10px;
border-radius: 20px 0;
min-height: 480px;
}
.time-box:hover{
background: #494c5594;
}
.time-box p {
width: 100% !important;
}
.time-box img {
border-radius: 20px 0px 20px 0px;
margin-bottom: 20px;
}
/* timeline-grid-set */

/* portfolio */
.portfolio-set{
padding: 70px 0;
background: #F7F7F7;
}
.portfolio-set h2{
text-align: center;
padding: 15px 0 0;
}
.portfolio-set p{
width: 70%;
text-align: center;
margin: auto;
padding: 0px 0 30px;
}
#portfolio {
padding: 50px 0;
margin: 0 auto;
}
.filter-button {
font-size: 14px;
border: 1px solid #db584e;
border-radius: 5px;
text-align: center;
color: #db584e;
margin-bottom: 30px;
padding: 10px 10px;
}
.filter-button:hover {
color: #ffffff;
background-color: #db584e;
}
.filter-button.active {
background-color: #db584e;
color: white;
}
.port-image {
width: 100%;
}
.gallery_product {
margin-bottom: 30px;
}
/* portfolio */

/* brand logo */
.logo-sec-set {
padding: 90px 0 20px 0;
}
.logo-sec-set p{
width: 70%;
margin: auto auto 50px auto;
}
.set-bg-color {
background: var(--main-color);
}
.set-bg-color img{
/* height: 120px; */
aspect-ratio: 3/1;
text-align: center;
object-fit: contain;
/* margin: auto; */
}
.logo-slider{
margin:0 0 0 70px; 
}
/* work set */
.work-set{
padding: 90px 0;
}
section.work-set img {
border-radius: 30px 0;
}
.work-set h2{
color: var(--black);
font-size: 24px;
}
.set-tag {
display: flex;
flex-wrap: wrap;
}
a.btn-tag{
border: 1px solid var(--ltr-border);
border-radius: 50px;
padding: 8px 15px;
margin:0px 5px;
text-decoration: none;
font-size: 14px;
color: var(--black);
margin: 10px 0 10px 5px ;
}
/* About Us Page */
.banner-set{
text-align: center;
height: 400px;
background: url(../images/background/banner-set.webp);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
.banner-set .overlay-set{
background: #00000067;
height: 100%;
}
.banner-set h1{
padding: 50px 0 0 0;
color: var(--white);
}
/* About Us Page */
/* Our services */
.service-page img{
border-radius: 20px 0 20px 0;
padding: 15px;
}
.service-page h2{
font-size: 28px;
font-weight:500;
}
.our-services{
padding: 70px 0;
}
.our-services-2{
padding: 70px 0;
background: #c2c2c25b;
}
.intro-set{
padding: 70px 0;
}
.faqs-set{
padding: 70px 0;
background: #E9E9E9;
}
.faqs-set h2{
text-align: center;
}
.accordion-button:not(.collapsed) {
color: #ffffff;
background-color: #D76239;
box-shadow: inset 0 calc(-1* var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
border-radius: 0px 0px 50px 50px;
}
.accordion-button:focus {
z-index: 3;
outline: 0;
box-shadow:none;
}
/* Our services */
/* contact page */
.contact-form input, textarea{
margin:10px 0;
width: 100%;
border-radius: 50px;
padding: 10px 0 10px 20px;
border: 1px solid var(--ltr-border);
box-shadow: 1px 5px var(--ltr-border);
}
.contact-form button{
border: none;
margin-top: 20px;
}
/* contact page */
/* footer css */
.main-footer{
background: var(--footer-bg);
padding: 50px 0;
color: var(--footer-text) !important;
}
.main-footer h3{
text-align: left;
margin: 30px 0;
font-size: 22px;
}
.main-footer a{
text-decoration: none;
color: var(--white);
}
.main-footer a:hover{
color: var(--main-color);
}
.logo-footer-set{
height: 150px;
margin: 0 0 30px 0;
}
.main-footer ul{
list-style: none;
padding: 0;
}
ul.social-links li {
width: fit-content;
}
.contact li{
display: flex;
}
.contact li i{
margin: auto 0;
padding-right: 10px;
}
.contact li i:hover{
color: var(--main-color);
}
.contact li p{
margin: auto 0;
}
.social-links{
text-align: center;
font-size: 22px;
}
.pre-footer{
background: var(--pre-footer);
color: var(--footer-text) !important;
padding: 20px 0;
}
.pre-footer p{
margin: 0;
padding: 0;
}