﻿
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
--primary: #ff7a00;
--dark: #111;
--text: #666;
--brand:#f05d30;
--brand2:#212d37;
}

body {font-family: 'Poppins',sans-serif;color: var(--text);line-height: 1.7;}
.form-control, .btn{border-radius:2px;}
textarea.form-control{height:auto !important;}

/* ================= TOPBAR ================= */
.topbar {background: #f3f3f3;font-size: 13px;padding: 8px 0;}
.topbar a{color:#212d37; text-decoration:none;transition:.4s;}
.topbar a .bi{color:#f05d30;transition:.4s;}
.topbar a:hover{color:#f05d30;}
.topbar a:hover .bi{color:#212d37;}

/* ================= NAVBAR ================= */
.navbar{padding: 22px 0;transition: all .4s ease;background: #fff;}
.navbar-brand{padding:0;}
.navbar-brand img{width:180px; height:auto;}
.navbar-nav .nav-link {font-weight: 500;margin-left: 28px;color: #333;position: relative;transition: .3s;}
.navbar-nav .nav-link::after {content: "";position: absolute;left: 0;bottom: -6px;width: 0%;height: 2px;background: var(--primary);transition: .3s;}
.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {width: 100%;}
.navbar.scrolled {padding: 12px 0 !important;background: #ffffff;box-shadow: 0 8px 20px rgba(0,0,0,0.08);}

/* ================= HERO ================= */
.hero-slider{height:90vh;overflow:hidden;}
.hero-slider .carousel-item{height:90vh;position:relative;}
.hero-slider img{width:100%;height:100%;object-fit:cover;animation: zoomEffect 15s ease-in-out infinite;}

@keyframes zoomEffect{
0%{transform:scale(1);}
100%{transform:scale(1.15);}
}

.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.45);}

.hero-content{position:absolute;top:50%;left:10%;transform:translate(0%,-50%);color:#fff;max-width:700px;}
.hero-content h1{font-size: 64px;font-weight: 700;letter-spacing: -1px;animation: fadeUp 1s ease;}
.hero-content p{margin-top: 20px;font-size: 16px;max-width: 480px;animation: fadeUp 1.5s ease;}
.hero-btn{animation: fadeUp 2s ease;}

@keyframes fadeUp{
from{opacity:0;transform:translateY(40px);}
to{opacity:1;transform:translateY(0);}
}

.btn-orange {background:var(--primary);color:#fff;padding:14px 34px;font-weight:500;margin-top:30px;border-radius:4px;}
.btn-orange:hover {background:#e86e00; color:#fff;}
.btn-brand{background-color:var(--brand); color:#fff;}
.btn-brand:hover{background-color:var(--brand2); color:#fff;}
.text-brand{color:#fa9a00;}

/* ================= SECTION SPACING ================= */
section{padding: 100px 0;}
.section-title{font-size:21px;display:flex;align-items:center;gap:20px;}
.section-title:after{content:"";flex:1;height:1px;background:#ccc;}
.section-title2{font-size:21px;display:flex;align-items:center;gap:20px;justify-content:center;padding:0 10%;}
.section-title2:after, .section-title2:before{content:"";flex:1;height:1px;background:#515151;}

.testimonial_slider{background:#f8f9fa;}
.testimonial_slider .testimonial-card-body{position:relative;background:#fff;padding:20px;border-radius:4px;height:100%;}
.testimonial_slider .testimonial-card-body:after{content:''; position:absolute; bottom:-20px; left:15%; border-style:solid; border-width:20px; border-color:transparent; border-left-color:#fff;}
.testimonial_slider .testimonial-card h5{font-weight:600;color:#263238;}
.testimonial_slider .testimonial-card p{font-size:15px;color:#777;line-height:1.7;margin:18px 0;}
.testimonial_slider .avatar{width:60px !important;height:60px;border-radius:50%;object-fit:cover;}
.testimonial_slider .carousel{cursor:grab;}
.testimonial_slider .carousel:active{cursor:grabbing;}
.testimonial_slider .carousel-inner{padding-bottom:2rem;}
.testimonial-card-footer{display:flex; gap:1.5rem; padding-top:1.5rem;}

/* ================= CARDS ================= */
.card {border: none;border-radius: 6px;overflow: hidden;transition: .3s;}
.card:hover {transform: translateY(-6px);box-shadow: 0 15px 30px rgba(0,0,0,0.08);}
.card img {height: 240px;object-fit: cover;}

/* ================= PROJECT SECTION ================= */
.projects {background:#0f0f0f;}
.projects .nav-item{padding:0 1rem;}
.projects .nav-link {color:#aaa; position:relative; padding-left:.5rem; padding-right:.5rem;}
.projects .nav-link.active {color:var(--primary);}
.projects .nav-link::after {content:"";position:absolute;left: 0;bottom:0px;width: 0%;height: 2px;background: var(--primary);transition: .3s;}
.projects .nav-link:hover{color:var(--primary);}
.projects .nav-link:hover::after,
.projects .nav-link.active::after {width: 100%;}
.gallery img {height: 260px;object-fit: cover;border-radius: 6px;transition: .4s;}
.gallery img:hover {transform: scale(1.08);}
.gallery-item{position:relative;cursor:pointer; transition:.4s;}
.gallery-item img{height:250px; width:100%;object-fit: cover;border-radius:12px 12px 0 0;}
.gallery-item img:hover{transform:scale(1.08);}
.thumb-title{position:absolute;bottom:0;width:100%;padding:8px 12px;font-size:16px;font-weight:bold;text-align:center;background:linear-gradient(to top, rgba(0,0,0,.75), transparent);}
.modal-img{width:100%;border-radius:12px; max-height:80vh;}
.modal-title-text{color:#fff;font-size:21px;margin-top:10px;font-weight:bold;}
.project-item .content{padding:1rem; background:#fff; border-radius:0 0 12px 12px;}
.project-item .project-type{font-size:14px;display:flex;align-items:center;gap:20px;color:#666;}
.project-item .project-type:after{content:"";flex:1;height:1px;background:#ccc;}
.project-item .project-title{font-size:18px; margin-top:.5rem;}

.collapse_style1 .accordion-item{border-right:none; border-left:none; border-radius:0 !important;}
.collapse_style1 .accordion-button{font-weight:700; border-radius:0 !important;}
.collapse_style1 .accordion-button:focus{outline:none; box-shadow:none;}
.collapse_style1 .accordion-button:not(.collapsed){background-color:transparent; border-bottom:solid 2px #ff4d1c}
.collapse_style1 .accordion-body{color:#666;}

/* ================= TESTIMONIAL ================= */
.testimonials {background: linear-gradient(rgba(0,0,0,.75), rgba(0,0,0,.75)), url('https://images.unsplash.com/photo-1504307651254-35680f356dfd');background-size: cover;padding: 120px 0;}

/* ================= FOOTER ================= */
.footer {background: #1c1c1c;padding: 80px 0 20px;color: #aaa;}
.footer h5, .footer h6 {color: #fff;}
.footer a{text-decoration:none;}
.footer-links a , .link-1{color:#aaa; transition:.3s; position:relative;}
.footer-links a{padding-left:1rem;}
.footer-links a:before{content:"\f105"; font-family:var(--fa-style-family,"Font Awesome 6 Free"); font-weight:bold; font-size:80%; position:absolute; top:0px; left:0; transition:.4s; transform-origin:5px 5px; transform:rotate(0deg);}
.footer-links a:hover:before{transform:rotate(45deg);}
.footer-links a:hover,  .link-1:hover{color: var(--primary);}
.footer-links li{margin-bottom:.5rem;}

.social-icons li{display:inline-block; margin-right:1rem; margin-top:.75rem;}
.social-icons a{display:block; width:48px; height:48px; font-size:1.25rem; border:solid 1px #999; color:#999; border-radius:50%; display:inline-flex; justify-content:center; align-items:center;position:relative;}
.social-icons a:hover{border-color:var(--primary);}
.social-icons .fb .fa_fly{transform-origin:14px 11px;}
.social-icons .twt .fa_fly{transform-origin:8px 0px;}
.social-icons .in .fa_fly{transform-origin:24px 2px;}
.social-icons .fa_fly{transition:transform .3s ease; color:#999; position:absolute; left:50%; top:50%; z-index:1; transform:rotate(0deg) translate(-50%, -50%);}
.social-icons a:hover .fa_fly{transform:rotate(45deg); color:var(--primary);}

.quote-box{background:#f5f5f5;padding:1.75rem;border:1px solid #ddd;max-width:500px;}
.quote-title{font-size:21px;display:flex;align-items:center;gap:20px;}
.quote-title:after{content:"";flex:1;height:1px;background:#ccc;}
.quote-desc{color:#777;margin:20px 0 30px;}
.service-card img{width:100%;height:230px;object-fit:cover;margin-bottom:20px;}
.service-card h4{font-size:18px;margin-bottom:10px;}
.service-card p{color:#777;font-size:14px;line-height:1.7;}
.read-more{color:#ff4d1c;text-decoration:none;font-weight:600;border-bottom:2px solid #ff4d1c;padding-bottom:3px; position:relative; display:inline-block;}
.read-more:after{content:''; position:absolute; top:100%; left:0; width:0%; height:2px; background-color:#333; transition:.3s;}
.read-more:hover:after{width:100%;}
.news-card img{width:100%;height:220px;object-fit:cover;margin-bottom:10px;}
.news-card h4{font-size:18px; color:#f05a31; margin-bottom:0px; height:40px; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;}
.news-card p{font-size:14px; margin-top:1rem; line-height:1.7; overflow:hidden; display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical;}
.news-card-body{background-color:#343434; color:#fff; position:relative; z-index:0; padding:1rem; margin-bottom:1.5rem;}
.news-card-body:before{content:''; position:absolute; z-index:-1; top:-20px; left:10%; border-width:20px; border-style:solid; border-color:transparent; border-left-color:#343434;}
.news-card .btn-brand{font-size:90%; padding:.75rem 1.5rem; margin-bottom:-2.75rem; margin-right:-1rem;}
.news-card .news-card-dates{display:flex; gap:1rem; color:#999; font-size:80%; margin-top:.75rem;}
.project-slider{position:relative; padding:0 3rem;}
.project-slider .carousel-nav{position:absolute; top:40%; left:0; right:0; justify-content:space-between;}
.carousel-nav{display:flex;gap:10px;}
.carousel-nav .nav-btn{width:40px;height:40px;border:none;background:#ddd;display:flex;align-items:center;justify-content:center;cursor:pointer;}
.carousel-nav .nav-btn:hover{background:#ff4d1c;color:white;}
.services-carousel .owl-stage-outer{padding:1rem 0;}

.owl-carousel .owl-dots{text-align:center; display:flex; gap:.5rem; justify-content:center; align-items:center;}
.owl-carousel button.owl-dot{border-radius:50%; width:12px; height:12px; border:solid 2px #fff;}
.owl-carousel button.owl-dot.active{width:14px; height:14px; background:#fff;}



@media (max-width: 576px) {

}
@media (min-width: 577px) and (max-width: 768px) {

}
@media (min-width: 768px) and (max-width: 992px) {

}
@media (min-width: 992px) {

} 
@media (max-width: 767.98px) {
.navbar-brand img{width:120px;}
}


@media (min-width: 768px) {
.footer-links{column-count:3;}
}

@media (min-width: 992px) {

}
