body {
      margin: 0;
      padding: 0;
      width: 100%;
      overflow-x: hidden;
    }
.shadows{       box-shadow: 0 0 30px rgb(0 0 0 / 12%);
    padding: 30px;
    /* margin-left: -70px; */
    border-radius: 10px;}
    #contact img {height: 500px;
    width: 100%;}
.nav-link {
      position: relative;
      transition: color 0.3s ease;
    }
    .nav-link:hover::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 2px;
      bottom: -4px;
      left: 0;
      background-color: #ffffff;
      transition: width 0.3s ease;
    }
    .colorabout{padding-top: 60px!important;}
    .aboutdesign p , .privacypage p{font-size: 16px;}

     .aboutdesign img{height: 550px; width:100%;}
    .hamburger {
      display: none;
      flex-direction: column;
      cursor: pointer;
    }
    .hamburger span {
      width: 25px;
      height: 3px;
         background-color: #000000;
      margin: 2px 0;
      transition: all 0.3s ease;
    }
    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }
    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }
    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(7px, -7px);
    }
    .mobile-menu {
      display: none;
      backdrop-filter: blur(10px);
      background: rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
    }
    .mobile-menu.active {
      display: flex;
    }
     .copyright    p{margin-bottom: 0px;   font-size: 15px; color:#fff;}
    .copyright    {color: #1d8492;
    font-size: 15px;
    margin-top: 30px;
    margin-bottom: 10px;}
    @media (max-width: 768px) {
      a.fourtypad{margin-left: 40px; }
          h1.mobileh1      {           font-size: 40px!important;     padding-left: 40px; color: #fff;
    width: 399px!important;
    line-height: 60px!important;
}
.lefomobi {left: -300px!important;}
.deskiimg{width: 500px;}
      .hamburger {
        display: flex;
      }
      .nav-menu {
        display: none;
      }
      .mobile-menu.active {
        flex-direction: column;
        position: absolute;
        top: 64px;
        left: 0;
        width: 100%;
        padding: 1rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      }
    }
    /* Custom Animations */
    @keyframes slideInLeft {
      from { transform: translateX(-50px); opacity: 0; }
      to { transform: translateX(0); opacity: 1; }
    }
    @keyframes tilt {
      0% { transform: rotate(0deg); }
      50% { transform: rotate(3deg); }
      100% { transform: rotate(0deg); }
    }
    .animate-slideInLeft { animation: slideInLeft 0.8s ease-out forwards; }
    .card-hover:hover {
      transform: translateY(-8px) rotate(2deg);
      transition: transform 0.3s ease;
    }
    /* Unique Heading Styles */
    .unique-heading {
      position: relative;
      padding-bottom: 0.75rem;
      margin-bottom: 2.5rem;
      font-family: 'Georgia', serif;
    }
    .unique-heading::after {
      content: '';
     position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100px;
    height: 4px;
      background: linear-gradient(to right, #0d9488, #7e22ce);
      border-radius: 2px;
    }
    /* Responsive Typography */
    h1 {
      font-size: clamp(2.5rem, 6vw, 4.5rem);
      font-family: 'Georgia', serif;
    }
    h2, h3 {
      font-size: clamp(1.75rem, 4vw, 2.75rem);
    }
    p, input, textarea {
      font-size: clamp(1rem, 2.5vw, 1.15rem);
      font-family: 'Arial', sans-serif;
    }
    /* Responsive Images */
    img, i.fas {
      max-width: 100%;
      height: auto;
    }
    /* Mobile Menu */
    #mobile-menu {
      max-height: 0;
      transition: max-height 0.4s ease-in-out;
      overflow: hidden;
      background: white;
      width: 100%;
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 50;
    }
    #services img{    display: inline-block;
    justify-content: center;
    width: 50px;}
    #mobile-menu.active {
      max-height: 300px; /* Adjusted for content */
    }
    #header-wrap a{    color: #712fc6;  text-decoration: none;}
    /* Gradient Button */
    .btn-gradient {
      background: linear-gradient(to right, #0d9488, #7e22ce);
      transition: background 0.3s ease, transform 0.3s ease;
    }
    .btn-gradient:hover {
      background: linear-gradient(to right, #0f766e, #6b21a8);
      transform: scale(1.05);
    }
    /* Footer Background */
    .bg-foot {
      background: linear-gradient(to bottom, #5e42ba, #346ea0);
}
    /* Circular Cards for Why Choose Us */
    .circle-card {
      background: radial-gradient(circle, #0d9488, #7e22ce);
      border-radius: 50%;
      width: 200px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      color: white;
      transition: transform 0.3s ease;
    }
    .circle-card:hover {
      animation: tilt 0.6s ease-in-out;
    }
    /* Parallax Effect for About Image */
    .parallax-img {
      background-attachment: fixed;
      background-position: center;
      background-size: cover;
    }
    /* Contact Info Section */
    .info-section .info-address {
      margin-bottom: 1.5rem;
    }
    .info-section .info-text {
      color: #4b5563;
      line-height: 1.6; font-size: 20px;
    }
    .info-section .info-text strong {
      display: flex;
      align-items: center;
      gap: 0.5rem;
         color: #712fc6;
      font-size:30px;
    }
    .info-section .info-text i {
      font-size: 1.25rem;
      color: #7e22ce;
    }
.bg-foot a    {color: #fff;
    text-decoration: none;}
.bg-foot a:hover{text-decoration: none;}
    .privacy {
    position: relative;
    background: url(../images/banner.jpg) center / cover fixed;
    background-color: #c5c5c5;
    background-blend-mode: multiply;
    align-items: center;
    background-position: bottom;
    justify-content: center;
    display: grid
;
    min-height: 200px;
    padding-top: 45px;
}
.privacy .text1 {
    color: #7e22ce;
    font-size: 45px;
    letter-spacing: 8px;
    margin-bottom: 20px;
    position: relative;
    animation: text 2.5s 1;
     font-weight: 600;
    letter-spacing: 0.03em;
    -webkit-text-stroke-width: 1px;
    margin-top: 30px;
}
.breadcrumb {
    justify-content: center;
    display: flex;
    width: 100%;
    white-space: nowrap;
    color: var(--highlight); background: none;
}
p.breadcrumb {
    color: #fff;
    text-decoration: none; font-weight: 600; background: none;
}
.breadcrumb a {
    color: #7e22ce;
    text-decoration: none; font-weight: 600;
}
.privacy span {
    text-transform: uppercase;
    display: block; color:#fff;
}
  .privacypage h3  {text-align: center;
    color: #7e22ce;}
 #about ul{margin-left: 15px;}

    #about li .fas{      font-size: 23px;
    transform: rotate(75deg);
    position: relative;
    top: 16px;
    margin-right: 15px;
    color: #fff;
    width: 0px;
    height: 0px;}

    #about li    {display: flex;
    margin-bottom: 10px;}

    .colorabout p,     .colorabout li{  color: #fff;}

    .vectorimg1 .shape1{position: absolute;
    width: 100px!important;
    height: 179px!important;
    left: 31px;
    animation: float 1.5s ease-in-out infinite;}

    .vectorimg1 .shape2{    position: absolute;
    width: 100px!important;
    height: 170px!important;
    right: 46px;
    animation: float 1.5s ease-in-out infinite;}

    .vectorimg2 .shape4    {position: absolute;
       width: 112px !important;
    /* height: 80px; */
    left: 46px;
     animation: float 1.5s ease-in-out infinite;}

        .vectorimg2 .shape3       {position: absolute;
    width: 174px!important;
    height: 80px!important;
    right: 46px;
        animation: float 1.5s ease-in-out infinite;}

            .vectorimg3 .element2   {      position: absolute;
    width: 140px !important;
    height: 57px;
    left: 82px;
    animation: float 1.5s ease-in-out infinite;}

        .vectorimg3 .element1     {     position: absolute;
    width: 92px;
    height: 90px;
    right: 53px;
    animation: float 1.5s ease-in-out infinite;}

    #contact {
    background: url(../images/contbg.png) center / cover fixed;
    background-blend-mode: multiply;
    align-items: center;
    background-position: bottom;
    justify-content: center;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
}

.floating {
  animation: float 2s ease-in-out infinite;
}