/* phone modal  */

       .modal-overlay-565 {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0, 0, 0, 0.6);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    .modal-565 {
      background: white;
      border-radius: 10px;
      width: 90%;
      max-width: 400px;
      padding: 20px;
      position: relative;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
      animation: fadeInScale565 0.3s ease;
    }

    @keyframes fadeInScale565 {
      from {
        opacity: 0;
        transform: scale(0.9);
      }
      to {
        opacity: 1;
        transform: scale(1);
      }
    }

    .modal-closeparent-565{
        width: 100%;
        display: flex;
        justify-content: flex-end;
      margin-bottom: 25px;
    }

    .modal-close-565 {
         background-color: red;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 18px;
  cursor: pointer;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
    }

    .modal-header-565 {
      font-size: 18px;
      margin-bottom: 20px;
      font-weight: 600;
      color: #333;
    }

    .modal-label-565 {
      display: block;
      margin-bottom:10px;
      font-weight: bold;
      color: #555;
    }

    .modal-input-565 {
      width: 100%;
      padding: 10px;
      border: 1px solid #000000;
      border-radius: 6px;
      margin-bottom: 15px;
      font-size: 16px;
      color: black;
    }

    .modal-button-565 {
      background-color: #009cec;
      color: white;
      border: none;
      padding: 10px;
      width: 100%;
      font-size: 16px;
      border-radius: 6px;
      font-weight: 600;
      cursor: pointer;
    }

    .modal-button-565:hover {
      background-color: #007bb5;
    }

    .open-modal-btn-565 {
      margin: 30px;
      padding: 10px 20px;
      background-color: #009cec;
      color: white;
      border: none;
      border-radius: 6px;
      cursor: pointer;
    }


    /* Shake animation */
@keyframes shake-565 {
  0% { transform: translateX(0); }
  20% { transform: translateX(-5px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

/* Error class with red border and shake */
.input-error-565 {
  border: 2px solid red !important;
  animation: shake-565 0.3s;
}


    /* phone modal end */

    
    
    /* call Button */
        .call-btn {
            position: fixed;
            bottom: 20px;
            right: 15px;
            background: #25D366;
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
            text-decoration: none;
            box-shadow: 0 5px 20px rgba(37, 211, 102, 0.4);
            transition: all 0.3s ease;
            z-index: 1000;
            animation: pulse 2s infinite;
        }

        .call-btn:hover {
            transform: scale(1.1);
            box-shadow: 0 10px 30px rgba(37, 211, 102, 0.6);
        }

        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(37, 211, 102, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
            }
        }

           /* Alternative stronger ringing effect */
        .phone-ring-343-strong {
            color: #ffffff;
            display: inline-block;
            transform-origin: bottom center;
            animation: phoneRingStrong343 4s infinite;
        }

        @keyframes phoneRingStrong343 {
             0%, 85%, 100% {
                transform: translateY(0) rotate(0deg);
            }
            2% {
                transform: translateY(-3px) rotate(-8deg);
            }
            4% {
                transform: translateY(-2px) rotate(8deg);
            }
            6% {
                transform: translateY(-4px) rotate(-6deg);
            }
            8% {
                transform: translateY(-2px) rotate(6deg);
            }
            10% {
                transform: translateY(-3px) rotate(-4deg);
            }
            12% {
                transform: translateY(-1px) rotate(4deg);
            }
            14% {
                transform: translateY(-2px) rotate(-2deg);
            }
            16% {
                transform: translateY(-1px) rotate(2deg);
            }
            18% {
                transform: translateY(0) rotate(0deg);
            }
        }

    /* call Button end*/


.works-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 2px;
}

.card {
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #242424;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(185, 185, 185, 0.1);
    max-width: 300px;
    text-align: center;

}

.project-image {
        width: 100%;
            height: 200px;
            object-fit: contain;
        }


.card-content {
    padding: 16px;
}

.benefitssec{
    display: flex;
    justify-content: center;
}

.project-title {
    font-size: 15px;
    margin: 0 0 16px 0;
    color: #e9e9e9;
    font-weight: 500;
}

.visit-website-button {
    display: inline-block;
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #808080;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s;
}

.visit-website-button:hover {
    background-color: #0056b3;
}


/* Special Offer ! start */

 .box-parent {
     display: flex;
     justify-content: center;
     align-items: center;
     margin: 10px;
 }

 .gradient-border {
     --borderWidth: 3px;
     position: relative;
     border-radius: var(--borderWidth);
     padding: var(--borderWidth);
     /* Add padding to show the border */
     background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
     background-size: 300% 300%;
     animation: animatedgradient 3s ease alternate infinite;
 }

 #box {
     display: flex;
     flex-direction: column;
     gap: 10px;
     align-items: center;
     justify-content: center;
     padding: 20px;
     color: white;
     font-size: 18px;
     text-align: center;
     max-width: 600px;
     background-color: #1D1F20;
     /* Add this line */
     border-radius: 3px;
     /* Match the border radius */
 }

 #box :nth-child(1) {
     color: rgb(0, 202, 0);
     font-weight: 600;
 }

 #box :nth-child(2) {
     color: aliceblue;
 }

 @keyframes animatedgradient {
     0% {
         background-position: 0% 50%;
     }

     50% {
         background-position: 100% 50%;
     }

     100% {
         background-position: 0% 50%;
     }
 }

/* Special Offer ! end */



@media only screen and ( max-width: 767px) {
    .benefitssec{
        display: flex;
    flex-direction: column;
    justify-content: center;
}
}