<!DOCTYPE html>
<html lang="en">

<head>
    <?php
include('./include/header/header.php');
?>
    <title></title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="WebDuckDesigns MN">
</head>

<body>
    <?php
include('./include/header/navigation.php');
?>

    <!-- Banner Section -->
    <section class="banner-section position-relative">
        <div class="container h-100">
            <div class="row h-100 align-items-center justify-content-center">
                <div class="col-lg-8 col-12 text-center banner-content">
                    <div class="banner-shape-container position-relative">
                        <div class="banner-text p-lg-5 p-1">
                            <img src="./assets/images/bannerlogo.png" alt="Logo Icon" class="mb-3 banner-icon" height="50">
                            <h4 class="text-white text-uppercase mb-2" style="font-weight: 500; letter-spacing: 2px; font-size: 1rem;">Institute of Somatic Therapy</h4>
                            <h1 class="text-white text-uppercase fw-bold mb-4 display-5">Committed to Excellence<br>in Massage Therapy<br>Continuing Education</h1>
                            <a href="#" class="btn btn-banner text-uppercase">Take a Free Course <i class="fas fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Search Bar -->
        <div class="search-container">
            <div class="container">
                <div class="search-box">
                    <div class="row align-items-center g-3">
                        <div class="col-lg-3 col-md-12">
                            <h5 class="m-0 text-uppercase fw-bold text-teal">Search Course</h5>
                        </div>
                        <div class="col-lg-4 col-md-6">
                            <input type="text" class="form-control rounded-pill border-0 bg-light py-3 px-4" placeholder="Search by keyword">
                        </div>
                        <div class="col-lg-3 col-md-6">
                            <select class="form-select rounded-pill border-0 bg-light py-3 px-4">
                                <option selected>Number of CE Hours</option>
                                <option value="1">1 Hour</option>
                                <option value="2">2 Hours</option>
                                <option value="3">3 Hours</option>
                            </select>
                        </div>
                        <div class="col-lg-2 col-md-12 text-center text-lg-end">
                            <a href="#" class="btn btn-search text-uppercase w-100 py-3 rounded-pill text-white fw-bold">Search <i class="fas fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Bottom Curve Image (Optional decoration from assets) -->
        <img src="./assets/images/bottomcurve.png" class="img-fluid w-100 position-absolute bottom-0 start-0 d-none d-lg-block" alt="Curve" style="z-index: -1;">
        <img src="./assets/images/mobilebottomcurve.png" class="img-fluid w-100 position-absolute bottom-0 start-0 d-lg-none" alt="Curve" style="z-index: -1;">
    </section>

    <!-- Online Courses Section -->
    <section class="online-courses-section py-5">
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h2 class="section-title text-teal fw-bold text-uppercase">Online Courses</h2>
                    <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mt-2" style="max-width: 200px;">
                </div>
            </div>

            <div class="row g-4">
                <!-- Course Card 1 -->
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="course-card">
                        <div class="course-img-container">
                            <img src="./assets/images/course1.png" alt="Pregnancy / Doula" class="img-fluid w-100">
                        </div>
                        <div class="course-content bg-white p-4 shadow-sm text-center">
                            <h5 class="course-title fw-bold text-uppercase mb-3">Pregnancy / Doula</h5>
                            <p class="course-desc text-muted mb-4">Courses and packages to become certified in every stage of childbearing,</p>
                            <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold">Find Out More <i class="fas fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Course Card 2 -->
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="course-card">
                        <div class="course-img-container">
                            <img src="./assets/images/course2.png" alt="Florida Laws & Packages" class="img-fluid w-100">
                        </div>
                        <div class="course-content bg-white p-4 shadow-sm text-center">
                            <h5 class="course-title fw-bold text-uppercase mb-3">Florida Laws & Packages</h5>
                            <p class="course-desc text-muted mb-4">Courses and packages required to obtain, reinstate, or renew your Florida</p>
                            <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold">Find Out More <i class="fas fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Course Card 3 -->
                <div class="col-lg-4 col-md-6 col-12 mx-auto">
                    <div class="course-card">
                        <div class="course-img-container">
                            <img src="./assets/images/course3.png" alt="Research Courses" class="img-fluid w-100">
                        </div>
                        <div class="course-content bg-white p-4 shadow-sm text-center">
                            <h5 class="course-title fw-bold text-uppercase mb-3">Research Courses</h5>
                            <p class="course-desc text-muted mb-4">Courses approved by the NCBTMB to earn mandated research hours for</p>
                            <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold">Find Out More <i class="fas fa-arrow-right ms-2"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- In Person Trainings Section -->
    <section class="in-person-section py-5 bg-light-mint">
        <div class="container">
            <div class="row align-items-center">
                <!-- Left Image -->
                <div class="col-lg-6 col-12 text-center mb-4 mb-lg-0 position-relative">
                    <img src="./assets/images/inpersontraining.png" alt="In Person Trainings" class="img-fluid rounded-circle img-training" style="max-width: 600px;">
                </div>
                
                <!-- Right Content -->
                <div class="col-lg-6 col-12 ps-lg-5">
                    <h2 class="section-title text-teal fw-bold text-uppercase mb-2">In Person Trainings</h2>
                    <h2 class="section-title text-teal fw-bold text-uppercase mb-3">& Workshops</h2>
                    <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mb-4" style="max-width: 150px;">
                    
                    <ul class="list-unstyled training-list mb-4">
                        <li class="mb-2"><i class="fas fa-chevron-right text-teal me-2"></i> Integrative Pregnancy Massage</li>
                        <li class="mb-2"><i class="fas fa-chevron-right text-teal me-2"></i> Integrative Fertility Massage</li>
                        <li class="mb-2"><i class="fas fa-chevron-right text-teal me-2"></i> Meridian Fascial Cupping</li>
                        <li class="mb-2"><i class="fas fa-chevron-right text-teal me-2"></i> Meridian Energy Flow</li>
                    </ul>
                    
                    <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold mb-3">Find Out More <i class="fas fa-arrow-right ms-2"></i></a>
                    <p class="small text-muted fw-bold">Group Training Available @ <span class="text-teal">Discounted Rates</span></p>
                </div>
            </div>
        </div>
    </section>

    <!-- The Institute Section -->
    <section class="institute-section position-relative">
        <div class="container-fluid p-0">
            <div class="row g-0">
                <!-- Left Content (Teal) -->
                <div class="col-lg-6 col-12 institute-content-col bg-teal text-white d-flex align-items-center">
                    <div class="institute-content p-lg-5 p-1 mx-auto" style="max-width: 600px;">
                        <h2 class="fw-bold text-uppercase mb-2">The Institute of</h2>
                        <h2 class="fw-bold text-uppercase mb-3">Somatic Therapy</h2>
                        <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mb-4" style="filter: brightness(0) invert(1); max-width: 150px;"> <!-- White line -->
                        
                        <p class="mb-4 text-white-50 leading-relaxed">
                            The Institute of Somatic Therapy is committed to providing the best online home study continuing education courses available to massage therapists. Institute of Somatic Therapy is approved by the National Certification Board for Therapeutic Massage and Bodywork (NCBTMB) as a continuing education Approved Provider. Provider # 280672-00. Our massage CEUs/credits are also valid for AMTA and ABMP.
                            <br><br>
                            We are approved by the Florida Board of Massage (Provider #MCE326) and CE Broker (Provider #50-1116).
                        </p>
                        
                        <a href="#" class="btn btn-outline-light rounded-pill text-uppercase fw-bold px-4 py-2">Learn More <i class="fas fa-arrow-right ms-2"></i></a>
                    </div>
                </div>
                
                <!-- Right Image -->
                <div class="col-lg-6 col-12 institute-img-col position-relative">
                    <img src="./assets/images/theinstitution.png" alt="The Institute" class="img-fluid w-100 h-100 object-fit-cover first-image">
                    <img src="./assets/images/mobilehandpencurve.png" alt="The Institute" class="img-fluid w-100 h-100 second-image">
                </div>
            </div>
        </div>
    </section>

    <!-- Take a Free Course Section -->
    <section class="free-course-section py-5">
        <div class="container">
            <div class="free-course-banner position-relative text-center text-white py-5 px-3">
                <div class="position-relative z-2">
                    <h2 class="fw-bold text-uppercase mb-3 display-5">Take a Free Course</h2>
                    <p class="lead mb-4 fw-normal">Click Here to get Started Today & Try Our Free Online course!</p>
                    <a href="#" class="btn btn-course btn-lg rounded-pill text-uppercase fw-bold px-5">Learn More <i class="fas fa-arrow-right ms-2"></i></a>
                </div>
            </div>
        </div>
    </section>

    <!-- Our Certifications Section -->
    <section class="certifications-section py-5 position-relative">
        <div class="container position-relative z-2">
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h2 class="section-title text-teal fw-bold text-uppercase">Our Certifications</h2>
                    <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mt-2" style="max-width: 200px;">
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                <!-- Certification 1 -->
                <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                    <div class="cert-card bg-white p-4 text-center h-100">
                        <div class="cert-img mb-3">
                            <img src="./assets/images/certificate.png" alt="Certificate" class="img-fluid border shadow-sm">
                        </div>
                        <h5 class="fw-bold text-dark mb-1">Credit Hours: 16</h5>
                        <p class="text-muted mb-3 small">Certified Fertility Massage Therapist</p>
                        <a href="#" class="btn btn-cert rounded-pill text-uppercase fw-bold text-white px-4 py-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>

                <!-- Certification 2 -->
                <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                    <div class="cert-card bg-white p-4 text-center h-100">
                        <div class="cert-img mb-3">
                            <img src="./assets/images/certificate.png" alt="Certificate" class="img-fluid border shadow-sm">
                        </div>
                        <h5 class="fw-bold text-dark mb-1">Credit Hours: 16</h5>
                        <p class="text-muted mb-3 small">Certified Infant Massage Therapist-Instructor</p>
                        <a href="#" class="btn btn-cert rounded-pill text-uppercase fw-bold text-white px-4 py-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>

                <!-- Certification 3 -->
                <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                    <div class="cert-card bg-white p-4 text-center h-100">
                        <div class="cert-img mb-3">
                            <img src="./assets/images/certificate.png" alt="Certificate" class="img-fluid border shadow-sm">
                        </div>
                        <h5 class="fw-bold text-dark mb-1">Credit Hours: 21</h5>
                        <p class="text-muted mb-3 small">Certified Massage Doula</p>
                        <a href="#" class="btn btn-cert rounded-pill text-uppercase fw-bold text-white px-4 py-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>

                <!-- Certification 4 -->
                <div class="col-xl-3 col-lg-4 col-md-6 col-12">
                    <div class="cert-card bg-white p-4 text-center h-100">
                        <div class="cert-img mb-3">
                            <img src="./assets/images/certificate.png" alt="Certificate" class="img-fluid border shadow-sm">
                        </div>
                        <h5 class="fw-bold text-dark mb-1">Credit Hours: 24</h5>
                        <p class="text-muted mb-3 small">Certified Prenatal Massage Therapist</p>
                        <a href="#" class="btn btn-cert rounded-pill text-uppercase fw-bold text-white px-4 py-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
            </div>
        </div>
    </section>

    <!-- Popular Packages Section -->
    <section class="popular-packages-section py-5 bg-white">
        <div class="container">
            <div class="row mb-5">
                <div class="col-12 text-center">
                    <h2 class="section-title text-teal fw-bold text-uppercase">Popular Packages</h2>
                    <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mt-2" style="max-width: 200px;">
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                <!-- Package 1 -->
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="package-card position-relative overflow-hidden rounded shadow-sm text-center text-white">
                        <img src="./assets/images/package1.png" alt="Package 1" class="img-fluid w-100 h-100 object-fit-cover position-absolute top-0 start-0 package-bg">
                        <div class="package-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-end p-4">
                            <h5 class="fw-bold mb-1">Credit Hours: 24</h5>
                            <p class="small mb-3">Board Certified Renewal,<br>Package 1</p>
                            <a href="#" class="btn btn-package rounded-pill text-uppercase fw-bold px-4 py-2 mt-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Package 2 -->
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="package-card position-relative overflow-hidden rounded shadow-sm text-center text-white">
                        <img src="./assets/images/package2.png" alt="Package 2" class="img-fluid w-100 h-100 object-fit-cover position-absolute top-0 start-0 package-bg">
                        <div class="package-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-end p-4">
                            <h5 class="fw-bold mb-1">Credit Hours: 26</h5>
                            <p class="small mb-3">Board Certified Renewal,<br>Package 2</p>
                            <a href="#" class="btn btn-package rounded-pill text-uppercase fw-bold px-4 py-2 mt-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Package 3 -->
                <div class="col-lg-3 col-md-6 col-12">
                    <div class="package-card position-relative overflow-hidden rounded shadow-sm text-center text-white">
                        <img src="./assets/images/package3.png" alt="Package 3" class="img-fluid w-100 h-100 object-fit-cover position-absolute top-0 start-0 package-bg">
                        <div class="package-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-end p-4">
                            <h5 class="fw-bold mb-1">Credit Hours: 21</h5>
                            <p class="small mb-3">Board Certified Renewal,<br>Package 3</p>
                            <a href="#" class="btn btn-package rounded-pill text-uppercase fw-bold px-4 py-2 mt-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                        </div>
                    </div>
                </div>

                <!-- Package 4 -->
                <div class="col-lg-3 col-md-6 col-12">
                     <div class="package-card position-relative overflow-hidden rounded shadow-sm text-center text-white">
                        <img src="./assets/images/package4.png" alt="Package 4" class="img-fluid w-100 h-100 object-fit-cover position-absolute top-0 start-0 package-bg">
                        <div class="package-overlay position-absolute top-0 start-0 w-100 h-100 d-flex flex-column justify-content-end p-4">
                            <h5 class="fw-bold mb-1">Credit Hours: 0</h5>
                            <p class="small mb-3">Board Certified Renewal,<br>Package 4</p>
                            <a href="#" class="btn btn-package rounded-pill text-uppercase fw-bold px-4 py-2 mt-2">View Details <i class="fas fa-arrow-right ms-1"></i></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Experience Section -->
    <section class="experience-section bg-light-mint">
        <div class="container">
            <div class="row mb-5">
                <div class="col-lg-8 col-12 text-start">
                    <h2 class="section-title text-teal fw-bold text-uppercase" style="max-width: 800px;">The Best Online Continuing<br>Education Experience</h2>
                    <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mt-2" style="max-width: 200px;">
                </div>
            </div>

            <div class="row g-4 justify-content-center">
                <!-- Card 1 -->
                <div class="col-lg-4 col-md-6 col-12">
                    <div class="experience-card bg-white rounded shadow-sm position-relative mt-lg-5 mt-0">
                        <div class="icon-circle">
                            <img src="./assets/images/icon1.png" alt="Icon 1" class="img-fluid">
                        </div>
                        <h4 class="fw-bold mt-2 mb-3 pt-3">Instant Access and Results</h4>
                        <p class="text-muted mb-4 small">Simply enroll in any of our online continuing education courses and you will have instant access to your course. As soon as you pass</p>
                        <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold text-white px-4 py-2">LEARN MORE <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>

                 <!-- Card 2 -->
                 <div class="col-lg-4 col-md-6 col-12">
                    <div class="experience-card bg-white rounded shadow-sm position-relative mt-lg-5 mt-0">
                        <div class="icon-circle">
                            <img src="./assets/images/icon2.png" alt="Icon 2" class="img-fluid">
                        </div>
                        <h4 class="fw-bold mt-2 mb-3 pt-3">Risk free sample course</h4>
                        <p class="text-muted mb-4 small">With our online courses, you work at your own pace. Fit your CEUs into your independent lifestyle. You can log in and out</p>
                        <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold text-white px-4 py-2">LEARN MORE <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>

                 <!-- Card 3 -->
                 <div class="col-lg-4 col-md-6 col-12">
                    <div class="experience-card bg-white rounded shadow-sm position-relative mt-lg-5 mt-0">
                        <div class="icon-circle">
                            <img src="./assets/images/icon3.png" alt="Icon 3" class="img-fluid">
                        </div>
                        <h4 class="fw-bold mt-2 mb-3 pt-3">Hassle-Free</h4>
                        <p class="text-muted mb-4 small">Take a free course to see exactly how our system operates. This gives you the peace of mind of knowing what to expect before</p>
                        <a href="#" class="btn btn-course rounded-pill text-uppercase fw-bold text-white px-4 py-2">LEARN MORE <i class="fas fa-arrow-right ms-1"></i></a>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- Contact Section -->
    <section class="contact-section position-relative bg-teal">
        <div class="container-fluid p-0">
            <div class="row g-0">
                <!-- Left Image -->
                <div class="col-lg-6 col-12 d-lg-block position-relative">
                    <img src="./assets/images/bottomcurve.png" alt="Relaxing Spa" class="img-fluid w-100 h-100 object-fit-cover deks-bottomcurve">
                    <img src="./assets/images/mobilebottomcurve.png" alt="Relaxing Spa" class="img-fluid w-100 h-100 object-fit-cover mobile-bottomcurve">
                </div>
                
                <!-- Right Form -->
                <div class="col-lg-6 col-12 text-white d-flex align-items-center position-relative">
                    
                    
                    <div class="contact-form-container p-5 w-100 mx-auto" style="max-width: 650px;">
                        <h2 class="fw-bold text-uppercase mb-2">Get In Touch</h2>
                        <img src="./assets/images/textline.png" alt="Decoration" class="img-fluid mb-4" style="filter: brightness(0) invert(1); max-width: 150px;">

                        <form>
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <input type="text" class="form-control contact-input" placeholder="First Name">
                                </div>
                                <div class="col-md-6">
                                    <input type="text" class="form-control contact-input" placeholder="Last Name">
                                </div>
                                <div class="col-md-6">
                                    <input type="email" class="form-control contact-input" placeholder="Email address">
                                </div>
                                <div class="col-md-6">
                                    <input type="tel" class="form-control contact-input" placeholder="Phone">
                                </div>
                                <div class="col-12">
                                    <textarea class="form-control contact-input" rows="4" placeholder="Message"></textarea>
                                </div>
                                <div class="col-12 mt-4">
                                    <button type="submit" class="btn btn-dark-teal rounded-pill text-uppercase fw-bold px-5 py-2">SEND MESSAGE <i class="fas fa-chevron-right ms-1"></i></button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </section>

   
   <?php
include('./include/footer/footer.php');
include('./include/login-modal.php');
include('./include/cart-sidebar.php');
?>
</body>

</html>