@include('layouts.header')

    {{-- <div class="home-sidebar" id="mobile-sidebar">
        <ul class="sidebar-list">
            <li><a href="{{ route('contact') }}"><img src="{{ url('/images/sidebar/sidebar-icon-feedback.png') }}"
                        alt="" class="">Feedback</a></li>
            <li><a href="https://drive.google.com/file/d/1jxJ-am2AyzouTDmjsVyt8atESJK8e2uq/view"><img
                        src="{{ url('/images/sidebar/sidebar-icon-download-app.png') }}" alt=""
                        class="">Download<br>App</a></li>
            <!-- <li><a href=""><img src="{{ url('/images/sidebar/gdi-sidebar-icon-subsidiaries.png') }}" alt="" class="">Subsidiaries</a></li> -->
            <li><a href="{{ route('financial') }}"><img
                        src="{{ url('/images/sidebar/gdi-sidebar-icon-sdg-report.png') }}" alt=""
                        class="">Financial<br>Report</a></li>
        </ul>
    </div> --}}



    <style>


.popup-container {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  /* margin-left: 50px;
  margin-top: 100px; */
  background-color: rgba(0,0,0,0.5); /* Semi-transparent background */
  z-index: 9999; /* Make sure it's on top of everything */
}

/* Style for the popup image */
.popup-image {
  position: absolute;

  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%; /* Adjust the size as needed */
  max-height: 80vh; /* Adjust the size as needed */
}


.close-button {
  position: absolute;
  top: 7%;
  left: 67%;
  transform: translate(-50%, -50%);
  max-width: 80%; /* Adjust the size as needed */
  max-height: 80vh;
  color: rgb(255, 255, 255);
  font-size: 40px;
  cursor: pointer;
}

.circular-container {

width: 50px;
height: 50px;
border-radius: 50%;
background-color: #ff0000;
display: flex;
justify-content: center;
align-items: center;
}


@media (max-width: 873px) {
.close-button {   top: 10%;
  left: 95%;}
}


    .service-card{
    box-shadow: 0px 0px 5px 0px var(--primary);
    height: 24rem;
    background: url(../img/pagecover/bg-1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 10px;
    }

    .services .icon-box {
    text-align: center;
    padding: 70px 20px 80px 20px;
    transition: all ease-in-out 0.3s;ga
    }

    .services .icon-box .icon {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: ease-in-out 0.3s;
    position: relative;
    }

    .services .icon-box .icon i {
    font-size: 36px;
    transition: 0.5s;
    position: relative;
    }

    .services .icon-box .icon svg {
    position: absolute;
    top: 0;
    left: 0;
    }

    .services .icon-box .icon svg path {
    transition: 0.5s;
    fill: #f5f5f5;
    }

    .services .icon-box h4 {
    font-weight: 600;
    margin: 10px 0 15px 0;
    font-size: 22px;
    }

    .services .icon-box h4 a {

    transition: ease-in-out 0.3s;
    }

    .services .icon-box p {

    line-height: 24px;
    font-size: 14px;
    margin-bottom: 0;
    }

    .services .icon-box:hover {
    border-color: #fff;
    box-shadow: 0px 0 35px 0 rgba(0, 0, 0, 0.08);
    }

    .services .iconbox-blue i {
    color: #47aeff;
    }

    .services .iconbox-blue:hover .icon i {
    color: #fff;
    }

    .services .iconbox-blue:hover .icon path {
    fill: #47aeff;
    }

    .services .iconbox-orange i {
    color: #ffa76e;
    }

    .services .iconbox-orange:hover .icon i {
    color: #fff;
    }

    .services .iconbox-orange:hover .icon path {
    fill: #ffa76e;
    }

    .services .iconbox-pink i {
    color: #e80368;
    }

    .services .iconbox-pink:hover .icon i {
    color: #fff;
    }

    .services .iconbox-pink:hover .icon path {
    fill: #e80368;
    }

    .services .iconbox-yellow i {
    color: #ffbb2c;
    }

    .services .iconbox-yellow:hover .icon i {
    color: #fff;
    }

    .services .iconbox-yellow:hover .icon path {
    fill: #ffbb2c;
    }

    .services .iconbox-red i {
    color: #ff5828;
    }

    .services .iconbox-red:hover .icon i {
    color: #fff;
    }

    .services .iconbox-red:hover .icon path {
    fill: #ff5828;
    }

    .services .iconbox-teal i {
    color: #11dbcf;
    }

    .services .iconbox-teal:hover .icon i {
    color: #fff;
    }

    .services .iconbox-teal:hover .icon path {
    fill: #11dbcf;
    }

    </style>






    <section class="slider_section " >
        
              {{-- popup --}}
        <!--<div class="popup-container" id="popup-container">-->
        <!--    <img src="/images/csl_add.jpg"  alt="Advertisement" class="popup-image">-->
        <!--    <span class="close-button circular-container " onclick="closePopup()">&times;</span>-->
        <!--</div>-->
        
        <!-- <div class="popup-container" id="popup-container">-->
        <!--    <img src="/images/csl_add.jpg"  alt="Advertisement" class="popup-image">-->
        <!--    <span class="close-button circular-container " onclick="closePopup()">&times;</span>-->
        <!--</div>-->

        {{-- popup --}}
        
        
        <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
            <div class="carousel-indicators row">

                <li data-target="#carouselExampleIndicators "  data-slide-to="1" >
                    <i class="fas fa-hospital "></i>
                    <span>Hospital</span>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="2">
                    <i class="fas fa-stethoscope"></i>
                    <span>Pharmacy</span>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="3">
                    <i class="fas fa-building"></i>
                    <span>Real Estate</span>
                </li>

                <li data-target="#carouselExampleIndicators" data-slide-to="4">
                    <i class="fas fa-school"></i>
                    <span>Education</span>
                </li>


                <li data-target="#carouselExampleIndicators" data-slide-to="5">
                    <i class="fas fa-ticket-alt"></i>
                    <span> Hazz & Ticketing</span>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="6">
                    <i class="fas fa-truck-loading"></i>
                    <span> Inventory</span>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="7">
                    <i class="fas fa-money-bill-wave"></i>
                    <span>Accounts</span>
                </li>

                <li data-target="#carouselExampleIndicators" data-slide-to="8">
                    <i class="fas fa-money-check-alt"></i>
                    <span>Payroll</span>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="9">
                    <i class="fas fa-chart-bar"></i>
                    <span>FDR</span>
                </li>




                {{-- <li data-target="#carouselExampleIndicators" data-slide-to="10">
                    <i class="fas fa-calendar-alt"></i>
                    <span>Hr</span>
                </li> --}}
                <li data-target="#carouselExampleIndicators" data-slide-to="11">
                    <i class="fas fa-user"></i>
                    <span>Human Resource</span>
                </li>
                <li data-target="#carouselExampleIndicators" data-slide-to="12">
                    <i class="fas fa-cogs"></i>
                    <span>Fixed Assets</span>
                </li>


            </div>

            <div class="carousel-inner">
                <div class="carousel-item h-100 active">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-1.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;">
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>Fire Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>






                <div class="carousel-item h-100 ">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-2.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;">
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>Marine Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>
                <div class="carousel-item h-100 ">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-3.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;">
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>Motor Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>
                <div class="carousel-item h-100 ">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-11.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;">
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>Health Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>

                <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-5.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;">
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>Personal Accident Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>



                <div class="carousel-item h-100 ">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-6.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;">
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>Burglary Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>



                <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-4.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;" >
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>All Risk Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>


                <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-8.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block" style="cursor: pointer;" >
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>All Risk Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>



                <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-9.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;" >
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>All Risk Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>



                <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-7.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;" >
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>All Risk Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>
                <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-12.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;" >
                        <div class="caption">
                            {{-- <h5>Union Insurance </h5> --}}
                            {{-- <h5>All Risk Insurance</h5> --}}
                            {{-- <a href="https://onlineUnion Insurance .csl-erp.com/" class="banner-button">
                                Explore More
                            </a> --}}
                        </div>
                    </div>
                </div>

                {{-- <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-7.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;" >
                        <div class="caption">

                        </div>
                    </div>
                </div> --}}

                {{-- <div class="carousel-item h-100">
                    <img loading="lazy" class="d-block w-100 h-100" src="images/banner/banner-2.jpg" alt="First slide">
                    <div class="carousel-caption d-none d-md-block"  style="cursor: pointer;" >
                        <div class="caption">

                        </div>
                    </div>
                </div> --}}




            </div>
            <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </section>




       <section id="services" class="services section-bg py-5">
        <div class="container" data-aos="fade-up">

            <div class="section-title">
                <h2>Our Services</h2>
            </div>
            <div class="row g-3">
                <div class=" col-lg-4 col-md-6 " data-aos="zoom-in" data-aos-delay="100">
                    <div class="service-card icon-box iconbox-blue">
                        <div class="icon">
                            <svg width="100" height="100" viewBox="0 0 600 600"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke="none" stroke-width="0" fill="#f5f5f5"
                                    d="M300,521.0016835830174C376.1290562159157,517.8887921683347,466.0731472004068,529.7835943286574,510.70327084640275,468.03025145048787C554.3714126377745,407.6079735673963,508.03601936045806,328.9844924480964,491.2728898941984,256.3432110539036C474.5976632858925,184.082847569629,479.9380746630129,96.60480741107993,416.23090153303,58.64404602377083C348.86323505073057,18.502131276798302,261.93793281208167,40.57373210992963,193.5410806939664,78.93577620505333C130.42746243093433,114.334589627462,98.30271207620316,179.96522072025542,76.75703585869454,249.04625023123273C51.97151888228291,328.5150500222984,13.704378332031375,421.85034740162234,66.52175969318436,486.19268352777647C119.04800174914682,550.1803526380478,217.28368757567262,524.383925680826,300,521.0016835830174">
                                </path>
                            </svg>
                            <i class="fas fa-laptop"></i>
                        </div>
                        <h4><a href="webdevelopment.html">Web Development</a></h4>
                        <p>We are the best web development company in Bangladesh, providing first-class web development capabilities. Our knowledgeable staff ensures a solid online presence and stimulates development by providing creative, specialized solutions tailored to your company's needs. </p>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
                    <div class="service-card icon-box iconbox-orange ">
                        <div class="icon">
                            <svg width="100" height="100" viewBox="0 0 600 600"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke="none" stroke-width="0" fill="#f5f5f5"
                                    d="M300,582.0697525312426C382.5290701553225,586.8405444964366,449.9789794690241,525.3245884688669,502.5850820975895,461.55621195738473C556.606425686781,396.0723002908107,615.8543463187945,314.28637112970534,586.6730223649479,234.56875336149918C558.9533121215079,158.8439757836574,454.9685369536778,164.00468322053177,381.49747125262974,130.76875717737553C312.15926192815925,99.40240125094834,248.97055460311594,18.661163978235184,179.8680185752513,50.54337015887873C110.5421016452524,82.52863877960104,119.82277516462835,180.83849132639028,109.12597500060166,256.43424936330496C100.08760227029461,320.3096726198365,92.17705696193138,384.0621239912766,124.79988738764834,439.7174275375508C164.83382741302287,508.01625554203684,220.96474134820875,577.5009287672846,300,582.0697525312426">
                                </path>
                            </svg>
                            {{-- <i class='bx bx-mobile'></i> --}}
                            <i class="fab fa-android"></i>
                        </div>
                        <h4><a href="">App Development</a></h4>
                        <p>Specializing in Android app development, we are regarded as the top app development firm in Bangladesh. Our talented staff develops creative, user-friendly apps catered to your company objectives, thereby improving your online profile and propelling success. Trust us to create elite apps.</p>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
                    <div class="service-card icon-box iconbox-pink">
                        <div class="icon">
                            <svg width="100" height="100" viewBox="0 0 600 600"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke="none" stroke-width="0" fill="#f5f5f5"
                                    d="M300,541.5067337569781C382.14930387511276,545.0595476570109,479.8736841581634,548.3450877840088,526.4010558755058,480.5488172755941C571.5218469581645,414.80211281144784,517.5187510058486,332.0715597781072,496.52539010469104,255.14436215662573C477.37192572678356,184.95920475031193,473.57363656557914,105.61284051026155,413.0603344069578,65.22779650032875C343.27470386102294,18.654635553484475,251.2091493199835,5.337323636656869,175.0934190732945,40.62881213300186C97.87086631185822,76.43348514350839,51.98124368387456,156.15599469081315,36.44837278890362,239.84606092416172C21.716077023791087,319.22268207091537,43.775223500013084,401.1760424656574,96.891909868211,461.97329694683043C147.22146801428983,519.5804099606455,223.5754009179313,538.201503339737,300,541.5067337569781">
                                </path>
                            </svg>
                            <i class="fa fa-plus-square"></i>

                        </div>
                        <h4><a href="software.html">Software Development</a></h4>
                        <p>Renowned for providing innovative ideas, we are one of Bangladesh's top software development companies. Our knowledgeable staff creates tailored programs that fit your company's requirements, guaranteeing effectiveness and expansion.</p>

                    </div>
                </div>

                <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="100">
                    <div class="service-card icon-box iconbox-yellow">
                        <div class="icon">
                            <svg width="100" height="100" viewBox="0 0 600 600"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke="none" stroke-width="0" fill="#f5f5f5"
                                    d="M300,503.46388370962813C374.79870501325706,506.71871716319447,464.8034551963731,527.1746412648533,510.4981551193396,467.86667711651364C555.9287308511215,408.9015244558933,512.6030010748507,327.5744911775523,490.211057578863,256.5855673507754C471.097692560561,195.9906835881958,447.69079081568157,138.11976852964426,395.19560036434837,102.3242989838813C329.3053358748298,57.3949838291264,248.02791733380457,8.279543830951368,175.87071277845988,42.242879143198664C103.41431057327972,76.34704239035025,93.79494320519305,170.9812938413882,81.28167332365135,250.07896920659033C70.17666984294237,320.27484674793965,64.84698225790005,396.69656628748305,111.28512138212992,450.4950937839243C156.20124167950087,502.5303643271138,231.32542653798444,500.4755392045468,300,503.46388370962813">
                                </path>
                            </svg>
                            {{-- <i class="bx bx-layer"></i> --}}
                            <i class="fa  fa-pie-chart"></i>
                        </div>
                        <h4><a href="">SEO Services</a></h4>
                        <p>As one of Bangladesh's best SEO firms, our main areas of expertise include increasing your web presence and generating targeted traffic to your website. Our knowledgeable staff provides tailored SEO plans meant to raise ROI and boost search engine results page performance. </p>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="200">
                    <div class="service-card icon-box iconbox-red">
                        <div class="icon">
                            <svg width="100" height="100" viewBox="0 0 600 600"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke="none" stroke-width="0" fill="#f5f5f5"
                                    d="M300,532.3542879108572C369.38199826031484,532.3153073249985,429.10787420159085,491.63046689027357,474.5244479745417,439.17860296908856C522.8885846962883,383.3225815378663,569.1668002868075,314.3205725914397,550.7432151929288,242.7694973846089C532.6665558377875,172.5657663291529,456.2379748765914,142.6223662098291,390.3689995646985,112.34683881706744C326.66090330228417,83.06452184765237,258.84405631176094,53.51806209861945,193.32584062364296,78.48882559362697C121.61183558270385,105.82097193414197,62.805066853699245,167.19869350419734,48.57481801355237,242.6138429142374C34.843463184063346,315.3850353017275,76.69343916112496,383.4422959591041,125.22947124332185,439.3748458443577C170.7312796277747,491.8107796887764,230.57421082200815,532.3932930995766,300,532.3542879108572">
                                </path>
                            </svg>
                            <i class="fa fa-server"></i>

                        </div>
                        <h4><a href="">Hosting Services</a></h4>
                        <p>We are the leading hosting services company in Bangladesh, offering dependable, safe, high-performance hosting solutions tailored to your business requirements.  We are the dependable choice for top-notch hosting solutions in Bangladesh.</p>
                    </div>
                </div>

                <div class="col-lg-4 col-md-6" data-aos="zoom-in" data-aos-delay="300">
                    <div class="service-card icon-box iconbox-teal">
                        <div class="icon">
                            <svg width="100" height="100" viewBox="0 0 600 600"
                                xmlns="http://www.w3.org/2000/svg">
                                <path stroke="none" stroke-width="0" fill="#f5f5f5"
                                    d="M300,566.797414625762C385.7384707136149,576.1784315230908,478.7894351017131,552.8928747891023,531.9192734346935,484.94944893311C584.6109503024035,417.5663521118492,582.489472248146,322.67544863468447,553.9536738515405,242.03673114598146C529.1557734026468,171.96086150256528,465.24506316201064,127.66468636344209,395.9583748389544,100.7403814666027C334.2173773831606,76.7482773500951,269.4350130405921,84.62216499799875,207.1952322260088,107.2889140133804C132.92018162631612,134.33871894543012,41.79353780512637,160.00259165414826,22.644507872594943,236.69541883565114C3.319112789854554,314.0945973066697,72.72355303640163,379.243833228382,124.04198916343866,440.3218312028393C172.9286146004772,498.5055451809895,224.45579914871206,558.5317968840102,300,566.797414625762">
                                </path>
                            </svg>

                            <i class="fa fa-globe"></i>

                        </div>
                        <h4><a href="">Domain Registration</a></h4>
                        <p>
                            We are a reputable domain registration company based in Bangladesh that provides safe and fairly priced services. By helping you find and register the perfect domain for your businessy. Join us for perfect and consistent Bangladeshi & Any domain registration.</p>
                    </div>
                </div>

            </div>

        </div>
    </section>









    {{-- <section class="service_section py-5">
        <div class="service_container">
            <div class="container ">
                <div class="heading_container heading_center">
                    <h2 style="color:var(--primary);">
                        Our Services
                    </h2>
                </div>




            </div>
        </div>
    </section> --}}






    <section class="">
        <div class="container ">
            <div class="heading_container heading_center">
                <h2 style="color:var(--primary);">
                    Our Clients

                </h2>
                <p style="color:rgb(219, 58, 9); font-size:17px;margin-top:-25px;">  These are our happy clients who trusts us. </p>
                <hr>
            </div>
            <div id="owl-demo2" class="owl-carousel owl-theme">
                <div class="item">
                    <a href="https://www.rahimafrooz.com/Default.aspx" target="_blank" class="client_container ">
                        <img loading="lazy" src="images/clients/client-1.png" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="https://www.panpacific.com/en/hotels-and-resorts/pp-dhaka.html" target="_blank"
                        class="client_container ">
                        <img loading="lazy" src="images/clients/client-2.png" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="https://www.tblbd.com/" target="_blank" class="client_container ">
                        <img loading="lazy" src="images/clients/client-3.png" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="https://abbl.com/" target="_blank" class="client_container ">
                        <img loading="lazy" src="images/clients/client-4.png" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="https://www.hsbc.com.bd/1/2/" target="_blank" class="client_container ">
                        <img loading="lazy" src="images/clients/client-5.png" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="https://www.standardbankbd.com/" target="_blank" class="client_container ">
                        <img loading="lazy" src="images/clients/client-6.png" alt="">
                    </a>
                </div>
                <div class="item">
                    <a href="https://www.dutchbanglabank.com/" target="_blank" class="client_container ">
                        <img loading="lazy" src="images/clients/client-7.png" alt="">
                    </a>
                </div>

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








    <section class="client_section ">


        <div class="container ">
                 <div class="heading_container heading_center">
                <h2 style="color:var(--primary);">
                     Product
                </h2>
            </div>
            <div id="accordion">

                <div id="health" class="collapse show" aria-labelledby="headingThree"
                data-parent="#accordion">
                <div class="card-body">
                    <div class="row g-4 my-3">
                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/underwriting (1).pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/uw.gif"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Underwriting</h5>
                    </a>
                </div>
                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/coinsurance.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/co-insurance.gif"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">co-insurance</h5>
                    </a>
                </div>
                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/claim.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/claim.gif"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Claim</h5>
                    </a>
                </div>
                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/reinsurance.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/reinsu.gif"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Re-insurance</h5>
                    </a>
                </div>
                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/mis.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/MIS.gif"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">MIS</h5>
                    </a>
                </div>



                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="{{ route('account') }}">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/accounts.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Accounts</h5>
                    </a>
                </div>



                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="{{ route('pay.view') }}">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/payroll.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Payroll</h5>
                    </a>
                </div>

                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/budget.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/budget.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Budget</h5>
                    </a>
                </div>

                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="{{ route('fdr') }}">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/fdr.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">FDR</h5>
                    </a>
                </div>


                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/providentfund.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/pf.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Provident Fund</h5>
                    </a>
                </div>


                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="{{ route('hr.view') }}">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/HR.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">HR</h5>
                    </a>
                </div>

                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/officenote.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/note.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Office Note</h5>
                    </a>
                </div>

                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="{{ route('VechileMaintenance') }}">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/vehicle.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Vechile Maintenance</h5>
                    </a>
                </div>

                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="images/productall/insurance/utilitybill.pdf">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/insurance/ubill.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Ulity Bill</h5>
                    </a>
                </div>



                <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                    <a href="{{ route('education.view') }}">
                        <div class="branch-card branch-cards"
                            style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                            <img loading="lazy"src="images/productall/education/edu.jpg"
                                style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                                alt="" srcset="">
                        </div>
                        <h5 style="color:black;" class=" text-center mt-2">Education</h5>
                    </a>
                </div>

        <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
            <a href="images/productall/education/library (2).pdf">
                <div class="branch-card branch-cards"
                    style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                    <img loading="lazy"src="images/productall/education/lib.jpg"
                        style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                        alt="" srcset="">
                </div>
                <h5 style="color:black;" class=" text-center mt-2">Library</h5>
            </a>
        </div>

        <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
            <a href="{{ route('peoples-personal-accident') }}">
                <div class="branch-card branch-cards"
                    style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                    <img loading="lazy"src="images/productall/garments/garments.jpg"
                        style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                        alt="" srcset="">
                </div>
                <h5 style="color:black;" class=" text-center mt-2">Garments</h5>
            </a>
        </div>



            <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
                <a href="{{ route('land.p') }}">
                    <div class="branch-card branch-cards"
                        style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                        <img loading="lazy"src="images/productall/real/land.jpg"
                            style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                            alt="" srcset="">
                    </div>
                    <h5 style="color:black;" class=" text-center mt-2">Land Purchase</h5>
                </a>
            </div>

    <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
        <a href="{{ route('Examption.real.estate') }}">
            <div class="branch-card branch-cards"
                style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                <img loading="lazy"src="images/productall/real/sael.jpg"
                    style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                    alt="" srcset="">
            </div>
            <h5 style="color:black;" class=" text-center mt-2">Land Sale</h5>
        </a>
    </div>

    <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
        <a href="images/productall/real/aptsales.pdf">
            <div class="branch-card branch-cards"
                style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                <img loading="lazy"src="images/productall/real/apr.jpg"
                    style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                    alt="" srcset="">
            </div>
            <h5 style="color:black;" class=" text-center mt-2">Apartment Sale</h5>
        </a>
    </div>
    <div class="col-md-2 " style="padding: 0px 20px 0px 20px; ">
        <a href="{{ route('hospital.pdf') }}">
            <div class="branch-card branch-cards"
                style="position:relative; border-radius:20px; overflow:hidden; max-height:150px;  ">
                <img loading="lazy"src="images/productall/hospital/hs.jpg"
                    style="width: 100%; top: 0; left:0; height:100%;  position:absolute; background-color:white;  "
                    alt="" srcset="">
            </div>
            <h5 style="color:black;" class=" text-center mt-2">Hospital</h5>
        </a>
    </div>

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

        </div>


    </section>











    <section class="client_section ">
        <div class="container ">
            <div class="heading_container heading_center">
                <h2 style="color:var(--primary);">
                    Team Member
                </h2>

           <div class="row g-4">


        @foreach ($board_of_directors as $board_of_director)
            <div class="col-4">
                <div class="board-of-directory-card">
                    <a href="#">
                        <img  loading="lazy"  src="{{ url(env('EXT').'project/public/uploads/board of directors/' . $board_of_director->image) }}" alt="">
                    </a>
                    <h5>{{ $board_of_director->name }}</h5>
                    <p>{{ $board_of_director->designation }}</p>
                    <p>{{ $board_of_director->other_designation }}</p>
                    <p>{{ $board_of_director->other_company }}</p>
                </div>
            </div>
        @endforeach


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





















    <section class="client_section ">
        <div class="container ">
            <div class="heading_container heading_center">
                <h2 style="color:var(--primary);">
                    Gallery
                </h2>

            </div>

            <div id="owl-demo" class="owl-carousel owl-theme">



                @foreach ($gallery as $data)
                @if (isset($data ['photo_gallery'] ) || isset($data['photo_title']))
                <div class="item ">

                    <img loading="lazy" width=" "  type="video/mp4"  src="{{ url(env('EXT').'uploads/Photo Gallery/'.$data->photo_gallery) }}" alt="">

                </div>
                @endif
                    @endforeach



    {{--
                <div class="item">
                    <img loading="lazy" src="images/gallery/pic-3.jpg" alt="">
                </div> --}}
            </div>
        </div>
    </section>








    {{--
    <section class="about_section about_section2">
        <div class="container" >
            <div class="row">
                <div class=" col-12 col-lg-12 col-md-10">
                    <div class="heading_container " style="margin-left: 420px; margin-bottom:-20px;" >
                        <h2 style="color:var(--primary);" >ACHIEVEMENT & AWARDS</h2>
                    </div>
                    <div id="achivementsAwards" class="owl-carousel owl-theme">
                        @foreach ($achivements_and_awards as $achivements_and_award)
                            <div class="item news_section">
                                <div class="box" style="margin-top: 0;">
                                    <div class="img-box" style="height: 15rem;">
                                        <img loading="lazy" class="h-100"
                                            src="{{ url(env('EXT') . 'uploads/achivements and awards/' . $achivements_and_award->report_file) }}"
                                            alt="">
                                    </div>
                                    <div class="detail-box overflow">
                                        {{ $achivements_and_award->achivements }}
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                </div>



                <div class="col-lg-4">
                    <div class="img-box d-flex justify-content-end">

                        <img loading="lazy" class="" src="images/Union Insurance  MD SIR.jpg" alt="">

                    </div>
                </div>

            </div>
        </div>
    </section> --}}

    <!-- end about section -->



    <!-- client section -->




    {{-- <section class="news_section pb-2">
        <div class="container">
            <div class="heading_container heading_center">
                <h2 style="color:var(--primary);">
                    ACHIEVEMENT & AWARDS
                </h2>
            </div>
            <div class="row">
                @foreach ($achivements_and_awards as $achivements_and_award)
                    <div class="col-md-6 col-lg-4 mx-auto">
                        <div class="box">
                            <div class="img-box">
                                <img loading="lazy" class="h-100"
                                            src="{{ url(env('EXT') . 'uploads/achivements and awards/' . $achivements_and_award->report_file) }}"
                                            alt="">
                            </div>
                            <div class="detail-box">
                                <p style="text-align: justify;">
                                    {{ $achivements_and_award->achivements }}
                                </p>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="btn-box">
                <a href="">
                    View More
                </a>
            </div>
        </div>
    </section> --}}










    <section class="news_section pb-2">
        <div class="container">
            <div class="heading_container heading_center">
                <h2 style="color:var(--primary);">
                    News and Events
                </h2>
            </div>
            <div class="row">
                @foreach ($news_and_events as $news_and_event)
                    <div class="col-md-6 col-lg-4 mx-auto">
                        <div class="box">
                            <div class="img-box">
                                <img loading="lazy" src="{{ url(env('EXT') . 'uploads/news and events/' . $news_and_event->image) }}">
                            </div>
                            <div class="detail-box">
                                <p style="text-align: justify;">
                                    {{ $news_and_event->title }}
                                </p>

                            </div>
                        </div>
                    </div>
                @endforeach
            </div>
            <div class="btn-box">
                <a href="{{ route('news') }}">
                    View More
                </a>
            </div>
        </div>
    </section>












    <!-- contact section -->

    <section class="contact_section mb-5">
        <div class="container">
            <div class="row">
                <div class="col-md-6 col-lg-6 px-0 mt-5">
                    <div class="map_container mt-5">
                        <div class="map mb-3 ">
                            <iframe class="col-lg-12 col-12" src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d14611.189967691576!2d90.420318!3d23.7189247!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3755b990f6fc48d3%3A0xbd63db7cc892009c!2sConfidence%20Software%20Limited!5e0!3m2!1sen!2sbd!4v1691054267776!5m2!1sen!2sbd" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                        </div>
                    </div>
                </div>

                    <div class="col-md-6 col-lg-6  " >

                    {{-- <div class="  mt-5 " >
                        <img loading="lazy" style="width: 430px ; margin-left:60px;" class="mt-5" src="images/bigopti.jpg" alt="">
                    </div> --}}

                    <div class="row">


                    <div class="col-md-2 col-lg-2" >

                    </div>

                    <div class="col-md-10 col-lg-10" >


                        <div class="heading_container heading_center  " style="min-height: 120px;">
                            <h2 class="">
                                Get In Touch
                            </h2>
                        </div>
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        @if ($message = Session::get('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i>{{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <form action="{{ route('save-contact') }}" method="POST" class="contact_form">
                            @csrf
                            <input type="text" name="user_name" class="form-control" id="user_name"
                                placeholder="Your Name">
                                @if ($errors->has('user_name'))
                                <span class="text-danger">{{ $errors->first('user_name') }}</span>
                            @endif
                            <input type="text" name="mobile_number" class="form-control" id="mobile_number"
                                placeholder="Mobile Number">
                                @if ($errors->has('mobile_number'))
                                <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
                            @endif
                            <input type="email" name="user_email" class="form-control" id="user_email"
                                placeholder="Email">
                                @if ($errors->has('user_email'))
                                <span class="text-danger">{{ $errors->first('user_email') }}</span>
                            @endif
                            <textarea name="message" class="form-control" id="inputMessage" placeholder="Message"></textarea>
                            @if ($errors->has('message'))
                            <span class="text-danger">{{ $errors->first('message') }}</span>
                        @endif
                            <div class="btn-box btn-center">
                                <button type="submit" class="submit_btn">
                                    Send
                                </button>
                            </div>
                        </form>
                    </div>


            </div>


                </div>

        </div>

                {{-- <div class="col-md-6 col-lg-5 mx-auto">

                    <div class="form_container mb_mobile_45 pr-xl-4">

                        <div class="heading_container heading_center ">
                            <h2 class="">
                                Get In Touch
                            </h2>
                        </div>
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        @if ($message = Session::get('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i>{{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <form action="{{ route('save-contact') }}" method="POST" class="contact_form">
                            @csrf
                            <input type="text" name="user_name" class="form-control" id="user_name"
                                placeholder="Your Name">
                                @if ($errors->has('user_name'))
                                <span class="text-danger">{{ $errors->first('user_name') }}</span>
                            @endif
                            <input type="text" name="mobile_number" class="form-control" id="mobile_number"
                                placeholder="Mobile Number">
                                @if ($errors->has('mobile_number'))
                                <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
                            @endif
                            <input type="email" name="user_email" class="form-control" id="user_email"
                                placeholder="Email">
                                @if ($errors->has('user_email'))
                                <span class="text-danger">{{ $errors->first('user_email') }}</span>
                            @endif
                            <textarea name="message" class="form-control" id="inputMessage" placeholder="Message"></textarea>
                            @if ($errors->has('message'))
                            <span class="text-danger">{{ $errors->first('message') }}</span>
                        @endif
                            <div class="btn-box btn-center">
                                <button type="submit" class="submit_btn">
                                    Send
                                </button>
                            </div>
                        </form>
                    </div>
                </div> --}}








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

    <!-- contact section -->


    <!-- news section -->


    <!-- end news section -->

    <!-- contact section -->
    {{--
    <section class="contact_section  btn-success mt-5 mb-5" style="background-color: rgba(248, 248, 248, 0.349); ">
        <div class="container ">
            <div class="row ">
                <div class="col-md-6 col-lg-5 mx-auto bg-success">

                    <div class="form_container mb_mobile_45 pr-xl-4">

                        <div class="heading_container heading_center  ">
                            <h2 class="">
                                Get In Touch
                            </h2>
                        </div>
                        @if ($message = Session::get('success'))
                            <div class="alert alert-success alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i> {{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        @if ($message = Session::get('error'))
                            <div class="alert alert-danger alert-dismissible fade show" role="alert">
                                <i class="fa fa-exclamation-circle me-2"></i>{{ $message }}
                                <button type="button" class="btn-close" data-bs-dismiss="alert"
                                    aria-label="Close"></button>
                            </div>
                        @endif
                        <form action="{{ route('save-contact') }}" method="POST" class="contact_form">
                            @csrf
                            <input type="text" name="user_name" class="form-control" id="user_name"
                                placeholder="Your Name">
                                @if ($errors->has('user_name'))
                                <span class="text-danger">{{ $errors->first('user_name') }}</span>
                            @endif
                            <input type="text" name="mobile_number" class="form-control" id="mobile_number"
                                placeholder="Mobile Number">
                                @if ($errors->has('mobile_number'))
                                <span class="text-danger">{{ $errors->first('mobile_number') }}</span>
                            @endif
                            <input type="email" name="user_email" class="form-control" id="user_email"
                                placeholder="Email">
                                @if ($errors->has('user_email'))
                                <span class="text-danger">{{ $errors->first('user_email') }}</span>
                            @endif
                            <textarea name="message" class="form-control" id="inputMessage" placeholder="Message"></textarea>
                            @if ($errors->has('message'))
                            <span class="text-danger">{{ $errors->first('message') }}</span>
                        @endif
                            <div class="btn-box btn-center">
                                <button type="submit" class="submit_btn">
                                    Send
                                </button>
                            </div>
                        </form>
                    </div>
                </div>




            </div>
        </div>
    </section> --}}







    <script>
        // Function to open the popup
        function openPopup() {
            document.getElementById("popup-container").style.display = "block";
            setTimeout(closePopup, 10000);
        }

        // Function to close the popup
        function closePopup() {
            document.getElementById("popup-container").style.display = "none";
        }

        // Show the popup when the page loads
        window.onload = openPopup;
    </script>




    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
    <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.green.min.css" />
    <script>
        $(document).ready(function() {

            $("#owl-demo").owlCarousel({
                loop: true,
                autoplay: true,
                autoPlaySpeed: 2000,
                autoPlayTimeout: 2000,
                autoplayHoverPause: true,
                margin: 10,
                nav: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                },
                pagination: false,
            });
            $("#owl-demo2").owlCarousel({
                loop: true,
                autoplay: true,


                autoplayTimeout: 2000,
                slideTransition: 'linear',
                autoplaySpeed: 2000,
                // autoPlaySpeed: 2000,
                // autoPlayTimeout: 2000,

                // autoplayHoverPause: true,
                margin: 10,
                nav: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 3
                    },
                    1000: {
                        items: 5
                    }
                },
                pagination: false,
            });


            $("#achivementsAwards").owlCarousel({
                loop: true,
                autoplay: true,
                autoPlaySpeed: 2000,
                autoPlayTimeout: 2000,
                autoplayHoverPause: true,
                margin: 10,
                nav: true,
                responsive: {
                    0: {
                        items: 1
                    },
                    600: {
                        items: 2
                    }
                },
                pagination: false,
            });

        });





        var element = document.getElementById("nav");
        element.classList.remove("sticky-top");


    </script>
    @include('layouts.footer')