EVOLUTION-NINJA

Edit File: contactus.php

.overviewblock {
        height: 400px;
        background-image: url("<?php echo base_url('public/assets/images/IMG (9)con.png');?>");
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

.overviewdetails {
        font-size: 55px;
        font-weight: 700;
        color: #fff;
        font-family: "Barlow", sans-serif;

}

.overviewpara {
        font-size: 17px;
        font-weight: 500;
        color: #fff;
        font-family: "Barlow", sans-serif;
    }

/*   */
    /* contact details ----  */
    .contacus {
        height: auto;
        background-image: url("<?php echo base_url('public/assets/tech-bg-1 1 (1).png');?>");
        background-repeat: no-repeat;
        background-position: center;
        background-color: #F1F2F6;
        background-size: cover;
        width: 83%;
        margin: auto;
        padding: 15px;
    }

.softwareimage {
        display: flex;
        justify-content: center;
        align-items: center;
    }

/* why details  */
    .contimg {
        display: flex;
        justify-content: end;
        align-items: center;
    }

.whyhead {
        font-size: 22px;
        font-weight: 600;
        font-family: "Barlow", sans-serif;
        color: #011B49;
        margin-top: 22px;
        margin-left: 0px;
    }

.whyul {
        margin: 0;
        padding: 20px 0px;
    }

.whyul>li {
        color: #333333;
        font-size: 17px;
        font-weight: 500;
        font-family: "Barlow", sans-serif;
        list-style-type: none;

}

.whyul>li>a {
        color: #333333;
    }

.whydetails {
        padding: 15px;
        width: 83%;
        margin: auto;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

.whydet {
        /* border: 1px solid; */
        width: 350px;
        background-color: white;
        padding: 5px 24px;
        height: auto;
        position: relative;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    }

.whyfloat {
        background-color: #E7F1FF;
        border-bottom-left-radius: 114%;
        border-top-left-radius: 19px;
        width: 135px;
        height: 118px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -15%;
        right: -23px;
    }

.dot {
        margin-right: 21px;
    }

.mapview {
        float: right;
        color: #2976D8 !important;
        font-size: 18px;
        font-weight: 600;
    }

@media (min-width:1001px) and (max-width:1356px) {
        .softimg {
            width: 100%;
        }

.whydetails {
            grid-template-columns: repeat(2, 1fr);
            gap: 19px;
            width: 100%;
        }

.whydet {
            /* border: 1px solid; */
            width: 300px;
        }

.contacus {
            width: 94%;
        }
    }

@media (min-width: 629px) and (max-width:1000px) {

/* overview block  */
        .overviewdetails {
            font-size: 43px;
        }

.overviewpara {
            font-size: 16px;
        }

.softimg {
            width: 72%;
            margin: auto;

}

.whydetails {
            width: 93%;
            grid-template-columns: repeat(2, 1fr);
        }

.whydet {
            width: auto;
        }

.contacus {
            width: 90%;

}
    }

@media only screen and (max-width:628px) {

/*   */
        .overviewblock {
            border: 1px solid;
            height: auto;
            padding: 37px 12px;
        }

.overviewdetails {
            font-size: 22px;
        }

.overviewpara {
            font-size: 12px;
        }

/*   */
        .softimg {
            width: 72%;
            margin: auto;
        }

.whydetails {
            grid-template-columns: repeat(1, 1fr);
            gap: 19px;
            width: 100%;

}

.whydet {
            width: 100%;
            min-height: 200px
        }

.contacus {
            width: 100%;

}
    }
</style>

<?php echo view('includes/header') ?>

<section class="overviewblock">
    <h2 class="overviewdetails">Contact Us</h2>
    <p class="overviewpara text-center">Whether you're just getting started, need help or have an exciting new project
        or technical challenge </br> don't hesitate to contact us using the details below</p>
</section>

<section class="contactusblock mt-4">
    <div class="contacus">
        <div class="row">
            <div class="col-lg-5 col-md-12 col-sm-12 contimg">
                <img src="<?php echo base_url('public/assets/images/Contact us-rafiki 1.png');?>" alt=""
                    class="softimg">
            </div>
            <div class="col-lg-7 col-md-12 col-sm-12">

<div class="whydet">
                        <p class="whyhead">Sales</p>
                        <div class="whyfloat"> <img class=""
                                src="<?php echo base_url('public/assets/images/sales.png');?>" alt="why us img">
                        </div>
                        <ul class="whyul">
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/support.png');?>"
                                    alt="dot img"><a href="tel:+91-9663933606">+91-9731622442</a>
                            </li>
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/arroba.png');?>"
                                    alt="dot img"><a href="mailto:sales@jayblues.com">sales@jayblues.com</a>
                            </li>
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/arroba.png');?>"
                                    alt="dot img"><a href="mailto:manjesh.k@jayblues.com">manjesh.k@jayblues.com</a>
                            </li>
                        </ul>
                    </div>
                    
                    <div class="whydet">
                        <p class="whyhead">Support</p>
                        <div class="whyfloat"> <img class=""
                                src="<?php echo base_url('public/assets/images/online-chat.png');?>" alt="why us img">
                        </div>
                        <ul class="whyul">
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/support.png');?>"
                                    alt="dot img"><a href="tel:+91-9606011223">+91-9606011223</a>
                            </li>
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/arroba.png');?>"
                                    alt="dot img"><a href="mailto:support@jayblues.com">support@jayblues.com</a>

</li>
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/arroba.png');?>"
                                    alt="dot img"><a href="mailto:ajay@jayblues.com">ajay@jayblues.com</a></li>
                        </ul>
                    </div>
                    
                    <div class="whydet">
                        <p class="whyhead">Landline</p>
                        <div class="whyfloat"> <img class=""
                                src="<?php echo base_url('public/assets/images/landline.png');?>" alt="why us img">
                        </div>
                        <ul class="whyul">
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/phone-office.png');?>"
                                    alt="dot img"><a href="tel:+91 821 4262370">+91 821 4262370</a>

</li>
                            <!-- <li><img class="dot" src="<?php echo base_url('public/assets/images/Dot.png');?>"
                                    alt="dot img">Reduce
                                costs and risks

</li>
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/Dot.png');?>"
                                    alt="dot img">Scalable, modular & future proof
                                software</li> -->
                        </ul>
                    </div>
                    
                    <div class="whydet">
                        <p class="whyhead">Head Office</p>
                        <div class="whyfloat"> <img class=""
                                src="<?php echo base_url('public/assets/images/location-pin.png');?>" alt="why us img">
                        </div>
                        <ul class="whyul">
                            <li><img class="dot" src="<?php echo base_url('public/assets/images/location.png');?>"
                                    alt="dot img">#656/D, 16th Main, 5th Cross,
                                Saraswathipuram, Mysore,
                                Karnataka-570009.

</li>
                            <li><a href="https://www.google.com/maps/place/JayBlues+Technologies-+Best+ERP+application+developers+in+Mysore/@12.3017137,76.627,17z/data=!3m1!4b1!4m6!3m5!1s0x3baf7aba8657659b:0x2ec80dc49e5f1e7!8m2!3d12.3017137!4d76.627!16s%2Fg%2F11c3s8_kvt?entry=ttu&g_ep=EgoyMDI0MTEwNi4wIKXMDSoASAFQAw%3D%3D"
                                    class="mapview">VIEW MAP</a>
                            </li>
                            
                        </ul>
                    </div>
                </div>

</div>
        </div>
    </div>
</section>

<?php 
echo view('includes/clientmanagement');
?>

<?php 
echo view('includes/clientsay');
?>

<?php echo view('includes/footer') ?>