:root {
   --primary-color: #052C49;
   --primary1-color: #51585f;
   --primary2-color: #68ABDB;
   --secondary-color: #ffffff;
   --secondary1-color: #DC6D35;
   --secondary2-color: #74A953;
   --secondary3-color: #C74332;
   --accent-color: #0a4168;
   --light-bg: #f8f9fa;
}

body {
   font-family: 'Poppins', sans-serif;
   color: #333;
}

/* Smooth Scrolling */
html {
   scroll-behavior: smooth;
}

.btn-logos {
   background-color: var(--secondary3-color);
   color: var(--secondary-color) !important;
   font-weight: 600;
   padding: 0.5rem 1.5rem;
   border-radius: 50px;
   transition: all 0.3s ease;
}

.btn-logos:hover {
   background-color: var(--secondary2-color);
   color: var(--secondary-color) !important;
   font-weight: 600;
   padding: 0.5rem 1.5rem;
   border-radius: 50px;
   transition: all 0.3s ease;
}

/* Navbar Styling */
.navbar {
   background-color: var(--primary-color) !important;
   padding: 1rem 0;
   transition: all 0.3s ease;
}

.navbar-brand {
   font-weight: 700;
   font-size: 1.5rem;
   color: var(--secondary-color) !important;
}

.navbar-nav .nav-link {
   color: rgba(255, 255, 255, 0.85) !important;
   margin: 0 0.5rem;
   font-weight: 400;
   transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
   color: var(--secondary-color) !important;
}

.navbar .btn-quote {
   background-color: var(--secondary-color);
   color: var(--primary-color) !important;
   font-weight: 600;
   padding: 0.5rem 1.5rem;
   border-radius: 50px;
   transition: all 0.3s ease;
}

.navbar .btn-quote:hover {
   background-color: var(--secondary3-color);
   transform: translateY(-2px);
   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Hero Section Styling */
.hero-section {
   min-height: 90vh;
   padding-top: 80px;
   background-color: #f8f9fa;
}

/* Carousel Text Styling */
.carousel-inner {
   padding: 2rem 0;
}

.hero-title {
   font-weight: 700;
   color: var(--primary-color);
   margin-bottom: 1.5rem;
}

.hero-subtitle {
   font-size: 1.2rem;
   color: #555;
   line-height: 1.7;
}

.hero-service-title {
   font-weight: 600;
   color: var(--primary-color);
   margin-bottom: 1rem;
   display: flex;
   align-items: center;
   gap: 10px;
}

.hero-service-title i {
   font-size: 1.5rem;
}

.hero-service-desc {
   font-size: 1.1rem;
   color: #555;
   line-height: 1.7;
}

/* Efek Fade-in yang Lambat untuk Carousel Teks */
#textCarousel .carousel-item {
   transition-duration: 1.5s;
}

.carousel-indicators [data-bs-target] {
   background-color: var(--primary-color);
}

/* Section Headers */
.section-title {
   font-weight: 700;
   color: var(--primary-color);
   position: relative;
   padding-bottom: 15px;
   margin-bottom: 50px;
}

.section-title::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 80px;
   height: 4px;
   background-color: var(--primary-color);
}

/* Portfolio Section */
.portfolio-item {
   position: relative;
   overflow: hidden;
   border-radius: 8px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   margin-bottom: 30px;
}

.portfolio-item img {
   width: 100%;
   height: 250px;
   object-fit: cover;
   transition: transform 0.5s ease, filter 0.5s ease;
}

.portfolio-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: rgba(5, 44, 73, 0.85);
   color: white;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   opacity: 0;
   transition: opacity 0.4s ease;
   padding: 20px;
   text-align: center;
}

.portfolio-item:hover .portfolio-overlay {
   opacity: 1;
}

.portfolio-item:hover img {
   transform: scale(1.1);
   filter: blur(2px);
}

.portfolio-overlay h5 {
   font-weight: 600;
   margin-bottom: 10px;
}

/* Testimonials Section */
#testimonials {
   background-color: var(--light-bg);
}

.testimonial-card {
   border: none;
   border-radius: 10px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
}

.testimonial-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.testimonial-card .card-body {
   padding: 2rem;
}

.testimonial-footer {
   border-top: 1px solid #f0f0f0;
   padding-top: 1rem;
}

.client-logo-footer {
   max-height: 50px;
   max-width: 80px;
   object-fit: contain;
   opacity: 0.8;
}

.quote-icon {
   font-size: 3rem;
   color: var(--primary-color);
   opacity: 0.3;
   position: absolute;
   top: 20px;
   right: 20px;
}

/* Clients Section */
.client-logo {
   filter: grayscale(100%);
   opacity: 0.7;
   transition: all 0.3s ease;
   max-height: 60px;
   margin: 20px;
}

.client-logo:hover {
   filter: grayscale(0%);
   opacity: 1;
   transform: scale(1.1);
}

/* Service Cards Styling */
.service-card {
   border: none;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
   transition: transform 0.3s ease, box-shadow 0.3s ease;
   height: 100%;
   overflow: hidden;
   /* Memastikan gambar tidak melengkung di sudut card */
}

.service-card:hover {
   transform: translateY(-8px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.service-card .card-img-top {
   height: 300px;
   object-fit: cover;
   transition: transform 0.5s ease;
}

.service-card:hover .card-img-top {
   transform: scale(1.08);
}

.service-card .card-body {
   padding: 1.5rem;
}

.service-card .card-title {
   font-weight: 600;
   color: var(--primary-color);
}

/* Project Card with Slider Styling */
.project-card {
   border: none;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
   overflow: hidden;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.project-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.project-card .carousel-item img {
   height: 400px;
   object-fit: cover;
}

.project-card .carousel-control-prev-icon,
.project-card .carousel-control-next-icon {
   filter: invert(1);
}

.project-card .carousel-indicators [data-bs-target] {
   background-color: var(--secondary-color);
}

.project-card .card-title {
   color: var(--secondary1-color);
}

/* Contact Form Styling */
.contact-form {
   margin-top: 2rem;
}

.contact-form .form-control {
   border-radius: 8px;
   border: 1px solid #ced4da;
   padding: 12px 15px;
}

.contact-form .form-control:focus {
   border-color: var(--primary-color);
   box-shadow: 0 0 0 0.2rem rgba(5, 44, 73, 0.25);
}

/* Contact Info Card Styling */
.contact-info-card {
   border: none;
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}

.contact-info-list .list-group-item {
   border: none;
   background-color: transparent;
   padding: 15px 0;
}

.contact-info-list i {
   color: var(--primary-color);
   font-size: 1.2rem;
   width: 25px;
}

.contact-info-list a {
   color: var(--primary-color);
   font-weight: 500;
   transition: color 0.3s ease;
}

.contact-info-list a:hover {
   color: var(--accent-color);
}

/* Blockquote Styling */
.blockquote-custom {
   border-left: 5px solid var(--primary-color);
   padding-left: 1.5rem;
   margin: 2rem 0;
   font-size: 1.25rem;
   font-style: italic;
   color: #555;
}

.blockquote-custom footer {
   font-size: 1rem;
   color: #ffffff;
   font-style: normal;
   margin-top: 1rem;
}

/* Feature Box Styling for "Why Choose Us" */
.feature-box {
   background-color: #fff;
   padding: 2rem;
   border-radius: 10px;
   box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
   height: 100%;
   transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-box:hover {
   transform: translateY(-5px);
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
   font-size: 2.5rem;
   color: var(--primary-color);
   opacity: 0.8;
}

/* Statistics Section Styling */
.stats-section {
   background-color: var(--primary-color);
   color: var(--secondary-color);
}

.stats-box {
   padding: 2rem 1rem;
}

.stats-icon {
   font-size: 3rem;
   color: #fff;
   opacity: 0.7;
   margin-bottom: 1rem;
}

.stats-number {
   font-size: 2.5rem;
   font-weight: 700;
   color: #fff;
}

.stats-box p {
   font-size: 1.1rem;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.9);
   margin: 0;
}

/* CTA Section Styling */
.cta-section {
   background-color: var(--primary1-color);
   color: var(--secondary-color);
}

/* Menghilangkan garis bawah pada judul CTA agar lebih bersih */
.cta-section .section-title::after {
   display: none;
}

/* Footer */
footer {
   background-color: var(--primary-color);
   color: var(--secondary-color);
   padding: 40px 0 20px 0;
}

footer h5 {
   font-weight: 600;
   margin-bottom: 20px;
}

footer a {
   color: rgba(255, 255, 255, 0.8);
   text-decoration: none;
   transition: color 0.3s ease;
}

footer a:hover {
   color: var(--secondary-color);
}

.footer-bottom {
   border-top: 1px solid rgba(255, 255, 255, 0.1);
   margin-top: 30px;
   padding-top: 20px;
   text-align: center;
   font-size: 0.9rem;
   color: rgba(255, 255, 255, 0.7);
}

/* Styling untuk Link Media Sosial di Footer */
.social-links {
   margin-top: 1rem;
   text-align: right;
}

.social-links a {
   color: rgba(255, 255, 255, 0.8);
   font-size: 1.8rem;
   margin: 0 10px;
   text-decoration: none;
   transition: color 0.3s ease, transform 0.2s ease;
}

/* Efek hover untuk interaksi yang lebih baik */
.social-links a:hover {
   color: #ffffff;
   transform: scale(1.1);
}