@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100..900;1,100..900&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

h1{
    font-family: "Ubuntu", sans-serif;
}
h2{
    font-family: "Ubuntu", sans-serif;
}
h3{
    font-family: "Ubuntu", sans-serif;
}
h4{
    font-family: "Ubuntu", sans-serif;
}
h5{
    font-family: "Ubuntu", sans-serif;
}
h5{
    font-family: "Ubuntu", sans-serif;
}
a{
    font-family: "Ubuntu", sans-serif;  
}
p{
    font-family: "Exo 2", sans-serif;
}
body{
    background-color: #dfeff5!important;
}
   /* Custom Navbar Styles */
   .custom-navbar {
    background: linear-gradient(90deg, #f6f6f7, #4e99b3, #0088c2);
}
.custom-navbar-brand {
    font-size: 28px;
    font-weight: bold;
    letter-spacing: 2px;
    color: #f8f9fa !important;
}

.custom-nav-item .custom-nav-link {
    font-size: 18px;
    font-weight: 500;
    color: #f8f9fa !important;
    margin-right: 15px;
  
}

.custom-nav-item .custom-nav-link:hover {
    color: #f0a500 !important;
    border-bottom: 2px solid #f0a500;
}

.custom-toggler {
    border-color: #f0a500;
}

.custom-toggler-icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28f0, 165, 0, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}
a{
    text-decoration: none;
}
 /* responsive navbar css */
 .custom-navbar1 {
    background: linear-gradient(90deg, #f6f6f7, #4e99b3, #0088c2); 
    height: 20vh;
 }
 .custom-nav-link{
    color: black!important;
 }
 
 /* Open dropdown on hover */
.nav-item.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; /* Removes the small gap between the dropdown and the toggle */
}

/* Disable the default caret that indicates dropdown click */
.dropdown-toggle::after {
    display: none;
}

/* Add some style for a smoother dropdown appearance */
.dropdown-menu {
    transition: all 0.3s ease-in-out; /* Optional: Add a transition effect */
    opacity: 0;
    visibility: hidden;
}

/* Ensure that when hovered, the dropdown is fully visible */
.nav-item.dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
}
    /* responsive navbar css end */
    /* section 2 card css start */
     /* Card Styling */
     .advanced-card {
        position: relative;
        border: none;
        border-radius: 20px;
        overflow: hidden;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
  
      /* Hover Effect */
      .advanced-card:hover {
        transform: scale(0.9);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);
      }
  
      /* Image Styling */
      .advanced-card-img {
        width: 100%;
        height: 90%;
        border-radius: 20px;
        object-fit: cover;
        overflow: hidden;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
      }
  
      /* Hover Effect on Image */
      .advanced-card:hover .advanced-card-img {
        transform: scale(1.1);
       
      }
      .advanced-card-img:hover .advanced-card {
        transform: scale(1.1);
       
      }
      /* Gradient Overlay */
      .advanced-card-overlay {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
        border-radius: 20px;
        opacity: 0;
        transition: opacity 0.3s ease;
      }
  
      /* Text Styling for Overlay */
      .advanced-card-overlay h5 {
        color: white;
        font-size: 30px;
        font-weight: 700;
        position: absolute;
        bottom: 20px;
        left: 20px;
        text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
        transition: bottom 0.1s ease, opacity 0.3s ease;
      }
  
      /* Hover Effect on Overlay Text */
      .advanced-card:hover .advanced-card-overlay {
        opacity: 1;
    
      }
  
      .advanced-card:hover .advanced-card-overlay h5 {
        bottom: 40px;
        
      }
  
      /* Responsive Card */
      @media (max-width: 768px) {
        .advanced-card {
          border-radius: 15px;
        }
        .advanced-card-overlay h5 {
          font-size: 24px;
          bottom: 10px;
        }
      }
      /* section 2 card css end */
      /* filter product css start */
         /* Hide cards by default for filtering purposes */
    .category-card {
        display: none;
      }
  
      /* Show cards when filter is active */
      .category-card.active {
        display: block;
      }
  
      /* Button styling */
      .filter-option {
        margin-right: 10px;
        border-radius: 30px;
        font-weight: bold;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
      }
  
      .filter-option.active {
        background-color: #007bff;
        color: white;
      }
      /* filter product css end */
       /* lets connect  css start */
       .contact-section {
        margin-top: 50px;

        padding: 30px;
        border-radius: 15px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    /* Address Section */
    .address-section {
     
        color: rgb(14, 13, 13);
        padding: 40px;
        border-radius: 10px;
        text-align: left;
    }
    .address-section h3 {
        font-size: 1.8rem;
        font-weight: bold;
        margin-bottom: 20px;
    }
    .address-item {
        margin-bottom: 20px;
    }
    .address-item i {
        font-size: 1.5rem;
        margin-right: 10px;
    }

    /* Contact Form */
  
    h2 {
      font-size: 2rem;
      font-weight: bold;
      color: #333;
      margin-bottom: 30px;
  }

  /* Styling for the form */
  .form-container {
      background-color:transparent;
      padding: 40px;
      border-radius: 30px;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 1);
      width: 70%;
  }

  .form-container input, 
  .form-container textarea {
      border-radius: 25px;
      border: 1px solid #ccc;
      padding: 12px 20px;
      width: 100%;
      margin-bottom: 20px;
      transition: all 0.3s ease;
      font-size: 1rem;
  }

  .form-container input:focus, 
  .form-container textarea:focus {
      border-color: #0056b3;
      box-shadow: 0 0 10px rgba(0, 91, 179, 0.2);
      outline: none;
  }

  .form-container textarea {
      resize: none;
      height: 100px;
  }

  .form-container button:hover {
      background: linear-gradient(45deg, #0056b3, #28a9e1);
  }

  /* Notification Styling */
  .notification {
      display: none;
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      background-color: #28a745;
      color: white;
      padding: 15px 30px;
      border-radius: 5px;
      font-size: 1rem;
      font-weight: 600;
      z-index: 9999;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }

  .notification.show {
      display: block;
  }
  
    a{
      text-decoration: none!important;
    }
    /* Responsive Design */

    @media (max-width: 768px) {
        .contact-section {
            padding: 20px;
        }
        .address-section, .contact-form {
            padding: 20px;
        }
    }

       /* lets connect css end */
       .btn1 {
        background: linear-gradient(45deg, #0066cc, #33ccff); /* Gradient background */
        color: white; /* White text */
        padding: 10px 20px; /* Smaller padding */
        font-size: 1rem; /* Smaller font size */
        border-radius: 25px; /* Less rounded corners */
        border: none; /* Remove border */
        font-weight: 600; /* Semi-bold text */
        box-shadow: 0 4px 8px rgba(0, 102, 204, 0.2); /* Soft shadow */
        transition: all 0.3s ease; /* Smooth transition for hover */
        text-transform: uppercase; /* Uppercase text */
        letter-spacing: 0.5px; /* Slight letter spacing */
    }

    .btn1:hover {
        background: linear-gradient(45deg, #005bb5, #28a9e1); /* Darker gradient on hover */
        box-shadow: 0 6px 12px rgba(0, 102, 204, 0.3); /* Stronger shadow on hover */
        transform: translateY(-4px); /* Slight upward movement */
    }

    .btn1:active {
        transform: translateY(0); /* Normal position on active click */
        box-shadow: 0 4px 8px rgba(0, 102, 204, 0.2); /* Lighter shadow on active */
    }

    .btn1:focus {
        outline: none; /* Remove outline */
        box-shadow: 0 0 10px rgba(51, 204, 255, 0.8); /* Glowing effect on focus */
    }

    /* Responsive Button Styling */
    @media (max-width: 768px) {
        .btn1 {
            font-size: 0.95rem; /* Adjust font size for small screens */
            padding: 10px 15px; /* Adjust padding on small screens */
        }
    }
    /* footer css start */
      /* Footer Custom Styles */
      .footer {
        background-color: #2c2c2c;
        color: #fff;
        padding: 50px 0;
    }

    .footer h5 {
        color: #28a9e1;
        font-size: 1.3rem;
        margin-bottom: 20px;
        font-weight: bold;
    }

    .footer p, .footer a {
        color: #ccc;
        font-size: 0.95rem;
        margin-bottom: 10px;
    }

    .footer a:hover {
        color:  #28a9e1;
        text-decoration: none;
    }

    .footer .contact-info p {
        margin: 5px 0;
    }

    /* Social Media Icons Styling */
    .footer .social-icons {
        margin-top: 30px;
    }

    .footer .social-icons a {
        color: #fff;
        margin-right: 15px;
        font-size: 1.8rem;
        transition: color 0.3s ease;
    }

    .footer .social-icons a:hover {
        color:  #28a9e1;
    }

    /* Footer Border Top */
    .footer .border-top {
        border-top: 1px solid #444;
        padding-top: 20px;
        margin-top: 20px;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
        .footer .col-lg-3 {
            margin-bottom: 30px;
        }
    }
    /* footer css end */