@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Science+Gothic:wght@100..900&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Diplomata&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100..900;1,100..900&family=Science+Gothic:wght@100..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');
       @import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



       * {
           font-family: 'Open Sans', sans-serif;
       }

       @keyframes slideUpFade {
           0% {
               opacity: 0;
               transform: translateY(100px) scale(0.9);
           }

           80% {
               opacity: 1;
               transform: translateY(-10px) scale(1.02);
           }

           100% {
               opacity: 1;
               transform: translateY(0) scale(1);
           }
       }

       /* navbar start */

       /* 🎯 EXTRA STYLES + JS (same page me rakh sakte ho) */
       .nav-link {
           @apply text-base-content/80 hover:text-[#08689a] hover:bg-transparent;
       }

       .mobile-link {
           @apply px-4 py-3 rounded-2xl bg-base-200/60 hover:bg-base-300/70 transition;
       }

       .mobile-sub-link {
           @apply px-3 py-2 rounded-xl bg-base-100 hover:bg-base-300/70 transition;
       }

       /* Scroll hone par navbar ka look change karega */
       [data-navbar].scrolled>div {
           @apply bg-base-100/95 shadow-lg border-base-200/80;
       }

       /* navbar end */

       /* Animation for all letters */
       .growje-letter {
           display: inline-block;
           opacity: 0;
           animation: slideUpFade 1s ease-out forwards;
       }

       /* Delay each letter slightly for smooth sequence */
       .growje-letter:nth-child(1) {
           animation-delay: 0.1s;
       }

       .growje-letter:nth-child(2) {
           animation-delay: 0.3s;
       }

       .growje-letter:nth-child(3) {
           animation-delay: 0.5s;
       }

       .growje-letter:nth-child(4) {
           animation-delay: 0.7s;
       }

       .growje-letter:nth-child(5) {
           animation-delay: 0.9s;
       }

       .growje-letter:nth-child(6) {
           animation-delay: 1.1s;
       }

       /* RESPONSIVENESS */
       @media (max-width: 1024px) {
           .growje-letter {
               animation-duration: 0.8s;
           }
       }

       @media (max-width: 768px) {
           .growje-letter {
               animation-duration: 0.6s;
           }
       }

       @media (max-width: 640px) {
           .growje-letter {
               font-size: 60px !important;
               animation-duration: 0.5s;
           }
       }

       /* Smooth horizontal marquee effect */
       @keyframes smooth-marquee {
           0% {
               transform: translateX(0);
           }

           100% {
               transform: translateX(-50%);
           }
       }

       #image-marquee {
           white-space: nowrap;
           animation: smooth-marquee 20s linear infinite;
       }

       /* Image styles (responsive + hover effects) */
       .marquee-img {
           width: clamp(120px, 20vw, 260px);
           height: auto;
           border-radius: 1rem;
           object-fit: cover;
           transition: transform 0.5s ease, box-shadow 0.5s ease;
       }

       .marquee-img:hover {
           transform: scale(1.05);
           box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
       }

       /* Rotate animation when visible */
       .reveal-marquee {
           transform: rotate(0deg);
           opacity: 1 !important;
       }

       #image-marquee:hover {
           animation-play-state: paused;
       }

       .activeBtn {
           background-color: #08689a;
           border: #4a5565;
           border-radius: 12px;
       }

       .activeDif {
           background-color: #08689a;
           border: #4a5565;
           color: white;
           border-radius: 12px;
       }

       /* carousel start */

       .portfolio-showcase {
           background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
       }

       .portfolio-card {
           transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
       }

       .portfolio-card:hover {
           transform: translateY(-8px);
       }

       .portfolio-card::before {
           content: '';
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           height: 4px;
           background: linear-gradient(90deg, #3b82f6, #8b5cf6);
           transform: scaleX(0);
           transform-origin: left;
           transition: transform 0.4s ease;
       }

       .portfolio-card:hover::before {
           transform: scaleX(1);
       }

       .quick-view-btn {
           transform: translateY(-10px);
           transition: all 0.3s ease;
       }

       .portfolio-card:hover .quick-view-btn {
           transform: translateY(0);
       }

       .line-clamp-2 {
           display: -webkit-box;
           -webkit-line-clamp: 2;
           -webkit-box-orient: vertical;
           overflow: hidden;
       }

       #portfolioModal {
           backdrop-filter: blur(8px);
           animation: fadeIn 0.3s ease-out;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               backdrop-filter: blur(0);
           }

           to {
               opacity: 1;
               backdrop-filter: blur(8px);
           }
       }

       @media (max-width: 768px) {
           .portfolio-grid {
               grid-template-columns: 1fr;
           }

           #portfolioModal .flex-col {
               height: auto;
           }

           #portfolioModal .md\\:w-1\\/2 {
               width: 100%;
           }
       }

       /* carousel end */



       /* feedback start */

       /* feedback end */

       /* form section start */

       *,
       *:before,
       *:after {
           box-sizing: border-box;
           -webkit-font-smoothing: antialiased;
           -moz-osx-font-smoothing: grayscale;
       }

       .form-section {
           background: linear-gradient(to right, #f5f5f5 0%, #ffffff 50%);
           font-size: 12px;
       }

       .form-section,
       button,
       input {
           /* font-family: 'Montserrat', sans-serif; */
           font-weight: 500;
           letter-spacing: 1.4px;
       }

       .background {
           display: flex;
           min-height: 80vh;
       }

       .container {
           flex: 0 1 1200px;
           margin: auto;
           padding: 10px;
       }

       .screen {
           position: relative;
           background: #ebebeb;
           border-radius: 15px;
       }

       .screen:after {
           content: '';
           display: block;
           position: absolute;
           top: 0;
           left: 20px;
           right: 20px;
           bottom: 0;
           border-radius: 15px;
           box-shadow: 0 20px 40px rgba(0, 0, 0, .4);
           z-index: -1;
       }

       .screen-header {
           display: flex;
           align-items: center;
           padding: 10px 20px;
           background: #4d4d4f;
           border-top-left-radius: 15px;
           border-top-right-radius: 15px;
       }

       .screen-header-left {
           margin-right: auto;
       }

       .screen-header-button {
           display: inline-block;
           width: 8px;
           height: 8px;
           margin-right: 3px;
           border-radius: 8px;
           background: white;
       }

       .screen-header-button.close {
           background: #08689a;
       }

       .screen-header-button.maximize {
           background: #717274;
       }

       .screen-header-button.minimize {
           background: white;
       }

       .screen-header-right {
           display: flex;
       }

       .screen-header-ellipsis {
           width: 3px;
           height: 3px;
           margin-left: 2px;
           border-radius: 8px;
           background: #999;
       }

       .screen-body {
           display: flex;
       }

       .screen-body-item {
           flex: 1;
           padding: 50px;
       }

       .screen-body-item.left {
           display: flex;
           flex-direction: column;
       }

       .app-title {
           display: flex;
           flex-direction: column;
           position: relative;
           color: #08689a;
           font-size: 26px;
       }

       .app-title:after {
           content: '';
           display: block;
           position: absolute;
           left: 0;
           bottom: -10px;
           width: 25px;
           height: 4px;
           background: #08689a;
       }

       .app-contact {
           /* margin-top: auto;
           font-size: 11px;
           color: #888; */
       }

       .app-form-group {
           margin-bottom: 15px;
       }

       .app-form-group.message {
           margin-top: 40px;
       }

       .app-form-group.buttons {
           margin-bottom: 0;
           text-align: right;
       }

       .app-form-control {
           width: 100%;
           padding: 10px 0;
           background: none;
           border: none;
           border-bottom: 1px solid #666;
           color: #000000;
           font-size: 14px;
           text-transform: uppercase;
           outline: none;
           transition: border-color .2s;
       }

       .app-form-control::placeholder {
           color: #666;
       }

       .app-form-control:focus {
           border-bottom-color: #ddd;
       }

       .app-form-button {
           background: none;
           border: none;
           color: #08689a;
           font-size: 14px;
           cursor: pointer;
           outline: none;
       }

       .app-form-button:hover {
           color: #b9134f;
       }


       .dribbble {
           width: 20px;
           height: 20px;
           margin: 0 5px;
       }

       @media screen and (max-width: 520px) {
           .screen-body {
               flex-direction: column;
           }

           .screen-body-item.left {
               margin-bottom: 30px;
           }

           .app-title {
               flex-direction: row;
           }

           .app-title span {
               margin-right: 12px;
           }

           .app-title:after {
               display: none;
           }
       }

       @media screen and (max-width: 600px) {
           .screen-body {
               padding: 40px;
           }

           .screen-body-item {
               padding: 0;
           }
       }

       /*  portfolio page */

       /* ================= Smooth Load Animations ================= */
       @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=PT+Sans:wght@400;700&display=swap');

       html {
           scroll-behavior: smooth;
       }

       .top-main {
           font-family: 'PT Sans', sans-serif;
           background-color: #121212;
           color: #ededed;
       }

       .sec-main {
           grid-auto-rows: minmax(300px, auto);
           grid-auto-flow: dense;
       }

       .section-port {
           cursor: pointer;
           border-radius: 2px;
       }

       .img-overlay {
           transition: .3s ease-in;
           background-color: rgba(0, 0, 0, 0.65);
       }

       .section-port:hover .img-overlay {
           opacity: 1;
       }


       h2,
       h3,
       h4,
       h5,
       h6 {
           /* font-family: 'Bebas Neue', cursive; */
           /* letter-spacing: 2px; */
       }

       .show {
           display: flex;
           height: 50vh;
       }

       @media screen and (max-width: 480px) {
           .show {
               height: 100%;
           }
       }

       #plus {
           position: relative;
       }

       nav a:before {
           position: absolute;
           top: 4px;
           right: 110%;
           font-family: 'Font Awesome\ 5 Free';
       }

       .scrollbar-hide::-webkit-scrollbar {
           display: none;
       }

       .scrollbar-hide {
           -ms-overflow-style: none;
           scrollbar-width: none;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: scale(0.95);
           }

           to {
               opacity: 1;
               transform: scale(1);
           }
       }

       .animate-fadeIn {
           animation: fadeIn 0.3s ease-out;
       }


       /* slider to printing */