@extends('layouts.front.master')
@section('contant')
<main>
<style>
.brand-two-area::after, .brand-five-area::after {
    background-color: transparent;
}
.brand-two__wrp {
    background-color: #3b3092;
}
.dkbtn{
    background: #3b3092;
   
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(22, 28, 45, .075);
    padding: 10px 24px;
    font-weight: 600;
}
.dkbtn:hover{
    border: 1px solid #3b3092;
    color: #3b3092 !important;
}
.banner-ntn {
    display: flex
;
    /* justify-content: center; */
    margin-top: 1rem;
}
.banner-ten-area {
    overflow: hidden;
    position: relative;
    padding-top: 188px;
    padding-bottom: 336px;
    z-index: 1;
}
.faq-ten-area {
    padding-top: 7rem;
}
.courses-four__slider .swiper-slide {
	text-align: center;
	/* Optional: ensure width fits container */
	width: 100%;
	box-sizing: border-box;
}
.banner-inner-area {
    overflow: hidden;
    position: relative;
    z-index: 1;
    padding: 150px 0!important;
}

@media screen and (max-width:767px) {
    .banner-ten-area {
    
        padding-top: 120px;
    padding-bottom: 105px;
    }
}
</style>
@php
$contact=ContactList();
//dd($contact);
$contactList = $contact[0]['email_address'];
//$com_address = $contact[0]['com_address'];
$is_disable = $contact[1]['is_disable'];
//$address=addressList();
//dd($address);
//$addressesList = implode(', ', json_decode($address[0]->name));
//$socialMedia=SocialMediaList();
@endphp
<!-- Banner area start here -->
<section class="banner-ten-area bg-image" data-background="{{ asset('assets/images/bg/banner-ten-bg.jpg') }}">
    <div class="banner-ten__line animation__arryLeftRight">
        <img src="{{ asset('assets/images/shape/banner-ten-line.png') }}" alt="image">
    </div>
    <div class="container">
        <div class="banner-ten__content">
            <h5 class="mb-10 primary-color text-capitalize wow fadeInUp" data-wow-delay="00ms"
                data-wow-duration="1500ms">GET CERTIFIED, STAY AHEAD</h5>
            <h1 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">Online Course &
                Culture
                <span class="primary-color">Learning <img src="{{ asset('assets/images/shape/banner-span-shape.png') }}"
                        alt="shape"></span>
            </h1>
            <p class="mt-20 wow fadeInUp fw-500" data-wow-delay="400ms" data-wow-duration="1500ms">
                Transforming Organizations and Individuals Worldwide</p>
                <div class="banner-ntn">
                <a href="{{ route('top-courses') }}" class="btn btn-blue dkbtn nav-link  text-white text-center">
                                        Explore In-Demand Courses
                                    </a>
                </div>
            <!-- <div class="banner-ten__input mt-40 mb-40 wow fadeInDown" data-wow-delay="200ms"
                data-wow-duration="1500ms">
                <div class="select-option">
                    <svg width="14" height="14" viewBox="0 0 14 14" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd"
                            d="M6.375 8.25C6.375 8.08424 6.30915 7.92527 6.19194 7.80806C6.07473 7.69085 5.91576 7.625 5.75 7.625H1.375C1.20924 7.625 1.05027 7.69085 0.933058 7.80806C0.815848 7.92527 0.75 8.08424 0.75 8.25V12.625C0.75 12.7908 0.815848 12.9497 0.933058 13.0669C1.05027 13.1842 1.20924 13.25 1.375 13.25H5.75C5.91576 13.25 6.07473 13.1842 6.19194 13.0669C6.30915 12.9497 6.375 12.7908 6.375 12.625V8.25ZM13.25 8.25C13.25 8.08424 13.1842 7.92527 13.0669 7.80806C12.9497 7.69085 12.7908 7.625 12.625 7.625H8.25C8.08424 7.625 7.92527 7.69085 7.80806 7.80806C7.69085 7.92527 7.625 8.08424 7.625 8.25V12.625C7.625 12.7908 7.69085 12.9497 7.80806 13.0669C7.92527 13.1842 8.08424 13.25 8.25 13.25H12.625C12.7908 13.25 12.9497 13.1842 13.0669 13.0669C13.1842 12.9497 13.25 12.7908 13.25 12.625V8.25ZM13.25 1.375C13.25 1.20924 13.1842 1.05027 13.0669 0.933058C12.9497 0.815848 12.7908 0.75 12.625 0.75H8.25C8.08424 0.75 7.92527 0.815848 7.80806 0.933058C7.69085 1.05027 7.625 1.20924 7.625 1.375V5.75C7.625 5.91576 7.69085 6.07473 7.80806 6.19194C7.92527 6.30915 8.08424 6.375 8.25 6.375H12.625C12.7908 6.375 12.9497 6.30915 13.0669 6.19194C13.1842 6.07473 13.25 5.91576 13.25 5.75V1.375ZM6.375 1.375C6.375 1.20924 6.30915 1.05027 6.19194 0.933058C6.07473 0.815848 5.91576 0.75 5.75 0.75H1.375C1.20924 0.75 1.05027 0.815848 0.933058 0.933058C0.815848 1.05027 0.75 1.20924 0.75 1.375V5.75C0.75 5.91576 0.815848 6.07473 0.933058 6.19194C1.05027 6.30915 1.20924 6.375 1.375 6.375H5.75C5.91576 6.375 6.07473 6.30915 6.19194 6.19194C6.30915 6.07473 6.375 5.91576 6.375 5.75V1.375Z"
                            fill="#2EB97E" />
                    </svg>
                    @if(count($menus))
                    <select name="categorie" id="categorie">
                        <option value="0">Select</option>
                        @foreach($menus as $menu)
                            <option value="{{ route('courseList2', $menu->slug) }}">
                                {{ $menu->name }}
                            </option>
                        @endforeach
                    </select>

                    @endif
                  
                @if(count($menu->course_list))
                <div class="dropdown-menu dropdown-menu-right shadow-lg mt-0 py-0 child-menu">
                    <div class="bg-white">
                    
                        @foreach($menu->course_list as $course)
                            <a class="dropdown-item" href="{{ route('courseDetail', $course->slug) }}">
                                {{ $course->name }}
                            </a>
                        @endforeach
                    </div>
                </div>
            @endif

                </div>
                <div class="input-feild">
                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M15.8178 14.9381L11.913 11.0334C12.8836 9.86621 13.4683 8.36744 13.4683 6.73438C13.4683 3.02103 10.4474 0 6.73421 0C3.02094 0 0 3.02103 0 6.73438C0 10.4475 3.02094 13.4683 6.73421 13.4683C8.36719 13.4683 9.86605 12.8836 11.0332 11.913L14.9381 15.8178C15.0595 15.9393 15.2188 16 15.3779 16C15.5371 16 15.6963 15.9393 15.8179 15.8178C16.0608 15.5748 16.0608 15.181 15.8178 14.9381ZM1.24414 6.73438C1.24414 3.70705 3.70696 1.24414 6.73421 1.24414C9.76137 1.24414 12.2241 3.70705 12.2241 6.73438C12.2241 9.76146 9.76137 12.2241 6.73421 12.2241C3.70696 12.2241 1.24414 9.76146 1.24414 6.73438Z"
                            fill="#2EB97E" />
                    </svg>
                    <input type="text" placeholder="Search here..">
                    <button>Search</button>
                </div>
            </div> -->
            <!-- <div class="user d-flex align-items-center gap-3 wow fadeInDown" data-wow-delay="400ms"
                data-wow-duration="1500ms">
                <a href="#0"><img src="assets/images/banner/banner-ten-user.png" alt="image"></a>
                <strong><span>5+</span> Active Mentor</strong>
            </div> -->
        </div>
    </div>
    <div class="banner-ten__image">
        <img class="w-100 animation__arryUpDown" src="assets/images/banner/banner-ten-hero.png" alt="image">
        <img class="circle animation__rotateY" src="assets/images/shape/banner-ten-circle.png" alt="image">
    </div>
</section>
<!-- Banner area end here -->
<section class="team-three-area pt-120 ">
    <div class="container">
        <div class="section-header-three mb-30 text-center">
            <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">Our Courses</h5>
            <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 200ms; animation-name: fadeInUp;">Top <span>Categories <img src="assets/images/shape/header-shape.png" alt="shape"></span>
                </h2>
        </div>
        <div class="row g-4">
        @if(count($categories))
        @foreach ($categories as $category)
             <div class="col-xl-4 col-md-6  " data-wow-delay="00ms" data-wow-duration="1500ms" style="visibility: visible; animation-duration: 1500ms; animation-delay: 0ms; animation-name: fadeInUp;">
                <div class="team__item">

                    <div class="team-three__content">
                        <h4 class="fs-22">
                            <a class="primary-hover" href="{{ route('courseList2', $category->slug) }}">{{ $category->name ?? '' }}</a>
                        </h4>
                    </div>
                </div>
            </div>
        @endforeach
        @endif

        </div>

        <div class="row">
            <div class="col-12 mt-2">
                <a href="{{route('top-categories')}}" class="viewmore-btn btn">View More Categories</a>
            </div>
        </div>
    </div>
</section>


<!-- About area start here -->
<section class="about-ten-area pt-120 pb-50"> 
    <div class="about-two__shape-left">
        <img class="animation__sunMove" src="assets/images/shape/about-two-shape-left.png" alt="shape">
    </div>
    <div class="about-two__shape-right">
        <img class="slide-up-down" src="assets/images/shape/about-two-shape-right.png" alt="shape">
    </div>
    <div class="container">
        <div class="row g-4">
            <div class="col-lg-6 wow fadeInRight" data-wow-delay="200ms" data-wow-duration="1500ms">
                <div class="about-ten__image">
                    <div class="count-info">
                        <h5 class="primary-color fs-28"><span class="count primary-color">3,000</span>+
                        </h5>
                        <span class="fs-14 title-font secondary-color">Satisfied Students</span>
                    </div>
                    <img class="w-100" src="assets/images/about/about-ten-image.png" alt="image">
                    {{-- <img class="dots" src="assets/images/shape/about-ten-dots.png" alt="dots"> --}}
                </div>
            </div>
            <div class="col-lg-6">
                <div class="section-header">
                    <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">HOW WE ARE</h5>
                    <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">Why Choose Cert Path for Your
                        <span>Career Growth?. <img src="assets/images/shape/header-shape.png" alt="shape"></span>
                    </h2>
                    <p class="wow fadeInUp" data-wow-delay="400ms" data-wow-duration="1500ms">At Cert Path, we specialize in fast-tracking your certification success. With a proven track record of helping thousands of professionals pass their IT exams, we combine expert instruction, focused training, and unmatched support to help you achieve your goals in less time.</p>
                </div>
                <div class="about-two__item mt-30 mb-40">
                    <ul class="wow fadeInDown" data-wow-delay="00ms" data-wow-duration="1500ms">
                        <li class="mb-4">
                            <span><svg width="16" height="14" viewBox="0 0 16 14" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.38446 13.1797C7.34201 13.1797 7.30003 13.171 7.26115 13.1539C7.22227 13.1369 7.18732 13.1121 7.15852 13.0809L1.06661 6.49119C1.026 6.44726 0.999078 6.39244 0.989139 6.33344C0.9792 6.27445 0.986676 6.21384 1.01065 6.15902C1.03463 6.10421 1.07406 6.05758 1.12413 6.02483C1.17419 5.99208 1.23272 5.97464 1.29255 5.97464H4.22486C4.26888 5.97464 4.3124 5.98409 4.35246 6.00234C4.39252 6.0206 4.42821 6.04723 4.4571 6.08045L6.49304 8.42273C6.71307 7.95239 7.13901 7.16925 7.88646 6.21497C8.99144 4.8042 11.0468 2.7294 14.5632 0.85642C14.6312 0.820227 14.7102 0.810833 14.7848 0.830094C14.8593 0.849355 14.924 0.895871 14.9659 0.960456C15.0078 1.02504 15.024 1.103 15.0113 1.17894C14.9985 1.25488 14.9578 1.32328 14.897 1.37064C14.8836 1.38113 13.5278 2.44882 11.9674 4.40448C10.5314 6.20417 8.62239 9.14694 7.68304 12.946C7.66654 13.0128 7.62816 13.0721 7.57402 13.1144C7.51989 13.1568 7.45312 13.1799 7.38436 13.1799L7.38446 13.1797Z"
                                        fill="#181818" />
                                </svg>
                            </span>
                            <h4 class="fs-18">Expert-Led Training</h4>
                        </li>
                        <li>
                            <span><svg width="16" height="14" viewBox="0 0 16 14" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.38446 13.1797C7.34201 13.1797 7.30003 13.171 7.26115 13.1539C7.22227 13.1369 7.18732 13.1121 7.15852 13.0809L1.06661 6.49119C1.026 6.44726 0.999078 6.39244 0.989139 6.33344C0.9792 6.27445 0.986676 6.21384 1.01065 6.15902C1.03463 6.10421 1.07406 6.05758 1.12413 6.02483C1.17419 5.99208 1.23272 5.97464 1.29255 5.97464H4.22486C4.26888 5.97464 4.3124 5.98409 4.35246 6.00234C4.39252 6.0206 4.42821 6.04723 4.4571 6.08045L6.49304 8.42273C6.71307 7.95239 7.13901 7.16925 7.88646 6.21497C8.99144 4.8042 11.0468 2.7294 14.5632 0.85642C14.6312 0.820227 14.7102 0.810833 14.7848 0.830094C14.8593 0.849355 14.924 0.895871 14.9659 0.960456C15.0078 1.02504 15.024 1.103 15.0113 1.17894C14.9985 1.25488 14.9578 1.32328 14.897 1.37064C14.8836 1.38113 13.5278 2.44882 11.9674 4.40448C10.5314 6.20417 8.62239 9.14694 7.68304 12.946C7.66654 13.0128 7.62816 13.0721 7.57402 13.1144C7.51989 13.1568 7.45312 13.1799 7.38436 13.1799L7.38446 13.1797Z"
                                        fill="#181818" />
                                </svg>
                            </span>
                            <h4 class="fs-18">Accelerated 10–14 Day Programs</h4>
                        </li>
                    </ul>
                <ul class="wow fadeInDown" data-wow-delay="200ms" data-wow-duration="1500ms">
                        <li class="mb-4">
                            <span><svg width="16" height="14" viewBox="0 0 16 14" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.38446 13.1797C7.34201 13.1797 7.30003 13.171 7.26115 13.1539C7.22227 13.1369 7.18732 13.1121 7.15852 13.0809L1.06661 6.49119C1.026 6.44726 0.999078 6.39244 0.989139 6.33344C0.9792 6.27445 0.986676 6.21384 1.01065 6.15902C1.03463 6.10421 1.07406 6.05758 1.12413 6.02483C1.17419 5.99208 1.23272 5.97464 1.29255 5.97464H4.22486C4.26888 5.97464 4.3124 5.98409 4.35246 6.00234C4.39252 6.0206 4.42821 6.04723 4.4571 6.08045L6.49304 8.42273C6.71307 7.95239 7.13901 7.16925 7.88646 6.21497C8.99144 4.8042 11.0468 2.7294 14.5632 0.85642C14.6312 0.820227 14.7102 0.810833 14.7848 0.830094C14.8593 0.849355 14.924 0.895871 14.9659 0.960456C15.0078 1.02504 15.024 1.103 15.0113 1.17894C14.9985 1.25488 14.9578 1.32328 14.897 1.37064C14.8836 1.38113 13.5278 2.44882 11.9674 4.40448C10.5314 6.20417 8.62239 9.14694 7.68304 12.946C7.66654 13.0128 7.62816 13.0721 7.57402 13.1144C7.51989 13.1568 7.45312 13.1799 7.38436 13.1799L7.38446 13.1797Z"
                                        fill="#181818" />
                                </svg>
                            </span>
                            <h4 class="fs-18">Guaranteed Success</h4>
                        </li>
                        <li>
                            <span><svg width="16" height="14" viewBox="0 0 16 14" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M7.38446 13.1797C7.34201 13.1797 7.30003 13.171 7.26115 13.1539C7.22227 13.1369 7.18732 13.1121 7.15852 13.0809L1.06661 6.49119C1.026 6.44726 0.999078 6.39244 0.989139 6.33344C0.9792 6.27445 0.986676 6.21384 1.01065 6.15902C1.03463 6.10421 1.07406 6.05758 1.12413 6.02483C1.17419 5.99208 1.23272 5.97464 1.29255 5.97464H4.22486C4.26888 5.97464 4.3124 5.98409 4.35246 6.00234C4.39252 6.0206 4.42821 6.04723 4.4571 6.08045L6.49304 8.42273C6.71307 7.95239 7.13901 7.16925 7.88646 6.21497C8.99144 4.8042 11.0468 2.7294 14.5632 0.85642C14.6312 0.820227 14.7102 0.810833 14.7848 0.830094C14.8593 0.849355 14.924 0.895871 14.9659 0.960456C15.0078 1.02504 15.024 1.103 15.0113 1.17894C14.9985 1.25488 14.9578 1.32328 14.897 1.37064C14.8836 1.38113 13.5278 2.44882 11.9674 4.40448C10.5314 6.20417 8.62239 9.14694 7.68304 12.946C7.66654 13.0128 7.62816 13.0721 7.57402 13.1144C7.51989 13.1568 7.45312 13.1799 7.38436 13.1799L7.38446 13.1797Z"
                                        fill="#181818" />
                                </svg>
                            </span>
                            <h4 class="fs-18">Proven Track Record</h4>
                        </li>
                    </ul>
                </div>
                <div class="d-flex align-items-center gap-4 wow fadeInDown mt-40" data-wow-delay="400ms"
                    data-wow-duration="1500ms">
                    <a href="{{ route('about-us') }}" class="btn-one">About Us<i
                            class="fa-light fa-arrow-right-long"></i></a>
                    <div class="d-flex flex-wrap gap-2 align-items-center">
                        <div class="about-five__call-icon">
                            <span class="pxl__zigzag"><svg width="26" height="26" viewBox="0 0 26 26"
                                    fill="none" xmlns="http://www.w3.org/2000/svg">
                                    <g clip-path="url(#clip0_918_1337)">
                                        <path
                                            d="M5.41667 4.33337H9.75L11.9167 9.75004L9.20833 11.375C10.3685 13.7275 12.2725 15.6315 14.625 16.7917L16.25 14.0834L21.6667 16.25V20.5834C21.6667 21.158 21.4384 21.7091 21.0321 22.1154C20.6257 22.5218 20.0746 22.75 19.5 22.75C15.2742 22.4932 11.2885 20.6987 8.2949 17.7051C5.3013 14.7115 3.5068 10.7258 3.25 6.50004C3.25 5.9254 3.47827 5.3743 3.8846 4.96798C4.29093 4.56165 4.84203 4.33337 5.41667 4.33337Z"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M16.25 7.58337C16.8246 7.58337 17.3757 7.81165 17.7821 8.21798C18.1884 8.6243 18.4167 9.1754 18.4167 9.75004"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                        <path
                                            d="M16.25 3.25C17.9739 3.25 19.6272 3.93482 20.8462 5.15381C22.0652 6.37279 22.75 8.02609 22.75 9.75"
                                            stroke="white" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </g>
                                    <defs>
                                        <clipPath>
                                            <rect width="26" height="26" fill="white" />
                                        </clipPath>
                                    </defs>
                                </svg></span>
                        </div>
                    @if($is_disable==1)
                        <div class="info">
                            <span class="sm-font fw-500 secondary-color">Call Us Now</span>
                            <h5>{{$contact[0]->contact_no}}</h5>
                        </div>
                    @endif
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- About area end here -->

<!-- Courses area start here -->
<section class="courses-ten-area pt-120 pb-80 sub-bg-two">
    <div class="courses-ten__shape1">
        <img src="assets/images/shape/course-ten-shape.png" alt="image">
    </div>
    <div class="courses-ten__shape2">
        <img class="pxl-image-zoom" src="assets/images/shape/course-ten-dots.png" alt="image">
    </div>
    <div class="courses-ten__shape3 wow slideInRight" data-wow-delay="200ms" data-wow-duration="1500ms">
        <img src="assets/images/shape/course-ten-line.png" alt="image">
    </div>
    <div class="container">
        <div class="section-header text-center mb-60">
            <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">Popular
                <span>Courses<img src="assets/images/shape/header-shape.png" alt="shape"></span>
            </h2>
            <h5 class="wow fadeInUp mt-2" data-wow-delay="00ms" data-wow-duration="1500ms">At Cert path, we believe that education can unlock opportunities.</h5>
        </div>
        <div class="swiper courses-four__slider">
            <div class="swiper-wrapper">

            @if(count($topProduct) > 0)
            @foreach($topProduct as $top)
                <div class="swiper-slide">
                    <div class="courses__item">
                        @if($top->mark_bestseller == 'Yes')
                                <div class="bestseller position-absolute top-0 start-0 bg-warning text-white px-2 py-1">
                                    <p class="mb-0 text-white">Bestseller</p>
                                </div>
                            @endif
                        <div class="courses__image image">
                            <img src="{{url('/uploads/course').'/'.$top->image}}" alt="image">
                            <div class="courses-price">
                                <h5 class="fs-18">{{ Config::get('app.currency_icon') }}{{ $top->price }}</h5>
                                <div class="fs-18">{{ Config::get('app.currency_icon') }}{{ $top->price_diff }} Off</div>

                            </div>
                        </div>
                        <div class="courses__content">
                            <h3><a href="{{ url('course/' .$top->slug) }}" class="primary-hover">{{ $top->name }}</a>
                            </h3>
                            <div class="bor-top pt-3 d-flex align-items-center justify-content-between gap-3">

                                 @if($top->rating != null)
                                    <!-- <div class="fs_14">Reviews</div> -->
                                    <div class="d-lg-flex align-items-center star_rating">
                                        <div class="rating full-star-row position-relative me-2">
                                            <div class="empty-star">
                                                @for($i = 0; $i < 5; $i++)
                                                    <span class="far fa-star"></span>
                                                @endfor
                                            </div>
                                            <div class="fill-star position-absolute top-0 start-0 overflow-hidden" style="width: {{ ($top->rating / 5) * 100 }}%;">
                                                @for($i = 0; $i < 5; $i++)
                                                    <span class="fas fa-star"></span>
                                                @endfor
                                            </div>
                                        </div>
                                        <div class="font-size-xs">
                                            <span>{{ number_format((float)$top->rating, 1, '.', '') }}
                                                (
                                                @if($top->r_count > 1000)
                                                    {{ round($top->r_count / 1000, 1) . 'k' }}
                                                @else
                                                    {{ $top->r_count }}
                                                @endif
                                                )
                                            </span>
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                </div>
            @endforeach
            @endif
            </div>
            <div class="row">
            <div class="col-12 mt-2">
                <a href="{{ route('top-courses'); }}" class="viewmore-btn btn">Explore All Top Courses</a>
            </div>
        </div>
        </div>
    </div>
</section>
<!-- Courses area end here -->

<!-- Fanfact area start here -->
<section class="fanfact-four-area pt-80 pb-80 primary-bg bg-image"
    data-background="assets/images/bg/trial-bg.png">
    <div class="container">
        <div class="row fanfact-four__wrp">
            <div class="col-md-3 col-6 fanfact-four__item text-center">
                <img class="mb-20" src="assets/images/icon/fanfact-five-icon1.png" alt="icon">
                <h2 class="text-white"><span class="count text-white">25</span>+</h2>
                <span class="text-white">Year of experience</span>
            </div>
            <div class="col-md-3 col-6 fanfact-four__item text-center">
                <img class="mb-20" src="assets/images/icon/fanfact-five-icon2.png" alt="icon">
                <h2 class="text-white"><span class="count text-white">6500</span>+</h2>
                <span class="text-white">Class Completed</span>
            </div>
            <div class="col-md-3 col-6 fanfact-four__item text-center mt-lg-0 mt-md-0 mt-5">
                <img class="mb-20" src="assets/images/icon/fanfact-five-icon3.png" alt="icon">
                <h2 class="text-white"><span class="count text-white">100</span>+</h2>
                <span class="text-white">Experts Instructors</span>
            </div>
            <div class="col-md-3 col-6 fanfact-four__item text-center last-item mt-lg-0 mt-md-0 mt-5">
                <img class="mb-20" src="assets/images/icon/fanfact-five-icon4.png" alt="icon">
                <h2 class="text-white"><span class="count text-white">6561</span>+</h2>
                <span class="text-white">Students Enroll</span>
            </div>
        </div>
    </div>
</section>
<!-- Fanfact area end here -->


<!-- Faq area start here -->
<section class="faq-ten-area ">
    <div class="container">
        <div class="row g-5 align-items-end">
            <div class="col-lg-6 order-2 order-lg-1 pb-120">
                <div class="section-header mb-40">
                    <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">FAQ’S</h5>
                    <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">Have Questions? We’ve <span>Got Answers! <img
                                src="assets/images/shape/header-shape.png" alt="shape"></span></h2>
                    <p>Get clarity on our training, guarantees, and what makes Cert Path the right choice for your certification journey.</p>
                </div>
                <div class="accordion" id="accordionExample">
                    <div class="accordion-item shadow border-none wow fadeInDown" data-wow-delay="00ms"
                        data-wow-duration="1500ms">
                        <h2 class="accordion-header" id="headingTwo">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                Is it a guaranteed pass?
                            </button>
                        </h2>
                        <div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo"
                            data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p>Yes. We offer a Guaranteed Pass Policy—if you don’t pass the exam on your first attempt, you can retake the course for free until you do. Your success is our priority.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow border-none wow fadeInDown" data-wow-delay="200ms"
                        data-wow-duration="1500ms">
                        <h2 class="accordion-header" id="headingOne">
                            <button class="accordion-button" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                                How is your training different from others?
                            </button>
                        </h2>
                        <div id="collapseOne" class="accordion-collapse collapse show"
                            aria-labelledby="headingOne" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p>Our training is intensive, fast-tracked, and led by real industry experts. We focus on only what you need to pass, saving you time with our 10–14 day programs—no fluff, just results.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow border-none wow fadeInDown" data-wow-delay="400ms"
                        data-wow-duration="1500ms">
                        <h2 class="accordion-header" id="headingthree">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapsethree" aria-expanded="false"
                                aria-controls="collapsethree">
                                Who are the trainers at Cert Path?
                            </button>
                        </h2>
                        <div id="collapsethree" class="accordion-collapse collapse"
                            aria-labelledby="headingthree" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p>Who are the trainers at Cert Path?
Our instructors are certified professionals with hands-on industry experience in project management, cybersecurity, cloud computing, and more. They bring practical knowledge, not just theory.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow border-none wow fadeInDown" data-wow-delay="400ms"
                        data-wow-duration="1500ms">
                        <h2 class="accordion-header" id="headingfour">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapsethree" aria-expanded="false"
                                aria-controls="collapsethree">
                                How long are the training programs?
                            </button>
                        </h2>
                        <div id="collapsethree" class="accordion-collapse collapse"
                            aria-labelledby="headingfour" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p>Most of our courses are 10 to 14 days long, designed to help you prepare efficiently without sacrificing quality or depth.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow border-none wow fadeInDown" data-wow-delay="400ms"
                        data-wow-duration="1500ms">
                        <h2 class="accordion-header" id="headingfive">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapsethree" aria-expanded="false"
                                aria-controls="collapsethree">
                                How much does the training cost?
                            </button>
                        </h2>
                        <div id="collapsethree" class="accordion-collapse collapse"
                            aria-labelledby="headingfive" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p>Our pricing is affordable and transparent, offering premium-quality instruction at competitive rates. Contact us for current course fees and bundle offers.
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="accordion-item shadow border-none wow fadeInDown" data-wow-delay="400ms"
                        data-wow-duration="1500ms">
                        <h2 class="accordion-header" id="headingsix">
                            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                                data-bs-target="#collapsethree" aria-expanded="false"
                                aria-controls="collapsethree">
                                Do you help with exam registration or scheduling?
                            </button>
                        </h2>
                        <div id="collapsethree" class="accordion-collapse collapse"
                            aria-labelledby="headingsix" data-bs-parent="#accordionExample">
                            <div class="accordion-body">
                                <p>Yes, we offer end-to-end support, including guidance on exam application, scheduling, and preparation strategy.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 order-1 order-lg-2 wow fadeInLeft" data-wow-delay="200ms"
                data-wow-duration="1500ms">
                <div class="faq-ten__image">
                    <img class="w-100 animation__rotateY" src="assets/images/shape/faq-ten-shape.png"
                        alt="image">
                    <div class="animation__arryLeftRight">
                        <img class="main-image" src="assets/images/faq/faq-ten-image.png" alt="image">
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Faq area end here -->

<!-- Testimonial area start here -->
<section class="testimonial-ten-area sub-bg-two pt-120 ">
    <div class="testimonial-ten__shape1">
        <img src="assets/images/shape/testimonial-ten-shape1.png" alt="image">
    </div>
    <div class="testimonial-ten__shape2 pxl-image-zoom">
        <img src="assets/images/shape/testimonial-ten-shape2.png" alt="image">
    </div>
    <div class="testimonial-ten__shape3 wow slideInRight" data-wow-delay="200ms" data-wow-duration="1500ms">
        <img src="assets/images/shape/testimonial-ten-shape3.png" alt="image">
    </div>
    <div class="container">
        <div class="testimonial-ten__wrp">
            <div class="row g-4 align-items-center">
                <div class="col-lg-5 wow fadeInRight" data-wow-delay="200ms" data-wow-duration="1500ms">
                    <div class="swiper testimonial__slider-image">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide1">
                                <div class="testimonial__image image">
                                    <img src="assets/images/testimonial/testimonial-ten-image1.jpg" alt="image">
                                    <div class="banner-video__video-btn">
                                        <div class="video-btn video-pulse">
                                            <a class="video-popup"
                                                href="https://www.youtube.com/watch?v=oKu4GAeGjp8"><i
                                                    class="fa-solid fa-play"></i></a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-7">
                    <div class="testimonial__right-item pl-40">
                        <div class="section-header mb-40">
                            <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">
                                Testimonials
                            </h5>
                            <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">What’s
                                <span>Clients <img src="assets/images/shape/header-shape.png"
                                        alt="shape"></span>
                                Say
                            </h2>
                        </div>
                        <div class="swiper testimonial__slider wow fadeInDown" data-wow-delay="200ms"
                            data-wow-duration="1500ms">
                            <div class="swiper-wrapper">
                            @foreach ($review as $data)
                                <div class="swiper-slide">
                                    <div class="testimonial__item">
                                        <p class="fw-500 fs-18">
                                            {{ $data->review ?? '' }}
                                        </p>
                                        <div class="d-flex align-items-center justify-content-between gap-4 mt-30">
                                            <div>
                                                <h4>{{ $data->user_name ?? '' }}</h4>
                                                <div class="star mt-1">
                                                    @if($data->rating != null)
                                                        <div class="rating">
                                                            <div class="empty-star">
                                                                @for($i = 0; $i < 5; $i++)
                                                                    <span class="far fa-star"></span>
                                                                @endfor
                                                            </div>
                                                            <div class="fill-star" style="width: {{ ($data->rating / 5) * 100 }}%;">
                                                                @for($i = 0; $i < 5; $i++)
                                                                    <span class="fas fa-star"></span>
                                                                @endfor
                                                            </div>
                                                        </div>
                                                        @endif
                                                </div>
                                            </div>
                                            <div>
                                                <div class="dot testimonial__dot"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            @endforeach

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Testimonial area end here -->

<!-- Team area start here -->
<section class="team-ten-area pt-120 pb-120 extra-padding">
    <div class="team-ten__circle">
        <img src="assets/images/shape/team-ten-circle.png" alt="image">
    </div>
    <div class="team-ten__line animation__arryUpDown">
        <img src="assets/images/shape/team-ten-line.png" alt="image">
    </div>

</section>
<!-- Team area end here -->

<!-- Discount area start here -->
<section class="discout-ten-area pt-120 pb-120 primary-bg">
    <div class="discout-two__shape-left">
        <img src="assets/images/shape/discout-two-shpe-left.png" alt="shape">
    </div>
    <div class="discout-two__shape-right">
        <img src="assets/images/shape/discout-two-shpe-right.png" alt="shape">
    </div>
    <div class="container">
        <div class="col-xl-5">
            <div class="discout-two__item">
                <h2 class="text-white wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">15% Offer
                    For All Categories Courses</h2>
                <a href="{{ route('allCources') }}" class="btn-one-light mt-30 wow fadeInUp" data-wow-delay="00ms"
                    data-wow-duration="1500ms">All Courses<i class="fa-light fa-arrow-right-long"></i></a>
                <img class="discout-arry animation__arryLeftRight" src="assets/images/shape/discout-arry.png"
                    alt="shape">
            </div>
        </div>
    </div>
    <div class="discout-ten__image image">
        <img src="assets/images/offer/offter-ten-hero.png" alt="image">
        <img class="shape" src="assets/images/shape/discout-two-item-shape.png" alt="shape">
        <img class="offer-star animation__rotate" src="assets/images/shape/offter-ten-star.png" alt="image">
    </div>
</section>
<!-- Discount area end here -->


<!-- Blog area start here -->
<section class="blog-area pt-120 pb-120">
    <div class="container">
        <div class="section-header mb-60 text-center">
            <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">News & Blogs</h5>
            <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">Our <span>Latest News
                    <img src="assets/images/shape/header-shape.png" alt="shape"></span>
                Feed</h2>
        </div>
        <div class="row g-4">
        @foreach($blogs as $blog)
                        @php
                        $blogtitle = $blog->title;
                        $cleanedName = preg_replace('/[^A-Za-z0-9\-]/', '', strtolower($blogtitle));
                        // Generate slug
                        $blogname = Str::slug($cleanedName);
                        $blogdate = date('d-m-Y',strtotime($blog->posted_date));
                        @endphp
            <div class="col-xl-4 col-md-6 wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">
                <div class="blog__item p-4">
                    <a href="{{ route('blogDetails', ['slug' => $blog->slug]) }}" class="blog__image d-block image">
                        <img src="{{url('uploads/blogImages').'/'.$blog->image}}" alt="image">
                    </a>
                    <div class="blog__content">
                        <div class="blog-tag">
                            <!-- <h3 class="text-white">15</h3> -->
                            <span class="text-white">{{$blogdate}}</span>
                        </div>
                        <ul class="blog-info mb-20 mt-40">
                            <li>
                                <svg width="19" height="19" viewBox="0 0 19 19" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                        d="M8.05666 18.75H8.05504C7.46832 18.7495 6.91657 18.5207 6.50187 18.1052L0.660341 12.2553C-0.194072 11.3994 -0.194072 10.0065 0.660341 9.15058L8.53478 1.26102C9.3463 0.44792 10.426 0 11.575 0H16.5709C17.7824 0 18.7682 0.985546 18.7682 2.19726V7.17785C18.7682 8.32602 18.3208 9.40532 17.5084 10.2167L9.60951 18.1074C9.19455 18.5218 8.64306 18.75 8.05666 18.75ZM11.575 1.46484C10.8179 1.46484 10.1064 1.75998 9.57163 2.29579L1.69707 10.1853C1.41222 10.4708 1.41222 10.9349 1.69707 11.2203L7.53857 17.0702C7.6767 17.2086 7.86051 17.285 8.05619 17.2851H8.05677C8.1529 17.2854 8.24812 17.2666 8.33694 17.2299C8.42577 17.1931 8.50643 17.1391 8.57427 17.071L16.4732 9.18046C17.0086 8.6458 17.3034 7.93447 17.3034 7.17788V2.19726C17.3034 1.79341 16.9748 1.46484 16.5709 1.46484H11.575ZM13.458 7.43408C12.2465 7.43408 11.2608 6.44853 11.2608 5.23681C11.2608 4.0251 12.2465 3.03955 13.458 3.03955C14.6696 3.03955 15.6553 4.0251 15.6553 5.23681C15.6553 6.44853 14.6696 7.43408 13.458 7.43408ZM13.458 4.50439C13.0542 4.50439 12.7256 4.83296 12.7256 5.23681C12.7256 5.64067 13.0542 5.96924 13.458 5.96924C13.862 5.96924 14.1905 5.64067 14.1905 5.23681C14.1905 4.83296 13.862 4.50439 13.458 4.50439Z"
                                        fill="#2EB97E" />
                                </svg>

                                <a href="#0">{{$blog->category}}</a>
                            </li>
                        </ul>
                        <h3><a href="{{ route('blogDetails', ['slug' => $blog->slug]) }}" class="primary-hover">{{$blog->title}}</a></h3>
                        <a class="mt-15 read-more-btn" href="{{ route('blogDetails', ['slug' => $blog->slug]) }}">Read More <i
                                class="fa-regular fa-arrow-right-long"></i></a>
                    </div>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<!-- Blog area end here -->

<div class="brand-two-area mb-5">
    <div class="container">
        <div class="section-header mb-60 text-center">
            <h5 class="wow fadeInUp" data-wow-delay="00ms" data-wow-duration="1500ms">Our Partners</h5>
            <h2 class="wow fadeInUp" data-wow-delay="200ms" data-wow-duration="1500ms">Partnering with World's  <span>Leading Governing 
                    <img src="assets/images/shape/header-shape.png" alt="shape"></span>
                Bodies.</h2>
        </div>
        <div class="brand-two__wrp rounded-3 shadow-none">
            <div class="swiper brand__slider">
                <div class="swiper-wrapper">
                    @foreach($Partners as $index => $partner)
                        <div class="swiper-slide bg-white p-2" data-swiper-slide-index="{{ $index }}">
                            <img src="{{ asset('uploads/partners/' . $partner->image) }}" alt="{{ $partner->name }}">
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>


</main>

<div class="query-container" id="drop-msg-toggle"  >
    <span class="close-form" id="close-form">X</span>
    <form class="query-form" id="queryFormData">
        <div class="query-header">
            <h2 class="query-title" style="color:white!important;">Drop us a Query</h2>
        </div>
        <div class="contact-info">
            <div class="contact-icon">
                <svg xmlns="https://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40">
                    <path fill="#0575B3" fill-rule="nonzero"
                        d="M37.8 2.2C36.333.734 34.566 0 32.5 0h-25C5.434 0 3.667.734 2.2 2.2.734 3.667 0 5.434 0 7.5v25c0 2.065.734 3.832 2.2 5.3C3.667 39.265 5.434 40 7.5 40h25c2.066 0 3.833-.734 5.3-2.2 1.466-1.468 2.2-3.234 2.2-5.3v-25c0-2.066-.734-3.833-2.2-5.3zm-5.04 28.162c-.365.799-1.185 1.493-2.46 2.084-1.277.59-2.41.886-3.4.886-.278 0-.573-.022-.885-.065a14.091 14.091 0 0 1-.794-.13 8.492 8.492 0 0 1-.86-.235c-.356-.112-.612-.2-.768-.26a105.636 105.636 0 0 0-1.64-.611c-2.847-1.043-5.63-2.922-8.347-5.639-2.717-2.717-4.596-5.499-5.638-8.346a86.886 86.886 0 0 0-.612-1.64 14.85 14.85 0 0 1-.26-.768 8.564 8.564 0 0 1-.234-.86 13.725 13.725 0 0 1-.13-.794 6.454 6.454 0 0 1-.066-.885c0-.99.296-2.123.886-3.399.59-1.276 1.285-2.096 2.084-2.46.92-.383 1.796-.574 2.63-.574.19 0 .33.018.416.053.087.035.23.19.43.468.2.278.417.63.651 1.055.235.426.465.838.69 1.237a54.843 54.843 0 0 1 1.042 1.927c.052.087.165.252.339.495.173.243.304.46.39.65.087.192.13.374.13.548 0 .26-.178.577-.534.95a8.884 8.884 0 0 1-1.172 1.03c-.425.312-.816.646-1.172 1.002-.355.356-.533.646-.533.872 0 .122.03.265.09.43.062.165.118.3.17.404.052.104.135.251.248.443.112.19.186.312.22.364.956 1.719 2.054 3.2 3.295 4.44 1.242 1.242 2.721 2.34 4.44 3.295.052.035.174.109.366.222.19.112.338.194.442.246.105.053.239.11.404.17.165.06.308.09.43.09.277 0 .66-.286 1.146-.859.486-.573.981-1.141 1.485-1.706.503-.563.91-.846 1.224-.846.173 0 .355.044.547.13.19.087.407.218.65.391.244.174.409.287.495.34l1.38.754c.92.486 1.688.916 2.305 1.29.616.372.95.628 1.003.767.034.087.051.226.051.417 0 .833-.191 1.71-.574 2.627z">
                    </path>
                </svg>
            </div>
            <div class="contact-details">
                <p class="phone-number">
                    <a href="tel:{{$contact[0]->contact_no}}" class="contact-link" aria-label="{{$contact[0]->contact_no}}">
                        {{$contact[0]->contact_no}}
                    </a>
                </p>
                <p class="availability">Available 24x7 for your queries</p>
            </div>
        </div>
        <span class="sub-query" style="color:green;"></span>
        <div class="form-feedback" style="color:green;"></div>

        <div class="form-group">
            <input type="text" placeholder="Enter Name*" class="form-input" name="user_name" id="user_name" required>
            <p class="error-message" id="error-user_name"></p>
        </div>

        <div class="form-group">
            <div class="phone-input-container">
                <!-- <div class="iti iti--allow-dropdown iti--separate-dial-code"> -->
                    <!-- <div class="iti__flag-container"> -->
                        <!-- <div class="iti__selected-flag" role="combobox" aria-controls="iti-2__country-listbox" aria-owns="iti-2__country-listbox" aria-expanded="false" tabindex="0" title="United States: +1" aria-activedescendant="iti-2__item-us-preferred">
                <div class="iti__flag iti__us"></div>
                <div class="iti__selected-dial-code">+1</div>
                <div class="iti__arrow"></div>
              </div> -->
                    <!-- </div> -->
                    <input type="tel" placeholder="Enter Phone*" class="form-input phone" name="phone" id="phone"
                        autocomplete="off" inputmode="numeric" pattern="[0-9]*"
                        oninput="this.value = this.value.replace(/[^0-9]/g, '')" data-intl-tel-input-id="2" required>
                <!-- </div> -->
                <input type="hidden" name="code" id="code" value="1">
                <p class="error-message" id="error-phone"></p>
            </div>
        </div>

        <div class="form-group">
            <input type="email" placeholder="Enter Email*" id="emailId1" name="emailId1" class="form-input" required>
            <p class="error-message" id="error-emailId1"></p>
        </div>

        <input type="hidden" name="country" id="country" class="country">

        <div class="form-group">
            <textarea class="form-input message-input" rows="3" id="message1" name="message1"
                placeholder="Type your query*" required></textarea>
            <p class="error-message" id="error-message1"></p>
        </div>

        <button type="button" class="submit-btn submit-query1">
            <span class="btn-content">Submit Query</span>
        </button>
    </form>
</div>

<div class="query-div" id="query-div">
    <p>Drop us a Query</p>
</div>
  <style>
        * {
            box-sizing: border-box;
        }
 
        .sign-l {
            margin-top: 10px;
 
        }
 
       #loadpoppup .modal-body {
            padding: 0px;
        }
 
        .sign-l input {
            background-color: #f2eeff;
        }
 
        .sign-l textarea {
            background-color: #f2eeff;
            margin-bottom: 20px;
        }
 
        .p-label p {
          font-size: 12px;
    margin-bottom: 0px;
    line-height: 15px;
        }
 
        .popupcontactusnow {
 
            display: block;
            margin: auto;
            padding: 10px 20px;
            margin-top: 20px;
            color: #090761;
            border-color: #090761;
        }
 
        .col-sigup {
            padding: 20px;
            padding-right: 40px;
 
            .btn-close {
                position: absolute;
                top: 1px;
                right: 12px;
            }
        }
 
        .pop-cimagee {
            img {
                height: 100%;
            }
        }
        .phone-container .iti{
            width: 100%;
        }
        #fphone{
            padding-left: 85px!important;
        }
        #phone{
            padding-left: 90px!important;
        }
        .sign-l{
            ul.list{
                overflow: auto;
                height: 200px;
            }
        .nice-select.form-control{
             text-wrap: wrap;
             padding-top: 0px;
            span.current{
                        overflow: hidden;
                        height: 43px;
                         display: block;
                }
            }
        }
    </style>
@if(isset($homePopup) && $homePopup->status == 1)
<div class="modal fade" id="loadpoppup" tabindex="-1" aria-labelledby="loadpoppupLabel" aria-hidden="true">
        <div class="modal-dialog" style=" max-width: 800px !important;">
        <div class="modal-content">
            <div class="modal-body ">
                <div class="row">
                    <div class="col-md-6 pop-cimagee">
                            <img src="https://www.certsolution.org/img/home-popup.png" alt="" class="img-fluid">
                    </div>
                    <div class="col-md-6 position-relative col-sigup">
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            <h5>{{ $homePopup->name ?? 'Sign Up for a Free Course' }}</h5>
                            <form id="popupcontactus" action="{{url('contact-now')}}" method="post">
                            @csrf
                            <input type="hidden" name="query_type" id="query_type" value="home_popup_Sign_Up_query">
                            <input type="hidden" name="code" id="code1" value="1">
                            <input type="hidden" name="country" id="country" class="country">
                                <div class="row">
 
                                    <div class="col-12 sign-l">
                                        <input type="text" name="popup_user_name" id="popup_user_name" class="form-control" placeholder="Enter Your Name">
                                        <p class="text-danger error-container" id="error-popup_user_name"></p>
                                    </div>
 
                                    <div class="col-12 sign-l">
                                        <input type="text" name="popup_emailId" id="popup_emailId" class="form-control" placeholder="Enter Your email">
                                        <p class="text-danger error-container" id="error-popup_emailId"></p>
                                    </div>
                                    <div class="col-12 sign-l">
                                        <div class="phone-container">
                                            <input id="fphone" name="popup_mobno" id="popup_mobno" type="tel" class="form-control" placeholder="Enter Your Mobile Number"/>
                                        </div>
                                        <p class="text-danger error-container" id="error-popup_mobno"></p>
                                    </div>
                                    <div class="col-12 sign-l">
                                        <select name="popup_course_name" id="popup_course_name" class="form-control">
                                            <option value="">Select Courses</option>
                                        @foreach($courses001 as $data)
                                            <option value="{{ $data->id }}">{{ $data->name }}</option>
                                        @endforeach
                                        </select>
                                    <p class="text-danger error-container" id="error-popup_course_name"></p>
                                    </div>
                                    
                                    <div class="col-12 sign-l">
                                        <textarea name="popup_message" id="popup_message" class="form-control" placeholder="message (optional)"
                                            style="min-height: 100px;"></textarea>
                                        <p class="text-danger error-container" id="error-popup_message"></p>
                                    </div>
                                    <div class="col-12 p-label">
                                        <p><b>Disclaimer:</b></p>
                                        <p>By providing my phone number to "CERT SOLUTION", I agree and acknowledge that
                                            "CERT SOLUTION" may send text messages to my wireless phone number for any
                                            purpose. Message and data rates may apply. Message frequency will vary, and
                                            you will be able to opt out by replying “STOP", Assistance can be found by
                                            texting "HELP". For more information on how your data will be handled,
                                            please visit: Terms & Conditions</p>
                                    </div>
                                    <div class="col-12">
                                        <button type="submit" class="btn btn_custom btn-outline-primary p-3 px-5 rounded-pill popupcontactusnow">Enquire Now</button>
                                    </div>
 
                                </div>
 
 
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endif

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    const queryDiv = document.getElementById('query-div');
    const dropmsgDiv = document.getElementById('drop-msg-toggle');
    queryDiv.addEventListener('click', function () {
        dropmsgDiv.classList.add('open-side-form');
        this.classList.add('bottom-btn-f');
    });

    const closeFrom = document.getElementById('close-form');
    // const dropmsgDiv = document.getElementById('drop-msg-toggle');
    closeFrom.addEventListener('click', function () {
        dropmsgDiv.classList.remove('open-side-form');
        queryDiv.classList.remove('bottom-btn-f');
    });

$(document).ready(function(){
    $.get("https://ipapi.co/json/", function(response) {
        var countryname = response.country_name;
        $(".country").val(countryname);
    });
 })

$('.submit-query1').on('click',function(){
    var formData = new FormData($("#queryFormData")[0]);
    var loadingText = '<i class="fa fa-circle-o-notch fa-spin"></i> Loading...';
           $('.submit-query1').attr('disabled',true);
           if($('.submit-query1').html!=loadingText)
           {
              $('.submit-query1').html(loadingText);
           }
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
      $.ajax({
      method:'post',
      url:"{{route('dropUsQuery')}}",
      processData: false,
      contentType: false,
      data:formData,
      success:function(data)
      {
        window.setTimeout(function(){
             $('.submit-query1').attr('disabled',false);
             $('.submit-query1').html('Submit Query');
       },5000);
        if(data.success==true)
        {
            $(".sub-query").html("Query has been sent successfully.");
        //    toastr.success("Query has been sent successfully.");
           window.setTimeout(function(){
            location.reload();
            },5000);
        }
        else{
        for (control in data.errors) {
           $('#error-' + control).html(data.errors[control]);
           }
          }
      }
  });
});


 $('#popupcontactus').on('submit',function(event){
    event.preventDefault();
      var formData = new FormData(this);
      var url =$(this).attr('action');
      $.ajaxSetup({
        headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
        });
        
        $.ajax({
        method:'post',
        url: url,
        processData: false,
        contentType: false,
        data: formData,
        success:function(result) {
        if(result.success==true)
            {
               toastr.success("Your query has been sent successfully.");
               setTimeout(function() {
                  location.reload();
               }, 3000);
            }else{                     
                    for (control in result.errors) {   
                    $('#error-' + control).html(result.errors[control]);
               }
            }
        }
     });
   });

</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@17/build/css/intlTelInput.css" />
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17/build/js/intlTelInput.min.js"></script>
    <script>
        const inputs = document.querySelectorAll("#fphone, #phone");

    inputs.forEach(function(input) {
        window.intlTelInput(input, {
            separateDialCode: true,
            preferredCountries: ["us", "gb", "in", "fr", "de"],
            utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@17/build/js/utils.js",
        });
    });

         window.onload=function(){
        var modalement= document.getElementById('loadpoppup');
        if(modalement){
            setTimeout(function() {
           var modal = new bootstrap.Modal(modalement);
        modal.show();
        }, 5000);
        };
 
    };
    </script>
<style>
    .close-form {
        cursor: pointer;
        width: 30px;
        height: 30px;
        background: #034d7a;
        display: inline-block;
        border-radius: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: -13px;
        right: 8px;
        color: white;
    }

    div#drop-msg-toggle.open-side-form {
        display: block;
    }

    .bottom-btn-f {
        display: none;
    }

.query-header{
        padding: 5px 21px!important;
    margin-top: 10px!important;
}
    .query-div {
        position: fixed;
        padding: 12px 50px;
        color: white;
        background-color: #034d7a;
        bottom: 0px;
        right: 0px;
        font-size: 20px;
        font-weight: bold;
        text-align: center;
        cursor: pointer;
        z-index: 1111111;
        border-radius: 20px 20px 0px 0px;

        p {
            margin-bottom: 0px;
            margin-top: 0px;
        }
    }

    .query-container {
        display: none;
        background: #ffffff;
        border-radius: 12px;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        max-width: 370px;
        margin: 0 auto;
        /* overflow: hidden; */
        font-family: 'Segoe UI', Roboto, sans-serif;
        position: fixed;
        width: 100%;
        right: 0px;
        bottom: 0px;
        z-index: 1111111;
    }

    .query-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 20px;
        background: #0575B3;
        color: white;
    }

    .query-title {
        margin: 0;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 1.2rem;
        cursor: pointer;
        transition: transform 0.2s;
    }

    .close-btn:hover {
        transform: scale(1.1);
    }

    .contact-info {
        display: flex;
        align-items: center;
        padding: 20px;
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
    }

    .contact-icon {
        margin-right: 15px;
    }

    .contact-details {
        flex: 1;
    }

    .phone-number {
        margin: 0;
        font-size: 1.1rem;
        font-weight: 600;
        color: #212529;
    }

    .contact-link {
        color: #0575B3;
        text-decoration: none;
        transition: color 0.2s;
    }

    .contact-link:hover {
        color: #034d7a;
    }

    .availability {
        margin: 0px 0 0;
        font-size: 0.9rem;
        color: #6c757d;
    }

    .form-feedback {
        padding: 0 20px;
        margin: 10px 0;
        font-size: 0.9rem;
    }

    .query-form {
        padding: 0 20px 20px;
    }

    .form-group {
        margin-bottom: 15px;
    }

    .form-input {
        width: 100%;
        padding: 5px 10px;
        border: 1px solid #ced4da;
        border-radius: 6px;
        font-size: 0.95rem;
        transition: border-color 0.2s, box-shadow 0.2s;
    }

    .form-input:focus {
        border-color: #0575B3;
        box-shadow: 0 0 0 3px rgba(5, 117, 179, 0.1);
        outline: none;
    }

    .message-input {
        resize: vertical;
        min-height: 100px;
    }

    .error-message {
        margin: 5px 0 0;
        font-size: 0.85rem;
        color: #dc3545;
    }

    .submit-btn {
        width: 100%;
        padding: 12px;
        background: #0575B3;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 1rem;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.2s, transform 0.1s;
      span{
          color: white!important;
      }
    }

    .submit-btn:hover {
        background: #046094;
    }

    .submit-btn:active {
        transform: translateY(1px);
    }

    .phone-input-container {
        position: relative;
    }

    /* International Telephone Input customization */
    .iti {
        width: 100%;
    }

    .iti__selected-flag {
        padding: 0 15px;
    }

    @media (max-width: 480px) {
        .query-container {
            border-radius: 0;
        }

        .query-header {
            padding: 15px;
        }

        .query-form {
            padding: 0 15px 15px;
        }
    }
</style>
@endsection