/* ================= NAVBAR ================= */

 .navbar-brand {
     font-weight: 600;
     color: #fff;
 }

 .nav-link {
     color: #ddd !important;
     margin: 0 10px;
     font-weight: 500;
     padding: 0;
     font-size: 16px;
 }

 .nav-link:hover {
     color: #fff !important;
 }

 .active {
     color: #a0cd4e !important;
 }

 /* CTA Button */

 .btn-contact {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     background: #fff;
     color: #111;
     padding: 6px 6px 6px 18px;
     border-radius: 50px;
     font-weight: 500;
     text-decoration: none;
     transition: 0.3s;
     font-size: 16px;
 }

 /* Circle Icon */
 .icon-circle {
     width: 34px;
     height: 34px;
     background: #a0cd4e;
     /* purple like your image */
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .icon-circle i {
     color: #fff;
     font-size: 14px;
 }

 /* Hover Effect */
 .btn-contact:hover {
     background: #a0cd4e;
     color: #fff;
 }

 .btn-contact:hover .icon-circle {
     background: #fff;
 }

 .btn-contact:hover .icon-circle i {
     color: #000;
 }

 /* Parent */
 .dropdown-custom {
     position: relative;
 }

 /* DROPDOWN PANEL */
 .dropdown-menu-custom {
     position: absolute;
     top: 100%;
     left: 0;
     background: #fff;
     min-width: 260px;
     padding: 16px 16px;
     opacity: 0;
     visibility: hidden;
     transform: translateY(15px);
     transition: all 0.3s ease;
     border-radius: 16px;
     border: 1px solid #a0cd4e3d;
 }

 /* SHOW */
 .dropdown-custom:hover .dropdown-menu-custom {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }

 /* ITEMS */
 .dropdown-menu-custom a {
     display: flex;
     align-items: center;
     gap: 10px;
     padding: 12px 20px;
     color: #303030;
     text-decoration: none;
     font-size: 14px;
     transition: 0.3s;
     border-radius: 8px;
 }

 /* ICON INSIDE ITEM */
 .dropdown-menu-custom i {
     font-size: 18px;
     color: #a0cd4e;
     /* BRAND COLOR */
     font-weight: 400;
 }

 /* HOVER EFFECT */
 .dropdown-menu-custom a:hover {
     background: #eafbcd;
     color: #000;
 }

 /* ICON HOVER CHANGE */
 .dropdown-menu-custom a:hover i {
     color: #a0cd4e;
 }

 /* NAV LINK ACTIVE STYLE */
 .nav-link:hover {
     color: #a0cd4e !important;
 }

 /* NAV LINK ICON */
 .dropdown-icon {
     font-size: 18px;
     margin-left: 5px;
     transition: 0.3s;
     display: inline-block;
     font-weight: 400;
 }

 /* Rotate arrow on hover */
 .dropdown-custom:hover .dropdown-icon {
     transform: rotate(180deg) !important;
 }

 /* ================= RESPONSIVE ================= */
 @media(max-width:768px) {
     .hero h1 {
         font-size: 32px;
     }

     .hero-content {
         left: 5%;
         right: 5%;
     }
 }


 /* SCROLL STATE */
 .navbar.scrolled {
     background: #fff;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 }


 .navbar.scrolled .nav-link {
     color: #000 !important;
 }

 .navbar.scrolled .active {
     color: #a0cd4e !important;
 }


 .navbar.scrolled .btn-contact {
     background: #a0cd4e;
     color: #fff;
 }

 /* Circle Icon */
 .navbar.scrolled .icon-circle {
     width: 34px;
     height: 34px;
     background: #fff;

     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 .navbar.scrolled .icon-circle i {
     color: #a0cd4e;
     font-size: 14px;
 }

 /* Hover Effect */
 .navbar.scrolled .btn-contact:hover {
     background: #303030;
     color: #fff;
 }

 .navbar.scrolled .btn-contact:hover .icon-circle {
     background: #fff;
 }

 .navbar.scrolled.btn-contact:hover .icon-circle i {
     color: #000;
 }






 /* HERO */
 .hero {
     position: relative;
     height: 100vh;
 }

 .carousel-item img {
     height: 100vh;
     object-fit: cover;
     filter: brightness(60%);
 }

 /* CONTENT POSITION */
 .hero-content {
     position: absolute;
     top: 50%;
     left: 8%;
     transform: translateY(-50%);
     color: #fff;
     max-width: 600px;
 }

 /* TEXT STYLE */
 .hero h1 {
     font-size: 60px;
     font-weight: 600;
 }

 .hero p {
     font-size: 18px;
     margin-top: 15px;
     color: #ddd;
 }

 /* ================= ANIMATION ================= */

 /* Default hidden */
 .animate-text {
     opacity: 0;
     transform: translateY(40px);
 }

 /* When active slide */
 .carousel-item.active .animate-text {
     animation: fadeUp 0.8s ease forwards;
 }

 /* Delay classes */
 .delay-1 {
     animation-delay: 0.3s !important;
 }

 .delay-2 {
     animation-delay: 0.6s !important;
 }

 /* Keyframe */
 @keyframes fadeUp {
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .carousel-item img {
     transition: transform 6s ease;
 }

 .carousel-item.active img {
     transform: scale(1.05);
 }

 .hero::after {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(to right, rgba(0, 0, 0, 0.6), transparent);
 }

 /* Buttons */
 .hero-btns {
     margin-top: 25px;
 }

 .btn-primary-custom {
     background: #a0cd4e;
     border: none;
     padding: 12px 28px;
     border-radius: 30px;
 }

 .btn-outline-custom {
     border: 1px solid #fff;
     color: #fff;
     padding: 12px 28px;
     border-radius: 30px;
 }

 .btn-outline-custom:hover {
     background: #fff;
     color: #000;
 }


 .about-creative {
     background: #f9fafb;
 }

 /* LEFT SERVICES */
 .service-stats {
     display: flex;
     flex-direction: column;
     gap: 25px;
 }

 .service-item span {
     font-size: 14px;
 }

 /* BAR */
 .bar {
     height: 6px;
     background: #eee;
     border-radius: 10px;
     margin-top: 6px;
 }

 .fill {
     height: 100%;
     background: #a0cd4e;
     border-radius: 10px;
 }

 /* CENTER IMAGE */
 .team-image img {
     width: 100%;
     border-radius: 20px;
     object-fit: cover;
     height: 430px;
 }

 /* RIGHT CONTENT */
 .small-title {
     color: #a0cd4e;
     font-weight: 600;
     font-size: 12px;
     letter-spacing: 1px;

 }

 .main-title {
     font-size: 32px;
     font-weight: 600;
 }

 .about-item {
     margin-bottom: 15px;
 }

 .about-item h6 {
     font-weight: 600;
 }

 /* BUTTON */
 .btn-primary-custom {
     background: #a0cd4e;
     color: #000;
     padding: 10px 22px;
     border-radius: 25px;
     text-decoration: none;
     transition: 0.3s;
 }

 .btn-primary-custom:hover {
     background: #000;
     color: #fff;
 }

 /* LIST */
 .services-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
 }

 /* CARD */
 .service-card {
     display: flex;
     align-items: center;
     gap: 20px;
     padding: 12px 20px;
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
     transition: 0.3s;
 }

 .service-card:hover {
     transform: translateY(-3px);
 }

 /* CIRCLE */
 .circle {
     width: 70px;
     height: 70px;
     border-radius: 50%;
     background: conic-gradient(#a0cd4e 0deg, #eee 0deg);
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
 }

 /* INNER */
 .circle::before {
     content: "";
     width: 50px;
     height: 50px;
     background: #fff;
     border-radius: 50%;
     position: absolute;
 }

 /* TEXT */
 .circle span {
     position: relative;
     font-size: 14px;
     font-weight: 600;
     color: #a0cd4e;
 }

 /* TEXT SIDE */
 .service-info h6 {
     margin: 0;
     font-weight: 600;
 }

 /* LINE */
 .line {
     width: 120px;
     height: 2px;
     background: #eee;
     margin-top: 6px;
 }


 /* HEADER */
 .section-header h2 {
     font-size: 36px;
     font-weight: 600;

 }

 .section-header p {
     color: #666;
 }

 /* CARD */
 .premium-card {
     position: relative;
     height: 370px;
     border-radius: 10px;
     overflow: hidden;
     cursor: pointer;
 }

 /* IMAGE */
 .premium-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: 0.5s;
 }

 /* OVERLAY PANEL */
 .card-overlay {
     position: absolute;
     bottom: 8px;
     /* space from bottom */
     left: 8px;
     /* space from left */
     right: 8px;
     /* space from right */

     padding: 8px;
     border-radius: 8px;
     /* rounded box */

     background: rgba(80, 80, 80, 0.6);
     backdrop-filter: blur(6px);
     color: #fff;

     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     height: 180px;
 }

 /* TEXT */
 .content h5 {
     margin: 0;

     font-weight: 600;
     text-align: center;
     padding: 8px;

 }

 .content p {
     padding-left: 15px;
     padding-top: 8px;
     padding-bottom: 8px;
     font-size: 14px;
     text-align: justify;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     align-items: center;
     height: 100%;
 }

 /* NUMBER */
 .number {
     font-size: 12px;
     opacity: 0.8;
     align-items: flex-end !important;

 }

 /* HOVER */
 .premium-card:hover img {
     transform: scale(1.08);
 }

 .premium-card:hover .card-overlay {
     background: rgba(160, 205, 78, 0.7);
     /* brand color */
 }

 /* SECTION */
 .work-features {
     background: #f9fafb;

 }

 /* LEFT PANEL */
 .left-panel {
     padding: 0 8px 60px 8px;
     position: sticky;
     top: 100px;
 }

 .left-panel .tag {
     font-size: 12px;
     letter-spacing: 2px;
     color: #a0cd4e;
 }

 .left-panel h2 {
     font-size: 36px;
     margin: 15px 0;
     font-weight: 600;
 }

 .left-panel p {
     color: #666;
     line-height: 1.6;
     text-align: justify;
 }

 /* GRID */
 .work-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 20px;
     padding-bottom: 40px;
 }

 /* CARD */
 .work-card {
     position: relative;
     height: 220px;
     border-radius: 10px;
     overflow: hidden;

 }

 /* IMAGE */
 .work-card img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transform: scale(1.1);
     /* start zoomed */
     transition: 0.5s ease;
 }

 /* HOVER → ZOOM OUT */
 .work-card:hover img {
     transform: scale(1);
     /* zoom out */
 }

 /* BRAND OVERLAY */
 .work-card::after {
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(160, 205, 78, 0.85);
     /* brand color */
 }

 /* TEXT OVERLAY */
 .overlay {
     position: absolute;
     top: 0;
     /* 👈 TOP */
     left: 0;
     /* 👈 LEFT */
     padding: 20px;
     color: #000;
     z-index: 2;
 }

 /* TITLE */
 .overlay h5 {
     font-weight: 600;
     margin: 0;
     color: #fff;

 }

 /* PARAGRAPH */
 .overlay p {
     font-size: 14px;
     margin-top: 5px;
     color: #fff;
     text-align: justify;
 }

 .work-card:nth-child(2) {
     transform: translateY(40px);
 }

 .work-card:nth-child(4) {
     transform: translateY(40px);
 }

 .work-card:nth-child(6) {
     transform: translateY(40px);
 }

 /* FOOTER */
 .footer-modern {
     background: #303030;
     padding: 60px 0 20px;
 }

 /* BRAND */
 .footer-brand img {
     width: 120px;
     margin-bottom: 15px;
 }

 .footer-brand p {
     color: #fff;
     font-size: 14px;
     line-height: 1.6;
     width: 440px;

 }

 /* SOCIAL */
 .social-icons i {
     font-size: 18px;
     margin-right: 10px;
     cursor: pointer;
     transition: 0.3s;
     color: #fff;
 }

 .social-icons i:hover {
     color: #a0cd4e;
 }

 /* LINKS */
 .footer-modern h6 {
     font-weight: 600;
     margin-bottom: 15px;
     color: #fff;
 }

 .footer-modern ul {
     list-style: none;
     padding: 0;
     color: #fff;

 }

 .footer-modern .row {
     align-items: flex-start;
 }


 .footer-modern ul li {
     margin-bottom: 8px;
 }

 .footer-modern ul li a {
     text-decoration: none;
     color: #fff;
     font-size: 14px;
     transition: 0.3s;
 }

 .footer-modern ul li a:hover {
     color: #a0cd4e;
 }

 /* BOTTOM */
 .footer-bottom {
     border-top: 1px solid #ddd;
     margin-top: 40px;
     padding-top: 15px;

     display: flex;
     justify-content: space-between;
     flex-wrap: wrap;
 }

 .footer-bottom p {
     font-size: 13px;
     color: #fff;
 }

 .footer-links a {
     margin-left: 15px;
     font-size: 13px;
     color: #fff;
     text-decoration: none;
 }

 .footer-links a:hover {
     color: #a0cd4e;
 }

 .footer-modern ul li a {
     position: relative;
 }

 .footer-modern ul li a::after {
     content: "";
     width: 0;
     height: 2px;
     background: #a0cd4e;
     position: absolute;
     left: 0;
     bottom: -2px;
     transition: 0.3s;
 }

 .footer-modern ul li a:hover::after {
     width: 100%;
 }