#diagL {
    flex: 1;
    background-image: url(../img/8.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    height: 87vh;
}
/* Small screens (mobile devices) */
@media (max-width: 480px) {
    #diagL {
        background-size: contain; /* Ensures full image visibility */
        background-position: center top;
    }

    .prd_logo {
        width: 154px;
        margin-left: 93px;
        margin-top: 4%;
    }

    .gif_logo {
        width: 66px;
        margin-left: -114px;
        margin-top: 4%;
    }

    .text-container {
        margin-top: 0%;
        font-weight: 600;
    }

    .content1, .content2 {
        font-size: 24px;
        font-weight: 300;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: #000000 !important;
        text-align: center;
    }

    .sel_header {
        text-align: center;
        color: #000;
        font-size: 15px;
    }

    .satcity {
        padding: 10%;
        margin-top: -13%;
    }

    .dropdown-icon {
        position: relative;
        background-image: url(../img/9.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
        width: 100% !important;
        border: 1px solid #ccc;
        border-radius: 13px;
        font-size: 18px;
        color: #29347F !important;
        font-weight: 600;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

        .dropdown-icon:hover {
            background-color: #f1f1f1;
        }

    .custom-dropdown_1 {
        padding-left: 35px;
        height: 48px;
        margin-top: 6%;
    }

    .submit_btn {
        margin-top: 46px;
        margin-left: 18%;
    }

    .btnsb {
        background: #29347F;
        border: none;
        border-radius: 24px;
        color: white;
        font-weight: 700;
        margin-top: -473px;
        outline: none !important;
        margin-bottom: 79px;
        height: 38px;
        margin-left: 55%;
        text-transform: uppercase;
        font-size: 17px;
        position: absolute;
    }


    /* Background images */
    .div1 {
        grid-row: span 4 / span 4;
        background-image: url('../img/grid_img/1.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 20vh;
        color: #fff;
        text-align: center;
        padding: 50px;
        border-radius: 20px;
    }

    .div2 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        background-image: url('../img/grid_img/2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 20vh;
        color: #fff;
        text-align: center;
        padding: 50px;
        border-radius: 20px;
        margin-top: 3%;
    }

    .div4 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 3;
        background-image: url('../img/grid_img/3.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 20vh;
        color: #fff;
        text-align: center;
        padding: 50px;
        border-radius: 20px;
        margin-top: 3%;
    }

    .div5 {
        grid-row: span 4 / span 4;
        grid-column-start: 4;
        grid-row-start: 1;
        background-image: url('../img/grid_img/4.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 20vh;
        color: #fff;
        text-align: center;
        padding: 50px;
        border-radius: 20px;
        margin-top: 3%;
    }

    .div_img {
        margin-top:0% !important;
    }

    .parent {
        display: flow !important;
    }

    .ml-auto, .mx-auto {
        margin-left: 31% !important;
        width: 100%;
    }

    .pt-1, .py-1 {
        padding-top: 0% !important;
        display: flex !important;
        gap: 26px !important;
        padding: 18px;
    }

    #btnsubmit {
        background: linear-gradient(to right, #29327E, #5cd3e9);
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        width: 197px;
        outline: none !important;
        border-style: none;
        cursor: pointer;
        box-shadow: 7px 8px 5px 2px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }

        #btnsubmit:hover {
            box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.5);
            transform: translateY(-2px);
        }

    .bgw-image {
        background-image: url(../img/13.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 33%;
        height: 178px;
        margin-left: 31% !important;
    }

   
}

/* Tablets */
@media (min-width: 481px) and (max-width: 1024px) {
    .bgw-image {
        background-image: url('../img/14.png'); /* Set background image */
        background-size: cover; /* Scale image to cover entire div */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repeating */
        width: 37%; /* Full width */
        height: 500px; /* Adjust height as needed */
        margin-left: 31% !important;
    }

    #diagL {
        background-size: contain; /* Ensures full image visibility */
        background-position: center top;
    }

    .prd_logo {
        width: 297px;
        margin-left: 32px;
        margin-top: 2%;
    }

    .gif_logo {
        width: 137px;
        margin-left: -223px;
        margin-top: 2%;
    }

    .text-container {
        margin-top: 0%;
        font-weight: 600;
    }

    .content1, .content2 {
        font-size: 24px;
        font-weight: 300;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: #000000 !important;
        text-align: center;
        margin-left: 1% !important;
    }

    .sel_header {
        text-align: center;
        color: #000;
        font-size: 15px;
    }

    .satcity {
        padding: 10%;
        margin-top: -13%;
    }

    .dropdown-icon {
        position: relative;
        background-image: url(../img/9.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
        width: 100% !important;
        border: 1px solid #ccc;
        border-radius: 13px;
        font-size: 18px;
        color: #29347F !important;
        font-weight: 600;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

        .dropdown-icon:hover {
            background-color: #f1f1f1;
        }

    .custom-dropdown_1 {
        padding-left: 35px;
        height: 48px;
        margin-top: 6%;
    }

    .submit_btn {
        margin-top: 46px;
        margin-left: 32%;
    }

    .btnsb {
        background: #29347F;
        border: none;
        border-radius: 24px;
        color: white;
        font-weight: 700;
        margin-top: -573px;
        outline: none !important;
        margin-bottom: 79px;
        height: 38px;
        margin-left: 61%;
        text-transform: uppercase;
        font-size: 17px;
        position: absolute;
    }

    /* Background images */
    .div1 {
        grid-row: span 4 / span 4;
        background-image: url('../img/grid_img/1.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
    }

    .div2 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        background-image: url('../img/grid_img/2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
        margin-top: 3%;
    }

    .div4 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 3;
        background-image: url('../img/grid_img/3.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
        margin-top: 3%;
    }

    .div5 {
        grid-row: span 4 / span 4;
        grid-column-start: 4;
        grid-row-start: 1;
        background-image: url('../img/grid_img/4.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
        margin-top: 3%;
    }

    .div_img {
        margin-top: -16% !important;
    }

    .parent {
        display: flow !important;
    }

    .ml-auto, .mx-auto {
        margin-left: -17% !important;
    }

    .pt-1, .py-1 {
        padding-top: 0% !important;
        display: flex !important;
        gap: 26px !important;
        padding: 18px;
    }

    .tab_cls1 {
        margin-left: -26%;
    }

    #btnsubmit {
        background: linear-gradient(to right, #29327E, #5cd3e9);
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        width: 197px;
        outline: none !important;
        border-style: none;
        cursor: pointer;
        box-shadow: 7px 8px 5px 2px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }

        #btnsubmit:hover {
            box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.5);
            transform: translateY(-2px);
        }

    
}

/* Tablets */
@media (min-width: 912px) and (max-width: 1368px) {
    .bgw-image {
        background-image: url('../img/14.png'); /* Set background image */
        background-size: cover; /* Scale image to cover entire div */
        background-position: center; /* Center the image */
        background-repeat: no-repeat; /* Prevent repeating */
        width: 37%; /* Full width */
        height: 500px; /* Adjust height as needed */
        margin-left: 31% !important;
    }

    #diagL {
        background-size: contain; /* Ensures full image visibility */
        background-position: center top;
    }

    .prd_logo {
        width: 297px;
        margin-left: 32px;
        margin-top: 2%;
    }

    .gif_logo {
        width: 137px;
        margin-left: -223px;
        margin-top: 2%;
    }

    .text-container {
        margin-top: 0%;
        font-weight: 600;
    }

    .content1, .content2 {
        font-size: 24px;
        font-weight: 300;
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: #000000 !important;
        text-align: center;
        margin-left: 1% !important;
    }

    .sel_header {
        text-align: center;
        color: #000;
        font-size: 15px;
    }

    .satcity {
        padding: 10%;
        margin-top: -13%;
    }

    .dropdown-icon {
        position: relative;
        background-image: url(../img/9.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
        width: 100% !important;
        border: 1px solid #ccc;
        border-radius: 13px;
        font-size: 18px;
        color: #29347F !important;
        font-weight: 600;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

        .dropdown-icon:hover {
            background-color: #f1f1f1;
        }

    .custom-dropdown_1 {
        padding-left: 35px;
        height: 48px;
        margin-top: 6%;
    }

    .submit_btn {
        margin-top: 46px;
        margin-left: 32%;
    }

    .btnsb {
        background: #29347F;
        border: none;
        border-radius: 24px;
        color: white;
        font-weight: 700;
        margin-top: -841px;
        outline: none !important;
        margin-bottom: 79px;
        height: 38px;
        margin-left: 78%;
        text-transform: uppercase;
        font-size: 17px;
        position: absolute;
    }

    /* Background images */
    .div1 {
        grid-row: span 4 / span 4;
        background-image: url('../img/grid_img/1.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
    }

    .div2 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        background-image: url('../img/grid_img/2.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
        margin-top: 3%;
    }

    .div4 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 3;
        background-image: url('../img/grid_img/3.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
        margin-top: 3%;
    }

    .div5 {
        grid-row: span 4 / span 4;
        grid-column-start: 4;
        grid-row-start: 1;
        background-image: url('../img/grid_img/4.png');
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        max-width: 100%;
        height: 10vh;
        color: #fff;
        text-align: center;
        padding: 31px;
        margin-top: 3%;
    }

    .div_img {
        margin-top: -35% !important;
    }

    .parent {
        display: flow !important;
    }

    .ml-auto, .mx-auto {
        margin-left: -17% !important;
    }

    .pt-1, .py-1 {
        padding-top: 0% !important;
        display: flex !important;
        gap: 26px !important;
        padding: 18px;
    }

    .tab_cls1 {
        margin-left: -26%;
    }

    #btnsubmit {
        background: linear-gradient(to right, #29327E, #5cd3e9);
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        width: 197px;
        outline: none !important;
        border-style: none;
        cursor: pointer;
        box-shadow: 7px 8px 5px 2px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }

        #btnsubmit:hover {
            box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.5);
            transform: translateY(-2px);
        }
}

/* Laptops & Desktops */
@media (min-width: 1025px) and (max-width: 1440px) {
    .bgw-image {
        background-image: url(../img/14.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 135%;
        height: 500px;
        margin-left: 28% !important;
    }

    .prd_logo {
        width: 479px;
        margin-left: 40px;
        margin-top: 8%;
    }

    .gif_logo {
        width: 191px;
        margin-left: -338px;
        margin-top: 9%;
    }

    #diagL {
        background-size: cover;
        background-position: center center;
    }

    .bac_shw {
        background: rgb(233 233 233 / 20%);
        padding: 27px;
        width: 88%;
        border-radius: 50px;
        border: 2px solid #ededed;
    }

    .btnsb {
        background: #29347F;
        border: none;
        border-radius: 25px;
        color: white;
        font-weight: 700;
        margin-top: 3%;
        outline: none !important;
        margin-bottom: 60px;
        height: 50px;
        margin-left: 5%;
        text-transform: uppercase;
        font-size: 30px;
        width: 21%;
    }

    .parent > div {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 25px;
        text-align: center;
        position: relative; /* Needed for overlay */
        overflow: hidden; /* Ensures hover content stays inside */
        padding: 100px;
        cursor: pointer;
    }

    .div2::after {
        content: "Software provides cost-effective subscription plans, granting access to a comprehensive tool suite without large upfront costs. By eliminating physical infrastructure and manual processes, our software reduces overhead expenses, enhancing operational efficiency for businesses.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126);
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 28px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div2:hover::after {
        top: 0;
        opacity: 1;
    }

    .about {
        font-size: 16px;
        color: #2B2B2B;
        margin-top: 27px;
        line-height: 1.6;
        text-align: left;
    }

    .pt-1, .py-1 {
        padding-top: 4% !important;
        display: flex !important;
        gap: 13px !important;
    }

    .text-container {
        margin-top: 12%;
        font-weight: 600;
    }


    .content1, .content2 {
        font-size: 50px; /* Font size */
        font-weight: 400; /* Font weight */
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: #000000 !important;
    }

    .sel_header {
        text-align: center;
        color: #000;
        font-size: 23px;
    }

    .dropdown-icon {
        position: relative;
        background-image: url(../img/9.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
        width: 251px;
        border: 1px solid #ccc;
        border-radius: 13px;
        font-size: 18px;
        color: #29347F !important;
        font-weight: 600;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

        .dropdown-icon:hover {
            background-color: #f1f1f1;
        }

    .custom-dropdown_1 {
        padding-left: 35px;
        height: 48px;
    }


    .submit_btn {
        margin-top: 46px;
        margin-left: 33%;
    }

    /* Background images */
    .div1 {
        grid-row: span 4 / span 4;
        background-image: url('../img/grid_img/1.png');
        filter: drop-shadow(2px 4px 6px #000);
    }



    .div2 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        background-image: url('../img/grid_img/2.png');
    }

    .div4 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 3;
        background-image: url('../img/grid_img/3.png');
    }

    .div5 {
        grid-row: span 4 / span 4;
        grid-column-start: 4;
        grid-row-start: 1;
        background-image: url('../img/grid_img/4.png');
        filter: drop-shadow(2px 4px 6px #000);
    }

    /* Hover effect for div1 */
    .div1::after {
        content: " We understand the value of personalized solutions. Our platform offers customizable features that adapt to your specific requirements, whether you're a small startup or a large enterprise. From personalized user interfaces to tailored workflows, we provide the tools you need to create a solution that perfectly aligns with your business objectives.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div1:hover::after {
        top: 0;
        opacity: 1;
    }



    /* Hover effect for div4 */
    .div4::after {
        content: "Transition to a sustainable workflow with our Software, going paperless to minimize errors and environmental impact. Experience real-time collaboration and dynamic dashboards for seamless engagement and informed decision-making.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div4:hover::after {
        top: 0;
        opacity: 1;
    }

    /* Hover effect for div5 */
    .div5::after {
        content: "In an era where data breaches are a constant threat, this software places paramount importance on safeguarding your information. Our advanced encryption protocols ensure that every piece of data is securely transmitted and stored.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div5:hover::after {
        top: 0;
        opacity: 1;
    }

    .div_img {
        max-width: 78% !important;
        margin-top: -35%;
    }

    .parent {
        display: grid;
        gap: 20px;
    }

    .ml-auto, .mx-auto {
        margin-left: 31% !important;
    }

    #btnsubmit {
        background: linear-gradient(to right, #29327E, #5cd3e9);
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        width: 197px;
        outline: none !important;
        border-style: none;
        cursor: pointer;
        box-shadow: 7px 8px 5px 2px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }

        #btnsubmit:hover {
            box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.5);
            transform: translateY(-2px);
        }

    .icon-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 44px;
        padding: 16px;
    }

}

/* Large Screens */
@media (min-width: 1441px) {
    .bgw-image {
        background-image: url(../img/14.png);
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        width: 114%;
        height: 500px;
        margin-left: 28% !important;
    }

    .prd_logo {
        width: 512px;
        margin-left: 40px;
        margin-top: 8%;
    }

    .gif_logo {
        width: 214px;
        margin-left: -373px;
        margin-top: 9%;
    }

    #diagL {
        background-size: cover;
        background-position: center center;
    }

    .bac_shw {
        background: rgb(233 233 233 / 20%);
        padding: 27px;
        width: 76%;
        border-radius: 50px;
        border: 2px solid #ededed;
    }

    .btnsb {
        background: #29347F;
        border: none;
        border-radius: 25px;
        color: white;
        font-weight: 700;
        width: 200px;
        outline: none !important;
        margin-bottom: 60px;
        height: 50px;
        
        text-transform: uppercase;
        font-size: 30px;
    }

    .parent > div {
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-size: 25px;
        text-align: center;
        position: relative; /* Needed for overlay */
        overflow: hidden; /* Ensures hover content stays inside */
        padding: 133px;
        cursor: pointer;
    }

    /* Hover effect for div2 */
    .div2::after {
        content: "Software provides cost-effective subscription plans, granting access to a comprehensive tool suite without large upfront costs. By eliminating physical infrastructure and manual processes, our software reduces overhead expenses, enhancing operational efficiency for businesses.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div2:hover::after {
        top: 0;
        opacity: 1;
    }

    .about {
        font-size: 18px;
        color: #2B2B2B;
        margin-top: 27px;
        line-height: 1.6;
        text-align: left;
    }

    .pt-1, .py-1 {
        padding-top: 3% !important;
        display: flex !important;
        gap: 13px !important;
    }

    .text-container {
        margin-top: 12%;
        font-weight: 600;
    }


    .content1, .content2 {
        font-size: 50px; /* Font size */
        font-weight: 400; /* Font weight */
        margin: 0;
        padding: 0;
        line-height: 1.2;
        color: #000000 !important;
    }

    .sel_header {
        text-align: center;
        color: #000;
        font-size: 23px;
    }

    .dropdown-icon {
        position: relative;
        background-image: url(../img/9.png);
        background-repeat: no-repeat;
        background-position: right 10px center;
        background-size: 16px;
        padding-right: 30px;
        width: 251px;
        border: 1px solid #ccc;
        border-radius: 13px;
        font-size: 18px;
        color: #29347F !important;
        font-weight: 600;
        box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
        cursor: pointer;
    }

        .dropdown-icon:hover {
            background-color: #f1f1f1;
        }

    .custom-dropdown_1 {
        padding-left: 35px;
        height: 48px;
    }


    .submit_btn {
        margin-top: 46px;
        margin-left: 33%;
    }

    /* Background images */
    .div1 {
        grid-row: span 4 / span 4;
        background-image: url('../img/grid_img/1.png');
        filter: drop-shadow(2px 4px 6px #000);
    }



    .div2 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        background-image: url('../img/grid_img/2.png');
    }

    .div4 {
        grid-column: span 2 / span 2;
        grid-row: span 2 / span 2;
        grid-column-start: 2;
        grid-row-start: 3;
        background-image: url('../img/grid_img/3.png');
    }

    .div5 {
        grid-row: span 4 / span 4;
        grid-column-start: 4;
        grid-row-start: 1;
        background-image: url('../img/grid_img/4.png');
        filter: drop-shadow(2px 4px 6px #000);
    }

    /* Hover effect for div1 */
    .div1::after {
        content: " We understand the value of personalized solutions. Our platform offers customizable features that adapt to your specific requirements, whether you're a small startup or a large enterprise. From personalized user interfaces to tailored workflows, we provide the tools you need to create a solution that perfectly aligns with your business objectives.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div1:hover::after {
        top: 0;
        opacity: 1;
    }



    /* Hover effect for div4 */
    .div4::after {
        content: "Transition to a sustainable workflow with our Software, going paperless to minimize errors and environmental impact. Experience real-time collaboration and dynamic dashboards for seamless engagement and informed decision-making.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div4:hover::after {
        top: 0;
        opacity: 1;
    }

    /* Hover effect for div5 */
    .div5::after {
        content: "In an era where data breaches are a constant threat, this software places paramount importance on safeguarding your information. Our advanced encryption protocols ensure that every piece of data is securely transmitted and stored.";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgb(42 54 126); /* Dark overlay */
        color: white;
        font-size: 18px;
        padding: 20px;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: top 0.4s ease-in-out;
        opacity: 0;
        line-height: 35px;
        font-weight: 300;
    }

    /* Show content on hover */
    .div5:hover::after {
        top: 0;
        opacity: 1;
    }

    .div_img {
        max-width: 78% !important;
    }

    .parent {
        display: grid;
        gap: 20px;
    }

    .ml-auto, .mx-auto {
        margin-left: 31% !important;
    }

    #btnsubmit {
        background: linear-gradient(to right, #29327E, #5cd3e9);
        padding: 10px 30px;
        border-radius: 10px;
        color: white;
        font-weight: 600;
        width: 197px;
        outline: none !important;
        border-style: none;
        cursor: pointer;
        box-shadow: 7px 8px 5px 2px rgba(0, 0, 0, 0.3);
        transition: all 0.3s ease-in-out;
    }

        #btnsubmit:hover {
            box-shadow: 7px 7px 20px rgba(0, 0, 0, 0.5);
            transform: translateY(-2px);
        }

    .icon-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 44px;
        padding: 16px;
        margin-left: -32%;
    }
}


/*----------------*/
.endtext {
    color: #000;
    margin-top: 16px;
    justify-content: center;
    align-content: center;
    cursor: pointer;
}
.bac_shw p,
.bac_shw button {
    color: #000 !important;
}
.hidden {
    opacity: 0;
    transform: translateX(-100px);
    transition: all 0.8s ease-in-out;
}
.show {
    opacity: 1;
    transform: translateX(0);
}

.icon-container img {
    height: 100px;
    max-width: 100%;
    object-fit: contain;
    transition: all 0.3s ease; /* Smooth scaling */
}

/* Large desktops and 2K/4K displays */
@media (min-width: 1921px) {
    .icon-container img {
        height: 120px;
    }

    .icon-container {
        gap: 60px;
    }
}

/* Standard desktops and laptops (1080p) */
@media (max-width: 1920px) {
    /* Your base styles already cover this range */
}

/* Small laptops and large tablets */
@media (max-width: 1366px) {
    .icon-container {
        margin-left: -20%;
        gap: 40px;
    }

        .icon-container img {
            height: 90px;
        }
}

/* Tablets (landscape) and small laptops */
@media (max-width: 1200px) {
    .icon-container {
        margin-left: 0;
        gap: 36px;
    }

        .icon-container img {
            height: 80px;
        }
}

/* Tablets (portrait) */
@media (max-width: 1024px) {
    .icon-container {
        gap: 32px;
    }

        .icon-container img {
            height: 75px;
        }
}

/* Large mobile devices (landscape) */
@media (max-width: 900px) {
    .icon-container {
        gap: 28px;
    }
}

/* Medium mobile devices */
@media (max-width: 768px) {
    .IconMenu {
        margin-top: -15%;
    }

    .icon-container {
        justify-content: space-around;
        gap: 24px;
    }

        .icon-container img {
            height: 70px;
            margin: 10px;
        }
}

/* Small tablets and large phones */
@media (max-width: 600px) {
    .icon-container {
        gap: 20px;
    }

        .icon-container img {
            height: 65px;
        }
}

/* Most mobile devices (portrait) */
@media (max-width: 480px) {
    .icon-container {
        gap: 16px;
        padding: 15px;
    }

        .icon-container img {
            height: 60px;
        }
}

/* Small mobile devices */
@media (max-width: 375px) {
    .icon-container {
        gap: 12px;
    }

        .icon-container img {
            height: 55px;
        }
}

/* Very small mobile devices */
@media (max-width: 320px) {
    .icon-container {
        gap: 8px;
    }

        .icon-container img {
            height: 50px;
        }
}

/* iOS specific adjustments for notch devices */
@supports (padding: max(0px)) {
    @media (max-width: 480px) {
        .icon-container {
            padding-left: max(16px, env(safe-area-inset-left));
            padding-right: max(16px, env(safe-area-inset-right));
        }
    }
}

    /*.icon-container img {
        height: 100px;
        max-width: 100%;
        object-fit: contain;
    }*/

/* Media Queries for Responsive Layout */
/*@media (max-width: 1200px) {
    .icon-container img {
        height: 80px;
    }

    .icon-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 44px;
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .IconMenu {
        margin-top: -15%;
    }
    .icon-container {
        justify-content: space-around;
    }

        .icon-container img {
            height: 70px;
            margin: 10px;
        }
}

@media (max-width: 480px) {
    .icon-container img {
        height: 60px;
    }

    .icon-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1px;
        padding: 15px;
    }
}*/