.card-img-top {
            height: 200px;
            /* Adjust height as needed */
            object-fit: cover;
        }

        /* Ensuring full responsiveness */

        .bule-img {
            padding: 20px;
        }

        /* Making text align properly */
        .text-lg-start {
            text-align: left !important;
        }

        @media (max-width: 991px) {
            .text-lg-start {
                text-align: center !important;
            }
        }

        /* Adjusting margins for smaller screens */
        @media (max-width: 768px) {
            .mt-5 {
                margin-top: 20px !important;
            }
        }

        /* Ensuring images scale properly */
        .img-fluid {
            max-width: 100%;
            height: auto;
            display: block;
            margin: 0 auto;
        }
   
        .icon-container {
            display: flex;
            align-items: center;
            gap: 10px;
            /* Space between icon and heading */
            margin-bottom: 15px;
            /* Space below heading */
        }

        .icon-container i {
            font-size: 24px;
            /* Icon size */
            color: #333;
            /* Icon color */
        }

        .icon-heading {
            font-size: 18px;
            font-weight: bold;
        }

        .custom-card {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            min-height: 250px;
            /* Ensures uniform height */
        }



        .custom-card {
            background: #fff;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            min-height: 250px;
            /* Ensures uniform height */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .custom-card:hover {
            transform: translateY(-10px) scale(1.05);
            /* Lifts the card slightly */
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
            /* Increases shadow effect */
        }

        .icon-container {
            display: flex;
            align-items: center;
            gap: 10px;
            /* Space between icon and heading */
            margin-bottom: 15px;
            /* Space below heading */
        }

        .icon-container i {
            font-size: 24px;
            /* Icon size */
            color: #17c0de;
            /* Icon color */
            transition: transform 0.3s ease-in-out;
        }

        .custom-card:hover .icon-container i {
            transform: rotate(360deg);
            /* Icon rotates on hover */
        }

        .why-choose-section {
            padding: 50px 0;
        }

        .why-choose-box {
            display: flex;
            align-items: flex-start;
            margin-bottom: 30px;
        }

        .why-choose-icon {
            font-size: 24px;
            color: #A2D2DF;
            margin-right: 10px;
        }

        .why-choose-title {
            font-weight: bold;
        }

        .grap {
            background-color: lightskyblue;
            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;

        }

        #faq-container {
            width: 100%;
            background-color: #42426c;
            padding: 20px;
            /* border-radius: 10px; */
            box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
        }

        /* FAQ Title */
        #faq-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }

        #faq-title span {
            color: #00bcd4;
        }

        /* FAQ Items */
        .faq-item-unique {
            margin: 10px 0;
            padding: 10px;
            /* border: 1px solid #00bcd4; */
            border-bottom: 1px solid #00bcd4;
        }

        /* FAQ Question */
        .faq-question-unique {
            cursor: pointer;
            font-size: 18px;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            color: white;
        }

        .faq-toggle-unique {
            font-size: 20px;
            transition: transform 0.3s ease-in-out;
        }

        /* FAQ Answer (Hidden by Default) */
        .faq-answer-unique {
            display: none;
            font-size: 16px;
            padding: 10px;
            color: #cfd8dc;
            border-top: 1px solid #00bcd4;
        }

        /* Active Class */
        .faq-item-unique.active .faq-answer-unique {
            display: block;
            font-weight: 500;

        }

        .faq-item-unique.active .faq-toggle-unique {
            transform: rotate(180deg);
        }



        /*  */
        .design-section {
            max-width: 1100px; /* Restrict width for better readability */
            margin: 50px auto; /* Centering the content */
            text-align: center; /* Align text to center */
            
        }
        .design-title {
            font-size: 28px;
            font-weight: 700;
        }
        .design-text {
            font-size: 16px;
            font-weight: 400;
            line-height: 1.6; /* Improve readability */
        }
        /* .blue-img{
            background:#A2D2DF;
            color:black;
        } */
        
        
        /* process design code =====================  */
         
         
          .step {
            /*display: flex;*/
            align-items: center;
            margin: 20px 0;
             display: -webkit-inline-box;
             margin-left:10px;
             margin-right:10px;


            

        }
        .arrow {
            background-color: #343a40;
            color: white;
            padding: 15px 25px;
            position: relative;
            font-size: 16px;
            font-weight: bold;
            border-radius: 5px;
        }
        .arrow::after {
            content: '';
            position: absolute;
            top: 50%;
            right: -15px;
            border-top: 15px solid transparent;
            border-bottom: 15px solid transparent;
            border-left: 15px solid #343a40;
            transform: translateY(-50%);
        }
        .additional {
            background-color: #ffc107;
            color: black;
        }
        .additional::after {
            border-left-color: #ffc107;
        }

/*   ====================  */
 .dm-container {
            padding: 50px 5%;
        }
        .dm-service-box {
            background: #fff;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 30px;
            transition: transform 0.3s, box-shadow 0.3s;
            text-align: center;
        }
        .dm-service-box:hover {
            transform: translateY(-5px);
            box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
        }
        .dm-service-title {
            font-weight: bold;
            /*color: black;*/
            margin-bottom: 15px;
        }
        .dm-service-box ul {
            list-style: none;
            padding: 0;
        }
        .dm-service-box ul li {
            padding: 5px 0;
        }
        .row {
            margin-left: auto;
            margin-right: auto;
        }
        
        
        /* trand */
        
          #trend-section {
            padding: 60px 0;
        }
        #trend-card {
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            padding: 30px;
            transition: transform 0.3s ease-in-out;
            text-align: center;
            position: relative;
        }
        #trend-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
        }
        #trend-icon {
            font-size: 50px;
            color: #007bff;
            margin-bottom: 20px;
            animation: bounce 1.5s infinite;
        }
        @keyframes bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-8px); }
        }
        #trend-title {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 15px;
            color: #333;
        }
        #trend-text {
            font-size: 16px;
            color: #555;
        }
        
/*===================================*/
  .design-section {
            text-align: center;
            padding: 50px 20px;
            opacity: 0;
            transform: translateY(50px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }
        .design-title {
            font-size: 28px;
            font-weight: 600;
            color: #fff;
            margin-bottom: 20px;
        }
        .design-text {
            font-size: 16px;
            color: #fff;
            line-height: 1.6;
        }
        
        /* Fade-in from bottom animation */
        .fadeInUp {
            opacity: 1 !important;
            transform: translateY(0) !important;
        }
        


    #seo-section {
        background: #42426c !important;
        color: white;
    }

    #seo-heading {
        font-weight: 600;
    }

    .card {
        background: #fff;
        border: none;
        border-radius: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: 0.3s;
        margin-bottom: 20px;
    }

    .card:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    }

    .card-title {
        color: #17c0de;
        font-weight: 600;
    }

    .card-text {
        font-size: 14px;
        color: #333;
    }

    #seo-button {
        background: #17c0de;
        color: white;
        padding: 10px 20px;
        font-size: 16px;
        border-radius: 5px;
        text-decoration: none;
    }

    #seo-button:hover {
        background: #1391a5;
    }
    
    
    .design-sections {
           
            transform: translateY(50px);
            transition: opacity 1s ease-out, transform 1s ease-out;
        }