   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }


   .navbar-custom {
       background-color: #fff;
       box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
       position: sticky;
       top: 0;
       z-index: 1000;
       transition: all 0.4s ease;
   }

   .navbar-custom.scrolled {
       background-color: rgba(255, 255, 255, 0.95);
       backdrop-filter: blur(8px);
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
       transition: all 0.4s ease-in-out;
   }

   .logo {
       width: 120px;
       transition: transform 0.4s ease;
   }

   .logo:hover {
       transform: scale(1.08);
   }


   .navbar-custom .nav-link {
       color: #000;
       font-weight: 700;
       margin: 0 12px;
       position: relative;
       transition: all 0.3s ease;
   }

   .navbar-custom .nav-link:hover {
       color: #F7941E;
       transform: translateY(-2px);
   }

   .navbar-custom .nav-link::after {
       content: "";
       position: absolute;
       bottom: -3px;
       left: 0;
       height: 2px;
       width: 0%;
       background-color: #F7941E;
       transition: width 0.3s ease;
   }

   .navbar-custom .nav-link:hover::after {
       width: 100%;
   }

   .nav-btn {
       background-color: #F7941E;
       border: none;
       border-radius: 30px;
       padding: 10px 22px;
       transition: all 0.3s ease;
   }

   .nav-btn a {
       color: #fff !important;
       text-decoration: none;
       font-weight: 600;
   }

   .nav-btn:hover {
       background-color: #df6502;
       transform: scale(1.08);
   }

   .animate-btn {
       box-shadow: 0 0 10px rgba(247, 148, 30, 0.4);
       animation: pulse 2s infinite;
   }

   @keyframes pulse {
       0% {
           box-shadow: 0 0 8px rgba(247, 148, 30, 0.4);
       }

       50% {
           box-shadow: 0 0 25px rgba(247, 148, 30, 0.7);
       }

       100% {
           box-shadow: 0 0 8px rgba(247, 148, 30, 0.4);
       }
   }

   .navbar-toggler {
       border: none;
       background: none;
   }

   .navbar-toggler-icon {
       background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0,0,0,0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
   }

   @media (max-width: 991px) {
       .navbar-collapse {
           background-color: #fff;
           padding: 15px;
           border-radius: 12px;
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
       }

       .navbar-custom .nav-link {
           display: block;
           padding: 10px 0;
           text-align: center;
       }

       .nav-btn {
           display: block;
           margin: 10px auto;
           width: 80%;
       }
   }



   /* dropdown section */

   .nav-item {
       position: relative;
   }

   .nav-item .dropdown-menu {
       position: absolute;
       top: 100%;
       left: 0;
       background: #ffffff;
       border-radius: 6px;
       padding: 8px 0;
       min-width: 160px;
       box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
       display: none;
       z-index: 9999;
   }

   .dropdown-menu li a {
       display: block;
       padding: 10px 15px;
       color: #333 !important;
       font-size: 15px;
       text-decoration: none;
       white-space: nowrap;
   }

   .dropdown-menu li a:hover {
       background: #f3f3f3;
   }

   .nav-item:hover>.dropdown-menu {
       display: block;
   }


   .navbar-collapse {
       overflow: visible !important;
   }


   .nav-item.open>.dropdown-menu {
       display: block !important;
   }


   .nav-item.open i {
       transform: rotate(180deg);
       transition: 0.3s;
   }





   /* header section */




   .about-header {
       position: relative;
       width: 100%;
       height: 80vh;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       color: #fff;

       /* BACKGROUND IMAGE ADDED */
       background-size: cover;
       background-position: center;
       background-repeat: no-repeat;
   }

   /* Dark overlay */
   .about-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
       z-index: 1;
   }

   /* Content Animation Base */
   .about-content {
       position: relative;
       z-index: 2;
       max-width: 800px;
       padding: 20px;

       opacity: 0;
       transform: translateY(40px);
       transition: all 1s ease;
   }

   /* When visible on scroll */
   .about-content.visible {
       opacity: 1;
       transform: translateY(0);
   }

   /* Title */
   .about-content h1 {
       font-size: 4rem;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: #fff;
   }

   /* Colored span */
   .about-content h1 span {
       color: #ff9800;
       text-shadow: 0 0 10px rgba(255, 152, 0, 0.7);
   }

   /* Subtitle */
   .about-content p {
       font-size: 1.2rem;
       margin-top: 15px;
       color: #f1f1f1;
       line-height: 1.6;
   }

   /* Button */
   .about-btn {
       text-decoration: none;
       background: linear-gradient(135deg, #f7941e, #ffb347);
       color: #fff;
       border: none;
       border-radius: 35px;
       padding: 16px 50px;
       font-size: 1.3rem;
       font-weight: 600;
       cursor: pointer;
       box-shadow: 0 0 25px rgba(247, 148, 30, 0.6);
       transition: all 0.4s ease;
   }

   .about-btn:hover {
       background: linear-gradient(135deg, #df6502, #ff974f);
       transform: scale(1.08);
       box-shadow: 0 0 40px rgba(247, 148, 30, 0.9);
   }

   /* Responsive Styles */
   @media (max-width: 992px) {
       .about-content h1 {
           font-size: 3rem;
       }
   }

   @media (max-width: 576px) {
       .about-header {
           height: 65vh;
       }

       .about-content h1 {
           font-size: 2.3rem;
       }

       .about-content p {
           font-size: 1rem;
       }

       .about-btn {
           padding: 10px 25px;
       }
   }





   /*  .about-header {
       position: relative;
       width: 100%;
       height: 80vh;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       text-align: center;
       color: #fff;
   }

   .about-bg-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: -2;
   }

   .about-overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6));
       z-index: -1;
   }

   .about-content {
       position: relative;
       z-index: 2;
       max-width: 800px;
       padding: 20px;
       opacity: 1;
       transform: translateY(0);
       animation: fadeInUp 1.2s ease forwards;
   }

   .about-content h1 {
       font-size: 4rem;
       font-weight: 800;
       text-transform: uppercase;
       letter-spacing: 2px;
       color: #fff;
   }

   .about-content h1 span {
       color: #ff9800;
       text-shadow: 0 0 10px rgba(255, 152, 0, 0.7);
   }


   .about-content p {
       font-size: 1.2rem;
       margin-top: 15px;
       color: #f1f1f1;
       line-height: 1.6;
   }


   .about-btn {
       text-decoration: none;
       background: linear-gradient(135deg, #f7941e, #ffb347);
       color: #fff;
       border: none;
       border-radius: 35px;
       padding: 16px 50px;
       font-size: 1.3rem;
       font-weight: 600;
       cursor: pointer;
       box-shadow: 0 0 25px rgba(247, 148, 30, 0.6);
       transition: all 0.4s ease;
       animation: pulse 3s infinite ease-in-out;
   }

   .about-btn:hover {
       color: white;
       text-decoration: none;
       background: linear-gradient(135deg, #df6502, #ff974f);
       transform: scale(1.08);
       box-shadow: 0 0 40px rgba(247, 148, 30, 0.9);
   }



   @keyframes fadeInUp {
       0% {
           opacity: 0;
           transform: translateY(50px);
       }

       100% {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @media (max-width: 992px) {
       .about-content h1 {
           font-size: 3rem;
       }
   }

   @media (max-width: 576px) {
       .about-content h1 {
           font-size: 2.3rem;
       }

       .about-content p {
           font-size: 1rem;
           padding: 0 10px;
       }

       .about-btn {
           padding: 10px 25px;
       }
   }
 */



   /* .services-header {
       position: relative;
       height: 100vh;
       overflow: hidden;
       display: flex;
       align-items: center;
       justify-content: center;
       color: #fff;
       text-align: center;
   }


   .background-video {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       object-fit: cover;
       z-index: 1;
   }


   .overlay {
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.4));
       z-index: 2;
   }


   .header-content {
       position: relative;
       z-index: 3;
       max-width: 700px;
       padding: 0 15px;
       animation: fadeInUp 1.5s ease;
   }


   .header-content h1 {
       font-size: 3.2rem;
       font-weight: 700;
       margin-bottom: 15px;
       color: #fff;
       letter-spacing: 1px;
       animation: textGlow 3s infinite alternate;
   }

   .header-content h1 span {
       color: #F7941E;
   }


   .header-content p {
       font-size: 1.1rem;
       color: #eee;
       margin-bottom: 25px;
       animation: fadeIn 2s ease;
   }


   .explore-btn {
       background: #F7941E;
       color: #fff;
       border: none;
       border-radius: 30px;
       padding: 12px 34px;
       font-weight: 600;
       font-size: 22px;
       text-decoration: none;
       transition: all 0.4s ease;
   }

   .explore-btn:hover {
       background: #df6502;
       transform: scale(1.08);
       box-shadow: 0 0 15px rgba(247, 148, 30, 0.7);
   }


   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(40px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @keyframes textGlow {
       from {
           text-shadow: 0 0 10px #F7941E, 0 0 20px #F7941E;
       }

       to {
           text-shadow: 0 0 20px #ffa94d, 0 0 40px #F7941E;
       }
   }

   @media (max-width: 992px) {
       .header-content h1 {
           font-size: 2.4rem;
       }

       .header-content p {
           font-size: 1rem;
       }

       .explore-btn {
           padding: 10px 24px;
       }
   }

   @media (max-width: 576px) {
       .header-content h1 {
           font-size: 1.9rem;
       }

       .header-content p {
           font-size: 0.95rem;
       }
   }
 */

   /* card section */


   .services-section {
       background: #fff;
       padding: 50px 0;
       position: relative;
       overflow: hidden;
   }


   .section-title h2 {
       font-size: 2.8rem;
       font-weight: 700;
       margin-bottom: 10px;
       color: #173E84;
       animation: fadeInDown 1.2s ease;
   }

   .section-title h2 span {
       color: #F7941E;
   }

   .section-title p {
       color: #555;
       font-size: 1.1rem;
       max-width: 700px;
       margin: 0 auto 50px;
       animation: fadeInUp 1.2s ease;
   }


   .service-card {
       background: #fff;
       border-radius: 20px;
       padding: 45px 30px;
       text-align: center;
       box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
       transition: all 0.4s ease;
       opacity: 0;
       transform: translateY(30px);
   }


   .service-card.visible {
       opacity: 1;
       transform: translateY(0);
       transition: all 0.8s ease;
   }


   .service-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 10px 25px rgba(247, 148, 30, 0.2);
   }

   .icon-box {
       background: rgba(247, 148, 30, 0.1);
       color: #F7941E;
       font-size: 2.6rem;
       width: 90px;
       height: 90px;
       border-radius: 50%;
       margin: 0 auto 20px;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: all 0.4s ease;
   }

   .service-card:hover .icon-box {
       background: #F7941E;
       color: #fff;
       transform: rotate(10deg) scale(1.1);
   }


   .service-card h3 {
       font-size: 1.4rem;
       font-weight: 600;
       margin-bottom: 15px;
       color: #222;
   }

   .service-card p {
       color: #666;
       font-size: 1rem;
       margin-bottom: 20px;
   }


   .service-btn {
       color: #F7941E;
       font-weight: 600;
       text-decoration: none;
       transition: all 0.3s ease;
   }

   .service-btn i {
       transition: transform 0.3s ease;
   }

   .service-btn:hover {
       color: #df6502;
   }

   .service-btn:hover i {
       transform: translateX(5px);
   }


   @keyframes fadeInDown {
       from {
           opacity: 0;
           transform: translateY(-40px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(40px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }


   @media (max-width: 992px) {
       .section-title h2 {
           font-size: 2.3rem;
       }
   }

   @media (max-width: 768px) {
       .service-card {
           padding: 35px 25px;
       }
   }

   @media (max-width: 576px) {
       .section-title h2 {
           font-size: 1.9rem;
       }

       .icon-box {
           width: 75px;
           height: 75px;
           font-size: 2rem;
       }
   }

   .icon-box i {
       font-size: 2rem;
   }

   .service-card:hover .icon-box {
       background: #F7941E;
       color: #fff;
       transform: rotate(8deg) scale(1.1);
   }



   /*   Why Choose Us section */


   .why-choose-us {
       background: linear-gradient(135deg, #f8f2eb, #f3ebe2);
       padding: 100px 20px;
       text-align: center;
       position: relative;
       overflow: hidden;
   }

   .why-choose-us::before {
       content: "";
       position: absolute;
       top: -50px;
       right: -50px;
       width: 200px;
       height: 200px;
       background: radial-gradient(circle, #d1e3f8, transparent);
       border-radius: 50%;
       animation: float 6s ease-in-out infinite;
   }

   .why-choose-us::after {
       content: "";
       position: absolute;
       bottom: -50px;
       left: -50px;
       width: 200px;
       height: 200px;
       background: radial-gradient(circle, #d1e3f8, transparent);
       border-radius: 50%;
       animation: float 8s ease-in-out infinite alternate;
   }

   @keyframes float {

       0%,
       100% {
           transform: translateY(0);
       }

       50% {
           transform: translateY(-15px);
       }
   }

   .section-title {
       font-size: 2.5rem;
       font-weight: 700;
       color: #173E84;
       margin-bottom: 15px;
   }

   .section-subtitle {
       font-size: 1rem;
       color: #555;
       margin-bottom: 60px;
   }

   .choose-cards {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
       gap: 25px;
       justify-items: center;
   }

   .choose-card {
       background: #ffffff;
       padding: 35px 25px;
       border-radius: 20px;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
       transition: all 0.4s ease;
       cursor: pointer;
       max-width: 300px;
   }

   .choose-card .icon {
       font-size: 2.5rem;
       color: #007bff;
       margin-bottom: 20px;
       transition: color 0.3s ease;
   }

   .choose-card h3 {
       font-size: 1.3rem;
       margin-bottom: 10px;
       color: #111;
   }

   .choose-card p {
       font-size: 0.95rem;
       color: #555;
   }

   .choose-card:hover {
       transform: translateY(-10px) scale(1.03);
       box-shadow: 0 10px 25px rgba(0, 123, 255, 0.2);
       background: linear-gradient(145deg, #ffffff, #f0f5ff);
   }

   .choose-card:hover .icon {
       color: #f5a328;
   }

   @media (max-width: 768px) {
       .section-title {
           font-size: 2rem;
       }

       .choose-card {
           padding: 25px 20px;
       }
   }



   /* futter section */



   .social-icons {
       margin-top: 15px;
       display: flex;
       gap: 15px;
       z-index: 2;
   }

   .social-icon {
       text-decoration: none;
       display: flex;
       align-items: center;
       justify-content: center;
       width: 42px;
       height: 42px;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.15);
       color: #fff;
       font-size: 1.2rem;
       transition: all 0.4s ease;
       position: relative;
       overflow: hidden;
   }

   .social-icon::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(45deg, #F7941E, #173E84);
       transform: translateY(100%);
       transition: transform 0.4s ease;
       z-index: 0;
   }

   .social-icon i {
       z-index: 1;
       transition: transform 0.4s ease;
   }

   .social-icon:hover::before {
       transform: translateY(0);
   }

   .social-icon:hover i {
       transform: scale(1.2);
   }

   .social-icon.facebook:hover {
       text-decoration: none;
       background: #3b5998;
   }

   .social-icon.instagram:hover {
       text-decoration: none;
       background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
   }

   .social-icon.linkedin:hover {
       text-decoration: none;
       background: #0077b5;
   }

   .social-icon.whatsapp:hover {
       text-decoration: none;
       background: #25D366;
   }

   @media (max-width: 767px) {
       .social-icons {
           justify-content: center;
           flex-wrap: wrap;
       }

       .social-icon {
           width: 40px;
           height: 40px;
           font-size: 1rem;
       }
   }

   .footer {
       background: url('futter\ image\ \(2\).jpg') no-repeat center center/cover;
       position: relative;
       color: #fff;
       padding: 80px 20px 30px;
       overflow: hidden;
   }


   .footer::before {
       content: "";
       position: absolute;
       inset: 0;
       background: rgb(50 48 48 / 61%);
       z-index: 0;
   }

   @keyframes fadeBg {
       0% {
           filter: brightness(0.85) saturate(1);
       }

       50% {
           filter: brightness(1) saturate(1.1);
       }

       100% {
           filter: brightness(0.85) saturate(1);
       }
   }

   .footer {
       animation: fadeBg 15s ease-in-out infinite;
   }

   .footer-row {
       position: relative;
       z-index: 1;
       display: flex;
       flex-wrap: wrap;
       justify-content: space-between;
       gap: 40px;
   }

   .footer-col {
       flex: 1 1 220px;
       min-width: 200px;
   }

   .footer-logo {
       width: 160px;
       margin-bottom: 15px;
       filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.3));
   }

   .footer-about {
       font-size: 0.95rem;
       line-height: 1.6;
       color: #f4f4f4;
       max-width: 320px;
   }


   .futter-num {
       text-decoration: none;
       color: white;
   }

   .futter-num:hover {
       text-decoration: none;
       color: white;
   }

   .futter-mail {
       text-decoration: none;
       color: white;
   }

   .futter-mail:hover {
       text-decoration: none;
       color: white;
   }

   .footer-col h4 {
       font-size: 1.3rem;
       margin-bottom: 15px;
       color: #fff;
       position: relative;
   }

   .footer-col h4::after {
       content: '';
       position: absolute;
       bottom: -6px;
       left: 0;
       width: 50px;
       height: 3px;
       background: #fff;
       border-radius: 2px;
       transition: width 0.4s ease;
   }

   .footer-col h4:hover::after {
       width: 80px;
   }

   .footer-col ul {
       list-style: none;
       padding: 0;
       margin: 0;
   }

   .footer-col ul li {
       margin-bottom: 10px;
   }

   .footer-col ul li a {
       color: #f4f4f4;
       text-decoration: none;
       transition: 0.3s;
   }

   .footer-col ul li a:hover {
       color: #fff;
       text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
   }

   .contact-info li {
       align-items: center;
       gap: 10px;
   }

   .contact-info i {
       color: #fff;
   }

   .footer-bottom {
       position: relative;
       z-index: 1;
       text-align: center;
       margin-top: 40px;
       border-top: 1px solid rgba(255, 255, 255, 0.3);
       padding-top: 15px;
       font-size: 0.9rem;
       color: #eee;
   }

   @media (max-width: 991px) {
       .footer-row {
           gap: 30px;
       }

       .footer-col {
           flex: 1 1 45%;
       }
   }

   @media (max-width: 767px) {
       .footer-row {
           flex-direction: column;
           align-items: center;
           text-align: center;
       }

       .footer-col h4::after {
           left: 50%;
           transform: translateX(-50%);
       }

       .footer-logo {
           margin: 0 auto 15px;
       }

       .footer-about {
           margin: 0 auto 20px;
       }
   }


   /* whatsapp icon */

   .float {
       position: fixed;
       width: 60px;
       height: 60px;
       bottom: 40px;
       right: 40px;
       background-color: #25d366;
       color: #FFF;
       border-radius: 50px;
       text-align: center;
       font-size: 30px;
       box-shadow: 6px 6px 8px #999;
       z-index: 100;
   }

   .float:hover {
       color: white;
   }

   .my-float {
       margin-top: 16px;
   }



   /* font  */

   .font-link {
       font-family: "Roboto", sans-serif;
       font-optical-sizing: auto;
       font-weight: weight;
       font-style: normal;
       font-variation-settings:
           "wdth" 100;
   }